threejs-node-tsl

Original：🇺🇸 English

Translated

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.

3installs

Sourcefull-stack-skills/threejs-skills

Added on2026-10-18

NPX Install

npx skill4agent add full-stack-skills/threejs-skills threejs-node-tsl

SKILL.md Content

View Translation Comparison →

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

Decide path: WebGPU + nodes vs WebGL + classic materials—do not hybridize blindly.
Anchor docs: start from Nodes index and TSL.html; use NodeMaterial for material entry.
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.
Renderer: enable
```
WebGPURenderer
```
per docs; fall back notes belong in threejs-renderers.
Debugging: use version-stamped examples in three.js repo; avoid copying deprecated import paths.
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:

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

References

Keywords

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

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