Vertex Shader Built-ins

A vertex shader receives vertex_index (from firstVertex, or the index value in an indexed draw) and instance_index (from firstInstance), both u32, and must return position, a vec4f in clip space that the rasterizer divides by w. Both indices include draw()'s offsets: with draw(6, 4, 0, 2), a shelf placing covers by instance_index drew books 3 to 6 and left two slots empty. The optional clip_distances output (array<f32, N>, N up to 8, with the clip-distances feature and enable clip_distances;) adds user clip planes: each value is interpolated and the primitive is cut where it turns negative, before any fragment work; the ribbon in Fragment Shader Built-ins uses one. Built-ins cannot cross stages.

vertex_index and instance_index include draw()'s offsets: draw(6, 4, 0, 2) fills slots 3 to 6 and leaves two emptyHTMLLive

<!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="340"></canvas>
  <canvas id="labels" width="600" height="340"></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 = 'left', font = 'system-ui, sans-serif') {
  ink.font = `${size}px ${font}`; ink.fillStyle = color; ink.textAlign = align; ink.fillText(text, x, y);
}

// Covers are placed purely from the two built-ins: vertex_index picks the corner,
// instance_index picks the slot on the shelf. Corner colours show vertex_index 0-5.
const code = /* wgsl */ `
struct Out { @builtin(position) pos: vec4f, @location(0) uv: vec2f, @location(1) @interpolate(flat) slot: u32 }
@vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> Out {
  let q = array(vec2f(0, 0), vec2f(1, 0), vec2f(0, 1), vec2f(1, 0), vec2f(1, 1), vec2f(0, 1))[v];
  let p = vec2f(-0.9 + f32(i) * 0.3 + q.x * 0.24, -0.7 + q.y * 1.4);
  return Out(vec4f(p, 0, 1), q, i);              // position is the one required output
}
@fragment fn fs(in: Out) -> @location(0) vec4f {
  let tints = array(vec3f(.12, .37, .55), vec3f(.36, .25, .60), vec3f(.88, .60, .06),
                    vec3f(.25, .49, .23), vec3f(.71, .27, .18), vec3f(.16, .62, .56));
  let band = step(0.62, in.uv.y) * step(in.uv.y, 0.7);
  return vec4f(mix(tints[in.slot], vec3f(0.98, 0.95, 0.86), band), 1);
}`;
// Empty slot outlines, drawn from the same built-ins with a different fragment colour.
const slotsCode = /* wgsl */ `
@vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> @builtin(position) vec4f {
  let q = array(vec2f(0, 0), vec2f(1, 0), vec2f(0, 1), vec2f(1, 0), vec2f(1, 1), vec2f(0, 1))[v];
  return vec4f(-0.91 + f32(i) * 0.3 + q.x * 0.26, -0.72 + q.y * 1.44, 0, 1);
}
@fragment fn fs() -> @location(0) vec4f { return vec4f(0.86, 0.84, 0.80, 1); }`;

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 make = (code) => {
    const module = device.createShaderModule({ code });
    return device.createRenderPipeline({ layout: 'auto', vertex: { module }, fragment: { module, targets: [{ format }] } });
  };
  const covers = make(code), slots = make(slotsCode);

  const encoder = device.createCommandEncoder();
  const pass = encoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(),
    clearValue: [0.97, 0.96, 0.93, 1], loadOp: 'clear', storeOp: 'store' }] });
  for (const [row, args] of [[0, [6, 6, 0, 0]], [1, [6, 4, 0, 2]]]) {
    pass.setViewport(0, 40 + row * 150, 600, 110, 0, 1);  // top row, then bottom row
    pass.setPipeline(slots);
    pass.draw(6, 6);                                    // six slot outlines
    pass.setPipeline(covers);
    pass.draw(...args);                                 // the covers themselves
  }
  pass.end();
  device.queue.submit([encoder.finish()]);

  label('draw(6, 6, 0, 0): instance_index 0 to 5', 12, 28, 13, '#222', 'left', 'ui-monospace, monospace');
  label('draw(6, 4, 0, 2): instance_index starts at firstInstance = 2', 12, 178, 13, '#222', 'left', 'ui-monospace, monospace');
  for (let i = 0; i < 6; i++) {
    label(`i = ${i}`, 66 + i * 90, 166, 11, '#555', 'center');
    label(i < 2 ? 'empty' : `i = ${i}`, 66 + i * 90, 316, 11, i < 2 ? '#999' : '#555', 'center');
  }
  label('vertex_index runs 0 to 5 in each instance and would include firstVertex too.', 12, 336, 11.5, '#444');
}
main();
</script>

MENU