@aethervtt/shard-render 0.0.1

package/dist/culling.js

@@ -0,0 +1,498 @@
+import { defineResource } from "@aethervtt/shard-core";
+import { GpuBuffer } from "@aethervtt/shard-gpu";
+import { readBuffer } from "./debug-views.js";
+import {
+  InstanceFlags,
+  LOD_UNSET,
+  SLOT_MASK
+} from "./instances.js";
+import { Shaders } from "./plugin.js";
+const ARGS_WORDS = 5;
+const VIEW_FLOATS = 32;
+const BATCH_WORDS = 8;
+const LOD_WORDS = 20;
+const VIEW_CASTERS = 1;
+const VIEW_UPDATE_LOD = 2;
+const VIEW_ORTHO = 4;
+const VIEW_NO_PLANES = 8;
+const BATCH_TRANSPARENT = 1;
+const BATCH_NOT_READY = 2;
+class GpuCuller {
+  supported;
+  /** Turn off to force CPU culling (tests, debugging). */
+  enabled = true;
+  views = [];
+  viewCount = 0;
+  cameraViews = 0;
+  /** LOD camera index per camera entity, stable while the camera lives. */
+  lodCameras = /* @__PURE__ */ new Map();
+  viewData = new Float32Array(VIEW_FLOATS * 16);
+  viewU32 = new Uint32Array(this.viewData.buffer);
+  batchData = new Uint32Array(BATCH_WORDS * 64);
+  batchF32 = new Float32Array(this.batchData.buffer);
+  lodData = new Uint32Array(LOD_WORDS * 16);
+  lodF32 = new Float32Array(this.lodData.buffer);
+  params = new Uint32Array(8);
+  viewBuffer;
+  batchBuffer;
+  lodBuffer;
+  args;
+  visible;
+  lodState;
+  paramBuffers = [];
+  /** Instances a view's region can hold: the sum of batch capacities. */
+  regionSize = 0;
+  batchCount = 0;
+  lodStateCapacity = 0;
+  gpu;
+  bindGroups;
+  readbacks = [];
+  /** Visible instances per DrawList, from the last readback (a frame or two late). */
+  counts = /* @__PURE__ */ new WeakMap();
+  /** Per-LOD-level instance counts per DrawList, from the last readback. */
+  lodCounts = /* @__PURE__ */ new WeakMap();
+  /** Batches that drew at least one instance, per DrawList, from the last readback. */
+  drawCounts = /* @__PURE__ */ new WeakMap();
+  /** Instances per batch index, per DrawList, from the last readback. */
+  batchCounts = /* @__PURE__ */ new WeakMap();
+  frameViews = [];
+  pending = /* @__PURE__ */ new Set();
+  constructor(gpu) {
+    this.gpu = gpu;
+    this.supported = gpu.features.has("indirect-first-instance");
+    const storage = GPUBufferUsage.STORAGE;
+    this.viewBuffer = new GpuBuffer(gpu, { label: "cull/views", usage: storage, size: 4096 });
+    this.batchBuffer = new GpuBuffer(gpu, { label: "cull/batches", usage: storage, size: 2048 });
+    this.lodBuffer = new GpuBuffer(gpu, { label: "cull/lod-sets", usage: storage, size: 1280 });
+    this.args = new GpuBuffer(gpu, {
+      label: "cull/args",
+      usage: storage | GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_SRC,
+      size: 4096
+    });
+    this.visible = new GpuBuffer(gpu, {
+      label: "cull/visible",
+      usage: storage | GPUBufferUsage.COPY_SRC,
+      size: 4096
+    });
+    this.lodState = new GpuBuffer(gpu, { label: "cull/lod-state", usage: storage, size: 4096 });
+  }
+  get active() {
+    return this.supported && this.enabled;
+  }
+  beginFrame() {
+    this.viewCount = 0;
+    this.cameraViews = 0;
+  }
+  /** The LOD state row of a camera (cameras choose; their shadow views reuse the choice). */
+  lodCamera(entity) {
+    let i = this.lodCameras.get(entity);
+    if (i === void 0) {
+      i = this.lodCameras.size;
+      this.lodCameras.set(entity, i);
+    }
+    return i;
+  }
+  /**
+   * Adds a view to this frame's cull. Camera views must come before shadow views (they choose LOD
+   * levels). The list gets one indirect draw per live batch; deferred views split non-deferrable
+   * batches into `forwardOnly`.
+   */
+  add(store, list, params, lodCamera, forwardOnly) {
+    const v = this.viewCount++;
+    let view = this.views[v];
+    if (!view) {
+      view = {
+        list,
+        forwardOnly,
+        planes: new Float32Array(24),
+        hasPlanes: false,
+        eye: new Float32Array(3),
+        hasEye: false,
+        lodScale: 1,
+        flags: 0,
+        lodCamera: 0
+      };
+      this.views.push(view);
+    }
+    view.list = list;
+    view.forwardOnly = forwardOnly;
+    view.hasPlanes = params.planes !== null;
+    if (params.planes) view.planes.set(params.planes);
+    view.hasEye = params.eye !== void 0;
+    if (params.eye) view.eye.set(params.eye);
+    view.lodScale = params.lodScale;
+    view.lodCamera = lodCamera;
+    view.flags = (params.require & InstanceFlags.Caster ? VIEW_CASTERS : 0) | (params.updateLod ? VIEW_UPDATE_LOD : 0) | (params.orthographic ? VIEW_ORTHO : 0) | (params.planes ? 0 : VIEW_NO_PLANES);
+    if (params.updateLod) this.cameraViews = v + 1;
+    list.cullView = v;
+    list.culled = 0;
+    list.hidden = 0;
+    list.pending = store.pending.size;
+    list.visible = this.counts.get(list) ?? 0;
+    if (forwardOnly) {
+      forwardOnly.cullView = v;
+      forwardOnly.visible = this.counts.get(forwardOnly) ?? 0;
+    }
+    let n = 0;
+    let m = 0;
+    for (const batch of store.sorted) {
+      if (batch.count === 0 || batch.transparent || !store.anyVisible(batch)) continue;
+      if (!batch.ready) {
+        list.pending += batch.count;
+        continue;
+      }
+      const target = forwardOnly && !batch.deferrable ? forwardOnly : list;
+      const k = target === list ? n++ : m++;
+      let item = target.items[k];
+      if (!item) {
+        item = { batch, first: 0, count: 0, indirect: 0 };
+        target.items.push(item);
+      }
+      item.batch = batch;
+      item.first = 0;
+      item.count = 0;
+      item.indirect = -2 - batch.index;
+    }
+    list.length = n;
+    if (forwardOnly) forwardOnly.length = m;
+    return v;
+  }
+  /** Uploads the frame's view, batch, and LOD tables, and sizes the buffers. */
+  prepare(store) {
+    if (this.viewCount === 0) return;
+    const batches = store.batches;
+    this.batchCount = batches.length;
+    if (this.batchData.length < batches.length * BATCH_WORDS) {
+      this.batchData = new Uint32Array(batches.length * BATCH_WORDS * 2);
+      this.batchF32 = new Float32Array(this.batchData.buffer);
+    }
+    let region = 0;
+    for (const batch of batches) {
+      batch.region = region;
+      region += batch.count;
+      const o = batch.index * BATCH_WORDS;
+      const b = batch.mesh.bounds;
+      this.batchF32[o] = (b[0] + b[3]) * 0.5;
+      this.batchF32[o + 1] = (b[1] + b[4]) * 0.5;
+      this.batchF32[o + 2] = (b[2] + b[5]) * 0.5;
+      const ex = (b[3] - b[0]) * 0.5;
+      const ey = (b[4] - b[1]) * 0.5;
+      const ez = (b[5] - b[2]) * 0.5;
+      this.batchF32[o + 3] = Math.fround(Math.sqrt(ex * ex + ey * ey + ez * ez));
+      this.batchData[o + 4] = batch.mesh.drawCount;
+      this.batchData[o + 5] = batch.mesh.indexed ? 1 + batch.mesh.baseVertex : 0;
+      this.batchData[o + 6] = batch.region;
+      this.batchData[o + 7] = (batch.transparent ? BATCH_TRANSPARENT : 0) | (batch.ready ? 0 : BATCH_NOT_READY);
+    }
+    this.regionSize = Math.max(1, region);
+    this.batchBuffer.write(this.batchData, 0, 0, Math.max(1, batches.length) * BATCH_WORDS);
+    const sets = store.lodSets;
+    if (this.lodData.length < Math.max(1, sets.length) * LOD_WORDS) {
+      this.lodData = new Uint32Array(sets.length * LOD_WORDS * 2);
+      this.lodF32 = new Float32Array(this.lodData.buffer);
+    }
+    for (const set of sets) {
+      const o = set.index * LOD_WORDS;
+      this.lodData[o] = set.batches.length;
+      this.lodF32[o + 1] = set.hysteresis;
+      this.lodF32[o + 2] = set.bias;
+      this.lodData[o + 3] = 0;
+      for (let k = 0; k < 8; k++) {
+        this.lodF32[o + 4 + k] = k < set.thresholds.length ? set.thresholds[k] : 0;
+        this.lodData[o + 12 + k] = k < set.batches.length ? set.batches[k] : 0;
+      }
+    }
+    this.lodBuffer.write(this.lodData, 0, 0, Math.max(1, sets.length) * LOD_WORDS);
+    if (this.viewData.length < this.viewCount * VIEW_FLOATS) {
+      this.viewData = new Float32Array(this.viewCount * VIEW_FLOATS * 2);
+      this.viewU32 = new Uint32Array(this.viewData.buffer);
+    }
+    for (let v = 0; v < this.viewCount; v++) {
+      const view = this.views[v];
+      const o = v * VIEW_FLOATS;
+      if (view.hasPlanes) this.viewData.set(view.planes, o);
+      else this.viewData.fill(0, o, o + 24);
+      this.viewData[o + 24] = view.eye[0];
+      this.viewData[o + 25] = view.eye[1];
+      this.viewData[o + 26] = view.eye[2];
+      this.viewData[o + 27] = view.lodScale;
+      this.viewU32[o + 28] = view.flags | (view.hasEye ? 0 : 16);
+      this.viewU32[o + 29] = view.lodCamera;
+      this.viewU32[o + 30] = v * batches.length;
+      this.viewU32[o + 31] = v * this.regionSize;
+      for (const list of [view.list, view.forwardOnly]) {
+        if (!list) continue;
+        for (let d = 0; d < list.length; d++) {
+          const item = list.items[d];
+          item.indirect = (v * batches.length + item.batch.index) * ARGS_WORDS * 4;
+          item.first = v * this.regionSize + item.batch.region;
+        }
+      }
+    }
+    this.viewBuffer.write(this.viewData, 0, 0, this.viewCount * VIEW_FLOATS);
+    this.args.ensureCapacity(Math.max(1, this.viewCount * batches.length) * ARGS_WORDS * 4);
+    this.visible.ensureCapacity(this.viewCount * this.regionSize * 4);
+    const lodCams = Math.max(1, this.lodCameras.size);
+    if (this.lodStateCapacity !== store.capacity * lodCams) {
+      this.lodStateCapacity = store.capacity * lodCams;
+      const fill = new Uint32Array(this.lodStateCapacity).fill(LOD_UNSET);
+      this.lodState.write(fill);
+    }
+    this.frameViews = this.views.slice(0, this.viewCount);
+    this.slotCount = store.high;
+    this.slotCapacity = store.capacity;
+  }
+  slotCount = 0;
+  slotCapacity = 0;
+  /** Encodes the cull: reset arguments, cull camera views, then shadow views. */
+  encode(ctx, store) {
+    if (this.viewCount === 0) return;
+    const gpu = ctx.gpu;
+    const world = ctx.world;
+    const module = world.resource(Shaders).module(gpu, { root: "shard::cull" });
+    if (!module) {
+      gpu.pipelines.skipped++;
+      return;
+    }
+    const layout = cullLayout(gpu);
+    const pipelineLayout = gpu.layouts.pipelineLayout({ label: "cull", bindGroupLayouts: [layout] });
+    const reset = gpu.pipelines.compute({
+      label: "cull/reset",
+      layout: pipelineLayout,
+      compute: { module, entryPoint: "reset" }
+    });
+    const cull = gpu.pipelines.compute({
+      label: "cull/instances",
+      layout: pipelineLayout,
+      compute: { module, entryPoint: "cull" }
+    });
+    if (!reset || !cull) return;
+    const passes = [
+      [0, this.viewCount],
+      [0, this.cameraViews],
+      [this.cameraViews, this.viewCount - this.cameraViews]
+    ];
+    for (let i = 0; i < 3; i++) {
+      let buffer = this.paramBuffers[i];
+      if (!buffer) {
+        buffer = new GpuBuffer(gpu, {
+          label: `cull/params${i}`,
+          usage: GPUBufferUsage.UNIFORM,
+          size: 32
+        });
+        this.paramBuffers.push(buffer);
+      }
+      this.params[0] = this.slotCount;
+      this.params[1] = passes[i][0];
+      this.params[2] = passes[i][1];
+      this.params[3] = this.batchCount;
+      this.params[4] = this.slotCapacity;
+      buffer.write(this.params);
+    }
+    const key = [
+      gpu.generation,
+      store.instanceBuffer.version,
+      this.batchBuffer.version,
+      this.lodBuffer.version,
+      this.viewBuffer.version,
+      this.args.version,
+      this.visible.version,
+      this.lodState.version,
+      store.deform.recordBuffer.version,
+      ...this.paramBuffers.map((b) => b.version)
+    ].join("/");
+    if (!this.bindGroups || this.bindGroups.key !== key) {
+      this.bindGroups = {
+        key,
+        groups: this.paramBuffers.map(
+          (params) => gpu.device.createBindGroup({
+            label: "cull",
+            layout,
+            entries: [
+              { binding: 0, resource: { buffer: store.instanceBuffer.buffer } },
+              { binding: 1, resource: { buffer: this.batchBuffer.buffer } },
+              { binding: 2, resource: { buffer: this.lodBuffer.buffer } },
+              { binding: 3, resource: { buffer: this.viewBuffer.buffer } },
+              { binding: 4, resource: { buffer: this.args.buffer } },
+              { binding: 5, resource: { buffer: this.visible.buffer } },
+              { binding: 6, resource: { buffer: this.lodState.buffer } },
+              { binding: 7, resource: { buffer: params.buffer } },
+              { binding: 8, resource: { buffer: store.deform.recordBuffer.buffer } }
+            ]
+          })
+        )
+      };
+    }
+    const pass = ctx.encoder.beginComputePass({
+      label: "instance-cull",
+      timestampWrites: ctx.timestamps("instance-cull")
+    });
+    const argGroups = Math.ceil(this.viewCount * this.batchCount / 64);
+    if (argGroups > 0) {
+      pass.setPipeline(reset);
+      pass.setBindGroup(0, this.bindGroups.groups[0]);
+      pass.dispatchWorkgroups(argGroups);
+    }
+    pass.setPipeline(cull);
+    const slotGroups = Math.ceil(this.slotCount / 64);
+    if (this.cameraViews > 0 && slotGroups > 0) {
+      pass.setBindGroup(0, this.bindGroups.groups[1]);
+      pass.dispatchWorkgroups(slotGroups, this.cameraViews);
+    }
+    if (this.viewCount > this.cameraViews && slotGroups > 0) {
+      pass.setBindGroup(0, this.bindGroups.groups[2]);
+      pass.dispatchWorkgroups(slotGroups, this.viewCount - this.cameraViews);
+    }
+    pass.end();
+    const map = this.readback(ctx.encoder, store);
+    if (map) ctx.afterSubmit(map);
+  }
+  /** Copies the arguments to a readback buffer; resolves visible counts when it maps. */
+  readback(encoder, store) {
+    const gen = this.gpu.generation;
+    const bytes = this.viewCount * this.batchCount * ARGS_WORDS * 4;
+    if (bytes === 0) return void 0;
+    for (let i = this.readbacks.length - 1; i >= 0; i--) {
+      const r = this.readbacks[i];
+      if (r.generation !== gen || !r.busy && r.buffer.size < bytes) {
+        if (!r.busy) r.buffer.destroy();
+        this.readbacks.splice(i, 1);
+      }
+    }
+    let rb = this.readbacks.find((r) => !r.busy);
+    if (!rb && this.readbacks.length < 2) {
+      rb = {
+        buffer: this.gpu.device.createBuffer({
+          label: "cull/readback",
+          size: Math.max(256, bytes * 2),
+          usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+        }),
+        busy: false,
+        generation: gen
+      };
+      this.readbacks.push(rb);
+    }
+    if (!rb) return void 0;
+    encoder.copyBufferToBuffer(this.args.buffer, 0, rb.buffer, 0, bytes);
+    rb.busy = true;
+    const target = rb;
+    const views = this.frameViews;
+    const batchCount = this.batchCount;
+    const lodLevel = /* @__PURE__ */ new Map();
+    for (const set of store.lodSets) {
+      for (let k = 0; k < set.batches.length; k++) lodLevel.set(set.batches[k], k);
+    }
+    return () => {
+      const done = target.buffer.mapAsync(GPUMapMode.READ, 0, bytes).then(
+        () => {
+          const args = new Uint32Array(target.buffer.getMappedRange(0, bytes).slice(0));
+          target.buffer.unmap();
+          target.busy = false;
+          views.forEach((view, v) => {
+            let main = 0;
+            let forward = 0;
+            let mainDraws = 0;
+            let forwardDraws = 0;
+            const lods = [];
+            const perBatch = new Uint32Array(batchCount);
+            for (let b = 0; b < batchCount; b++) {
+              const n = args[(v * batchCount + b) * ARGS_WORDS + 1];
+              perBatch[b] = n;
+              const batch = store.batches[b];
+              if (!batch) continue;
+              if (view.forwardOnly && !batch.deferrable) {
+                forward += n;
+                if (n > 0) forwardDraws++;
+              } else {
+                main += n;
+                if (n > 0) mainDraws++;
+              }
+              const level = lodLevel.get(b);
+              if (level !== void 0) lods[level] = (lods[level] ?? 0) + n;
+            }
+            this.counts.set(view.list, main);
+            this.batchCounts.set(view.list, perBatch);
+            if (view.forwardOnly) this.batchCounts.set(view.forwardOnly, perBatch);
+            this.drawCounts.set(view.list, mainDraws);
+            this.lodCounts.set(view.list, lods);
+            if (view.forwardOnly) {
+              this.counts.set(view.forwardOnly, forward);
+              this.drawCounts.set(view.forwardOnly, forwardDraws);
+            }
+          });
+        },
+        () => {
+          target.busy = false;
+        }
+      );
+      this.pending.add(done);
+      done.then(() => this.pending.delete(done));
+    };
+  }
+  /** Resolves once every readback in flight has landed (tests: stats that match the last frame). */
+  async whenIdle() {
+    while (this.pending.size > 0) await Promise.all(this.pending);
+  }
+}
+function cullLayout(gpu) {
+  const C = GPUShaderStage.COMPUTE;
+  const read = (binding) => ({
+    binding,
+    visibility: C,
+    buffer: { type: "read-only-storage" }
+  });
+  const write = (binding) => ({
+    binding,
+    visibility: C,
+    buffer: { type: "storage" }
+  });
+  return gpu.layouts.bindGroupLayout({
+    label: "cull",
+    entries: [
+      read(0),
+      read(1),
+      read(2),
+      read(3),
+      write(4),
+      write(5),
+      write(6),
+      { binding: 7, visibility: C, buffer: { type: "uniform" } },
+      read(8)
+    ]
+  });
+}
+const Culler = defineResource("render/Culler", {
+  description: "GPU culling: indirect draws for every camera and shadow view."
+});
+function cullTransparent(store, list, params, forward) {
+  store.cullTransparentMembers(list, params, forward);
+}
+function visibleSlots(store, list, mask = SLOT_MASK) {
+  const out = /* @__PURE__ */ new Set();
+  for (let d = 0; d < list.length; d++) {
+    const item = list.items[d];
+    for (let i = 0; i < item.count; i++) out.add((store.visible[item.first + i] & mask) >>> 0);
+  }
+  return out;
+}
+async function readVisibleSlots(gpu, culler, list, mask = SLOT_MASK) {
+  const out = /* @__PURE__ */ new Set();
+  if (list.cullView < 0 || list.length === 0) return out;
+  const args = new Uint32Array(await readBuffer(gpu, culler.args.buffer, culler.args.byteLength));
+  const visible = new Uint32Array(
+    await readBuffer(gpu, culler.visible.buffer, culler.visible.byteLength)
+  );
+  for (let d = 0; d < list.length; d++) {
+    const item = list.items[d];
+    const n = args[item.indirect / 4 + 1];
+    for (let i = 0; i < n; i++) out.add((visible[item.first + i] & mask) >>> 0);
+  }
+  return out;
+}
+export {
+  Culler,
+  GpuCuller,
+  cullTransparent,
+  readVisibleSlots,
+  visibleSlots
+};

