Three.js Shader Development

Custom shaders for Three.js — from simple material overrides to full WebGPU node graphs. Covers the complete workflow: choosing an approach, writing code, debugging, and shipping.

When to Use This Skill

• Custom materials that go beyond built-in Three.js materials
• Visual effects: noise, dissolve, Fresnel, hologram, water, cel shading, chromatic aberration
• Post-processing pipelines with pmndrs/postprocessing
• Procedural textures and geometry displacement
• Raymarching and SDF-based scenes
• Porting GLSL shaders into TSL for WebGPU compatibility

TSL vs GLSL — Choose Before Writing Anything