Build WebGPU-enabled Three.js apps with TSL (Three.js Shading Language) - node materials, compute shaders, post-processing, and WGSL integration written in JavaScript instead of GLSL strings.
---
name: WebGPU Three.js (TSL)
description: Develop WebGPU-enabled Three.js apps using TSL (Three.js Shading Language) - renderer setup, node materials, compute shaders, post-processing, and WGSL integration. Use when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.
---
TSL is a node-based shader abstraction that lets you write GPU shaders in JavaScript rather than GLSL/WGSL strings, targeting the Three.js WebGPU renderer.
## How to use
1. Import from the WebGPU entry points: `import * as THREE from 'three/webgpu'` and TSL helpers from `three/tsl`. Create a `WebGPURenderer` and `await renderer.init()`.
2. Build node materials (e.g. `MeshStandardNodeMaterial`) and assign TSL nodes to properties: `colorNode`, `roughnessNode`, `positionNode` for vertex displacement.
3. Compose operations with method chaining - `time.mul(2).add(offset).sin()` - instead of GLSL expressions.
4. Extract reusable shader logic with `Fn(([params]) => ...)`; integrate custom WGSL where needed.
5. For GPU compute, post-processing pipelines, device-loss handling, and limits, follow the skill's bundled docs, examples, and templates.
Named tools: Three.js WebGPU renderer + TSL. See the Three.js TSL wiki and the `webgpu_*` examples in the Three.js repo.
Full skill & source: https://github.com/dgreenheck/webgpu-claude-skill/tree/main/skills/webgpu-threejs-tsl