Three.js From Zero · Article s12-10
Automotive Paint Stack — flakes, clearcoat, and showroom reflections
Automotive Paint Stack — flakes, clearcoat, and showroom reflections is Article s12-10 of Three.js From Zero, a MasterAllArts free interactive lesson for artists learning creative 3D on the web.
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.
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.
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.