How PBR Car Paint Works in Real-Time 3D

A flat colour value tells the renderer the basic hue, but it does not explain how the surface reacts to light. Real car paint has layered behaviour: a coloured base, reflective particles in some finishes, and often a clear protective layer above it. Real-time graphics approximate that behaviour with a small set of material properties that can be calculated quickly in the browser.

3DTUNNERS uses the physically based material system available in Three.js. The goal is not to reproduce a paint manufacturer’s exact formula. It is to make different finish families respond consistently enough that gloss, matte, metallic, pearl and other supported materials can be compared in the same scene.

Roughness describes how broad or sharp a reflection appears. A low-roughness surface produces tighter highlights and clearer reflected shapes, which reads as polished or glossy. A higher-roughness surface spreads the reflected light and softens detail, which is useful for satin and matte looks.

It is easy to confuse roughness with brightness. A matte panel can still be brightly lit, and a glossy panel can look dark when it reflects a dark part of the environment. Rotating the camera or changing the scene is therefore more informative than judging a finish from one fixed angle.

Metalness separates metallic behaviour from non-metallic material behaviour in the renderer. Three.js uses a metallic-roughness workflow, where the metalness and roughness values work together with the base colour and environment. Automotive finishes often sit on a more complex spectrum in reality, so a browser material is an artistic approximation rather than a laboratory measurement.

The same material controls are also useful for wheel faces, exhaust tips and carbon-style surfaces, but each needs different values. A polished metal, painted body panel and clear-coated carbon surface should not share one generic “shiny” setting.

Three.js provides clearcoat properties for materials that need a thin reflective layer above a different base surface. This is particularly useful for car paint and clear-coated carbon. Clearcoat strength and clearcoat roughness can preserve a crisp top highlight even when the material underneath has more texture or a broader reflection.

Pearl and candy-style finishes can add angle-dependent colour behaviour, but these effects remain approximations. They can help compare a restrained finish with a more dramatic one; they should not be used to order a real paint without checking a physical sample under the intended lighting.

A reflective car only reveals its shape when there is something useful around it to reflect. A showroom creates broad, clean highlight bands. A night scene introduces small bright sources against dark surroundings. An outdoor scene adds sky and ground colours. The paint values may be unchanged while the visible result shifts considerably.

That is why the Environment control is part of the evaluation process rather than a decorative afterthought. Compare at least one bright and one dark setting, and look across large curved areas such as the bonnet, doors and rear quarter panels. Those surfaces make changes in clearcoat and roughness easier to read.

Physically based materials cost more to render than basic unlit colour, especially when a scene combines detailed geometry, reflections, shadows and additional effects. Three.js notes that advanced physical material features add per-pixel rendering cost. 3DTUNNERS therefore balances material detail against responsive interaction on modern browsers.

Screens also differ. Brightness, colour profile, viewing angle and ambient light can all change what you perceive. A digital preview is useful for comparing options within the same device and scene, but it is not a colour-calibrated paint approval system.

Choose one colour and switch only the finish first. Rotate slowly so the same highlight travels across the body, then compare gloss, matte, metallic or pearl. Next, keep the chosen finish and change the colour. Separating the decisions makes it easier to understand whether you prefer the hue or the way the surface responds.

Once a combination works, test it in multiple environments. If the finish is for a real project, use the digital result as a direction for collecting physical paint chips or spray-out cards. The final choice should be made from a real sample, because the browser cannot reproduce every pigment, flake size, coating thickness or lighting condition.