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));
Skill Contents
Documentation
docs/core-concepts.md - Types, operators, uniforms, control flowdocs/materials.md - Node materials and all propertiesdocs/compute-shaders.md - GPU compute with instanced arraysdocs/post-processing.md - Built-in and custom effectsdocs/wgsl-integration.md - Custom WGSL functionsdocs/device-loss.md - Handling GPU device loss and recoverydocs/limits-and-features.md - WebGPU device limits and optional features
Examples
examples/basic-setup.js - Minimal WebGPU projectexamples/custom-material.js - Custom shader materialexamples/particle-system.js - GPU compute particlesexamples/post-processing.js - Effect pipelineexamples/earth-shader.js - Complete Earth with atmosphere
Templates
templates/webgpu-project.js - Starter project templatetemplates/compute-shader.js - Compute shader template
Reference
REFERENCE.md - Quick reference cheatsheet
Key Concepts
Import Pattern
// Always use the WebGPU entry point
import * as THREE from 'three/webgpu';
import { /* TSL functions */ } from 'three/tsl';
Node Materials
Replace standard material properties with TSL nodes:
material.colorNode = texture(map); // instead of material.map
material.roughnessNode = float(0.5); // instead of material.roughness
material.positionNode = displaced; // vertex displacement
Method Chaining
TSL uses method chaining for operations:
// Instead of: sin(time * 2.0 + offset) * 0.5 + 0.5
time.mul(2.0).add(offset).sin().mul(0.5).add(0.5)
Custom Functions
Use Fn() for reusable shader logic:
const fresnel = Fn(([power = 2.0]) => {
const nDotV = normalWorld.dot(viewDir).saturate();
return float(1.0).sub(nDotV).pow(power);
});
When to Use This Skill
- Setting up Three.js with WebGPU renderer
- Creating custom shader materials with TSL
- Writing GPU compute shaders
- Building post-processing pipelines
- Migrating from GLSL to TSL
- Implementing visual effects (particles, water, terrain, etc.)
Resources