threejs-shaders

Overview

Three.js Shaders is a Claude Code skill that provides comprehensive guidance for writing custom GLSL shaders in Three.js using ShaderMaterial and RawShaderMaterial. It covers uniform types, vertex and fragment shaders, and the differences between built-in material convenience and full manual control for creating custom visual effects.

Key Features

• ShaderMaterial vs RawShaderMaterial - Clear comparison between ShaderMaterial (with built-in uniforms and attributes) and RawShaderMaterial (full manual control requiring explicit precision and attribute declarations)
• Comprehensive Uniform Types - Support for floats, integers, vectors (vec2/vec3/vec4), colors, matrices (mat3/mat4), textures, cube textures, and arrays with proper Three.js value mapping
• Vertex Shader Patterns - Access built-in uniforms (modelMatrix, projectionMatrix, normalMatrix, cameraPosition) and attributes (position, normal, uv) for vertex transformations
• Fragment Shader Basics - Write custom fragment shaders with uniform-driven color, time-based animations, and texture sampling
• Animation Integration - Update shader uniforms in the render loop using clock.getElapsedTime() for time-based visual effects

Who is this for?

This skill is designed for Three.js developers who need to create custom visual effects, modify vertex positions, write fragment shaders, or extend built-in materials with GLSL code. It is particularly useful for creative developers building visually rich 3D web experiences that go beyond the capabilities of standard Three.js materials.