01.Project Overview
High-performance interactive 3D WebGL showcase built with Next.js, Three.js, and React Three Fiber. Features scroll-driven dynamic camera transitions, real-time physically-based rendering (PBR materials), and Draco geometry compression (-72% payload).
Real-time shader calculations simulating metallic car paint, clearcoat reflections, carbon fiber weaves, and glass refraction.
Smooth cubic-bezier camera interpolation guiding the user around front splitters, side exhausts, and the aerodynamic rear wing.
Dynamic livery customizer with real-time synchronized underglow lighting and responsive racing telemetry HUD overlay.
02.The Problem
High-performance automotive engineering cannot be communicated through flat image sliders. Users need to inspect aerodynamics, carbon weave, and finishes in real time without downloading gigabyte app bundles.
- Heavy 3D models causing long initial load times and browser memory crashes.
- Choppy scroll animations on standard 60Hz and 120Hz displays.
- Unrealistic lighting that makes digital cars look synthetic instead of metal and carbon.
03.What I Built & Architecture
Engineered an interactive 3D showroom using Three.js and React Three Fiber, featuring custom PBR materials, Draco compression, and scroll-scrubbed camera choreography.
Reduces 3D model network payload by over 75%, allowing instant initial interaction on mobile devices.
Produces authentic metallic automotive paint reflections using HDRI image-based lighting (IBL) without expensive ray tracing computations.