Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, n

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 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 REFERENCE.md Quick reference cheatsheet Key Concepts Import Pattern Node Materials Replace standard material properties with TSL nodes: Method Chaining TSL uses method chaining for operations: Custom Functions Use Fn() for reusable shader logic: 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 [Three.js TSL Wiki](https://github.com/mrdoob/three.js/wiki/Three.js Shading Language) [WebGPU Examples](https://github.com/mrdoob/three.js/tree/master/examples) (files prefixed with webgpu )

webgpu-threejs-tsl