tsl

name	tsl
description	Implement, migrate, review, debug, or verify Three.js Shading Language (TSL) materials, node graphs, WebGPU compute work, and post-processing. Use for `three/tsl`, `three/webgpu`, NodeMaterial, WebGPURenderer, storage buffers, shader-node typing, or GLSL-to-TSL work; verify every API against the repository's installed Three.js version.
license	MIT

Three.js Shading Language

Build version-matched TSL code and prove it through the repository's real renderer. Treat remembered APIs and this skill's examples as hypotheses until the installed Three.js package confirms them.

Ground the task

1. Read the nearest package.json, renderer setup, material or pass being changed, TypeScript configuration, and relevant tests.
2. Record the installed three and @types/three versions. Inspect their exports, declarations, and shipped examples before inventing an import, cast, or workaround.
3. Preserve the existing renderer and public boundaries unless the request explicitly includes a migration. TSL is the right tool for a TSL/WebGPU task; it is not a reason to rewrite unrelated working GLSL or WebGL code.
4. Identify the execution surface before coding:

Surface	Start with
Material property or vertex deformation	nodes.md
Storage buffer or compute dispatch	compute.md
Fullscreen pass, MRT, depth, or neighboring samples