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

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

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 😉.

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:.

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!.

It also works in VR 🤯. Grab a Quest or Apple Vision Pro and step into the immersive cockpit. Got to love WebXR and the amazing react-three/xr.

This is my favourite part. We built a synthesizer with Tone.js that plays notes every time an order lands inside the target. Listen to commerce in real time!. (It even outputs to MIDI!)

It was built with three.js and react-three-fiber. Everything is interactive and designed for delight. This wire interaction as you switch between infrastructure metrics is *chefs kiss*

Every time a sale is made on @Shopify this Black Friday weekend, it shows up on this 3D globe. It runs at 120fps in the web with a full 3D environment, physics engine, music synth, VR support, and more. It’s hard to believe it's a React app 👀🧵

Looking for the code and more details? Check out the in-depth breakdown of how we built the @shopify Black Friday globe last year.

By using an InstancedMesh, each firework can be placed at a separate location. A color instanced attribute is used to allow for unique colors, and a startTime attribute determines when each instance goes off. All of these fireworks together are a single draw call 🤯