Workflow: Graphics Rendering Pipeline

Fresh 🌱

End-to-End Sequence

Phase 1: Initialization (Once)

// 1. GPU setup
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// 2. Canvas setup
const canvas = document.querySelector('canvas');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format });

// 3. Shader + pipeline (immutable after creation)
const module = device.createShaderModule({ code: WGSL_CODE });
const pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: { module, entryPoint: 'vs' },
  fragment: { module, entryPoint: 'fs', targets: [{ format }] },
  primitive: { topology: 'triangle-list' }
});

Phase 2: Per-Frame Rendering

function renderFrame(timestamp) {
  // Fresh encoder every frame
  const encoder = device.createCommandEncoder();

  const pass = encoder.beginRenderPass({
    colorAttachments: [{
      view: context.getCurrentTexture().createView(),
      loadOp: 'clear',
      clearValue: { r: 0, g: 0, b: 0, a: 1 },
      storeOp: 'store'
    }]
  });

  pass.setPipeline(pipeline);
  // pass.setBindGroup(0, bindGroup); // if using uniforms/textures
  // pass.setVertexBuffer(0, vertexBuffer); // if using vertex buffers
  pass.draw(vertexCount);
  pass.end();

  device.queue.submit([encoder.finish()]);
  requestAnimationFrame(renderFrame);
}

requestAnimationFrame(renderFrame);

Antialiasing (MSAA)

WebGPU requires manual multisampling (no auto like WebGL):

// Create multisample texture
const msaaTexture = device.createTexture({
  size: [canvas.width, canvas.height],
  sampleCount: 4, // 4x MSAA
  format,
  usage: GPUTextureUsage.RENDER_ATTACHMENT
});

// Render pass with resolve
const pass = encoder.beginRenderPass({
  colorAttachments: [{
    view: msaaTexture.createView(),           // render to MSAA
    resolveTarget: context.getCurrentTexture().createView(), // resolve to canvas
    loadOp: 'clear',
    storeOp: 'discard' // MSAA texture discarded after resolve
  }]
});

Multiple Canvas Output

One device can render to multiple canvases simultaneously:

// Configure multiple contexts from one device
const context1 = canvas1.getContext('webgpu');
const context2 = canvas2.getContext('webgpu');

context1.configure({ device, format });
context2.configure({ device, format });

// Each frame can render to both
function renderAll() {
  const encoder = device.createCommandEncoder();
  // ... draw to context1
  // ... draw to context2
  device.queue.submit([encoder.finish()]);
  requestAnimationFrame(renderAll);
}

No Canvas Limit

WebGPU has no per-page canvas limit. WebGL is limited to 16 (Chrome/Safari) or 200 (Firefox).