Agent skill · design visual · cloudai-x
threejs-shaders
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
Why this skill is useful
Provides specific GLSL shader patterns and Three.js ShaderMaterial usage that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-07-09. 2,926 stars on the source repository.
What this skill does
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
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills cloudai-x/threejs-shaders