Write custom Three.js shaders - ShaderMaterial vs RawShaderMaterial, uniforms and built-in attributes, GLSL vertex/fragment structure, extending built-in materials, debugging, and performance.
---
name: threejs-shaders
description: Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
---
Build custom GLSL shaders in Three.js with correctly wired uniforms and attributes.
## How to use
1. Start from `ShaderMaterial` with a `uniforms` object (e.g. `time`, `color`), a `vertexShader`, and a `fragmentShader`.
2. Use `ShaderMaterial` to inherit Three.js built-ins (`projectionMatrix`, `modelViewMatrix`, `normalMatrix`, `position`, `normal`, `uv`); switch to `RawShaderMaterial` only when you must declare everything yourself.
3. Compute `gl_Position` in the vertex shader and `gl_FragColor` in the fragment shader; pass data vertex-to-fragment with `varying`.
4. Drive animation by updating uniforms in the render loop (`material.uniforms.time.value = clock.getElapsedTime()`).
5. Debug by visualizing values as color, and keep fragment-shader work cheap for performance.
Full skill & source: https://github.com/CloudAI-X/threejs-skills/tree/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-shaders