threejs-node-tsl

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用此 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"

当用户提到以下内容时，始终使用此 skill：

```
NodeMaterial
```
、
```
TSL
```
、文档中来自
```
three/nodes
```
的导入或 WebGPU 入口点
使用节点而非字符串 GLSL 构建材质或后处理效果
在以节点为中心的管线中使用
```
WebGPURenderer
```
、
```
PostProcessing
```
（核心类）

重要：node-tsl vs materials vs postprocessing

情况	Skill
标准 PBR 调优，不使用节点	threejs-materials
TSL 图、NodeMaterial、WGSL 路径	threejs-node-tsl
经典 `EffectComposer` + Pass 类	threejs-postprocessing
文档 Addons TSL 中列出的节点式后处理 Pass	threejs-node-tsl + threejs-postprocessing 相关知识

触发短语包括：

“TSL”、“NodeMaterial”、“three/nodes”、“WebGPU”、“node builder”
“节点材质”、“着色语言 TSL”

How to use this skill

如何使用此 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.

确定路径：WebGPU + 节点，还是 WebGL + 经典材质——不要盲目混用。
锚定文档：从 Nodes index 和 TSL.html 开始；使用 NodeMaterial 作为材质入口。
渐进式披露：让 SKILL.md 保持导航用途；冗长的符号列表放在 references/official-links.md 和 references/tsl-vs-classic.md 中；有关导航方式，请参阅 examples/workflow-tsl-entry.md。
渲染器：按照文档启用
```
WebGPURenderer
```
；回退说明应放在 threejs-renderers 中。
调试：使用 three.js 仓库中标明版本的示例；避免复制已弃用的导入路径。
后处理栈：如果用户提到
```
PostProcessing
```
核心类与 addon composer，请按照 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

文档部分	代表性链接
节点	https://threejs.org/docs/#Nodes
TSL	https://threejs.org/docs/TSL.html
NodeMaterial	https://threejs.org/docs/NodeMaterial.html
WebGPU 渲染器	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".

**包含：**Nodes/TSL 探索、架构、渲染器搭配、下一步查阅位置，以及从 ShaderMaterial 迁移的提示。
**不包含：**将完整的 TSL 符号表粘贴到 SKILL.md 中；保证 API 在快速发布周期中保持稳定——始终引用“当前文档”。

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.

Three.js 节点 API 演进迅速——回答应与特定版本或“当前文档”对应。
不要混淆核心
```
PostProcessing
```
类与 addons 中的
```
EffectComposer
```
——这两个名称在交流中容易混淆。
WGSL 与 GLSL 的预期不同；TSL 虽然提供抽象，但限制仍然存在。
保持图结构模块化；使用 references 查询，避免膨胀 Agent 上下文。

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.

Nodes 索引与 TSL 页面规模庞大且变化迅速。对于用户安装的 three.js，应将 https://threejs.org/docs/ 视为事实来源；优先提供 NodeMaterial 和 WebGPURenderer 链接，而不是转述冗长的符号列表。

Agent response checklist

Agent 回答检查清单

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).

使用此 skill 回答时，优先采用以下方式：

以 TSL.html 和/或 #Nodes 为依据，不要虚构 API 名称。
明确对比 threejs-materials（经典材质）与节点/TSL 路径。
提醒用户 WebGPU + 节点示例可能需要较新的小版本——已知时注明版本。
对于冗长的查询指引，指向 references/tsl-vs-classic.md 和 references/official-links.md。
区分核心
```
PostProcessing
```
与 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

英文： tsl, node material, nodes, webgpu, wgsl, three.js shading language, node builder, nodematerial

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