Mesh Inspector

Hover over the mesh to highlight individual triangles using @builtin(primitive_index) in the WebGPU fragment shader. Switch between hover-highlight, wireframe, and primitive-index heatmap visualisation modes.

Move mouse over mesh to inspect triangles
Mesh surface Hovered triangle Wireframe edges Heatmap (index 0→max)
Primitive index
—
Vertex indices
—
Centroid (x, y, z)
—
Area (world units²)
—
Total triangles
—
Mode
hover

How primitive_index works

In WebGPU, the fragment shader can declare @builtin(primitive_index) primIdx: u32. The GPU fills this with the index of the triangle (or other primitive) that generated the current fragment — no CPU readback required. This lets you build hover-highlight, picking, and per-face visualisation entirely on the GPU.

struct FragIn {
  @builtin(position)       pos:     vec4f,
  @builtin(primitive_index) primIdx: u32,   // ← Chrome 142
}

@fragment fn fs(in: FragIn) -> @location(0) vec4f {
  if (in.primIdx == hoveredPrim) {
    return vec4f(1.0, 0.4, 0.2, 1.0); // highlight
  }
  // heatmap: map index to colour
  let t = f32(in.primIdx) / f32(totalPrims - 1u);
  return vec4f(t, 0.2, 1.0 - t, 1.0);
}