Three.js Clearcoat Property for Car Paint

This article explains the clearcoat property in Three.js and how it is used to simulate realistic car paint finishes. We will explore how this property mimics a shiny, reflective outer layer over a base material, its key parameters, and how to implement it using the MeshPhysicalMaterial.

In Three.js, the clearcoat property is a feature exclusive to MeshPhysicalMaterial, which is an extension of MeshStandardMaterial. It simulates a thin, transparent, highly reflective layer on top of the base material. This is crucial for rendering realistic car paint, which in the real world consists of a base color coat covered by a protective, glossy clear lacquer. Without the clearcoat property, simulating this dual-layer reflection would require complex and performance-heavy multi-material setups.

To achieve a convincing car paint finish, Three.js provides three primary clearcoat-related properties:

• clearcoat: This value ranges from 0.0 (no clearcoat) to 1.0 (maximum clearcoat). It controls the intensity of the reflective outer layer. For a pristine, factory-new car finish, this is typically set to 1.0.
• clearcoatRoughness: This controls the blurriness of the reflections on the clearcoat layer, ranging from 0.0 (perfectly smooth, mirror-like) to 1.0 (fully rough). Car paint usually requires a very low value, typically between 0.0 and 0.1, to ensure sharp, glossy highlights.
• clearcoatNormalMap: This allows you to apply a normal map specifically to the clearcoat layer. This is highly useful for simulating the subtle “orange peel” texture or minor surface scratches found in real-world car lacquer, without affecting the smooth base color underneath.

Here is a basic code example of how to configure a car paint material in Three.js:

const carPaintMaterial = new THREE.MeshPhysicalMaterial({
    color: 0xff0000,          // Red base coat
    roughness: 0.4,          // Slightly matte base coat
    metalness: 0.9,          // Metallic flakes in the base coat
    clearcoat: 1.0,          // High-gloss outer lacquer
    clearcoatRoughness: 0.02 // Extremely sharp reflections
});

By separating the base material properties (like color, metalness, and roughness) from the outer coating, the clearcoat property allows developers to create highly realistic automotive renders that react dynamically to environment lighting.