Loading video...

Video Failed to Load

Go Home

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

1,420,048 views • 1 year ago •via X (Twitter)

12 Comments

Daniel Beauchamp's profile picture
Daniel Beauchamp1 year ago

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:

Daniel Beauchamp's profile picture
Daniel Beauchamp1 year ago

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 😃

Daniel Beauchamp's profile picture
Daniel Beauchamp1 year ago

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

Daniel Beauchamp's profile picture
Daniel Beauchamp1 year ago

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 😜

Daniel Beauchamp's profile picture
Daniel Beauchamp1 year ago

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.

Daniel Beauchamp's profile picture
Daniel Beauchamp1 year ago

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

PowerBeatsVR's profile picture
PowerBeatsVR3 years ago

VR fitness app PowerBeatsVR has just made its way to the official Meta Quest store! Grab it now and enjoy a fun workout anywhere, anytime, and without any subscription ever:

jordi's profile picture
jordi1 year ago

we got shopify driving game before gta 6

renderfiction's profile picture
renderfiction1 year ago

After playing this I realized 2 things: 1) I have a lot more to learn about #threejs. 2) I have a LOT more to learn about #threejs. Incredible game and flawless performance on my mobile device.

mrdoob's profile picture
mrdoob1 year ago

Excellent! 😙👌

Alex Greenland's profile picture
Alex Greenland1 year ago

So the car model is on a fixed spline while flying in the air too?

Daniel Beauchamp's profile picture
Daniel Beauchamp1 year ago

Yep! The visuals of the track are separate from the spline itself. So we can fake jumps by hiding parts of the road

Related Videos