Three.js — Custom GLSL Shaders

Drop below the built-in materials and write the GPU program yourself. The vertex shader moves every vertex (here, a noise displacement); the fragment shader colors every pixel. Uniforms are the bridge from JS — drive them live.

Uniforms (JS → GPU)

Displacement 0.25

Frequency 3.0

Speed 1.00

// vertex shader — runs per vertex
uniform float uTime, uAmp, uFreq;
varying float vDisp;
void main() {
  float d = sin(position.x*uFreq + uTime)
          * sin(position.y*uFreq + uTime)
          * sin(position.z*uFreq + uTime);
  vDisp = d;
  vec3 p = position + normal * d * uAmp;  // push along normal
  gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
}

A ShaderMaterial takes your vertexShader, fragmentShader, and a uniforms object. You update uniforms.uTime.value each frame — that single number is how JS animates a program running on thousands of GPU cores at once.