webgpu-claude-skill
为Claude提供开发WebGPU版Three.js应用的技能知识库
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：webgpu-claude-skill。 它的用途是：为Claude提供开发WebGPU版Three.js应用的技能知识库 完整的 Skill 内容见：https://321skill.com/skills/webgpu-claude-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我想用Three.js的WebGPU渲染器创建一个有大气散射效果的地球，并加入GPU计算的粒子光环。”，它会基于Skill中的`earth-shader.js`和`particle-system.js`示例，指导你设置WebGPU环境、使用TSL编写大气着色器，并构建基于计算着色器的粒子系统。
介绍
这个Skill旨在解决开发者在使用Three.js最新WebGPU渲染器和TSL（Three.js Shading语言）时遇到的知识断层问题。它提供了从环境搭建、核心概念到高级特效（如GPU计算着色器、后处理）的完整知识库，帮助开发者高效利用现代GPU能力。
使用方式非常灵活，既可以直接作为Claude Agent Skill安装，让AI助手在编码时调用相关知识；也可以作为Cursor编辑器的项目规则，在特定文件类型上自动提供代码提示和文档片段，实现上下文感知的辅助。
它非常适合正在或计划将3D Web应用从WebGL迁移到WebGPU的Three.js开发者、希望学习TSL着色器编程的图形程序员，以及任何需要构建高性能、视觉效果复杂的Web 3D项目的团队。
与市面上零散的WebGPU教程或通用的Three.js文档不同，这个Skill的核心区别在于其深度整合了Three.js r183+的API变化，并专门针对TSL和节点化材质系统进行结构化梳理，提供了即查即用的代码示例和最佳实践，而非泛泛的概念介绍。
核心特点
本Skill深度整合Three.js r183+的WebGPU API，并专门针对其新的TSL（Three.js Shading Language）和节点材质系统提供结构化知识，而非通用的WebGPU教程。它提供了可直接复用的项目模板和代码片段，覆盖从基础设置到GPU计算、后处理等高级主题。
注意事项
不适合仅使用传统WebGL或旧版本（r183之前）Three.js的纯概念学习项目。
常见问题
如何为现有Three.js项目启用WebGPU？
使用Skill提供的`basic-setup.js`模板，引入WebGPURenderer并配置适配器、设备。
TSL和GLSL/WGSL有什么区别？
TSL是Three.js内置的着色语言，语法类似GLSL但深度集成Three.js材质系统，可编译为WGSL在WebGPU运行。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/webgpu-claude-skill/raw/index.md 读取 webgpu-claude-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/webgpu-claude-skill/raw/index.md（查看排版版本）