full-stack-skillsfull-stack-skills/threejs-skills/skills/threejs-node-tsl/SKILL.md

threejs-node-tsl

Skill9 starsChanged 54 days agoApache-2.0View on GitHub

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.

In this repository21 other files it gives its agents.
- openspec-apply-changeSkill
- openspec-archive-changeSkill
- openspec-exploreSkill
- openspec-proposeSkill
- threejs-animationSkill
- threejs-audioSkill
- threejs-cameraSkill
- threejs-controlsSkill
- threejs-dev-setupSkill
- threejs-geometriesSkill
- threejs-helpersSkill
- threejs-lightsSkill
- threejs-loadersSkill
- threejs-materialsSkill
- threejs-mathSkill
- threejs-objectsSkill
- threejs-postprocessingSkill
- threejs-renderersSkill
- threejs-scenesSkill
- threejs-texturesSkill
- threejs-webxrSkill

The file

We split this skill into the rules it gives an agent

7 rules. About 0 are common, 2 are distinctive, and 5 are very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈2
Distinctive · estimate
This author's own choices. Worth a look.
5
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Very specific:
Anchor docs: start from Nodes index and TSL.html.
line 31
Very specific:
Progressive disclosure: keep SKILL.md navigational.
line 32
Very specific:
Debugging: use version-stamped examples in three.js repo.
line 34
Very specific:
Post stack: if user names PostProcessing core class vs addon composer, clarify table in threejs-renderers / threejs-postprocessing.
line 35
Very specific:
Do not confuse core PostProcessing class with addons EffectComposer—names collide in conversation.
line 54
Distinctive:
Keep graphs modular; use references for lookup instead of bloating agent context.
line 56
Distinctive:
When answering under this skill, prefer responses that:
line 64

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

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

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free