@aethervtt/shard-text 0.0.1

package/dist/render.js

@@ -0,0 +1,544 @@
+import {
+  defineResource,
+  defineSystem
+} from "@aethervtt/shard-core";
+import { GpuBuffer } from "@aethervtt/shard-gpu";
+import {
+  ComputedVisibility,
+  cameraOf,
+  GpuAssetsResource,
+  RenderPhase,
+  Shaders,
+  sceneColor
+} from "@aethervtt/shard-render";
+import { Textures } from "@aethervtt/shard-texture";
+import { GlobalTransform } from "@aethervtt/shard-transform";
+import { Localized, ScreenText, Text } from "./components.js";
+import { Fonts } from "./importer.js";
+import { layoutText, TextLayout } from "./layout.js";
+const GLYPH_FLOATS = 12;
+const TEXT_FLOATS = 36;
+const SPACE_WORLD = 0;
+const SPACE_SCREEN = 1;
+const ALIGNS = ["left", "center", "right"];
+const CORNERS = [
+  [0, 0],
+  [0.5, 0],
+  [1, 0],
+  [0, 0.5],
+  [0.5, 0.5],
+  [1, 0.5],
+  [0, 1],
+  [0.5, 1],
+  [1, 1]
+];
+class TextStore {
+  states = /* @__PURE__ */ new Map();
+  glyphs = new Float32Array(GLYPH_FLOATS * 1024);
+  glyphU32 = new Uint32Array(this.glyphs.buffer);
+  glyphCount = 0;
+  texts = new Float32Array(TEXT_FLOATS * 64);
+  textU32 = new Uint32Array(this.texts.buffer);
+  textCount = 0;
+  groups = [];
+  groupCount = 0;
+  glyphBuffer;
+  textBuffer;
+  /** Layouts redone this frame, and characters nothing could draw. */
+  relayouts = 0;
+  missing = 0;
+  uploadedBytes = 0;
+  frame = 0;
+  freeIndices = [];
+  nextIndex = 0;
+  dirtyGlyphs = true;
+  constructor(gpu) {
+    const storage = GPUBufferUsage.STORAGE;
+    this.glyphBuffer = new GpuBuffer(gpu, { label: "text/glyphs", usage: storage, size: 4096 });
+    this.textBuffer = new GpuBuffer(gpu, { label: "text/records", usage: storage, size: 4096 });
+  }
+  beginFrame() {
+    this.frame++;
+    this.relayouts = 0;
+    this.uploadedBytes = 0;
+  }
+  state(entity, space) {
+    let s = this.states.get(entity);
+    if (!s) {
+      const index = this.freeIndices.pop() ?? this.nextIndex++;
+      s = {
+        entity,
+        space,
+        layout: new TextLayout(),
+        value: "",
+        font: void 0,
+        fontVersion: -1,
+        size: -1,
+        align: -1,
+        anchorX: 0,
+        anchorY: 0,
+        maxWidth: 0,
+        lineHeight: 0,
+        index,
+        seen: 0
+      };
+      this.states.set(entity, s);
+      this.dirtyGlyphs = true;
+    }
+    s.seen = this.frame;
+    if (this.texts.length < (s.index + 1) * TEXT_FLOATS) {
+      const grown = new Float32Array(Math.max(this.texts.length * 2, (s.index + 1) * TEXT_FLOATS));
+      grown.set(this.texts);
+      this.texts = grown;
+      this.textU32 = new Uint32Array(grown.buffer);
+    }
+    this.textCount = Math.max(this.textCount, s.index + 1);
+    return s;
+  }
+  /** Forgets texts not seen this frame (despawned, hidden, or their component removed). */
+  sweep() {
+    for (const [entity, s] of this.states) {
+      if (s.seen === this.frame) continue;
+      this.states.delete(entity);
+      this.freeIndices.push(s.index);
+      this.dirtyGlyphs = true;
+    }
+  }
+  /** Group per (page, space) while rebuilding: [world, screen], -1 for none yet. */
+  groupOf = /* @__PURE__ */ new Map();
+  groupFor(page, space) {
+    let slots = this.groupOf.get(page);
+    if (!slots) {
+      slots = new Int32Array([-1, -1]);
+      this.groupOf.set(page, slots);
+    }
+    let g = slots[space];
+    if (g < 0) {
+      g = this.groupCount++;
+      slots[space] = g;
+      const group2 = this.groups[g];
+      if (group2) {
+        group2.page = page;
+        group2.space = space;
+        group2.first = 0;
+        group2.count = 0;
+      } else {
+        this.groups[g] = { page, space, first: 0, count: 0 };
+      }
+    }
+    return this.groups[g];
+  }
+  /** Rebuilds the glyph records, grouped by (page, space), from every layout. */
+  rebuild() {
+    this.dirtyGlyphs = false;
+    this.groupOf.clear();
+    this.groupCount = 0;
+    for (const s of this.states.values()) {
+      const l = s.layout;
+      for (let q = 0; q < l.count; q++) this.groupFor(l.pages[l.page[q]], s.space).count++;
+    }
+    let total = 0;
+    for (let g = 0; g < this.groupCount; g++) {
+      const group2 = this.groups[g];
+      group2.first = total;
+      total += group2.count;
+      group2.count = 0;
+    }
+    if (this.glyphs.length < total * GLYPH_FLOATS) {
+      this.glyphs = new Float32Array(Math.max(this.glyphs.length * 2, total * GLYPH_FLOATS));
+      this.glyphU32 = new Uint32Array(this.glyphs.buffer);
+    }
+    const f = this.glyphs;
+    const u = this.glyphU32;
+    for (const s of this.states.values()) {
+      const l = s.layout;
+      for (let q = 0; q < l.count; q++) {
+        const group2 = this.groupFor(l.pages[l.page[q]], s.space);
+        const o = (group2.first + group2.count++) * GLYPH_FLOATS;
+        for (let k = 0; k < 4; k++) {
+          f[o + k] = l.quads[q * 4 + k];
+          f[o + 4 + k] = l.uvs[q * 4 + k];
+        }
+        u[o + 8] = s.index;
+        const font = l.glyphs[q].font;
+        f[o + 9] = font.size / font.range;
+        f[o + 10] = font.range;
+        f[o + 11] = 0;
+      }
+    }
+    this.glyphCount = total;
+    this.glyphBuffer.write(f, 0, 0, Math.max(GLYPH_FLOATS, total * GLYPH_FLOATS));
+    this.uploadedBytes += total * GLYPH_FLOATS * 4;
+  }
+}
+const TextRenderer = defineResource("text/Renderer", {
+  description: "Laid-out text on the GPU: glyph records by atlas page, and per-text styles."
+});
+const layoutOptions = { anchor: [0.5, 0.5] };
+function textColumns(table, def) {
+  const c = (name) => table.column(def, name);
+  return {
+    // A localized text shows its resolved string (0038).
+    value: table.has(Localized) ? table.column(Localized, "value") : c("value"),
+    font: c("font"),
+    color: c("color"),
+    align: c("align"),
+    anchor: c("anchor"),
+    maxWidth: c("maxWidth"),
+    lineHeight: c("lineHeight"),
+    weight: c("weight"),
+    outline: c("outline"),
+    shadow: c("shadow"),
+    size: c("size"),
+    visible: table.column(ComputedVisibility, "visible")
+  };
+}
+function prepareText(store, fonts, s, c, i, world, screen) {
+  const font = fonts.get(c.font[i]);
+  const size = c.size[i];
+  const value = c.value[i] ?? "";
+  if (font && (s.value !== value || s.font !== font || s.fontVersion !== font.version || s.size !== size || s.align !== c.align[i] || s.anchorX !== c.anchor[i * 2] || s.anchorY !== c.anchor[i * 2 + 1] || s.maxWidth !== c.maxWidth[i] || s.lineHeight !== c.lineHeight[i])) {
+    layoutOptions.size = 1;
+    layoutOptions.align = ALIGNS[c.align[i]] ?? "left";
+    layoutOptions.anchor[0] = c.anchor[i * 2];
+    layoutOptions.anchor[1] = c.anchor[i * 2 + 1];
+    layoutOptions.maxWidth = size > 0 ? c.maxWidth[i] / size : 0;
+    layoutOptions.lineHeight = c.lineHeight[i];
+    layoutText(font, value, layoutOptions, s.layout);
+    s.value = value;
+    s.font = font;
+    s.fontVersion = font.version;
+    s.size = size;
+    s.align = c.align[i];
+    s.anchorX = c.anchor[i * 2];
+    s.anchorY = c.anchor[i * 2 + 1];
+    s.maxWidth = c.maxWidth[i];
+    s.lineHeight = c.lineHeight[i];
+    store.relayouts++;
+    store.dirtyGlyphs = true;
+  } else if (!font && s.layout.count > 0) {
+    s.layout.count = 0;
+    s.font = void 0;
+    store.dirtyGlyphs = true;
+  }
+  if (!c.visible[i] && s.layout.count > 0) {
+    s.layout.count = 0;
+    s.value = "";
+    store.dirtyGlyphs = true;
+  }
+  store.missing += s.layout.missing;
+  const f = store.texts;
+  const u = store.textU32;
+  const o = s.index * TEXT_FLOATS;
+  if (world) for (let k = 0; k < 12; k++) f[o + k] = world[k];
+  else for (let k = 0; k < 12; k++) f[o + k] = k === 0 || k === 5 || k === 10 ? 1 : 0;
+  for (let k = 0; k < 4; k++) f[o + 12 + k] = c.color[i * 4 + k];
+  const outline = c.outline[i];
+  const shadow = c.shadow[i];
+  for (let k = 0; k < 4; k++) f[o + 16 + k] = outline.color[k];
+  for (let k = 0; k < 4; k++) f[o + 20 + k] = shadow.color[k];
+  f[o + 24] = size;
+  f[o + 25] = outline.width;
+  f[o + 26] = shadow.softness;
+  f[o + 27] = c.weight[i];
+  f[o + 28] = shadow.offset[0];
+  f[o + 29] = shadow.offset[1];
+  u[o + 30] = 0;
+  u[o + 31] = 0;
+  f[o + 32] = screen ? CORNERS[screen.corner][0] : 0;
+  f[o + 33] = screen ? CORNERS[screen.corner][1] : 0;
+  f[o + 34] = screen ? screen.x : 0;
+  f[o + 35] = screen ? screen.y : 0;
+}
+const prepareTexts = defineSystem({
+  name: "text/prepare",
+  description: "Lays out changed text and uploads glyphs and styles.",
+  setup: (world) => ({
+    worldQ: world.query({ with: [Text, GlobalTransform, ComputedVisibility] }),
+    screenQ: world.query({ with: [ScreenText, ComputedVisibility] }),
+    screen: { corner: 0, x: 0, y: 0 }
+  }),
+  run: ({ worldQ, screenQ, screen }, world) => {
+    const store = world.resource(TextRenderer);
+    const fonts = world.resource(Fonts);
+    store.beginFrame();
+    store.missing = 0;
+    for (const table of worldQ.tables) {
+      const c = textColumns(table, Text);
+      const g = table.column(GlobalTransform, "matrix");
+      const billboard = table.column(Text, "billboard");
+      for (let i = 0; i < table.count; i++) {
+        const s = store.state(table.entities[i], SPACE_WORLD);
+        prepareText(store, fonts, s, c, i, g.subarray(i * 12, i * 12 + 12), void 0);
+        store.textU32[s.index * TEXT_FLOATS + 30] = billboard[i] ? 1 : 0;
+      }
+    }
+    for (const table of screenQ.tables) {
+      const c = textColumns(table, ScreenText);
+      const corner = table.column(ScreenText, "corner");
+      const position = table.column(ScreenText, "position");
+      for (let i = 0; i < table.count; i++) {
+        const s = store.state(table.entities[i], SPACE_SCREEN);
+        screen.corner = corner[i];
+        screen.x = position[i * 2];
+        screen.y = position[i * 2 + 1];
+        prepareText(store, fonts, s, c, i, void 0, screen);
+        store.textU32[s.index * TEXT_FLOATS + 31] = 1;
+      }
+    }
+    store.sweep();
+    if (store.dirtyGlyphs) store.rebuild();
+    if (store.textCount > 0) {
+      store.textBuffer.write(store.texts, 0, 0, store.textCount * TEXT_FLOATS);
+      store.uploadedBytes += store.textCount * TEXT_FLOATS * 4;
+    }
+  }
+});
+const TextCachesResource = defineResource("text/DrawCaches", {
+  description: "GPU objects of the text passes.",
+  init: () => ({ generation: -1, pipelines: /* @__PURE__ */ new Map(), groups: /* @__PURE__ */ new Map(), views: /* @__PURE__ */ new Map() })
+});
+const ids = /* @__PURE__ */ new WeakMap();
+let nextId = 1;
+function idOf(o) {
+  let id = ids.get(o);
+  if (id === void 0) {
+    id = nextId++;
+    ids.set(o, id);
+  }
+  return id;
+}
+function caches(ctx) {
+  const gpu = ctx.gpu;
+  const c = ctx.world.initResource(TextCachesResource);
+  if (c.generation !== gpu.generation) {
+    c.generation = gpu.generation;
+    c.layouts = void 0;
+    c.pipelines.clear();
+    c.groups.clear();
+    c.views.clear();
+    c.sampler = void 0;
+  }
+  if (!c.layouts) {
+    const V = GPUShaderStage.VERTEX;
+    const F = GPUShaderStage.FRAGMENT;
+    c.layouts = {
+      view: gpu.layouts.bindGroupLayout({
+        label: "text/view",
+        entries: [{ binding: 0, visibility: V, buffer: { type: "uniform" } }]
+      }),
+      data: gpu.layouts.bindGroupLayout({
+        label: "text/data",
+        entries: [
+          { binding: 0, visibility: V | F, buffer: { type: "read-only-storage" } },
+          { binding: 1, visibility: V | F, buffer: { type: "read-only-storage" } }
+        ]
+      }),
+      page: gpu.layouts.bindGroupLayout({
+        label: "text/page",
+        entries: [
+          { binding: 0, visibility: F, texture: { sampleType: "float" } },
+          { binding: 1, visibility: F, sampler: { type: "filtering" } }
+        ]
+      })
+    };
+  }
+  c.sampler ??= gpu.device.createSampler({
+    label: "text/msdf",
+    magFilter: "linear",
+    minFilter: "linear",
+    addressModeU: "clamp-to-edge",
+    addressModeV: "clamp-to-edge"
+  });
+  return c;
+}
+function group(ctx, slot, key, layout, entries) {
+  const c = caches(ctx);
+  let g = c.groups.get(slot);
+  if (!g || g.key !== key) {
+    g = { key, group: ctx.gpu.device.createBindGroup({ label: slot, layout, entries: entries() }) };
+    c.groups.set(slot, g);
+  }
+  return g.group;
+}
+const BLEND = {
+  color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+  alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" }
+};
+function pipeline(ctx, screen, format, msaa) {
+  const gpu = ctx.gpu;
+  const c = caches(ctx);
+  const key = `${screen ? "s" : "w"}/${format}/${msaa}`;
+  const cached = c.pipelines.get(key);
+  if (cached) return cached;
+  const module = ctx.world.resource(Shaders).module(gpu, {
+    root: "shard::text",
+    defines: { SCREEN: screen, SRGB_TARGET: format.endsWith("-srgb") }
+  });
+  if (!module) {
+    gpu.pipelines.skipped++;
+    return void 0;
+  }
+  const l = c.layouts;
+  const p = gpu.pipelines.render({
+    label: `text/${key}`,
+    layout: gpu.layouts.pipelineLayout({
+      label: "text",
+      bindGroupLayouts: [l.view, l.data, l.page]
+    }),
+    vertex: { module, entryPoint: "vs" },
+    fragment: { module, entryPoint: "fs", targets: [{ format, blend: BLEND }] },
+    primitive: { topology: "triangle-list" },
+    depthStencil: screen ? void 0 : { format: "depth32float", depthWriteEnabled: false, depthCompare: "greater-equal" },
+    multisample: { count: msaa }
+  });
+  if (p) c.pipelines.set(key, p);
+  return p;
+}
+const viewScratch = new Float32Array(28);
+function pageTexture(ctx, page) {
+  return page.texture ?? (page.ref ? ctx.world.resource(Textures).get(page.ref) : void 0);
+}
+function drawText(ctx, space) {
+  const cam = cameraOf(ctx.view);
+  const store = ctx.world.tryResource(TextRenderer);
+  if (!cam || !store) return;
+  const gpu = ctx.gpu;
+  const c = caches(ctx);
+  const screen = space === SPACE_SCREEN;
+  const format = screen ? ctx.texture("view-target").format : "rgba16float";
+  const p = pipeline(ctx, screen, format, screen ? 1 : cam.msaa);
+  if (!p) return;
+  let uniform = c.views.get(ctx.view.name);
+  if (!uniform) {
+    uniform = new GpuBuffer(gpu, {
+      label: `${ctx.view.name}/text`,
+      usage: GPUBufferUsage.UNIFORM,
+      size: 112
+    });
+    c.views.set(ctx.view.name, uniform);
+  }
+  writeView(cam);
+  uniform.write(viewScratch);
+  const u = uniform;
+  const pass = ctx.renderPass;
+  pass.setPipeline(p);
+  pass.setBindGroup(
+    0,
+    group(ctx, `${ctx.view.name}/text-view`, `${idOf(u.buffer)}`, c.layouts.view, () => [
+      { binding: 0, resource: { buffer: u.buffer } }
+    ])
+  );
+  pass.setBindGroup(
+    1,
+    group(
+      ctx,
+      "text/data",
+      `${idOf(store.glyphBuffer.buffer)}/${idOf(store.textBuffer.buffer)}`,
+      c.layouts.data,
+      () => [
+        { binding: 0, resource: { buffer: store.glyphBuffer.buffer } },
+        { binding: 1, resource: { buffer: store.textBuffer.buffer } }
+      ]
+    )
+  );
+  const assets = ctx.world.resource(GpuAssetsResource);
+  for (let g = 0; g < store.groupCount; g++) {
+    const grp = store.groups[g];
+    if (grp.space !== space || grp.count === 0) continue;
+    const texture = pageTexture(ctx, grp.page);
+    const gt = texture ? assets.texture(texture) : void 0;
+    if (!gt) continue;
+    const sampler = c.sampler;
+    pass.setBindGroup(
+      2,
+      group(ctx, `text/page/${idOf(grp.page)}`, `${idOf(gt.texture)}`, c.layouts.page, () => [
+        { binding: 0, resource: gt.linear },
+        { binding: 1, resource: sampler }
+      ])
+    );
+    pass.draw(6, grp.count, 0, grp.first);
+  }
+}
+function writeView(cam) {
+  viewScratch.set(cam.viewProj, 0);
+  const v = cam.view;
+  viewScratch[16] = v[0];
+  viewScratch[17] = v[4];
+  viewScratch[18] = v[8];
+  viewScratch[19] = 0;
+  viewScratch[20] = v[1];
+  viewScratch[21] = v[5];
+  viewScratch[22] = v[9];
+  viewScratch[23] = 0;
+  viewScratch[24] = cam.displayWidth;
+  viewScratch[25] = cam.displayHeight;
+  viewScratch[26] = 1 / cam.displayWidth;
+  viewScratch[27] = 1 / cam.displayHeight;
+}
+function hasSpace(world, space) {
+  const store = world.tryResource(TextRenderer);
+  if (!store) return false;
+  for (let g = 0; g < store.groupCount; g++) {
+    const grp = store.groups[g];
+    if (grp.space === space && grp.count > 0) return true;
+  }
+  return false;
+}
+function textNode(world) {
+  return {
+    kind: "render",
+    phase: RenderPhase.Transparent + 10,
+    enabled: (view) => cameraOf(view) !== void 0 && hasSpace(world, SPACE_WORLD),
+    writes: ["scene-color", "scene-depth", "hdr"],
+    color: (view) => sceneColor(view),
+    depth: { resource: "scene-depth", readOnly: true },
+    run: (ctx) => drawText(ctx, SPACE_WORLD)
+  };
+}
+function screenTextNode(world) {
+  return {
+    kind: "render",
+    phase: RenderPhase.Overlay + 10,
+    enabled: (view) => cameraOf(view) !== void 0 && hasSpace(world, SPACE_SCREEN),
+    writes: ["view-target"],
+    color: [{ resource: "view-target" }],
+    run: (ctx) => drawText(ctx, SPACE_SCREEN)
+  };
+}
+function describeText(world) {
+  const store = world.tryResource(TextRenderer);
+  if (!store) return void 0;
+  const fonts = /* @__PURE__ */ new Set();
+  for (const s of store.states.values()) if (s.font) fonts.add(s.font);
+  let pages = 0;
+  let runtimePages = 0;
+  let runtimeGlyphs = 0;
+  const missing = [];
+  for (const f of fonts) {
+    pages += f.pages.length;
+    runtimePages += f.pages.filter((p) => p.runtime).length;
+    runtimeGlyphs += f.runtimeGlyphs;
+    for (const cp of f.missing) missing.push(String.fromCodePoint(cp));
+  }
+  return {
+    texts: store.states.size,
+    glyphs: store.glyphCount,
+    drawCalls: store.groupCount,
+    atlasPages: pages,
+    runtimePages,
+    runtimeGlyphs,
+    missing: missing.slice(0, 50),
+    relayouts: store.relayouts,
+    uploadedBytes: store.uploadedBytes
+  };
+}
+export {
+  TextCachesResource,
+  TextRenderer,
+  TextStore,
+  describeText,
+  prepareTexts,
+  screenTextNode,
+  textNode
+};

