webgpu-threejs-tsl-skill：用 Three.js TSL 写 WebGPU 着色器

让一个通用助手为 Three.js 写 WebGPU 着色器，你得到的往往是过期 API 和看似合理却跑不起来的 TSL 的混合体。webgpu-claude-skill 就是为此而生的知识型 skill：面向使用 TSL（Three.js Shading Language）开发 WebGPU Three.js 应用这个确切的细分领域。

为什么这个 Skill 重要

TSL 又年轻又变得快——光 README 的版本说明就记录了 r178 弃用 PI2（改用 TWO_PI）、transformedNormalView/World 更名为 normalView/World。这个 skill 标注 2026 年 4 月 1 日更新、对齐 r183+ API 变化，恰恰是模型训练数据跟不上的那部分知识。它覆盖 WebGPU 渲染器搭建、TSL 着色器编写、节点材质、GPU 计算着色器、后处理效果和自定义 WGSL 集成，还附带可运行的示例——从 basic-setup.js 到带大气层的完整 earth-shader.js——外加起步模板。

一份内容，两个编辑器。skills/ 下的 Claude skill 是唯一事实来源；仓库同时把同样的内容打包成 .cursor/rules/ 下的 Cursor 规则，规则通过 @file 引用 skill 文档并按 glob 自动挂载——比如 compute-shaders.mdc 只在文件名匹配 *compute* 或 *particle* 时加载。

安装

Claude Code 可以直接从仓库安装：

/skill install webgpu-threejs-tsl@<your-github-username>/webgpu-claude-skill

或者把 skills/webgpu-threejs-tsl 目录复制到 ~/.claude/skills/（全局）或 <project>/.claude/skills/（项目级）。

Cursor 用户把两个目录都复制进项目根目录，保持原有路径——.mdc 规则文件引用的是 skills/ 目录：

your-project/
├── .cursor/rules/
└── skills/webgpu-threejs-tsl/

实战：给网格加一圈动态菲涅尔边缘光

1. 装好 skill 后直接描述效果：

Set up a Three.js WebGPU renderer and give my hero mesh an animated
fresnel emissive rim using TSL.

2. 期望的答案形态就是 skill 自带示例的样子：WebGPURenderer 加 await renderer.init()，用 MeshStandardNodeMaterial，让节点完成计算：

import * as THREE from 'three/webgpu';
import { color, time, oscSine, normalWorld, cameraPosition, positionWorld, Fn, float } from 'three/tsl';

const renderer = new THREE.WebGPURenderer();
await renderer.init();

const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = color(0x0066ff);

material.emissiveNode = Fn(() => {
  const viewDir = cameraPosition.sub(positionWorld).normalize();
  const fresnel = float(1).sub(normalWorld.dot(viewDir).saturate()).pow(3);
  return color(0x00ffff).mul(fresnel).mul(oscSine(time));
})();

3. 接着可以继续用 skill 携带的文档深入：要求一个 GPU 计算粒子系统，它会调用计算着色器文档——实例化数组缓冲、并行物理模拟、原子操作与屏障；要求辉光，它会在后处理文档的范围内工作（内置 bloom、blur、FXAA、DOF，自定义 Fn() 效果，效果链，多渲染目标）。

4. 如果程序挂了，skill 里还有设备丢失（device loss）文档：检测 GPU 设备丢失、恢复策略、用 destroy() 和 Chrome 的 GPU 崩溃模拟做测试、状态保存与还原。

技巧

• 先查版本门槛，再怪 skill。它推荐 Three.js r171+；r178+ 更名了多个 TSL API。浏览器支持同样有门槛：Chrome 113+、Edge 113+、Firefox 需开 flag、Safari 处于 WebGPU 预览状态。
• 从 examples/ 起步，别从空文件开始。earth-shader.js 是完整的成品示例，templates/webgpu-project.js 是起步脚手架。
• 在 Cursor 里，绝不要只复制 .cursor/rules/ 而不带 skills/——规则只是按路径引用 skill 文档的薄壳。
• 查类型、运算符或 swizzling 写法，最快的是 REFERENCE.md 速查表，不用离开编辑器。

何时不用这个 Skill

这个 skill 面向 WebGPU 渲染器和 TSL，推荐范围是 Three.js r171+——还在用经典 WebGL 渲染器或更老版本 three.js 的项目超出了它覆盖的范围。而如果你的目标是不涉及自定义着色的普通 Three.js 场景搭建，为一门着色语言装一整个知识型 skill 就是大材小用。

查看 排行榜 了解更多 skill。