From webgpu-threejs-tsl
Guides WebGPU renderer setup in Three.js with TSL for node shaders, compute shaders, post-processing effects, and WGSL integration.
How this skill is triggered — by the user, by Claude, or both
Slash command
/webgpu-threejs-tsl:webgpu-threejs-tslThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.jsTSL (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_)npx claudepluginhub dgreenheck/webgpu-claude-skill --plugin webgpu-threejs-tslWrites custom shaders for Three.js using GLSL or TSL for WebGL/WebGPU. Covers debugging, post-processing, noise functions, procedural textures, and performance optimization.
Guides Three.js shader creation with GLSL, ShaderMaterial, uniforms for custom visual effects, vertex deformation, fragment shaders, and material extensions.
Builds interactive 3D web scenes with Three.js using WebGL/WebGPU. Guides on scenes, cameras, renderers, geometries, materials, meshes, lights, animations, and OrbitControls.