THREE.JS / FOUNDATIONS 267

A second skin for light.

Clearcoat adds a thin reflective layer over a base physical material. Compare four authored surfaces while the selected lane exposes coat strength, coat roughness, independent coat normals, and front-light response.

Initializing clearcoat study—

Preparing four physical material lanes and the environment.

backend: —
selected lane: —
clearcoat: —
coat roughness: —
normal strength: —
front light: —

Clearcoat controlswaiting

selected material lane clearcoat 1.00 coat roughness 0.10 coat normal strength 0.15 front-light intensity 5.00

independent coat normal animate lanes auto-rotate camera

The physical material lanes will be compiled after the renderer is ready.

Clearcoat contractPBR

materialphysical node surface

MeshPhysicalNodeMaterial

coatthin reflective layer

clearcoat + roughness

normalindependent coat detail

clearcoatNormalMap

lightingfront-facing response

camera-owned PointLight

environmentphysical reflections

Ultra HDR

fallbackWebGL2 reference

MeshPhysicalMaterial

Clearcoat is a separate reflective layer; its roughness and normal map can differ from the base material.

WebGPU uses MeshPhysicalNodeMaterial; forced WebGL2 uses MeshPhysicalMaterial with the same clearcoat surface properties.

Derived from the official Clearcoat example and the MeshPhysicalNodeMaterial / MeshPhysicalMaterial contracts.

LAB 267 / CLEARCOAT MATERIALS