THREE.JS / FOUNDATIONS 240

Three layers. One material contract.

Clearcoat, sheen, and iridescence are not decorative toggles: each is a glTF extension with its own scalar range, texture channels, and color-space rules. This study parses all three through GLTFLoader and places their physical layers side by side.

Preparing glTF fixture—

Building tangent-space geometry, extension maps, and a loader-parsed asset…

backend: —
extensions: —
layer mats: —
focus: —
frame ms: —

Layer inspection controlswaiting

material focus layer intensity 0.90 clearcoat roughness 0.18 sheen roughness 0.58 thin-film IOR 1.36 film maximum 520 nm environment exposure 1.22

use extension maps rotate stage auto-rotate camera

The parsed glTF materials will appear after the loader finishes.

Extension contractwaiting

clearcoatR · linear

waiting

sheen colorRGB · sRGB

waiting

sheen roughnessalpha · linear

waiting

iridescenceR · linear

waiting

film thicknessG · linear

waiting

environmentPMREM context

—

The base material remains valid as a fallback; each extension contributes a physical layer over it. Texture channels are data contracts, not interchangeable grayscale conventions.

The study uses the real GLTFLoader extension path and tracks every loaded resource for explicit release.

Derived from the official clearcoat example, glTF sheen example, glTF iridescence example, GLTFLoader, MeshPhysicalMaterial, and the Khronos glTF material extensions. Use ?forceWebGL=1 to inspect the labeled WebGL2 reference.

LAB 240 / GLTF MATERIAL LAYERS