demo · v142

Primitive Heatmap Debugger

The canonical mesh-debugging workflow with @builtin(primitive_index): render the model with each triangle's index encoded as a colour, then point a probe at the result and read which triangles are doing the most work. Below, a tessellated terrain quad — flip between solid rendering, primitive-ID rendering, and an overdraw heatmap that uses primitive_index + an atomic counter in a storage buffer.

Optional feature. primitive_index requires the adapter to advertise the feature. The probe below checks. On unsupported adapters the canvas falls back to a 2D rendering that simulates the colour mapping so the page still demonstrates the technique.

primitive_index feature

—

total triangles

—

hot triangle (most overdraw)

—

relevant WGSL

// Per-fragment, this is now available without a per-vertex attribute:
@fragment
fn fs(@builtin(primitive_index) idx: u32) -> @location(0) vec4f {
  // Pack 24-bit primitive ID into RGB → read back via copyTextureToBuffer
  return vec4f(
    f32((idx >> 16) & 0xffu) / 255.0,
    f32((idx >>  8) & 0xffu) / 255.0,
    f32( idx        & 0xffu) / 255.0,
    1.0
  );
}

relevant WGSL

see also