threejs-node-tsl

使用此技能的时机

用户提到以下内容时，始终使用此技能：

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

重要：node-tsl 与 materials 和 postprocessing 的区别

情况	技能
标准 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"

如何使用此技能

1. 确定路径：选择 WebGPU + 节点，还是 WebGL + 经典材质——不要盲目混用。
2. 以文档为依据：从 Nodes 索引 和 TSL.html 开始；材质入口请参阅 NodeMaterial。
3. 渐进式披露：保持 SKILL.md 以导航为主；较长的符号列表放在 references/official-links.md 和 references/tsl-vs-classic.md 中；导航习惯请参阅 examples/workflow-tsl-entry.md。
4. 渲染器：按照文档启用 WebGPURenderer；回退说明应放在 threejs-renderers 中。
5. 调试：使用 three.js 仓库中注明版本的示例；避免复制已弃用的导入路径。
6. 后期处理堆栈：如果用户提到的是 PostProcessing 核心类还是 addon composer，请参阅 threejs-renderers / threejs-postprocessing 中的对照表并予以澄清。

文档地图（官方）

文档章节	代表性链接
Nodes	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

范围

• 范围内： Nodes/TSL 的查找、架构、渲染器搭配、后续查阅方向，以及从 ShaderMaterial 迁移的提示。
• 范围外： 将完整的 TSL 符号表粘贴到 SKILL.md 中；保证 API 在快速迭代的版本间保持稳定——务必引用“当前文档”。

常见问题和最佳实践

• Three.js 节点 API 迭代很快——回答时应注明版本或“当前文档”。
• 不要混淆核心 PostProcessing 类与 addons EffectComposer——这两个名称在对话中容易混淆。
• 对 WGSL 与 GLSL 的预期有所不同；TSL 提供了抽象，但仍有局限。
• 保持图结构模块化；查找内容时使用参考资料，避免 Agent 上下文臃肿。

文档和版本

Nodes 索引和 TSL 页面内容较多，且更新很快。将 https://threejs.org/docs/ 视为用户所安装 three.js 版本的准确信息来源；相比复述冗长的符号列表，优先链接到 NodeMaterial 和 WebGPURenderer。

Agent 回答检查清单

使用此技能回答时，优先做到：

1. 以 TSL.html 和/或 #Nodes 为依据，而不是凭空编造 API 名称。
2. 明确对比经典路径 threejs-materials 与节点/TSL 路径。
3. 提醒用户，WebGPU + 节点示例可能需要较新的次版本；已知版本时应注明。
4. 对于较长的查找内容，指向 references/tsl-vs-classic.md 和 references/official-links.md。
5. 区分核心 PostProcessing 与 addon EffectComposer（threejs-postprocessing）。

参考资料

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

关键词

English： tsl、node material、nodes、webgpu、wgsl、three.js shading language、node builder、nodematerial

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