From webgpu-threejs-tsl
Guides WebGPU renderer setup in Three.js with TSL for node shaders, compute shaders, post-processing effects, and WGSL integration.
npx claudepluginhub dgreenheck/webgpu-claude-skill --plugin webgpu-threejs-tslThis skill uses the workspace's default tool permissions.
TSL (Three.js Shading Language) is a node-based shader abstraction that lets you write GPU shaders in JavaScript instead of GLSL/WGSL strings.
REFERENCE.mddocs/compute-shaders.mddocs/core-concepts.mddocs/device-loss.mddocs/limits-and-features.mddocs/materials.mddocs/post-processing.mddocs/wgsl-integration.mdexamples/basic-setup.jsexamples/custom-material.jsexamples/earth-shader.jsexamples/particle-system.jsexamples/post-processing.jstemplates/compute-shader.jstemplates/webgpu-project.jsGuides three.js node-based shading with Nodes API, NodeMaterial, TSL, WebGPURenderer pairing, and PostProcessing for graph shaders, TSL builtins, compute nodes, WebGPU pipelines.
Writes custom Three.js shaders using GLSL or TSL for WebGL/WebGPU visual effects, debugs issues, builds post-processing pipelines, implements noise functions, procedural textures, and custom materials.
Builds custom Three.js shaders using GLSL, ShaderMaterial, and uniforms for visual effects, vertex deformation, fragment shaders, and material extensions.
Share bugs, ideas, or general feedback.
TSL (Three.js Shading Language) is a node-based shader abstraction that lets you write GPU shaders in JavaScript instead of GLSL/WGSL strings.
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));
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 featuresexamples/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 atmospheretemplates/webgpu-project.js - Starter project templatetemplates/compute-shader.js - Compute shader templateREFERENCE.md - Quick reference cheatsheet// Always use the WebGPU entry point
import * as THREE from 'three/webgpu';
import { /* TSL functions */ } from 'three/tsl';
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
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)
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);
});
webgpu_)