3D & graphics

WebGL / WebGPU

The raw graphics APIs every 3D library is built on. You write shader programs that run directly on the GPU — code executed in parallel for every pixel and every vertex.

Demo 01

An animated plasma — pure WebGL, no library

This full-screen effect is two triangles covering the canvas, coloured by a fragment shader running on the GPU once per pixel, every frame. No Three.js, no Babylon — just the raw WebGL API and GLSL.

fragment shader · GLSL

Speed

// the fragment shader — runs on the GPU for every pixel
precision highp float;
uniform float u_time;
uniform vec2  u_res;
uniform float u_hue;
void main() {
  vec2 p = gl_FragCoord.xy / u_res;
  float v = sin(p.x*10. + u_time)
          + sin((p.y + p.x)*10. + u_time*1.3)
          + sin(length(p - .5)*20. - u_time*2.);
  vec3 col = .5 + .5*cos(u_hue + v + vec3(0.,2.,4.));
  gl_FragColor = vec4(col, 1.);
}

Demo 02

A spinning triangle — the "hello world" of GPUs

The classic first WebGL program: three vertices, a vertex shader that rotates them with a matrix, and a fragment shader that interpolates colour across the surface. This is what every 3D engine does under the hood, multiplied by millions.

vertex + fragment shader

// the vertex shader — runs once per vertex, rotates the triangle
attribute vec2 a_pos;
attribute vec3 a_col;
uniform float u_t;
varying vec3 v_col;
void main() {
  float s = sin(u_t), c = cos(u_t);
  vec2 r = mat2(c,-s,s,c) * a_pos;   // rotate
  v_col = a_col;                     // pass colour to fragment stage
  gl_Position = vec4(r, 0., 1.);
}

The successor

WebGPU — feature detection

WebGPU is the modern successor to WebGL: lower overhead, compute shaders, and a design that maps to today's GPUs (Vulkan / Metal / D3D12). We feature-detect it live in your browser right now:

checking…

WebGPU uses the WGSL shading language and an explicit pipeline. The plasma and triangle above use WebGL because it's supported everywhere; the same effects can be ported to WebGPU once support is universal.

Built with the raw WebGL API and hand-written GLSL shaders — no libraries at all. Both demos compile real vertex and fragment shaders, upload vertex buffers, and drive a requestAnimationFrame loop with live uniforms. WebGPU support is feature-detected via navigator.gpu. The shared CSS shell only styles the page chrome.

↑ All 64 tools