THREE.JS / FOUNDATIONS 132

Author the surface, slot by slot.

A MeshStandardNodeMaterial keeps Three.js's PBR lighting model while TSL nodes take ownership of the surface inputs. Toggle each slot and watch the same graph move from vertex displacement to color, material response, normals, and emission.

Initializing -

Preparing a shared TSL surface graph.

Material: -
Slots: -
Graph builds: -
Draw calls: -
Triangles: -
CPU avg: -
CPU p95: -
Stage link: -

Graph inputsready

Palette Wave amplitude 0.34 Wave frequency 2.40 Animation speed 0.65 Normal relief 0.22 Emission strength 0.85

positionNodevertex displacement colorNodediffuse color roughnessNode + metalnessNodePBR response normalNodebump relief emissiveNodeself-lit accents

Animate graph clock

Uniform changes stay rebuild-free; slot changes rebuild the material graph.

Graph contractone shared intent

positionLocal->Fn wave->varying(height)->surface slots

The vertex displacement is explicitly shared with the fragment graph through a named varying.

The official NodeMaterial API distinguishes overwrite slots from existing material references. Use ?forceWebGL=1 to compile the same TSL graph through the WebGL2 backend.

Next: WebXR lighting-estimation lifecycle ->

LAB 132 / NODE SURFACE GRAPH