Builderoom
登录注册
作品形态766AI技能 & 智能体50人工智能39提示词工程与 Skill 管理37技能封装35Skill广场34提示词模板17提示词分享2

2026年9月26日

WebGPU Three.js TSL Skill

人工智能提示词工程与 Skill 管理0
获取资源

为 Claude Code 和 Cursor 提供使用 TSL 开发 WebGPU Three.js 应用的知识与规则。

MITClaude CodeCursor文本代码
Skill广场技能封装
安装 / 调用方式bash
```bash
# Install from this repository
/skill install webgpu-threejs-tsl@<your-github-username>/webgpu-claude-skill
```

Or manually copy the `skills/webgpu-threejs-tsl` folder to:
- **Global**: `~/.claude/skills/`
- **Project**: `<project>/.claude/skills/`
调用示例json
```javascript
import * as THREE from 'three/webgpu';
import { color, time, oscSine, normalWorld, cameraPosition, positionWorld, Fn, float } from 'three/tsl';

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

// TSL material with animated fresnel
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));
})();
```

产品信息

形态
AI技能 & 智能体
分类
人工智能 › 提示词工程与 Skill 管理
定价
开源
平台
Claude Code · Cursor
授权协议
MIT
首发日期
2026年9月26日
收录时间
2026年9月26日
官网
github.com

概览

GitHubGitHub

## 简介 WebGPU Three.js TSL Skill 是一个 Agent Skill，旨在为 AI 编程助手（如 Claude Code 和 Cursor）注入关于 WebGPU、Three.js 以及 TSL（Three.js Shading Language）的系统性知识。它帮助开发者在使用 AI 辅助编码时，获得准确的 API 用法、代码模式和最佳实践。 ## 解决什么问题 在开发基于 WebGPU 的 Three.js 应用时，TSL 的 API 与传统 GLSL 着色器差异较大，且相关文档较为分散。AI 模型可能缺乏最新的 API 变更知识（例如 r178+ 中 `PI2` 被弃用、法线变量重命名等）。该 Skill 通过结构化的参考文档和示例，减少 AI 生成错误代码的概率。 ## 主要能力 - **核心概念**：涵盖 TSL 的类型与构造函数（float、vec2、vec3、vec4、color、uniform）、向量 swizzling、运算符、数学函数、控制流（If、Loop、Fn）以及时间与动画处理。 - **材质系统**：支持所有节点材质类型及其属性（颜色、粗糙度、金属度），包括物理材质特性（clearcoat、transmission、iridescence）和顶点位移。 - **计算着色器**：提供实例化数组缓冲区、并行物理模拟、粒子系统、原子操作与屏障的相关知识。 - **后处理效果**：内置 bloom、blur、FXAA、DOF 等效果的实现方式，支持使用 `Fn()` 编写自定义效果、效果链式调用及多渲染目标。 - **WGSL 集成**：通过 `wgslFn()` 引入自定义 WGSL 函数，支持 TSL 与 WGSL 混合使用及性能优化。 - **设备丢失处理**：包含 GPU 设备丢失的检测、恢复策略、状态保存与还原方法。 ## 适用对象 适合使用 Claude Code 或 Cursor 进行 WebGPU 和 Three.js 开发的工程师，尤其是需要编写 TSL 着色器、GPU 计算逻辑或后处理管线的场景。推荐搭配 Three.js r171 及以上版本使用，内容已对齐至 r183+ 的 API 变更。

功能特性

  • TSL 核心概念支持：提供 float、vec、color、uniform 等类型及控制流的完整知识。
  • 节点材质编写：涵盖节点材质属性配置及 clearcoat、transmission 等物理特性。
  • GPU 计算着色器：支持粒子系统、并行物理模拟、原子操作与屏障的实现指导。
  • 后处理管线构建：包含 bloom、FXAA、DOF 等内置效果及自定义效果链式调用。
  • WGSL 代码集成：通过 wgslFn() 实现自定义 WGSL 函数与 TSL 的混合使用。
  • 设备丢失与恢复：提供 GPU 设备丢失检测、状态保存与恢复策略的参考。
  • 双编辑器兼容：同一套内容同时支持 Claude Code 的 Agent Skill 和 Cursor 的项目规则。
  • 版本变更对齐：内容已对齐 Three.js r183+ API，并标注了 r171+ 和 r178+ 的变更。

版本更新

新版本提醒我

首个版本 · WebGPU Three.js TSL Skill

Q&A

如何在 Claude Code 中安装这个 Skill？由 AI 生成
可以通过命令 `/skill install webgpu-threejs-tsl@<your-github-username>/webgpu-claude-skill` 安装，或者手动将 `skills/webgpu-threejs-tsl` 文件夹复制到全局目录 `~/.claude/skills/` 或项目目录 `<project>/.claude/skills/` 下。
如何在 Cursor 中使用这些规则？由 AI 生成
克隆仓库后直接在 Cursor 中打开即可自动加载 `.cursor/rules/`。若要在自己的项目中使用，需将 `.cursor/rules/` 和 `skills/webgpu-threejs-tsl/` 两个目录一同复制到项目根目录，因为规则文件通过 `@file` 引用了 skills 目录下的文档。
这个 Skill 推荐的 Three.js 版本是什么？由 AI 生成
推荐使用 Three.js r171 及以上版本。Skill 内容最后更新于 2026 年 4 月 1 日，已对齐 r183+ 的 API 变更。r178+ 中 `PI2` 已弃用需改用 `TWO_PI`，部分法线变量也已重命名。
Cursor 中的规则是如何按文件类型生效的？由 AI 生成
规则通过 glob 模式限定作用域：`webgpu-threejs-tsl.mdc` 作用于 JS/TS 文件；`compute-shaders.mdc` 匹配含 compute 或 particle 的文件；`post-processing.mdc` 匹配含 post、effect、bloom 的文件；`wgsl-integration.mdc` 匹配 .wgsl 文件及含 wgsl 的 JS/TS 文件；`device-loss-and-limits.mdc` 匹配含 renderer 或 webgpu 的文件。
目标浏览器兼容性如何？由 AI 生成
支持 Chrome 113+、Edge 113+，Firefox 需在 flag 后启用，Safari 处于 WebGPU 预览阶段。
获取资源
收藏

这个产品还没有主理人

由平台收录或原作者已注销。如果它是你的作品，证明与它的关系后即可成为主理人。

认领这个产品

同类产品