# webgpu-threejs-tsl

Guides an agent through Three.js work with WebGPU, TSL node materials, GPU compute shaders, and post-processing effects.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1600 installs · ★ 1257
- Author: dgreenheck
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/dgreenheck/webgpu-claude-skill/tree/HEAD/skills/webgpu-threejs-tsl/SKILL.md
- Updated: 2026-04-10
- HTML: https://affpapa.org/en/nevibecode/skills/webgpu-threejs-tsl

## What it does

This skill gives an agent reference material and examples for Three.js projects that use the WebGPU renderer. It covers TSL syntax, node materials, reusable shader functions, GPU compute, post-processing, and custom WGSL integration.

Its documentation includes materials, WebGPU device limits and recovery after device loss. Examples cover basic setup, custom materials, a particle system, an effect pipeline, and an Earth scene with an atmosphere. Project and compute-shader templates are included too.

Three.js must be imported from `three/webgpu`, with TSL functions from `three/tsl`. That matters when moving an existing scene to WebGPU.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/webgpu-threejs-tsl/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/webgpu-threejs-tsl/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/webgpu-threejs-tsl/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/webgpu-threejs-tsl/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dgreenheck/webgpu-claude-skill webgpu-threejs-tsl
```

2. **Manually: put the files in place**
- File: `.github/skills/webgpu-threejs-tsl/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/dgreenheck/webgpu-claude-skill --path skills/webgpu-threejs-tsl
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/webgpu-threejs-tsl/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/dgreenheck/webgpu-claude-skill/tree/HEAD/skills/webgpu-threejs-tsl/SKILL.md

## When to use it
- set up `WebGPURenderer` in a Three.js project
- build a TSL node material
- move GLSL shader logic to TSL
- write a GPU compute shader for instanced arrays
- create a post-processing effect pipeline

## Example prompts
- Set up a Three.js scene with `WebGPURenderer` and a TSL material.
- Create a GPU compute shader for a particle system.
- Help me migrate a GLSL material to TSL using a reusable `Fn()` function.

## Similar
- [threejs-fundamentals](https://affpapa.org/en/nevibecode/skills/threejs-fundamentals.md) — skill · 17400 installs
- [threejs-shaders](https://affpapa.org/en/nevibecode/skills/threejs-shaders.md) — skill · 15600 installs
- [threejs](https://affpapa.org/en/nevibecode/skills/mrgoonie-threejs.md) — skill · 1200 installs
- [pixijs-custom-rendering](https://affpapa.org/en/nevibecode/skills/pixijs-custom-rendering.md) — skill · 5700 installs
- [threejs-scene-setup](https://affpapa.org/en/nevibecode/skills/threejs-scene-setup.md) — skill · 5500 installs
- [threejs-webgl](https://affpapa.org/en/nevibecode/skills/threejs-webgl.md) — skill · 4600 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md