Webgpu Threejs Tsl

If you're working with Three.js and want to use the new WebGPU renderer, this skill gets you up to speed with TSL, which lets you write shaders in JavaScript instead of raw GLSL or WGSL strings. It covers the basics like setting up node materials, compute shaders for things like particle systems, and post-processing pipelines. The examples are practical (there's a full Earth shader with atmosphere) and the docs explain the method chaining syntax that takes some getting used to. Honestly, TSL is still evolving and the official documentation is sparse, so having the core concepts, common patterns, and GPU device limits reference in one place saves a lot of digging through GitHub issues.

skills.sh installs: 1.7K
GitHub stars: 1.3K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl --agent claude-code

Installs into .claude/skills of the current project.

Files

WebGPU Three.js with TSL

TSL (Three.js Shading Language) is a node-based shader abstraction that lets you write GPU shaders in JavaScript instead of GLSL/WGSL strings.

Quick Start

import * as THREE from 'three/webgpu';
import { color, time, oscSine } from 'three/tsl';

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

const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = color(0xff0000).mul(oscSine(time));