ShaderMaterial base

Three.js ShaderMaterial Starter Generator

Choose a small shader pattern, preview it live, and copy a minimal ShaderMaterial setup for your scene.

Shader preview unavailable

The complete wave shader remains below. Copy it into a tested Three.js scene and start by rendering a solid fragment color.

Copy the starter code

Paste this into a Three.js scene that already has a renderer, scene, and camera.

const uniforms = {
  uTime: { value: 0 },
  uColorA: { value: new THREE.Color("#2f8f83") },
  uColorB: { value: new THREE.Color("#151b24") }
};

const material = new THREE.ShaderMaterial({
  uniforms,
  vertexShader: `varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}`,
  fragmentShader: `precision highp float;
uniform float uTime;
uniform vec3 uColorA;
uniform vec3 uColorB;
varying vec2 vUv;
void main() {
  float bands = sin((vUv.x * 8.0) + (uTime * 1.8));
  float mixValue = smoothstep(-0.6, 0.8, bands);
  gl_FragColor = vec4(mix(uColorA, uColorB, mixValue), 1.0);
}`
});

function animate(time) {
  uniforms.uTime.value = time * 0.001 * 1.2;
  renderer.render(scene, camera);
}

When this helps

Use this when you want a clean first ShaderMaterial before adding uniforms, textures, derivatives, or post-processing.

FAQ

ShaderMaterial gives you direct GLSL control. Start small, confirm the material compiles, then add one uniform at a time.

Starter checklist

Confirm the geometry has UVs, the fragment shader returns visible color, uTime changes in the render loop, and each uniform name matches the JavaScript side.