Marble Race

Overview

Marble Race is a browser-based fun game that combines real-time 3D rendering, physics-driven motion, and GPU-accelerated GLSL shaders using React Three Fiber and Three.js. The core experience features high-fidelity marble control with inertia, friction, and collision constraints, dynamic obstacles, and smooth camera follow—all within a 60fps frame budget.

Technical Breakdown

• R3F scene graph: declarative 3D composition, hierarchical transforms, and batched updates for minimal overhead.
• Physics integration: rigid-body dynamics (gravity, impulses, angular momentum), swept collision tests, and stable timesteps for jitter-free motion.
• GLSL shaders: procedural materials (noise, fresnel), normal perturbation, toon/lambert mixes, and lightweight rim-lighting for readable silhouettes.
• Post-processing: color grading/tone mapping, vignette/bloom thresholds tuned for depth cues without blowing highlights.
• Controls & UX: eased input curves, and camera spring-damping (critical damping) to avoid motion sickness.
• Asset discipline: low-poly kitbashing + instancing; texture atlases to suppress draw-call explosion.

Rendering & Performance

• Frame budget policing with rAF + useFrame hooks؛ heavy work pushed to GPU via shaders; CPU hot paths profiled and trimmed.
• InstancedMesh for repeating geometry؛ frustum culling + fixed LODs on distant obstacles.
• Post chain kept minimal—single pass effects where possible، reduced overdraw، and stable frame times under input spikes.

Stack

• React Three Fiber (R3F), Three.js, GLSL
• Browser-side physics engine (rigid bodies, colliders, constraints)
• Post-processing pipeline (bloom, vignette, tone mapping)
• Declarative React controls & state for input, HUD, and game loop