WEBGPU / TSL AUTHORING

Write the node. Inspect the shader.

The official editor compiles an editable TSL fragment node into a live plane, then asks the renderer for the backend shader. This local study keeps that boundary visible without depending on the Monaco CDN or an external texture.

Preparing editor—

Building a NodeMaterial and waiting for the first shader introspection.

SOURCE / TRUSTED TSL FIXTURE

Editable fragment code

— lines

This local route evaluates the trusted fixture through an `AsyncFunction` with `THREE` and `TSL` bindings. The official page uses Monaco and dynamic `import('three/tsl')`; both are fidelity boundaries, not hidden claims.

OUTPUT / WGSL / FRAGMENT

Renderer shader

— lines

Waiting for build…

rendererwaiting

WebGPURenderer exposes WebGPU or the explicit forceWebGL reference lane.

diagnosticswaiting

Renderer debug keywords stay enabled for shader inspection.

material graphwaiting

NodeMaterial.fragmentNode is rebuilt from the trusted editor result.

lifecyclewaiting

Build, debounce, sample, toggle preview, and release are all explicit.

Sources: official TSL editor · NodeMaterial · WebGPURenderer · whole-example fidelity remains separate

LAB / TSL EDITOR SHADER INTROSPECTION