threejs-shaderslisted
Install: claude install-skill CypherPoet/THREE-JS-APOD-Air-and-Space-Museum
# 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.