package/dist/shaders.d.ts

@@ -0,0 +1,2 @@
+/** WGSL for MSDF text (see render.ts). */
+export declare const TEXT_SHADERS: Record<string, string>;

package/dist/shaders.js

@@ -0,0 +1,158 @@
+const TEXT_SHADERS = {
+  "shard::text": `
+import shard::color::linear_to_srgb;
+
+struct TextView {
+  view_proj: mat4x4f,
+  /** The camera's right and up in world space (billboards). */
+  right: vec4f,
+  up: vec4f,
+  /** width, height, 1 / width, 1 / height. */
+  viewport: vec4f,
+}
+
+struct Glyph {
+  /** x, y (bottom left), width, height, in em. */
+  rect: vec4f,
+  /** u0, v0 (top left), u1, v1. */
+  uv: vec4f,
+  text: u32,
+  /** Atlas pixels per em \xF7 distance range: em \u2192 distance units. */
+  em_to_sd: f32,
+  /** Distance range in atlas pixels. */
+  range: f32,
+  _pad: f32,
+}
+
+struct TextRecord {
+  row0: vec4f,
+  row1: vec4f,
+  row2: vec4f,
+  color: vec4f,
+  outline_color: vec4f,
+  shadow_color: vec4f,
+  /** size, outline width (em), shadow softness, weight. */
+  style: vec4f,
+  shadow_offset: vec2f,
+  billboard: u32,
+  screen: u32,
+  /** Screen text: corner factor (xy), offset in pixels (zw). */
+  placement: vec4f,
+}
+
+@group(0) @binding(0) var<uniform> text_view: TextView;
+@group(1) @binding(0) var<storage, read> glyphs: array<Glyph>;
+@group(1) @binding(1) var<storage, read> texts: array<TextRecord>;
+@group(2) @binding(0) var atlas: texture_2d<f32>;
+@group(2) @binding(1) var atlas_sampler: sampler;
+
+struct TextOutput {
+  @builtin(position) clip: vec4f,
+  @location(0) uv: vec2f,
+  /** The glyph's uv rect: samples clamp to it, so neighbors in the atlas never show. */
+  @location(1) @interpolate(flat) bounds: vec4f,
+  /** uv per em (x, y), for the shadow offset. */
+  @location(2) @interpolate(flat) uv_per_em: vec2f,
+  @location(3) @interpolate(flat) glyph: u32,
+}
+
+fn corner(k: u32) -> vec2f {
+  let c = 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));
+  return c[k];
+}
+
+@vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> TextOutput {
+  let g = glyphs[i];
+  let t = texts[g.text];
+  let c = corner(v);
+  // Grow the quad so a shadow offset fits; uvs extrapolate and samples clamp to the glyph.
+  let pad = abs(t.shadow_offset) + vec2f(t.style.z * 0.1 + t.style.y);
+  let x = g.rect.x - pad.x + c.x * (g.rect.z + 2.0 * pad.x);
+  let y = g.rect.y + g.rect.w + pad.y - c.y * (g.rect.w + 2.0 * pad.y);
+  let fx = (x - g.rect.x) / max(g.rect.z, 1e-6);
+  let fy = (g.rect.y + g.rect.w - y) / max(g.rect.w, 1e-6);
+  var out: TextOutput;
+  out.uv = vec2f(mix(g.uv.x, g.uv.z, fx), mix(g.uv.y, g.uv.w, fy));
+  out.bounds = vec4f(min(g.uv.xy, g.uv.zw), max(g.uv.xy, g.uv.zw));
+  out.uv_per_em = vec2f((g.uv.z - g.uv.x) / max(g.rect.z, 1e-6), (g.uv.w - g.uv.y) / max(g.rect.w, 1e-6));
+  out.glyph = i;
+  let p = vec2f(x, y) * t.style.x;
+  @if(SCREEN) {
+    let origin = t.placement.xy * text_view.viewport.xy + t.placement.zw;
+    let px = origin + vec2f(p.x, -p.y);
+    out.clip = vec4f(px.x * text_view.viewport.z * 2.0 - 1.0, 1.0 - px.y * text_view.viewport.w * 2.0, 0.5, 1.0);
+  }
+  @if(!SCREEN) {
+    var world: vec3f;
+    if (t.billboard != 0u) {
+      let origin = vec3f(t.row0.w, t.row1.w, t.row2.w);
+      let scale = length(vec3f(t.row0.x, t.row1.x, t.row2.x));
+      world = origin + (text_view.right.xyz * p.x + text_view.up.xyz * p.y) * scale;
+    } else {
+      let l = vec4f(p, 0.0, 1.0);
+      world = vec3f(dot(t.row0, l), dot(t.row1, l), dot(t.row2, l));
+    }
+    out.clip = text_view.view_proj * vec4f(world, 1.0);
+  }
+  return out;
+}
+
+fn median(c: vec3f) -> f32 {
+  return max(min(c.r, c.g), min(max(c.r, c.g), c.b));
+}
+
+/** The distance at a uv; outside the glyph's rect (the padded quad), fully outside. */
+fn distance_at(uv: vec2f, bounds: vec4f) -> f32 {
+  let d = median(textureSampleLevel(atlas, atlas_sampler, clamp(uv, bounds.xy, bounds.zw), 0.0).rgb);
+  let inside = all(uv >= bounds.xy) && all(uv <= bounds.zw);
+  return select(0.0, d, inside);
+}
+
+/** Straight color \xD7 coverage, premultiplied. */
+fn layer(c: vec4f, coverage: f32) -> vec4f {
+  let a = c.a * coverage;
+  return vec4f(c.rgb * a, a);
+}
+
+@fragment fn fs(in: TextOutput) -> @location(0) vec4f {
+  let g = glyphs[in.glyph];
+  let t = texts[g.text];
+  // Distance range in screen pixels: how many screen pixels one unit of distance spans.
+  let unit_range = vec2f(g.range) / vec2f(textureDimensions(atlas));
+  let screen_px = max(0.5 * dot(unit_range, 1.0 / fwidth(in.uv)), 1.0);
+  let sd = distance_at(in.uv, in.bounds);
+  let bias = t.style.w * g.em_to_sd;
+  let fill = clamp(screen_px * (sd - 0.5 + bias) + 0.5, 0.0, 1.0);
+  var outline = 0.0;
+  if (t.style.y > 0.0) {
+    // The field reaches half the range past the edge, and at small sizes one pixel spans much
+    // of it: the outline grows only as far as keeps zero distance at zero coverage.
+    let grow = min(t.style.y * g.em_to_sd, max(0.5 - 0.5 / screen_px - bias, 0.0));
+    outline = clamp(screen_px * (sd - 0.5 + bias + grow) + 0.5, 0.0, 1.0);
+  }
+  // Shadow (or glow, with no offset): the field shifted, and softened by widening its ramp.
+  let shift = vec2f(t.shadow_offset.x, -t.shadow_offset.y) * in.uv_per_em;
+  let sd_shadow = distance_at(in.uv - shift, in.bounds);
+  let ramp = max(t.style.z * 0.5, 0.5 / screen_px);
+  var shadow = 0.0;
+  if (t.shadow_color.a > 0.0 && (t.style.z > 0.0 || any(t.shadow_offset != vec2f(0.0)))) {
+    shadow = clamp((sd_shadow - 0.5 + bias) / (2.0 * ramp) + 0.5, 0.0, 1.0);
+  }
+  var c = layer(t.shadow_color, shadow);
+  let o = layer(t.outline_color, outline);
+  c = o + c * (1.0 - o.a);
+  let f = layer(t.color, fill);
+  c = f + c * (1.0 - f.a);
+  if (c.a <= 0.0) { discard; }
+  @if(SCREEN) {
+    @if(!SRGB_TARGET) {
+      let rgb = c.rgb / c.a;
+      c = vec4f(linear_to_srgb(rgb) * c.a, c.a);
+    }
+  }
+  return c;
+}`
+};
+export {
+  TEXT_SHADERS
+};