// Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, node materials, compute shaders, post-processing, and WGSL integration. Use when working with Three.js WebGPU, TSL shaders, or GPU compute pipelines.
| name | webgpu-threejs-tsl |
| description | Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, node materials, compute shaders, post-processing, and WGSL integration. Use when working with Three.js WebGPU, TSL shaders, or GPU compute pipelines. |
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 recoveryexamples/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_)Builds simple Three.js web apps with scene setup, lighting, geometry, materials, animation, and responsive rendering. Use when creating or prototyping 3D web scenes with modern Three.js (r150+).
Use when working with the 1Password CLI (`op` command) for secrets management, retrieving API keys, injecting secrets into development environments, or any task involving 1Password vault operations. Triggers on: "1password", "op command", "secrets management", "api keys from vault", "op run", "op read", "service account token".
Create algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use when users request generative art, algorithmic art, flow fields, or particle systems. Create original works rather than copying existing artists.
Use when starting creative work (features, components, functionality, or behavior changes) to clarify user intent, requirements, and design before implementation.
Helps users discover and install agent skills. Use when they ask "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities with installable skills.
A set of resources for writing internal communications in company-preferred formats. Use when asked to draft status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, or project updates.