THREE.JS / FOUNDATIONS 106

Build before the frame.

TSL keeps a material graph portable across WGSL and GLSL. The remaining production question is when that graph becomes a shader: on first render, or during an explicit async prebuild.

Initializing -

Preparing a PBR node graph and its scene lighting contract.

Mode: -
Meshes: -
Graph count: -
Lights: -
Compile ms: -
First frame: -
Longest frame: -
Draw calls: -

Compilation matrix-

Graph policy Mesh count Build strategy Scene lighting Environment

Animate objects

The selected scene lighting and environment are configured before compileAsync.

TSL graph contractportable shader intent

uv()->noise->colorNode->PBR lights + IBL

One MeshStandardNodeMaterial owns one shared graph; mesh count changes do not duplicate the graph.

Compare first-frame and longest-frame deltas. The official async-compilation example uses the same prebuild-versus-on-render boundary; try ?forceWebGL=1 for the GLSL backend.

Next: clustered and dynamic lighting ->

LAB 106 / NODE COMPILE BUDGET