@empty-sekai/sekai-custom-profile-sdk 0.3.0

package/src/gpu/semanticWebglSceneRenderer.ts

@@ -0,0 +1,261 @@
+import type { SdfAtlas } from "../fontSdfAtlas.js";
+import type { WasmLayoutBatch } from "../types/layout.js";
+import { compileSemanticDrawBatches, semanticTextBatchKey, type SemanticDrawBatch } from "./semanticCommandGeometry.js";
+import type { SemanticCommandPlan, SemanticCommandStatePatch, SemanticLayerPatch } from "./semanticCommandPlanner.js";
+import { compileSemanticTextGlyphBatches } from "./semanticTextGlyphBridge.js";
+import { WebglSemanticCommandExecutor, type SemanticGpuMetrics } from "./webglSemanticCommandExecutor.js";
+import { applyNumericRegionRuntimeState, buildNumericTextRegions, type NumericTextRegion } from "../interaction/numericTextRegions.js";
+import type { BrowserImageSource } from "./browserSemanticResources.js";
+import { placeGeneralTextInstances } from "./generalTextRenderPlacement.js";
+import type { GlyphInstance } from "../types/glyph.js";
+import type { SemanticDrawOperation } from "./semanticCommandPlanner.js";
+
+export type AuthoredTextHitGeometry = {
+  bounds: { x: number; y: number; width: number; height: number };
+  quad: [[number, number], [number, number], [number, number], [number, number]];
+};
+
+export class SemanticWebglSceneRenderer {
+  private executor: WebglSemanticCommandExecutor;
+  private plan: SemanticCommandPlan | null = null;
+  private numericRegions: NumericTextRegion[] = [];
+  private textHitGeometry = new Map<string, AuthoredTextHitGeometry>();
+  private contextLost = false;
+  private retainedScene: {
+    plan: SemanticCommandPlan;
+    atlas: SdfAtlas | null;
+    batches: SemanticDrawBatch[];
+    imageSources: Map<string, BrowserImageSource>;
+    textGlyphBatches: Map<string, Float32Array>;
+  } | null = null;
+
+  constructor(gl: WebGL2RenderingContext) {
+    this.executor = new WebglSemanticCommandExecutor(gl);
+  }
+
+  async setScene(input: {
+    plan: SemanticCommandPlan;
+    atlas: SdfAtlas | null;
+    layout: WasmLayoutBatch;
+    imageSources: Map<string, BrowserImageSource>;
+  }): Promise<{
+    textCommands: number;
+    glyphInstances: number;
+    atlasUploadBytes: number;
+    atlasUploadRects: number;
+  }> {
+    const operations = input.plan.operations();
+    this.plan = input.plan;
+    const batches = compileSemanticDrawBatches(operations);
+    this.executor.setScene(input.plan, batches, input.imageSources);
+    const atlasUpload = input.atlas
+      ? await this.executor.setSdfAtlas(input.atlas)
+      : { bytes: 0, rects: 0 };
+    const textOperations = operations.filter((operation) => operation.command.payload.kind === "text");
+    const placedInstances = placeGeneralTextInstances(input.layout.instances, textOperations);
+    this.textHitGeometry = buildAuthoredTextHitGeometry(textOperations, placedInstances);
+    this.numericRegions = textOperations.flatMap((operation) => buildNumericTextRegions(
+      operation.command as Parameters<typeof buildNumericTextRegions>[0],
+      placedInstances,
+      operation.visible && operation.commandVisible,
+    ));
+    const glyphsByCommand = compileSemanticTextGlyphBatches(placedInstances, textOperations);
+    const textGlyphBatches = new Map<string, Float32Array>();
+    for (const batch of batches.filter((batch) => batch.kind === "text")) {
+      const vertices = concatenateFloat32(batch.commandIds.map((commandId) => glyphsByCommand.get(commandId) ?? new Float32Array()));
+      const key = semanticTextBatchKey(batch.commandIds);
+      textGlyphBatches.set(key, vertices);
+      this.executor.setTextGlyphBatch(key, vertices);
+    }
+    this.retainedScene = {
+      plan: input.plan,
+      atlas: input.atlas,
+      batches,
+      imageSources: input.imageSources,
+      textGlyphBatches,
+    };
+    this.contextLost = false;
+    return {
+      textCommands: textOperations.length,
+      glyphInstances: input.layout.instances.length,
+      atlasUploadBytes: atlasUpload.bytes,
+      atlasUploadRects: atlasUpload.rects,
+    };
+  }
+
+  applyLayerPatches(patches: SemanticLayerPatch[]) {
+    this.assertContextReady();
+    return this.executor.applyLayerPatches(patches);
+  }
+
+  applyCommandPatches(patches: SemanticCommandStatePatch[]) {
+    this.assertContextReady();
+    return this.executor.applyCommandPatches(patches);
+  }
+
+  applyCoreDelta(delta: { patches: SemanticLayerPatch[]; command_patches: SemanticCommandStatePatch[] }) {
+    this.assertContextReady();
+    const layer = this.executor.applyLayerPatches(delta.patches);
+    const command = this.executor.applyCommandPatches(delta.command_patches);
+    return { ...layer, ...command };
+  }
+
+  setLayerPreviewTransform(layerId: string, matrix: [number, number, number, number, number, number] | null) {
+    this.assertContextReady();
+    return this.executor.setLayerPreviewTransform(layerId, matrix);
+  }
+
+  draw(): SemanticGpuMetrics {
+    this.assertContextReady();
+    return this.executor.draw();
+  }
+
+  notifyContextLost(): void {
+    this.contextLost = true;
+  }
+
+  async restoreContext(gl: WebGL2RenderingContext): Promise<{
+    atlasUploadBytes: number;
+    atlasUploadRects: number;
+    textureUploads: number;
+    textureBytes: number;
+  }> {
+    const retained = this.retainedScene;
+    if (!retained) throw new Error("semantic GPU scene is not initialized");
+    const previous = this.executor;
+    const restored = new WebglSemanticCommandExecutor(gl);
+    try {
+      restored.setScene(retained.plan, retained.batches, retained.imageSources);
+      const atlasUpload = retained.atlas
+        ? await restored.setSdfAtlas(retained.atlas)
+        : { bytes: 0, rects: 0 };
+      for (const [key, vertices] of retained.textGlyphBatches) restored.setTextGlyphBatch(key, vertices);
+      this.executor = restored;
+      this.contextLost = false;
+      previous.destroy();
+      return {
+        atlasUploadBytes: atlasUpload.bytes,
+        atlasUploadRects: atlasUpload.rects,
+        textureUploads: retained.imageSources.size,
+        textureBytes: imageSourceBytes(retained.imageSources.values()),
+      };
+    } catch (error) {
+      restored.destroy();
+      this.contextLost = true;
+      throw error;
+    }
+  }
+
+  interactionRegions(): NumericTextRegion[] {
+    const operations = new Map((this.plan?.operations() ?? []).map((operation) => [operation.command.id, operation]));
+    return this.numericRegions.map((region) => {
+      const operation = operations.get(region.id.split(":numeric:", 1)[0]);
+      if (!operation) return region;
+      return {
+        ...applyNumericRegionRuntimeState(region, {
+          layerTransform: operation.transform,
+          commandTransform: operation.commandTransform,
+        }),
+        render_mask: operation.visible && operation.commandVisible,
+      };
+    });
+  }
+
+  authoredTextHitGeometry(): Map<string, AuthoredTextHitGeometry> {
+    const operations = this.plan?.operations() ?? [];
+    const runtimeByLayer = new Map(operations.map((operation) => [operation.layerId, operation]));
+    return new Map([...this.textHitGeometry].map(([layerId, geometry]) => {
+      const operation = runtimeByLayer.get(layerId);
+      const dx = (operation?.transform.dx ?? 0) + (operation?.commandTransform.dx ?? 0);
+      const dy = (operation?.transform.dy ?? 0) + (operation?.commandTransform.dy ?? 0);
+      const quad = geometry.quad.map(([x, y]) => [x + dx, y + dy]) as AuthoredTextHitGeometry["quad"];
+      return [layerId, {
+        bounds: { ...geometry.bounds, x: geometry.bounds.x + dx, y: geometry.bounds.y + dy },
+        quad,
+      }];
+    }));
+  }
+
+  destroy(): void {
+    this.executor.destroy();
+    this.plan = null;
+    this.numericRegions = [];
+    this.textHitGeometry.clear();
+    this.retainedScene = null;
+    this.contextLost = false;
+  }
+
+  private assertContextReady(): void {
+    if (this.contextLost) throw new Error("WebGL context is lost");
+  }
+}
+
+export function buildAuthoredTextHitGeometry(
+  operations: SemanticDrawOperation[],
+  instances: GlyphInstance[],
+): Map<string, AuthoredTextHitGeometry> {
+  const output = new Map<string, AuthoredTextHitGeometry>();
+  for (const operation of operations) {
+    const quads = instances
+      .filter((instance) => instance.layerId === operation.command.id)
+      .map((instance) => instance.deviceCharQuad[1])
+      .filter((quad) => quad.length >= 4);
+    const points = quads.flat();
+    if (points.length === 0) continue;
+    const basis = quads.find((quad) => (
+      Math.hypot(quad[1][0] - quad[0][0], quad[1][1] - quad[0][1]) > 1e-4
+      && Math.hypot(quad[3][0] - quad[0][0], quad[3][1] - quad[0][1]) > 1e-4
+    ));
+    if (!basis) continue;
+    const ux0 = basis[1][0] - basis[0][0];
+    const uy0 = basis[1][1] - basis[0][1];
+    const vx0 = basis[3][0] - basis[0][0];
+    const vy0 = basis[3][1] - basis[0][1];
+    const ul = Math.hypot(ux0, uy0);
+    const vl = Math.hypot(vx0, vy0);
+    const ux = ux0 / ul;
+    const uy = uy0 / ul;
+    const vx = vx0 / vl;
+    const vy = vy0 / vl;
+    const uValues = points.map(([x, y]) => x * ux + y * uy);
+    const vValues = points.map(([x, y]) => x * vx + y * vy);
+    const minU = Math.min(...uValues);
+    const maxU = Math.max(...uValues);
+    const minV = Math.min(...vValues);
+    const maxV = Math.max(...vValues);
+    const point = (u: number, v: number): [number, number] => [ux * u + vx * v, uy * u + vy * v];
+    const quad: AuthoredTextHitGeometry["quad"] = [
+      point(minU, minV),
+      point(maxU, minV),
+      point(maxU, maxV),
+      point(minU, maxV),
+    ];
+    const xs = quad.map(([x]) => x);
+    const ys = quad.map(([, y]) => y);
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
+    output.set(operation.layerId, {
+      bounds: { x: minX, y: minY, width: maxX - minX, height: maxY - minY },
+      quad,
+    });
+  }
+  return output;
+}
+
+function concatenateFloat32(values: Float32Array[]): Float32Array {
+  const output = new Float32Array(values.reduce((sum, value) => sum + value.length, 0));
+  let offset = 0;
+  for (const value of values) {
+    output.set(value, offset);
+    offset += value.length;
+  }
+  return output;
+}
+
+function imageSourceBytes(values: Iterable<BrowserImageSource>): number {
+  let bytes = 0;
+  for (const source of values) bytes += Math.max(0, source.width * source.height * 4);
+  return bytes;
+}

