一项代理技能，用于使用 TSL（Three.js 着色语言）开发支持 WebGPU 的 Three.js 应用。

** 最后更新：** 2026年4月1日 — 与Three.js r183+ API 变更保持一致。

概述

这项技能为克劳德提供了全面的知识，涵盖：

• 使用WebGPU渲染器设置Three.js
• 使用 TSL（Three.js 着色语言）编写着色器
• 创建基于节点的材料
• 构建GPU计算着色器
• 实现后期处理效果
• 集成自定义WGSL代码

安装

该仓库以两种格式发布相同内容，因此既适用于Claude代码（作为代理技能）和光标（作为项目规则）。Claude技能在skills/下是真实的来源;光标规则在.cursor/rules/下是薄薄的垫片，用来引用@file，因此编辑会自动流畅。

克劳德·科德

或者手动将skills/webgpu-threejs-tsl文件夹复制到：

• 全球：~/.claude/skills/
• 项目： /.claude/skills/

光标

克隆这个仓库并直接打开——光标会自动拿起.cursor/rules/。

要在自己的项目中使用规则，将两个目录复制到你的项目根节点，保留路径：

“。

WebGPU Three.js TSL Skill

An Agent Skill for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language).

Last updated: April 1, 2026 — aligned with Three.js r183+ API changes.

Overview

This skill provides Claude with comprehensive knowledge for:

• Setting up Three.js with WebGPU renderer
• Writing shaders using TSL (Three.js Shading Language)
• Creating node-based materials
• Building GPU compute shaders
• Implementing post-processing effects
• Integrating custom WGSL code

Installation

This repo ships the same content in two formats so it works in both Claude Code (as an Agent Skill) and Cursor (as project rules). The Claude skill under skills/ is the source of truth; the Cursor rules under .cursor/rules/ are thin shims that @file-reference those same docs, so edits flow through automatically.

Claude Code

# Install from this repository
/skill install webgpu-threejs-tsl@/webgpu-claude-skill

Or manually copy the skills/webgpu-threejs-tsl folder to:

• Global: ~/.claude/skills/
• Project: /.claude/skills/

Cursor

Clone this repo and open it directly — Cursor picks up .cursor/rules/ automatically.

To use the rules in your own project, copy both directories into your project root, preserving the paths:

your-project/
├── .cursor/rules/              # from this repo
└── skills/webgpu-threejs-tsl/  # from this repo (referenced by the rules)

The .mdc files use @file references pointing at skills/webgpu-threejs-tsl/..., so the skills/ directory must travel with them. If you’d rather not keep the skills/ folder, inline the referenced content into each .mdc file.

The rules are scoped by globs and auto-attach only on relevant files:

• webgpu-threejs-tsl.mdc — entry point, JS/TS files
• compute-shaders.mdc — files matching *compute* or *particle*
• post-processing.mdc — files matching *post*, *effect*, *bloom*
• wgsl-integration.mdc — .wgsl files and *wgsl* JS/TS
• device-loss-and-limits.mdc — files matching *renderer* or *webgpu*

Skill Structure

skills/webgpu-threejs-tsl/
├── SKILL.md                    # Entry point with overview
├── REFERENCE.md                # Quick reference cheatsheet
├── docs/
│   ├── core-concepts.md        # Types, operators, uniforms, control flow
│   ├── materials.md            # Node materials and properties
│   ├── compute-shaders.md      # GPU compute documentation
│   ├── post-processing.md      # Built-in and custom effects
│   ├── wgsl-integration.md     # Custom WGSL functions
│   └── device-loss.md          # GPU device loss handling and recovery
├── examples/
│   ├── basic-setup.js          # Minimal WebGPU project
│   ├── custom-material.js      # Custom shader material
│   ├── particle-system.js      # GPU compute particles
│   ├── post-processing.js      # Effect pipeline