WebGPU Three.js with TSL

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 flow
• docs/materials.md - Node materials and all properties
• docs/compute-shaders.md - GPU compute with instanced arrays
• docs/post-processing.md - Built-in and custom effects
• docs/wgsl-integration.md - Custom WGSL functions
• docs/device-loss.md - Handling GPU device loss and recovery
• docs/limits-and-features.md - WebGPU device limits and optional features

Examples

• examples/basic-setup.js - Minimal WebGPU project
• examples/custom-material.js - Custom shader material
• examples/particle-system.js - GPU compute particles
• examples/post-processing.js - Effect pipeline
• examples/earth-shader.js - Complete Earth with atmosphere

Templates

• templates/webgpu-project.js - Starter project template
• templates/compute-shader.js - Compute shader template

Reference