# WebGPU Three.js TSL — guide skill for backgrounds & shaders

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

TSL node materials, GPU compute, post-processing and WGSL for three.js WebGPURenderer, by the Three.js Roadmap author.

- **Type:** [Guide](https://skills.varg.ai/guides.md) · [Backgrounds & shaders](https://skills.varg.ai/browse/skills/shaders.md)
- **Slug:** `dgreenheck-webgpu-threejs-tsl`
- **Status:** beta
- **Publisher:** Dan Greenheck (community)
- **License:** MIT
- **Source:** https://github.com/dgreenheck/webgpu-claude-skill/tree/main/skills/webgpu-threejs-tsl
- **Works in:** Claude Code, Cursor
- **Requires:** three.js r183+ (three/webgpu and three/tsl), A WebGPU-capable browser
- **Cost:** Free — instructions only
- **Adoption:** 1,620 installs, 1,260 GitHub stars (GitHub + skills.sh, 2026-10-26)

## What it does

A reference skill for three.js's WebGPU path. It covers `WebGPURenderer` setup, TSL syntax and node materials, GPU compute with instanced arrays, TSL post-processing, custom WGSL functions, device loss and device limits. It ships runnable examples (particles, an Earth shader, a post-processing chain) and two project templates. It was updated for three r183+ API changes in April 2026, and JetBrains includes it in its curated, verified skills catalog. It is beta because the skill has not changed since 2026-04-02, outside our 180-day window, while TSL keeps changing. For video, note that its examples animate with TSL's built-in `time` node, which follows the renderer clock. When frames must be exact, drive a `uniform()` from composition time instead.

## Use when

- Set up three.js with WebGPURenderer
- Write TSL node materials or migrate GLSL to TSL
- GPU compute particles or simulations in three.js
- TSL post-processing or custom WGSL functions

## Not for

- WebGLRenderer projects built on GLSL ShaderMaterial (Three.js Skills' threejs-shaders covers both GLSL and TSL)

## Install

- Claude Code: `npx skills add https://github.com/dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl`

## More backgrounds & shaders skills

- [PixiJS Blend Modes](https://skills.varg.ai/skills/pixijs-blend-modes.md): Composite PixiJS v8 layers with add, multiply and screen, or advanced modes like overlay and color-burn.
- [PixiJS Custom Rendering](https://skills.varg.ai/skills/pixijs-custom-rendering.md): Write custom shaders, uniforms and batchers for PixiJS v8 that run on both WebGL and WebGPU.
- [PixiJS Filters](https://skills.varg.ai/skills/pixijs-filters.md): Add blur, displacement, color-matrix and custom GLSL/WGSL filters to PixiJS v8 scenes without killing FPS.
- [PixiJS Meshes](https://skills.varg.ai/skills/pixijs-meshes.md): Deform images with custom geometry in PixiJS v8: meshes, planes, ropes and 2.5D perspective corners.
- [PixiJS Particles](https://skills.varg.ai/skills/pixijs-particles.md): Render thousands of lightweight particles in PixiJS v8 with ParticleContainer and dynamic properties.