THREE.JS GLSL
GRADIENT SHADER CUBE

What Is a Shader?

Three.js is a JavaScript library that wraps WebGL, the browser API for GPU accelerated graphics. Most of the time you pick a built-in material such as MeshStandardMaterial. When you want full control over how pixels look, you write shaders: small programs in the OpenGL Shading Language (GLSL) that run on the graphics card.

A vertex shader runs once per corner and decides where it lands on screen. A fragment shader runs once per pixel and decides its color. New to Three.js? Start with the spinning cube starter or rendering a 3D cube.

Code Breakdown

1. Create a ShaderMaterial with a time uniform

const material = new THREE.ShaderMaterial({
  uniforms: { u_time: { value: 0.0 } },
  vertexShader, fragmentShader
});

Uniforms are values JavaScript shares with the shader. u_time is the clock that drives the animation.

2. Project vertices in the vertex shader

void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

Three.js injects position, modelViewMatrix and projectionMatrix automatically, so this one line is all the cube needs.

3. Paint a gradient in the fragment shader

uniform float u_time;
void main() {
  gl_FragColor = vec4(
    sin(u_time + gl_FragCoord.x * 0.01) * 0.5 + 0.5,
    sin(u_time + gl_FragCoord.y * 0.01) * 0.5 + 0.5,
    sin(u_time) * 0.5 + 0.5,
    1.0);
}

Each channel is a sine wave remapped from -1..1 to 0..1. Red varies across the screen horizontally, green vertically, and blue pulses over time.

4. Advance time in the render loop

material.uniforms.u_time.value += 0.05;
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);

Updating the uniform each frame moves the waves. For more shader motion ideas see animating spheres with fragment shaders, or make the cube clickable with raycaster selection.

The Full Code

Paste this module into a page that has the same import map as this one, or view the original GitHub Gist.

Copy Code

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x000000, 1);
document.body.style.margin = '0';
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.autoRotate = true;

const material = new THREE.ShaderMaterial({
  uniforms: { u_time: { value: 0.0 } },
  vertexShader: `
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }`,
  fragmentShader: `
    uniform float u_time;
    void main() {
      gl_FragColor = vec4(
        sin(u_time + gl_FragCoord.x * 0.01) * 0.5 + 0.5,
        sin(u_time + gl_FragCoord.y * 0.01) * 0.5 + 0.5,
        sin(u_time) * 0.5 + 0.5,
        1.0);
    }`
});

const cube = new THREE.Mesh(new THREE.BoxGeometry(3, 3, 3), material);
scene.add(cube);

const grid = new THREE.GridHelper(100, 40);
grid.position.y = -4;
scene.add(grid);

function render() {
  requestAnimationFrame(render);
  controls.update();
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  material.uniforms.u_time.value += 0.05;
  renderer.render(scene, camera);
}
render();

addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

More Tutorials