A year of VR experiments 👍👍 Thanks for enjoying ❤️. More to come in 2021!

This kind of joyful experimentation has been part of Shopify’s DNA since the beginning. We tinker, learn, share and ship. It’s especially important in the age of AI. I wrote about it here: https://t.co/wbH35vMkJc

Shopify has a 3D telephone pole as an internal message board. It seems silly, but it’s one way we experiment with new tech. We call it “unserious exploration”.

It was built with ❤️ from @maca_graphics, @letkma and I. It's what we use to build experiences like Horizon Drive & keep it all under 10MB. Excited to give this back to the community! Enjoy! https://t.co/kMYrWDOX04

You can easily compare between the original & compressed version as you make changes. No need to re-export every time. Try it out: https://t.co/NMzrHcSJoW Get the code: https://t.co/ICqnq4ICjY

Most tools do blanket compression where it compresses all textures the same way. That's not ideal Your Normal maps probably shouldn't be as crunched down as your AO maps! With this you have full control to adjust the textures to be as small as possible while still looking good

Today @Shopify is open sourcing the tool we use for optimizing glTF 3D models. 🔧 Tweak compression settings per texture ⚡ See changes immediately 🧰 Mesh compression options 🌐 Hosted online & free 👇 Check the thread for details

It was super fun to bring our Shopify editions mini game to life with real cabinets from a Shopify merchant, https://t.co/BLREWnrBo9 Wanna try the game? Check it out 👇 https://t.co/jMJAQBUIUv

3) Broadcast Channel API The arcade cabinets might look like two separate machines, but it's a single computer with two displays. Each one has Chrome fullscreened on it Broadcast Channel lets you send messages across tabs of the same origin. So the car state is easily synced.

That means that it's possible to send byte sequences directly to the steering wheel in the format it expects. Logitech doesn't seem to publish this spec anywhere, but with Wireshark + USBCap I was able to reverse engineer the exact bytes to send to the wheel to rumble.

2) WebHID What's a racing game without force feedback!? Unfortunately the vibrationActuator property from the gamepad API doesn't do anything. WebHID to the rescue It lets you directly interface with any device implementing the HID protocol.

1) Gamepad API This API lets you easily connect to controllers (dualshock, xbox, etc...), but did you know it works for steering wheels too? Here I have a Logitech G920 plugged in and all the inputs are immediately recognized. And it can support up to 4!

These arcade cabinets are powered by three.js Here are the 3 browser APIs that make this possible 👀

Now the question is, how fast can you complete it? I can't seem to get under 1:48 😉 https://t.co/jMJAQBUb4X

Post processing with bloom was added in 1 line using react-postprocessing . It makes a world of difference to the overall look. It really shows the power of composability with react-three-fiber.

Almost everything is instanced, from the fish, to the bubbles, to confetti, camera flashes, etc.... That way we can have thousands of effects going on without breaking a sweat. It runs effortlessly at 120fps on desktop and 60fps on mobile. Oh and it's a React app 😜

The curve also makes it possible to do jumps and other more complex movements without worrying about rigidbody physics.

No physics libraries? No raycasts? That's right! The track is a spline that lets us easily figure out the normals and tangents at any given point on the curve. This makes collision and twisting tracks simple and super performant. Reply if you want an in-depth break down 😃

It’s an easter egg inside our latest Editions page, and was handcrafted by @letkma , @maca_graphics and myself. With support from the Editions team @shopify You have to try it out: https://t.co/jMJAQBUb4X

Shopify just launched a racing game built in threejs and React (R3F). No physics libraries. No raycasts. Not vibe coded. But all vibes. ✨

I still can’t believe this thing runs at 120fps and is only 7MB. This was a super fun project to build with @maca_graphics and @letkma and the lovely data team here at @Shopify Can you find all the easter eggs? Be sure to play around with it on desktop! https://t.co/YB3RijgPr9