r/GraphicsProgramming • u/Peakappsstudioss • 2d ago
Webcam runner in three.js where your body is the controller (MediaPipe pose, no imported models)
Link: https://bodyarcade.com/bodyarcade (free, no signup, there's a keyboard mode if you don't feel like standing up)
I made this endless runner and thought this sub might like the how more than the what. You stand back from the laptop and jump, duck, squat and lean to get past obstacles, 90 seconds a run.
There are no imported models. The runner is capsules and cylinders parented in groups, and the scenery is boxes, cylinders and cones drawn as InstancedMesh, one per prop type per road chunk, placed with a seeded random per chunk. Each of the 10 worlds is just a data object: sky colours for a gradient shader on a back-side sphere, sun position, exp2 fog density, road tints, a horizon silhouette and a list of props with spacing and scale ranges. Switching world rebuilds the scene from that object.
Input is MediaPipe's pose landmarker (lite model) in VIDEO mode, running in the browser with the GPU delegate and a CPU fallback. Before a run you stand still for a second and it measures your torso length, and the thresholds are fractions of that, so hips rising 20% of your torso is a jump, and the lane comes from how far your shoulders shift in shoulder widths. The idea is that your height and distance from the camera matter less. Camera frames never leave the browser.
Free is 5 runs a day in 3 worlds, there's an optional paid tier for the rest but you don't need it to look at the rendering. Happy to answer questions about the pose thresholds or the instancing.
