Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.

Three.js Shaders Quick Start ShaderMaterial vs RawShaderMaterial ShaderMaterial Three.js provides built in uniforms and attributes. RawShaderMaterial Full control you define everything. Uniforms Uniform Types GLSL Declarations Updating Uniforms Varyings Pass data from vertex to fragment shader. Common Shader Patterns Texture Sampling Vertex Displacement Fresnel Effect Noise Based Effects Gradient Rim Lighting Dissolve Effect Extending Built in Materials onBeforeCompile Modify existing material shaders. Common Injection Points GLSL Built in Functions Math Functions Vector Functions Texture Functions Common Material Properties Shader Includes Using Three.js Shader Chunks External Shader Files Instanced Shaders Debugging Shaders Performance Tips 1. Minimize uniforms : Group related values into vectors 2. Avoid conditionals : Use mix/step instead of if/else 3. Precalculate : Move calculations to JS when possible 4. Use textures : For complex functions, use lookup tables 5. Limit overdraw : Avoid transparent objects when possible See Also threejs materials Built in material types threejs postprocessing Full screen shader effects threejs textures Texture sampling in shaders

threejs-shaders