Cinematic 3D Racing Pursuit Game

This is a Cinematic 3D Racing Pursuit Game. It renders an endless runner-style experience with high-speed lane switching, projectile combat, and dynamic obstacle generation. Its function is to demonstrate complex WebGL post-processing and real-time game loops inside the browser, transforming a static webpage into an interactive arcade environment.

Specs

• Weight: ~650 KB (Dependencies: Three.js + EffectComposer + Shaders).
• Performance: Highly CPU/GPU-intensive. Utilizes WebGL rendering, UnrealBloomPass for neon aesthetics, and active particle physics on a tight requestAnimationFrame loop.
• Theming / Customization: Hardcoded via JS configuration objects (CONFIG) and Three.js material hex colors.
• Responsiveness: Scales dynamically to the viewport. Includes dedicated touch overlay controls for mobile devices that appear after a delayed animation.
• Web APIs: WebGL API.
• Graceful Degradation: [!] Completely breaks without JavaScript or WebGL support. Will display a blank screen if hardware acceleration is disabled.

Anatomy

• HTML: A minimalist shell. Contains a #canvas-container for the WebGL context, a frosted glass #ui-layer for the HUD, and mobile touch button overlays.
• CSS: Establishes the cyber-aesthetic. Uses backdrop-filter: blur and text-shadow for the neon UI, while managing a full-screen grid constraint to lock the viewport.
• JS: The game engine. Handles Three.js scene setup, geometric mesh generation, lighting, physics (velocity and collision detection), input listening (keyboard + touch), and the continuous rendering loop.

Logic

The standout visual logic is the integration of the bloom post-processing pipeline.

const renderScene = new THREE.RenderPass(scene, camera);
const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
bloomPass.strength = 2.0;

const composer = new THREE.EffectComposer(renderer);
composer.addPass(renderScene);
composer.addPass(bloomPass);

// Inside animation loop:
composer.render();

Instead of rendering standard flat 3D geometry directly to the canvas, the script routes the camera feed through an EffectComposer. The UnrealBloomPass isolates the brightest pixels (headlights, explosions, neon taillights) based on the threshold and applies a high-performance Gaussian blur. This makes the light bleed over darker pixels, creating the signature cinematic cyberpunk glow without complex raytracing.

Feel

Intense and responsive. The camera dynamically shakes on impact and pulls back during nitro boosts (camera.fov manipulation), physically enhancing the sensation of speed. The vehicle feels weighty due to the simulated velocity decay (playerVelX *= 0.92), making lane transitions feel deliberate and grounded rather than instantaneous.