threejs-node-tsl

Q: How do I install threejs-node-tsl?

Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-node-tsl in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-node-tsl/ (personal) or .claude/skills/threejs-node-tsl/ (project).

by full-stack-skillsFrontend & Design

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.

Installs: 376
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-node-tsl

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads threejs-node-tsl automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the threejs-node-tsl skill do?

How do I install threejs-node-tsl?

Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-node-tsl in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-node-tsl/ (personal) or .claude/skills/threejs-node-tsl/ (project).

Which AI agents can use threejs-node-tsl?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is threejs-node-tsl safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains threejs-node-tsl?

It is published by full-stack-skills in full-stack-skills/threejs-skills. It has 376 recorded installs.