package/src/gpu/slotRanges.ts

@@ -0,0 +1,15 @@
+export type SlotRange = { start: number; end: number };
+
+export function contiguousSlotRanges(slots: number[]): SlotRange[] {
+  const sorted = [...new Set(slots)].sort((left, right) => left - right);
+  const ranges: SlotRange[] = [];
+  for (const slot of sorted) {
+    const last = ranges.at(-1);
+    if (last && slot === last.end) {
+      last.end += 1;
+    } else {
+      ranges.push({ start: slot, end: slot + 1 });
+    }
+  }
+  return ranges;
+}

package/src/gpu/webglSdfAtlasTexture.ts

@@ -0,0 +1,69 @@
+import type { SdfAtlas } from "../fontSdfAtlas.js";
+
+export class WebglSdfAtlasTexture {
+  private textureValue: WebGLTexture;
+  private contractId: string | null = null;
+  private revisions = new Map<number, number>();
+  private allocated = false;
+
+  constructor(private readonly gl: WebGL2RenderingContext, private readonly maxPages = 6) {
+    const texture = gl.createTexture();
+    if (!texture) throw new Error("SDF atlas texture allocation failed");
+    this.textureValue = texture;
+  }
+
+  texture(): WebGLTexture {
+    return this.textureValue;
+  }
+
+  setAtlas(atlas: SdfAtlas): void {
+    if (this.contractId === atlas.contractId) return;
+    this.contractId = atlas.contractId;
+    this.revisions.clear();
+    this.allocated = false;
+    this.gl.deleteTexture(this.textureValue);
+    const texture = this.gl.createTexture();
+    if (!texture) throw new Error("SDF atlas texture reallocation failed");
+    this.textureValue = texture;
+  }
+
+  async uploadUpdates(atlas: SdfAtlas): Promise<{ bytes: number; rects: number }> {
+    this.setAtlas(atlas);
+    const updates = await atlas.pageUpdates(this.revisions);
+    if (updates.length === 0) return { bytes: 0, rects: 0 };
+    const gl = this.gl;
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0);
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.textureValue);
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+    if (!this.allocated) {
+      gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.R8, atlas.width, atlas.height, this.maxPages);
+      this.allocated = true;
+    }
+    let bytes = 0;
+    let rects = 0;
+    for (const update of updates) {
+      if (update.page >= this.maxPages) throw new Error(`atlas page ${update.page} exceeds GPU hard budget`);
+      if (update.fullUpload) {
+        gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, update.page, atlas.width, atlas.height, 1, gl.RED, gl.UNSIGNED_BYTE, update.pixels);
+        bytes += update.pixels.byteLength;
+        rects += 1;
+      } else {
+        for (const rect of update.dirtyRects) {
+          gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, rect.x, rect.y, update.page, rect.width, rect.height, 1, gl.RED, gl.UNSIGNED_BYTE, rect.pixels);
+          bytes += rect.pixels.byteLength;
+          rects += 1;
+        }
+      }
+      this.revisions.set(update.page, update.revision);
+    }
+    return { bytes, rects };
+  }
+
+  destroy(): void {
+    this.gl.deleteTexture(this.textureValue);
+  }
+}

