threejs-shaders

# Three.js Shaders ## When to Use - You need custom shader logic in Three.js. - The task involves `ShaderMaterial`, uniforms, GLSL, vertex deformation, or fragment-based effects. - You are extending material behavior beyond what built-in materials provide. ## Quick Start ```javascript import * as THREE from "three"; const material = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, color: { value: new THREE.Color(0xff0000) }, }, vertexShader: ` void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform vec3 color; void main() { gl_FragColor = vec4(color, 1.0); } `, }); // Update in animation loop material.uniforms.time.value = clock.getElapsedTime(); ``` ## ShaderMaterial vs RawShaderMaterial ### ShaderMaterial Three.js provides built-in uniforms and attributes. ```javascript const material = new THREE.ShaderMaterial({ vertexShader: ` // Built-in uniforms available: // uniform mat4 modelMatrix; // uniform mat4 modelViewMatrix; // uniform mat4 projectionMatrix; // uniform mat4 viewMatrix; // uniform mat3 normalMatrix; // uniform vec3 cameraPosition; // Built-in attributes available: // attribute vec3 position; // attribute vec3 normal; // attribute vec2 uv; void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` void main() { ...