Mercedes-AMG SLS Configurator
Automotive Configurator - 2026
An independent real-time 3D concept built around the 2010 Mercedes-Benz SLS AMG. It turns a static vehicle model into a browser showroom where paint, upholstery, lighting, and viewpoint can be compared without leaving the scene.
The goal was realism that helps the product rather than spectacle: materials that respond convincingly, two useful lighting contexts, and a clean interface that keeps the car in control of the frame.
Role: Experience Design, Real-Time 3D Development, Lighting and Material Direction
Stack: React, TypeScript, Three.js, ThreePipe, WebGL, glTF and Meshopt
Let the car do most of the talking.
The interface is deliberately compact. Six paint finishes, five upholstery choices, the lighting environment, and the interior camera stay within reach, while the rest of the screen remains a clear, orbitable view of the SLS.
For a customer, that means less time learning the tool and more time comparing the choices that actually change how the vehicle feels.
Paint is judged by the way it catches light.
Changing a swatch updates the physical body material in place, preserving its clearcoat, roughness, metalness, and reflection response. Silver stays cool and precise, yellow opens up in direct light, and darker finishes retain their shape instead of collapsing into a flat silhouette.
Studio clarity and outdoor character serve different decisions.
The neutral studio makes proportion, paint, wheels, and panel lines easy to compare. The outdoor salt-field scene adds a horizon, directional light, and long reflections that show how the same finish behaves in a more natural setting.
Both modes keep the vehicle grounded with purpose-built shadow treatment, so changing the environment feels like moving the car rather than swapping a background image.
The camera moves into the driver's seat.
Entering the cabin is a directed camera move rather than a hard cut. The path approaches through the open side of the car, settles at driver-eye height, and then hands control back for a restrained look around the cockpit.
Five upholstery colors can be compared from inside while the carbon fibre, displays, metal trim, glass, and other authored material detail stay untouched.
Realism comes from relationships between surfaces.
Image-based lighting, ACES filmic tone mapping, screen-space reflections, ambient and contact shadows, temporal antialiasing, and restrained bloom work together as one pipeline. None of those effects is pushed very far on its own.
The more important work is material-specific: glass should reveal the cabin without looking grey, chrome should stay sharp, rubber should absorb highlights, and paint needs a broad clear reflection without turning into a mirror.
A detailed scene still has to feel immediate.
The SLS is delivered as a Meshopt-compressed glTF asset with self-hosted decoding, progressive rendering, and a preloader tied to real asset progress. Environment preparation runs alongside the vehicle load instead of holding it back in sequence.
The controls collapse into a compact mobile panel, the exterior camera adapts to portrait framing, and the rendering scale is capped so detail remains useful without asking every device to render the same workload.