package/src/gpu/webglSdfGlyphPipeline.ts

@@ -0,0 +1,299 @@
+import type { GlyphInstance } from "../types/glyph.js";
+
+const CARD_W = 1830;
+const CARD_H = 812;
+const FLOATS_PER_INSTANCE = 36;
+
+type GlyphGpuBatch = {
+  vao: WebGLVertexArrayObject;
+  buffer: WebGLBuffer;
+  instances: number;
+  bytes: number;
+};
+
+export class WebglSdfGlyphPipeline {
+  private readonly gl: WebGL2RenderingContext;
+  private readonly program: WebGLProgram;
+  private readonly batches = new Map<string, GlyphGpuBatch>();
+  private atlasTexture: WebGLTexture;
+  private ownsAtlas = true;
+  private geometryBuilds = 0;
+
+  constructor(gl: WebGL2RenderingContext) {
+    this.gl = gl;
+    this.program = createProgram(gl, VERTEX_SHADER, FRAGMENT_SHADER);
+    const atlas = gl.createTexture();
+    if (!atlas) throw new Error("glyph pipeline atlas allocation failed");
+    this.atlasTexture = atlas;
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, atlas);
+    gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texImage3D(gl.TEXTURE_2D_ARRAY, 0, gl.R8, 1, 1, 1, 0, gl.RED, gl.UNSIGNED_BYTE, new Uint8Array([255]));
+  }
+
+  setAtlas(texture: WebGLTexture): void {
+    if (this.ownsAtlas) this.gl.deleteTexture(this.atlasTexture);
+    this.atlasTexture = texture;
+    this.ownsAtlas = false;
+  }
+
+  upload(key: string, vertices: Float32Array): void {
+    this.deleteBatch(key);
+    if (vertices.length % FLOATS_PER_INSTANCE !== 0) throw new Error(`invalid glyph instance buffer ${key}`);
+    const gl = this.gl;
+    const vao = gl.createVertexArray();
+    const buffer = gl.createBuffer();
+    if (!vao || !buffer) throw new Error("glyph pipeline batch allocation failed");
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+    const stride = FLOATS_PER_INSTANCE * 4;
+    instanceAttribute(gl, 0, 4, stride, 0);
+    instanceAttribute(gl, 1, 4, stride, 4 * 4);
+    instanceAttribute(gl, 2, 4, stride, 8 * 4);
+    instanceAttribute(gl, 3, 4, stride, 12 * 4);
+    instanceAttribute(gl, 4, 4, stride, 16 * 4);
+    instanceAttribute(gl, 5, 4, stride, 20 * 4);
+    instanceAttribute(gl, 6, 4, stride, 24 * 4);
+    instanceAttribute(gl, 7, 4, stride, 28 * 4);
+    instanceAttribute(gl, 8, 4, stride, 32 * 4);
+    gl.bindVertexArray(null);
+    this.batches.set(key, { vao, buffer, instances: vertices.length / FLOATS_PER_INSTANCE, bytes: vertices.byteLength });
+    this.geometryBuilds += 1;
+  }
+
+  draw(
+    key: string,
+    stateTexture: WebGLTexture,
+    maskTexture: WebGLTexture,
+    stateWidth: number,
+    commandMaskTexture: WebGLTexture = maskTexture,
+    commandStateTexture: WebGLTexture = stateTexture,
+    commandWidth: number = stateWidth,
+    previewTransformTexture: WebGLTexture = stateTexture,
+  ): { drawCalls: number; instances: number; bytes: number } {
+    const batch = this.batches.get(key);
+    if (!batch || batch.instances === 0) return { drawCalls: 0, instances: 0, bytes: batch?.bytes ?? 0 };
+    const gl = this.gl;
+    gl.useProgram(this.program);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.atlasTexture);
+    gl.uniform1i(gl.getUniformLocation(this.program, "u_atlas"), 0);
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, stateTexture);
+    gl.uniform1i(gl.getUniformLocation(this.program, "u_layerState"), 1);
+    gl.uniform1f(gl.getUniformLocation(this.program, "u_layerStateWidth"), stateWidth);
+    gl.activeTexture(gl.TEXTURE2);
+    gl.bindTexture(gl.TEXTURE_2D, maskTexture);
+    gl.uniform1i(gl.getUniformLocation(this.program, "u_renderMask"), 2);
+    gl.activeTexture(gl.TEXTURE3);
+    gl.bindTexture(gl.TEXTURE_2D, commandMaskTexture);
+    gl.uniform1i(gl.getUniformLocation(this.program, "u_commandMask"), 3);
+    gl.activeTexture(gl.TEXTURE4);
+    gl.bindTexture(gl.TEXTURE_2D, commandStateTexture);
+    gl.uniform1i(gl.getUniformLocation(this.program, "u_commandState"), 4);
+    gl.uniform1f(gl.getUniformLocation(this.program, "u_commandWidth"), commandWidth);
+    gl.activeTexture(gl.TEXTURE5);
+    gl.bindTexture(gl.TEXTURE_2D, previewTransformTexture);
+    gl.uniform1i(gl.getUniformLocation(this.program, "u_previewTransform"), 5);
+    gl.bindVertexArray(batch.vao);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, batch.instances);
+    gl.bindVertexArray(null);
+    return { drawCalls: 1, instances: batch.instances, bytes: batch.bytes };
+  }
+
+  stats(): { geometryBuilds: number; batches: number; bytes: number } {
+    return {
+      geometryBuilds: this.geometryBuilds,
+      batches: this.batches.size,
+      bytes: [...this.batches.values()].reduce((sum, batch) => sum + batch.bytes, 0),
+    };
+  }
+
+  clearBatches(): void {
+    for (const key of [...this.batches.keys()]) this.deleteBatch(key);
+  }
+
+  destroy(): void {
+    this.clearBatches();
+    if (this.ownsAtlas) this.gl.deleteTexture(this.atlasTexture);
+    this.gl.deleteProgram(this.program);
+  }
+
+  private deleteBatch(key: string): void {
+    const batch = this.batches.get(key);
+    if (!batch) return;
+    this.gl.deleteBuffer(batch.buffer);
+    this.gl.deleteVertexArray(batch.vao);
+    this.batches.delete(key);
+  }
+}
+
+export function buildSdfGlyphInstanceVertices(
+  instances: GlyphInstance[],
+  layerSlots: ReadonlyMap<string, number>,
+  clips: ReadonlyMap<string, [[number, number], [number, number], [number, number], [number, number]]> = new Map(),
+  commandSlots: ReadonlyMap<string, number> = layerSlots
+): Float32Array {
+  const rows: number[] = [];
+  for (const instance of instances) {
+    if (!instance.drawable || instance.quad.length < 4) continue;
+    const [tl, tr, br, bl] = instance.quad;
+    const position = ([x, y]: number[]) => [(x / CARD_W) * 2 - 1, 1 - (y / CARD_H) * 2];
+    const clip = clips.get(instance.layerId) ?? [[-1e9, -1e9], [1e9, -1e9], [1e9, 1e9], [-1e9, 1e9]];
+    rows.push(
+      ...position(tl), ...position(tr), ...position(br), ...position(bl),
+      tl[2], tl[3], br[2], br[3], ...instance.fill, ...instance.outline,
+      instance.shaderFaceScale, instance.shaderFaceBias,
+      instance.shaderUnderlayScale, instance.shaderUnderlayBias,
+      instance.shaderVertexAlpha, layerSlots.get(instance.layerId) ?? 0,
+      instance.atlasPage ?? 0, commandSlots.get(instance.layerId) ?? 0,
+      ...position(clip[0]), ...position(clip[1]), ...position(clip[2]), ...position(clip[3]),
+    );
+  }
+  return new Float32Array(rows);
+}
+
+function instanceAttribute(gl: WebGL2RenderingContext, index: number, size: number, stride: number, offset: number): void {
+  gl.enableVertexAttribArray(index);
+  gl.vertexAttribPointer(index, size, gl.FLOAT, false, stride, offset);
+  gl.vertexAttribDivisor(index, 1);
+}
+
+function createProgram(gl: WebGL2RenderingContext, vertexSource: string, fragmentSource: string): WebGLProgram {
+  const compile = (type: number, source: string) => {
+    const shader = gl.createShader(type);
+    if (!shader) throw new Error("glyph shader allocation failed");
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader) ?? "glyph shader compile failed");
+    return shader;
+  };
+  const vertex = compile(gl.VERTEX_SHADER, vertexSource);
+  const fragment = compile(gl.FRAGMENT_SHADER, fragmentSource);
+  const program = gl.createProgram();
+  if (!program) throw new Error("glyph program allocation failed");
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program) ?? "glyph program link failed");
+  return program;
+}
+
+const VERTEX_SHADER = `#version 300 es
+precision highp float;
+layout(location=0) in vec4 a_pos01;
+layout(location=1) in vec4 a_pos23;
+layout(location=2) in vec4 a_uvRect;
+layout(location=3) in vec4 a_color;
+layout(location=4) in vec4 a_outline;
+layout(location=5) in vec4 a_sdfParams;
+layout(location=6) in vec4 a_instanceMeta;
+layout(location=7) in vec4 a_clip01;
+layout(location=8) in vec4 a_clip23;
+uniform sampler2D u_layerState;
+uniform highp usampler2D u_renderMask;
+uniform float u_layerStateWidth;
+uniform highp usampler2D u_commandMask;
+uniform sampler2D u_commandState;
+uniform float u_commandWidth;
+uniform sampler2D u_previewTransform;
+out vec2 v_uv;
+out vec4 v_color;
+out vec4 v_outline;
+out float v_faceScale;
+out float v_faceBias;
+out float v_underlayScale;
+out float v_underlayBias;
+out float v_vertexAlpha;
+flat out float v_atlasPage;
+out vec2 v_point;
+out vec4 v_clip01;
+out vec4 v_clip23;
+const int CORNER_IDS[6] = int[6](0, 1, 3, 3, 1, 2);
+void main() {
+  vec2 positions[4] = vec2[4](a_pos01.xy, a_pos01.zw, a_pos23.xy, a_pos23.zw);
+  vec2 uvs[4] = vec2[4](a_uvRect.xy, vec2(a_uvRect.z, a_uvRect.y), a_uvRect.zw, vec2(a_uvRect.x, a_uvRect.w));
+  int corner = CORNER_IDS[gl_VertexID];
+  float layerSlot = a_instanceMeta.y;
+  float stateU = (layerSlot + 0.5) / max(u_layerStateWidth, 1.0);
+  vec2 state = texture(u_layerState, vec2(stateU, 0.5)).rg;
+  uint mask = texelFetch(u_renderMask, ivec2(int(layerSlot), 0), 0).r;
+  uint commandMask = texelFetch(u_commandMask, ivec2(int(a_instanceMeta.w), 0), 0).r;
+  vec2 commandState = texelFetch(u_commandState, ivec2(int(a_instanceMeta.w), 0), 0).rg;
+  vec2 totalState = state + commandState;
+  vec4 preview0 = texelFetch(u_previewTransform, ivec2(int(layerSlot), 0), 0);
+  vec4 preview1 = texelFetch(u_previewTransform, ivec2(int(layerSlot), 1), 0);
+  vec2 pixelPosition = vec2(
+    (positions[corner].x + 1.0) * ${CARD_W / 2}.0,
+    (1.0 - positions[corner].y) * ${CARD_H / 2}.0
+  ) + totalState;
+  vec2 previewedPosition = vec2(
+    dot(preview0.xy, pixelPosition) + preview0.z,
+    dot(preview1.xy, pixelPosition) + preview1.z
+  );
+  vec2 position = vec2(
+    previewedPosition.x * ${2 / CARD_W} - 1.0,
+    1.0 - previewedPosition.y * ${2 / CARD_H}
+  );
+  vec2 clipPoints[4] = vec2[4](a_clip01.xy, a_clip01.zw, a_clip23.xy, a_clip23.zw);
+  for (int index = 0; index < 4; index += 1) {
+    vec2 clipPixel = vec2((clipPoints[index].x + 1.0) * ${CARD_W / 2}.0, (1.0 - clipPoints[index].y) * ${CARD_H / 2}.0) + state;
+    vec2 transformed = vec2(dot(preview0.xy, clipPixel) + preview0.z, dot(preview1.xy, clipPixel) + preview1.z);
+    clipPoints[index] = vec2(transformed.x * ${2 / CARD_W} - 1.0, 1.0 - transformed.y * ${2 / CARD_H});
+  }
+  if (mask == 0u || commandMask == 0u) position = vec2(2.0);
+  gl_Position = vec4(position, 0.0, 1.0);
+  v_uv = uvs[corner];
+  v_color = a_color;
+  v_outline = a_outline;
+  v_faceScale = max(a_sdfParams.x, 0.0001);
+  v_faceBias = a_sdfParams.y;
+  v_underlayScale = max(a_sdfParams.z, 0.0001);
+  v_underlayBias = a_sdfParams.w;
+  v_vertexAlpha = clamp(a_instanceMeta.x, 0.0, 1.0);
+  v_atlasPage = a_instanceMeta.z;
+  v_point = position;
+  v_clip01 = vec4(clipPoints[0], clipPoints[1]);
+  v_clip23 = vec4(clipPoints[2], clipPoints[3]);
+}`;
+
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+uniform highp sampler2DArray u_atlas;
+in vec2 v_uv;
+in vec4 v_color;
+in vec4 v_outline;
+in float v_faceScale;
+in float v_faceBias;
+in float v_underlayScale;
+in float v_underlayBias;
+in float v_vertexAlpha;
+flat in float v_atlasPage;
+in vec2 v_point;
+in vec4 v_clip01;
+in vec4 v_clip23;
+out vec4 outColor;
+float cross2(vec2 a, vec2 b) { return a.x * b.y - a.y * b.x; }
+bool insideClip() {
+  vec2 p[4] = vec2[4](v_clip01.xy, v_clip01.zw, v_clip23.xy, v_clip23.zw);
+  float c0 = cross2(p[1] - p[0], v_point - p[0]);
+  float c1 = cross2(p[2] - p[1], v_point - p[1]);
+  float c2 = cross2(p[3] - p[2], v_point - p[2]);
+  float c3 = cross2(p[0] - p[3], v_point - p[3]);
+  return (c0 >= 0.0 && c1 >= 0.0 && c2 >= 0.0 && c3 >= 0.0) || (c0 <= 0.0 && c1 <= 0.0 && c2 <= 0.0 && c3 <= 0.0);
+}
+void main() {
+  if (!insideClip()) discard;
+  float sdf = texture(u_atlas, vec3(v_uv, v_atlasPage)).r;
+  float faceT = clamp(sdf * v_faceScale - v_faceBias, 0.0, 1.0);
+  float underlayT = clamp(sdf * v_underlayScale - v_underlayBias, 0.0, 1.0) * clamp(sdf * 12.5, 0.0, 1.0);
+  vec4 face = vec4(v_color.rgb * v_color.a, v_color.a);
+  vec4 outline = vec4(v_outline.rgb * v_outline.a, v_outline.a);
+  float oneMinusFace = 1.0 - face.a * faceT;
+  outColor = (face * faceT + outline * underlayT * oneMinusFace) * v_vertexAlpha;
+}`;