package/dist/debug-shaders.d.ts

@@ -0,0 +1,3 @@
+/** WGSL for gizmos (gizmos.ts) and GPU picking (picking.ts). */
+export declare const GIZMO_SHADERS: Record<string, string>;
+export declare const PICK_SHADERS: Record<string, string>;

package/dist/debug-shaders.js

@@ -0,0 +1,207 @@
+import { LABEL_FONT } from "./gizmo-font.js";
+const GIZMO_SHADERS = {
+  "shard::gizmos::common": `
+import shard::view::view;
+
+@group(1) @binding(2) var scene_depth: texture_depth_2d;
+
+/** Occluded parts of depth-tested gizmos draw at this opacity. */
+const OCCLUDED: f32 = 0.25;
+
+/** Opacity from the depth test: 1 in front, OCCLUDED behind, 1 when the test is off. */
+fn depth_fade(frag: vec4f, no_depth: bool) -> f32 {
+  if (no_depth) { return 1.0; }
+  let size = textureDimensions(scene_depth);
+  let p = min(vec2u(frag.xy), size - 1u);
+  let scene = textureLoad(scene_depth, p, 0);
+  // Reversed Z: nearer is larger.
+  return select(OCCLUDED, 1.0, frag.z >= scene - 1e-6);
+}
+
+fn to_pixels(ndc: vec2f) -> vec2f {
+  return (ndc * vec2f(0.5, -0.5) + 0.5) * view.viewport.xy;
+}
+
+fn to_ndc(px: vec2f) -> vec2f {
+  return (px * view.viewport.zw - 0.5) * vec2f(2.0, -2.0);
+}`,
+  "shard::gizmos::lines": `
+import shard::view::view;
+import shard::gizmos::common::{ depth_fade, to_pixels, to_ndc };
+
+struct Line {
+  a: vec3f,
+  b_x: f32,
+  b_yz: vec2f,
+  color: u32,
+  bits: u32,
+}
+
+@group(1) @binding(0) var<storage, read> lines: array<Line>;
+
+struct LineOutput {
+  @builtin(position) clip: vec4f,
+  @location(0) color: vec4f,
+  /** Pixels across the line from its center (x), half width (y). */
+  @location(1) across: vec2f,
+  @location(2) @interpolate(flat) bits: u32,
+}
+
+/** Clip-space endpoints, the one behind the camera moved onto the near side. */
+fn clip_segment(a: vec4f, b: vec4f) -> array<vec4f, 2> {
+  let eps = 1e-4;
+  var p = a;
+  var q = b;
+  if (p.w < eps) { p = mix(p, q, (eps - p.w) / (q.w - p.w)); }
+  if (q.w < eps) { q = mix(q, p, (eps - q.w) / (p.w - q.w)); }
+  return array<vec4f, 2>(p, q);
+}
+
+@vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> LineOutput {
+  let l = lines[i];
+  var out: LineOutput;
+  let ca = view.viewProj * vec4f(l.a, 1.0);
+  let cb = view.viewProj * vec4f(l.b_x, l.b_yz, 1.0);
+  if (ca.w < 1e-4 && cb.w < 1e-4) {
+    out.clip = vec4f(0.0, 0.0, 2.0, 1.0);
+    return out;
+  }
+  let seg = clip_segment(ca, cb);
+  let pa = to_pixels(seg[0].xy / seg[0].w);
+  let pb = to_pixels(seg[1].xy / seg[1].w);
+  var dir = pb - pa;
+  let len = length(dir);
+  dir = select(vec2f(1.0, 0.0), dir / len, len > 1e-6);
+  let normal = vec2f(-dir.y, dir.x);
+  let half_width = f32(l.bits >> 8u) / 16.0;
+  // One pixel of feathering on every side.
+  let extent = half_width + 1.0;
+  // Corners: (end, side) for two triangles.
+  let ends = array<f32, 6>(0.0, 0.0, 1.0, 1.0, 0.0, 1.0);
+  let sides = array<f32, 6>(-1.0, 1.0, -1.0, -1.0, 1.0, 1.0);
+  let end = ends[v];
+  let side = sides[v];
+  let base = select(seg[0], seg[1], end > 0.5);
+  let px = select(pa, pb, end > 0.5) + normal * side * extent + dir * (end * 2.0 - 1.0) * extent;
+  out.clip = vec4f(to_ndc(px) * base.w, base.z, base.w);
+  out.color = unpack4x8unorm(l.color);
+  out.across = vec2f(side * extent, half_width);
+  out.bits = l.bits;
+  return out;
+}
+
+@fragment fn fs(in: LineOutput) -> @location(0) vec4f {
+  let coverage = clamp(in.across.y + 0.5 - abs(in.across.x), 0.0, 1.0);
+  let a = in.color.a * coverage * depth_fade(in.clip, (in.bits & 1u) != 0u);
+  if (a <= 0.0) { discard; }
+  return vec4f(in.color.rgb * a, a);
+}`,
+  "shard::gizmos::labels": `
+import shard::view::view;
+import shard::gizmos::common::{ depth_fade, to_pixels, to_ndc };
+
+struct Glyph {
+  anchor: vec3f,
+  offset_x: f32,
+  offset_y: f32,
+  _pad0: f32,
+  size: vec2f,
+  glyph: u32,
+  color: u32,
+  bits: u32,
+  _pad1: u32,
+}
+
+@group(1) @binding(1) var<storage, read> glyphs: array<Glyph>;
+@group(1) @binding(3) var atlas: texture_2d<f32>;
+
+struct GlyphOutput {
+  @builtin(position) clip: vec4f,
+  @location(0) color: vec4f,
+  /** Atlas texel (glyphs), or negative for a solid box. */
+  @location(1) texel: vec2f,
+  @location(2) @interpolate(flat) bits: u32,
+}
+
+@vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> GlyphOutput {
+  let g = glyphs[i];
+  var out: GlyphOutput;
+  let c = view.viewProj * vec4f(g.anchor, 1.0);
+  if (c.w < 1e-4) {
+    out.clip = vec4f(0.0, 0.0, 2.0, 1.0);
+    return out;
+  }
+  let corners = array<vec2f, 6>(vec2f(0.0, 0.0), vec2f(0.0, 1.0), vec2f(1.0, 0.0), vec2f(1.0, 0.0), vec2f(0.0, 1.0), vec2f(1.0, 1.0));
+  let k = corners[v];
+  // Whole pixels, so glyphs sample the atlas 1:1.
+  let origin = round(to_pixels(c.xy / c.w)) + vec2f(g.offset_x, g.offset_y);
+  let px = origin + k * g.size;
+  out.clip = vec4f(to_ndc(px) * c.w, c.z, c.w);
+  out.color = unpack4x8unorm(g.color);
+  if (g.glyph == 0xffffffffu) {
+    out.texel = vec2f(-1.0);
+  } else {
+    let cell = vec2f(f32(g.glyph % ${LABEL_FONT.columns}u) * ${LABEL_FONT.cellWidth}.0, f32(g.glyph / ${LABEL_FONT.columns}u) * ${LABEL_FONT.cellHeight}.0);
+    out.texel = cell + k * g.size;
+  }
+  out.bits = g.bits;
+  return out;
+}
+
+@fragment fn fs(in: GlyphOutput) -> @location(0) vec4f {
+  var coverage = 1.0;
+  if (in.texel.x >= 0.0) { coverage = textureLoad(atlas, vec2u(in.texel), 0).r; }
+  let a = in.color.a * coverage * depth_fade(in.clip, (in.bits & 1u) != 0u);
+  if (a <= 0.0) { discard; }
+  return vec4f(in.color.rgb * a, a);
+}`
+};
+const PICK_SHADERS = {
+  "shard::pick::types": `
+struct PickOutput {
+  @location(0) id: u32,
+  /** World normal facing the camera, and the (reversed-Z) depth: 0 where nothing drew. */
+  @location(1) normal: vec4f,
+}`,
+  "shard::pick": `
+import shard::view::view;
+import shard::mesh::{ instance_at, mesh_vertex_at };
+import shard::pick::types::PickOutput;
+
+struct PickVertex {
+  @builtin(position) clip: vec4f,
+  @location(0) normal: vec3f,
+  @location(1) @interpolate(flat) entity: u32,
+}
+
+@vertex fn vs(
+  @builtin(instance_index) instance_index: u32,
+  @builtin(vertex_index) vertex_index: u32,
+  @location(0) position: vec3f,
+  @location(1) normal: vec3f,
+  @location(2) uv: vec2f,
+  @location(3) uv1: vec2f,
+  @location(4) tangent: vec4f,
+) -> PickVertex {
+  let inst = instance_at(instance_index);
+  let m = mesh_vertex_at(instance_index, vertex_index, position, normal, uv, uv1, tangent);
+  var out: PickVertex;
+  // Unjittered, so positions from depth match the camera exactly.
+  out.clip = view.viewProjNoJitter * vec4f(m.world_position, 1.0);
+  out.normal = m.world_normal;
+  out.entity = inst.entity;
+  return out;
+}
+
+@fragment fn fs(in: PickVertex, @builtin(front_facing) front: bool) -> PickOutput {
+  var out: PickOutput;
+  out.id = in.entity;
+  let n = normalize(in.normal);
+  out.normal = vec4f(select(-n, n, front), in.clip.z);
+  return out;
+}`
+};
+export {
+  GIZMO_SHADERS,
+  PICK_SHADERS
+};