Three.js Shaders
ShaderMaterial
javascript
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
color: { value: new THREE.Color(0xff0000) },
texture1: { value: texture },
},
vertexShader: `
varying vec2 vUv;
uniform float time;
void main() {
vUv = uv;
vec3 pos = position;
pos.z += sin(pos.x * 10.0 + time) * 0.1;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`,
fragmentShader: `
varying vec2 vUv;
uniform vec3 color;
uniform sampler2D texture1;
void main() {
vec4 texColor = texture2D(texture1, vUv);
gl_FragColor = vec4(color * texColor.rgb, 1.0);
}
`,
});
// Update in loop
material.uniforms.time.value = clock.getElapsedTime();
Built-in Uniforms (ShaderMaterial)
glsl
// Automatically provided uniform mat4 modelMatrix; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; uniform mat4 viewMatrix; uniform mat3 normalMatrix; uniform vec3 cameraPosition; attribute vec3 position; attribute vec3 normal; attribute vec2 uv;
Common Patterns
Fresnel Effect
glsl
vec3 viewDir = normalize(cameraPosition - vWorldPosition); float fresnel = pow(1.0 - dot(viewDir, vNormal), 3.0);
Vertex Displacement
glsl
vec3 pos = position; pos.z += sin(pos.x * 5.0 + time) * amplitude;
Noise
glsl
float random(vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
Extending Built-in Materials
javascript
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
material.onBeforeCompile = (shader) => {
shader.uniforms.time = { value: 0 };
material.userData.shader = shader;
shader.vertexShader = "uniform float time;\n" + shader.vertexShader;
shader.vertexShader = shader.vertexShader.replace(
"#include <begin_vertex>",
`#include <begin_vertex>
transformed.y += sin(position.x * 10.0 + time) * 0.1;`
);
};
// Update
if (material.userData.shader) {
material.userData.shader.uniforms.time.value = clock.getElapsedTime();
}
GLSL Functions
glsl
// Math abs, sign, floor, ceil, fract, mod, min, max, clamp mix(a, b, t), step(edge, x), smoothstep(e0, e1, x) sin, cos, tan, pow, sqrt, exp, log // Vector length, distance, dot, cross, normalize, reflect, refract