Why a Library

A WebGL-to-WebGPU Concept Map's cover wall took about 30 lines of WebGPU for six rectangles, before a camera, a texture, a font or a click handler. A library supplies what every application rebuilds: a scene graph, cameras and controls, materials and lights, glTF loading, text, picking, resize and device-loss handling, and often a WebGL 2 fallback for the browsers of Browser Support in 2026 that lack WebGPU. Libraries also track the specification, so a renamed field or a new feature reaches you as a version bump.

Raw WebGPU still wins when the work is compute rather than scenes (Compute and Workgroups-Particles and Culling), when you need a custom pipeline no engine exposes, or when a few kilobytes matter. The libraries fall into four layers:

Where WebGPU libraries sit: engines and renderers, shader toolkits and helpers, and ML runtimes, all on one WebGPU API

Choose by the job: an engine for 3D scenes, PixiJS 313,967 for 2D, TypeGPU 320,420 and wgpu-matrix 481 to keep raw WebGPU code typed and short, and an ML runtime when the GPU should run a neural network.

Where WebGPU libraries sit: engines and renderers, shader toolkits and helpers, and ML runtimes, all on one WebGPU APIHTMLLive

<!doctype html>
<style>
  body { margin: 0; background: #f7f4ee; font: 14px system-ui, sans-serif; }
  .stage { position: relative; width: 100%; max-width: 600px; }
  .stage canvas { display: block; width: 100%; }
  .stage canvas + canvas { position: absolute; inset: 0; pointer-events: none; }
</style>
<div class="stage">
  <canvas id="view" width="600" height="370"></canvas>
  <canvas id="labels" width="600" height="370"></canvas>
</div>
<script>
const canvas = document.getElementById('view');
const ink = document.getElementById('labels').getContext('2d');

function showMessage(text) {                     // 2D fallback when WebGPU is missing
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#fbeaea'; ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#8a2b2b'; ctx.font = '18px system-ui, sans-serif'; ctx.textAlign = 'center';
  ctx.fillText(text, canvas.width / 2, canvas.height / 2);
}
function label(text, x, y, size = 12, color = '#2b2b2b', align = 'center', weight = '') {
  ink.font = `${weight} ${size}px system-ui, sans-serif`; ink.fillStyle = color; ink.textAlign = align; ink.fillText(text, x, y);
}

// layer name, colour, members; the bottom rows are the platform every layer shares
const layers = [
  ['Engines and renderers', [0.85, 0.91, 0.98], ['Three.js', 'Babylon.js', 'PixiJS (2D)', 'Orillusion']],
  ['Shader toolkits and helpers', [0.90, 0.95, 0.88], ['TypeGPU', 'wgpu-matrix', 'use.gpu']],
  ['ML runtimes', [0.96, 0.90, 0.96], ['ONNX Runtime Web', 'Transformers.js']]];
const supplies = ['scene graph', 'cameras, controls', 'materials, lights', 'glTF loading', 'text, picking', 'resize, device loss', 'WebGL 2 fallback'];

async function main() {
  const adapter = await navigator.gpu?.requestAdapter();
  if (!adapter) return showMessage('WebGPU is not available in this browser');
  const device = await adapter.requestDevice();
  const context = canvas.getContext('webgpu');
  const format = navigator.gpu.getPreferredCanvasFormat();
  context.configure({ device, format });

  const boxes = [];
  layers.forEach(([name, c, members], row) => {
    const y = 18 + row * 72;
    boxes.push([10, y, 400, 62, ...c, 10]);
    label(name, 20, y + 18, 12.5, '#222', 'left', 'bold');
    const w = (380 - (members.length - 1) * 8) / members.length;
    members.forEach((m, k) => { boxes.push([20 + k * (w + 8), y + 26, w, 28, 1, 1, 1, 7]); label(m, 20 + k * (w + 8) + w / 2, y + 44, 11.5, '#333'); });
  });
  boxes.push([10, 240, 400, 40, 0.98, 0.90, 0.72, 10]);          // the one API underneath
  label('WebGPU API (raw WebGPU: compute, custom pipelines, tiny bundles)', 210, 265, 12, '#222', 'center', 'bold');
  boxes.push([10, 290, 195, 34, 0.88, 0.88, 0.88, 9], [215, 290, 195, 34, 0.88, 0.88, 0.88, 9]);
  label('Dawn (Chromium)', 107, 311, 12); label('wgpu (Firefox), WebKit', 312, 311, 12);
  // What a library supplies that every app would otherwise rebuild
  boxes.push([424, 18, 166, 306, 1, 1, 1, 10]);
  label('A library supplies', 507, 40, 12.5, '#222', 'center', 'bold');
  supplies.forEach((s, i) => { boxes.push([436, 54 + i * 36, 10, 10, 0.16, 0.56, 0.30, 5]); label(s, 454, 63 + i * 36, 11.5, '#333', 'left'); });
  label('The cover wall took ~30 lines of raw WebGPU for six rectangles, before any camera, texture, font or click.', 10, 348, 11.5, '#444', 'left');
  label('Choose by the job: an engine for 3D, PixiJS for 2D, TypeGPU and wgpu-matrix for typed raw code, an ML runtime for models.', 10, 364, 10.5, '#555', 'left');

  const module = device.createShaderModule({ code: `
    struct Box { rect: vec4f, style: vec4f }          // style: r, g, b, corner radius
    @group(0) @binding(0) var<storage> boxes: array<Box>;
    struct Out { @builtin(position) pos: vec4f, @location(0) local: vec2f,
                 @location(1) @interpolate(flat) i: u32 }
    @vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> Out {
      let corner = vec2f(f32(v & 1), f32(v >> 1));   // triangle-strip corners
      let r = boxes[i].rect;
      let px = r.xy + corner * r.zw;
      return Out(vec4f(px.x / 300 - 1, 1 - px.y / 185, 0, 1), corner * r.zw, i);
    }
    @fragment fn fs(in: Out) -> @location(0) vec4f {
      let b = boxes[in.i];
      let half = b.rect.zw / 2;
      let q = abs(in.local - half) - half + b.style.w; // signed distance to a rounded box
      let d = length(max(q, vec2f(0))) + min(max(q.x, q.y), 0) - b.style.w;
      let a = clamp(0.5 - d, 0, 1);
      return vec4f(b.style.rgb * a, a);               // premultiplied alpha
    }` });
  const blend = { srcFactor: 'one', dstFactor: 'one-minus-src-alpha' };
  const pipeline = device.createRenderPipeline({ layout: 'auto',
    vertex: { module }, primitive: { topology: 'triangle-strip' },
    fragment: { module, targets: [{ format, blend: { color: blend, alpha: blend } }] } });
  const data = new Float32Array(boxes.flat());
  const buffer = device.createBuffer({ size: data.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
  device.queue.writeBuffer(buffer, 0, data);
  const encoder = device.createCommandEncoder();
  const pass = encoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(),
    clearValue: [0.93, 0.91, 0.87, 1], loadOp: 'clear', storeOp: 'store' }] });
  pass.setPipeline(pipeline);
  pass.setBindGroup(0, device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [{ binding: 0, resource: { buffer } }] }));
  pass.draw(4, boxes.length);
  pass.end();
  device.queue.submit([encoder.finish()]);
}
main();
</script>

MENU