webgpu-threejs-tsl_skill

Overview

This skill is a practical guide for building Three.js applications that target WebGPU and use TSL (Three.js Shading Language). It bundles setup patterns, node material techniques, compute shader templates, post-processing pipelines, and WGSL integration tips. The content is focused on actionable code patterns and ready-to-use examples to accelerate WebGPU development with Three.js.

How this skill works

The skill inspects common WebGPU renderer setup patterns and shows the required import path and initialization steps for three/webgpu. It demonstrates how to replace standard materials with TSL node materials, compose shader logic via method chaining and Fn() helpers, and connect compute shaders and post-processing stages. Included templates and examples illustrate GPU particle systems, custom materials, and WGSL interop for lower-level shader code.

When to use it

• Starting a new Three.js project that targets WebGPU
• Replacing GLSL string shaders with TSL node materials
• Implementing GPU-based particle systems or compute pipelines
• Building custom post-processing effect chains for WebGPU
• Migrating existing Three.js shaders to WGSL or TSL

Best practices

• Always import from 'three/webgpu' and import TSL helpers from 'three/tsl' to avoid runtime mismatches
• Prefer node materials for modular, reusable shader logic and use Fn() for shared functions
• Keep time, oscillators, and common inputs as uniform nodes to enable live updates and reusability
• Use provided templates for compute shaders and post-processing as starting points to avoid boilerplate
• Test WGSL snippets independently before integrating them into TSL node graphs to simplify debugging

Example use cases

• Minimal WebGPU scene with MeshStandardNodeMaterial and animated color driven by time
• GPU particle system using compute shader template and instanced rendering
• Custom terrain or water shader built from TSL nodes with vertex displacement
• Post-processing pipeline combining built-in and custom effects for bloom, tone mapping, or color grading
• Earth shader example with atmosphere, lights, and layered node materials