threejs-node-tsl

---

name: threejs-node-tsl license: Apache-2.0 description: "three.js node-based shading: Nodes API surface, NodeMaterial and MeshStandardNodeMaterial-style families, TSL (Three.js Shading Language) entry at TSL.html, WebGPURenderer pairing, and core PostProcessing (class) versus addon EffectComposer at a high level. Use when authoring shaders as graphs, using TSL builtins, compute-oriented nodes, or modern WebGPU pipelines; for classic MeshStandardMaterial, MeshPhysicalMaterial, and string-based ShaderMaterial GLSL use threejs-materials; for stock EffectComposer + Pass passes use threejs-postprocessing; for WebGLRenderer-only tuning without nodes use threejs-renderers."

When to use this skill

ALWAYS use this skill when the user mentions:

• NodeMaterial, TSL, imports from three/nodes or WebGPU entry points in docs
• Building materials or post effects from nodes instead of string GLSL
• WebGPURenderer, PostProcessing (core class) in a node-centric pipeline

IMPORTANT: node-tsl vs materials vs postprocessing

Situation	Skill
Standard PBR tuning, no nodes	threejs-materials
TSL graph, NodeMaterial, WGSL path	threejs-node-tsl
Classic EffectComposer + Pass classes	threejs-postprocessing
Node post passes listed under Addons TSL in docs	threejs-node-tsl + threejs-postprocessing awareness

Trigger phrases include:

• "TSL", "NodeMaterial", "three/nodes", "WebGPU", "node builder"
• "节点材质", "着色语言 TSL"

How to use this skill

1. Decide path: WebGPU + nodes vs WebGL + classic materials—do not hybridize blindly.
2. Anchor docs: start from Nodes index and TSL.html; use NodeMaterial for material entry.
3. Progressive disclosure: keep SKILL.md navigational; long symbol lists live in references/official-links.md and references/tsl-vs-classic.md; see examples/workflow-tsl-entry.md for navigation habits.
4. Renderer: enable WebGPURenderer per docs; fall back notes belong in threejs-renderers.
5. Debugging: use version-stamped examples in three.js repo; avoid copying deprecated import paths.
6. Post stack: if user names PostProcessing core class vs addon composer, clarify table in threejs-renderers / threejs-postprocessing.

Doc map (official)

Docs section	Representative links
Nodes	https://threejs.org/docs/#Nodes
TSL	https://threejs.org/docs/TSL.html
NodeMaterial	https://threejs.org/docs/NodeMaterial.html
WebGPU renderer	https://threejs.org/docs/WebGPURenderer.html

Scope

• In scope: Nodes/TSL discovery, architecture, renderer pairing, where to look next, migration hints from ShaderMaterial.
• Out of scope: Pasting entire TSL symbol tables into SKILL.md; guaranteeing API stability across rapid releases—always cite "current docs".

Common pitfalls and best practices

• Three.js node APIs evolve quickly—tie answers to a version or "current docs".
• Do not confuse core PostProcessing class with addons EffectComposer—names collide in conversation.
• WGSL vs GLSL expectations differ; TSL abstracts but limits still apply.
• Keep graphs modular; use references for lookup instead of bloating agent context.

Documentation and version

The Nodes index and TSL page are large and fast-moving. Treat https://threejs.org/docs/ as the source of truth for the user’s installed three.js; prefer linking NodeMaterial and WebGPURenderer over paraphrasing long symbol lists.

Agent response checklist

When answering under this skill, prefer responses that:

1. Anchor on TSL.html and/or #Nodes rather than inventing API names.
2. Contrast threejs-materials (classic) vs node/TSL path explicitly.
3. Warn that WebGPU + nodes examples may require recent minors—cite version when known.
4. Point to references/tsl-vs-classic.md and references/official-links.md for long lookups.
5. Disambiguate core PostProcessing vs addon EffectComposer (threejs-postprocessing).

References

• https://threejs.org/docs/#Nodes
• https://threejs.org/docs/TSL.html
• https://threejs.org/docs/NodeMaterial.html
• https://threejs.org/docs/WebGPURenderer.html

Keywords

English: tsl, node material, nodes, webgpu, wgsl, three.js shading language, node builder, nodematerial

中文： TSL、节点材质、WebGPU、着色语言、NodeMaterial、three.js