threejs-shaderslisted

# Three.js Shaders ## 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() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `, }); ``` ### RawShaderMaterial Full control - you define everything. ```javascript const material = new THREE.RawShaderMaterial({ uniforms: { projectionMatrix: { value: camera.