Three.js From Zero · Article s12-10
S12-10 Automotive Paint Stack
Skip to demo
Season 12 · S12-10 · Specialized Production Patterns
Automotive Paint Stack — flakes, clearcoat, and showroom reflections
Car paint is where product rendering stops being abstract. Everybody knows what glossy paint should feel like, so the stack has to communicate depth, reflectance, and showroom context quickly.
industryautomotivematerials
1. Why this article exists
Automotive remains one of the richest configurator markets, and the paint stack is one of the most reusable rendering lessons that market teaches.
2. What we are building in the demo
- A simplified vehicle-like form with layered paint response.
- Clearcoat and base color working separately instead of as one flat swatch.
- Showroom-style reflections that matter more than arbitrary post effects.
3. Live demo
The demo below is a compact study model, not a full production system. The goal is to make the article’s mental model tactile: what changes, what matters, and what you would keep when the codebase graduates into a real project.
booting...
Season 12 is deliberately less single-vertical than Season 11. The throughline is still applied production: every demo is framed as a pattern you could reuse in paid work.
4. Implementation sketch
paint.clearcoat = 1.0;
paint.clearcoatRoughness = gloss;
paint.color.set(baseColor);
flakeLayer.opacity = flakeAmount;5. Production notes
Useful companion articles from earlier seasons:
What usually goes wrong first:
- Environment quality is half the effect.
- Too much sparkle turns premium paint into glitter.
- A physically plausible stack still needs art-directed reflection placement.
6. Takeaways
- Automotive paint is a layered response, not a single color picker.
- The environment tells the eye what the clearcoat is doing.
- Subtle choices usually read as more expensive than loud ones.