@swf2es/render 0.1.19 → 0.1.21

package/src/webgl/draws.ts

@@ -30,12 +30,14 @@ import {
   fillVertex,
   glyphsFragment,
   glyphsVertex,
+  MERGED_UNIT,
   meshFragment,
   meshVertex,
   OUTLINE_UNIT,
   RUN_MOST,
   RUN_UNIT,
   SNAP_BIT,
+  TABLE_UNIT,
   TEXTURE_UNIT,
 } from "./programs.js";
 import { framebufferOf, type Open, type Target, type TargetPool } from "./targets.js";
@@ -56,6 +58,15 @@ interface MultiDraw {
 /** Last entry, table start, draws, units, batch start/count, then each unit's texture and sampling. */
 const RUN_STRIDE = 6 + FILL_TEXTURES * 2;
 
+/**
+ * The fewest fills a run copies into the merged stream (FillBatches): with
+ * WEBGL_multi_draw, whose one call already draws a run, enough for the GPU's
+ * sub-draws to cost more than the copy; without it, two, each fill
+ * otherwise a call of its own.
+ */
+const MERGED_LEAST_MULTI = 32;
+const MERGED_LEAST = 2;
+
 /** The most masks the stencil's eight bits count. */
 const STENCIL_MOST = 255;
 
@@ -72,9 +83,10 @@ export interface Masks {
 /**
  * The draws of a scene list's entries into the target bound: fills in runs,
  * one multi-draw of the atlas's index ranges a run where WEBGL_multi_draw
- * is, meshes and advanced text's glyphs each by a program of its own, and
- * the masks' coverage into the stencil; and the view of the target drawn
- * into, which each program is told.
+ * is, else one draw of the run copied into the merged stream where its
+ * geometries are small; meshes and advanced text's glyphs each by a program
+ * of its own, and the masks' coverage into the stencil; and the view of the
+ * target drawn into, which each program is told.
  */
 export class Draws {
   private readonly gl: WebGL2RenderingContext;
@@ -103,9 +115,16 @@ export class Draws {
   private blendBackLocation: WebGLUniformLocation | null = null;
   /** WEBGL_multi_draw, which draws a run of fills alike a call (drawEntries), where there is. */
   private multi: MultiDraw | null = null;
+  /**
+   * Whether, without WEBGL_multi_draw, runs are merged; false draws a call a
+   * fill, as a reference the merged draws are tested against (multi-draw.ts).
+   */
+  merging = true;
   /** Avoid the dynamically indexed uniform table used in the Intel GPU hang reproducer. */
   private runTable: WebGLTexture | null = null;
   private runBaseLocation: WebGLUniformLocation | null = null;
+  /** The table start the fill program was told last (uRunBase), -1 for none. */
+  private runBase = -1;
   private runTableHeight = 0;
   private runTableMost = 0;
   private tableRows = new Int32Array(RUN_MOST);
@@ -148,15 +167,17 @@ export class Draws {
   private meshMode = -1;
   /**
    * Advanced text's program (GeometryData.glyphs), where it takes its row, view, Flash's
-   * pixels a stage pixel, mode and table; its vertices are in an atlas of their own.
+   * pixels a stage pixel and its text's slot in the glyph tables (GlyphTables), and the row
+   * and slot told it last, -1 for none; its vertices are in an atlas of their own.
    */
   private glyphProgram!: WebGLProgram;
   private glyphRowLocation: WebGLUniformLocation | null = null;
   private glyphViewLocation: WebGLUniformLocation | null = null;
   private glyphUnitLocation: WebGLUniformLocation | null = null;
-  private glyphModeLocation: WebGLUniformLocation | null = null;
   private glyphTableLocation: WebGLUniformLocation | null = null;
   private glyphStale = true;
+  private glyphRow = -1;
+  private glyphTable = -1;
   /** Flash's pixels a stage pixel: the target's pixels a stage pixel over those a pixel of Flash's. */
   private unit = 1;
   /**
@@ -198,15 +219,15 @@ export class Draws {
     const gl = this.gl;
     this.multi = gl.getExtension("WEBGL_multi_draw") as MultiDraw | null;
     try {
-      this.program = linkProgram(gl, fillVertex(this.multi !== null), fillFragment);
+      this.program = linkProgram(gl, fillVertex(this.multi !== null, true), fillFragment);
     } catch (e) {
       if (!this.multi) {
         throw e;
       }
 
-      // An extension offered whose shader directive the compiler refuses: a call a draw.
+      // An extension offered whose shader directive the compiler refuses: runs merged alone.
       this.multi = null;
-      this.program = linkProgram(gl, fillVertex(false), fillFragment);
+      this.program = linkProgram(gl, fillVertex(false, true), fillFragment);
     }
 
     this.unitIds.fill(-1);
@@ -223,8 +244,10 @@ export class Draws {
     this.runTableMost = textureMost;
     this.prepared = false;
     this.runBaseLocation = gl.getUniformLocation(this.program, "uRunBase");
+    this.runBase = -1;
+    this.batches.setUp(textureMost);
+    gl.uniform1i(gl.getUniformLocation(this.program, "uMergedRows"), MERGED_UNIT);
     if (this.multi) {
-      this.batches.setUp();
       this.sizeRunTable(1);
       gl.uniform1i(gl.getUniformLocation(this.program, "uRunTable"), RUN_UNIT);
     }
@@ -259,22 +282,32 @@ export class Draws {
     this.glyphRowLocation = gl.getUniformLocation(this.glyphProgram, "uRow");
     this.glyphViewLocation = gl.getUniformLocation(this.glyphProgram, "uView");
     this.glyphUnitLocation = gl.getUniformLocation(this.glyphProgram, "uUnit");
-    this.glyphModeLocation = gl.getUniformLocation(this.glyphProgram, "uMode");
     this.glyphTableLocation = gl.getUniformLocation(this.glyphProgram, "uTable");
     this.state.useProgram(this.glyphProgram);
     gl.uniform1i(gl.getUniformLocation(this.glyphProgram, "uRows"), 0);
     gl.uniform1i(gl.getUniformLocation(this.glyphProgram, "uSegments"), OUTLINE_UNIT);
+    gl.uniform1i(gl.getUniformLocation(this.glyphProgram, "uTables"), TABLE_UNIT);
     this.glyphStale = true;
+    this.glyphRow = -1;
+    this.glyphTable = -1;
     this.lastRow = -1;
   }
 
-  /** Upload before any draws, so that updating a run cannot stall earlier draws reading it. */
+  /**
+   * Upload before any draws, so that updating a run cannot stall earlier
+   * draws reading it: the run table, with WEBGL_multi_draw, and the merged
+   * stream and its rows.
+   */
   prepare(commands: Commands, scene: SceneList): void {
     this.prepared = false;
-    if (!this.multi) {
-      return;
-    }
-
+    const multi = this.multi !== null;
+    // Without a multi-draw, rows are told by uniform or merged; the table is not read.
+    const tableMost = multi ? RUN_MOST * this.runTableMost : Number.POSITIVE_INFINITY;
+    const least = multi
+      ? MERGED_LEAST_MULTI
+      : this.merging
+        ? MERGED_LEAST
+        : Number.POSITIVE_INFINITY;
     this.batches.reset();
     if (commands.length > this.commandStarts.length) {
       this.commandStarts = new Uint32Array(commands.ops.length / 4);
@@ -309,16 +342,13 @@ export class Draws {
 
         i = this.gatherRun(scene, i, end, stencil);
         const needed = count + this.runCount;
-        if (needed > RUN_MOST * this.runTableMost) {
+        if (needed > tableMost) {
           // An unusually large frame still draws by updating the first row a run at a time.
           return;
         }
 
         if (needed > this.tableRows.length) {
-          const size = Math.min(
-            RUN_MOST * this.runTableMost,
-            Math.max(needed, this.tableRows.length * 2),
-          );
+          const size = Math.min(tableMost, Math.max(needed, this.tableRows.length * 2));
           const rows = new Int32Array(size);
           rows.set(this.tableRows);
           this.tableRows = rows;
@@ -340,13 +370,21 @@ export class Draws {
         this.runs[run + 1] = count;
         this.runs[run + 2] = this.runCount;
         this.runs[run + 3] = this.runUnits;
-        const batchStart = this.batches.indexTop;
-        if (!stencil) {
-          this.batches.add(this.runPlaces, this.runRows, this.runCount, this.atlas.frame);
-        }
-
-        this.runs[run + 4] = batchStart;
-        this.runs[run + 5] = this.batches.indexTop - batchStart;
+        // A mask's fills merged too where each would be a call.
+        const segment =
+          !stencil || !multi
+            ? this.batches.add(
+                this.runPlaces,
+                this.runRows,
+                this.runCount,
+                this.atlas.frame,
+                least,
+                !multi,
+              )
+            : null;
+
+        this.runs[run + 4] = segment ? segment.indexStart : 0;
+        this.runs[run + 5] = segment ? segment.indices : 0;
         for (let j = 0; j < FILL_TEXTURES; j++) {
           if (this.runUnits & (1 << j)) {
             this.runs[run + 6 + j * 2] = this.unitIds[j];
@@ -364,7 +402,7 @@ export class Draws {
     }
 
     const height = Math.ceil(count / RUN_MOST);
-    if (height > 0) {
+    if (multi && height > 0) {
       this.sizeRunTable(height);
       const gl = this.gl;
       this.state.bindTexture(RUN_UNIT, this.runTable);
@@ -641,20 +679,27 @@ export class Draws {
 
       if (batchCount > 0) {
         state.bindVertexArray(this.batches.vertexArray);
-        state.bindTexture(RUN_UNIT, this.runTable);
-        state.bindSampler(RUN_UNIT, null);
+        state.bindTexture(MERGED_UNIT, this.batches.rowsTexture);
+        state.bindSampler(MERGED_UNIT, null);
         gl.drawElements(gl.TRIANGLES, batchCount, gl.UNSIGNED_INT, batchStart * 4);
         continue;
       }
 
       state.bindVertexArray(this.atlas.vertexArray);
       if (!this.multi) {
-        if (this.runRows[0] !== this.lastRow) {
-          this.lastRow = this.runRows[0];
-          gl.uniform1i(this.rowLocation, this.lastRow);
+        // A run not merged: a call a fill, its row told as it changes.
+        const rows = this.prepared ? this.tableRows : this.runRows;
+        const counts = this.prepared ? this.tableCounts : this.runCounts;
+        const offsets = this.prepared ? this.tableOffsets : this.runOffsets;
+        for (let k = base; k < base + draws; k++) {
+          if (rows[k] !== this.lastRow) {
+            this.lastRow = rows[k];
+            gl.uniform1i(this.rowLocation, this.lastRow);
+          }
+
+          gl.drawElements(gl.TRIANGLES, counts[k], gl.UNSIGNED_INT, offsets[k]);
         }
 
-        gl.drawElements(gl.TRIANGLES, this.runCounts[0], gl.UNSIGNED_INT, this.runOffsets[0]);
         continue;
       }
 
@@ -665,7 +710,7 @@ export class Draws {
         gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, draws, 1, gl.RED_INTEGER, gl.INT, this.runRows);
       }
 
-      gl.uniform1i(this.runBaseLocation, base);
+      this.tellRunBase(base);
       this.multi.multiDrawElementsWEBGL(
         gl.TRIANGLES,
         this.prepared ? this.tableCounts : this.runCounts,
@@ -682,17 +727,34 @@ export class Draws {
     }
   }
 
+  /** The fill program told where its run starts in the run table, if it was told another. */
+  private tellRunBase(base: number): void {
+    if (base !== this.runBase) {
+      this.runBase = base;
+      this.gl.uniform1i(this.runBaseLocation, base);
+    }
+  }
+
   /**
    * The fills from entry `i` on that one call draws, as many as fit its
-   * textures (FILL_TEXTURES, each with its sampling) and, without
-   * WEBGL_multi_draw, one: their runCounts, runOffsets and runRows (FILL_SLOT),
-   * and the units their textures take in runUnits. The last entry gathered,
-   * past those whose texture is gone, which draw nothing.
+   * textures (FILL_TEXTURES, each with its sampling), RUN_MOST at most:
+   * their runCounts, runOffsets and runRows (FILL_SLOT), and the units their
+   * textures take in runUnits. Without WEBGL_multi_draw, a run is of
+   * geometries too large to merge (Place.batch), of geometries added this
+   * frame, or of stable ones alone, so that a stable run's merged copy is
+   * drawn again while a part of it changes from frame to frame; and without
+   * merging each fill is a run. The last entry gathered, past those whose
+   * texture is gone, which draw nothing.
    */
   private gatherRun(scene: SceneList, i: number, end: number, stencil: boolean): number {
     const places = this.atlas.places;
     const textures = this.gpu.textures;
-    const most = this.multi ? RUN_MOST : 1;
+    const single = !this.multi;
+    const most = this.multi || this.merging ? RUN_MOST : 1;
+    const frame = this.atlas.frame;
+    // Without a multi-draw, what the run is of: geometries too large to merge, geometries added
+    // this frame, or stable ones, whose merged copy later frames draw again.
+    let kind = -1;
     let draws = 0;
     let last = i;
     this.runUnits = 0;
@@ -711,6 +773,15 @@ export class Draws {
         break;
       }
 
+      if (single) {
+        const of = !place.batch ? 0 : place.batch.frame === frame ? 1 : 2;
+        if (draws === 0) {
+          kind = of;
+        } else if (of !== kind) {
+          break;
+        }
+      }
+
       const id = stencil ? -1 : scene.texture[j];
       let slot = 0;
       if (id >= 0) {
@@ -780,7 +851,8 @@ export class Draws {
   /**
    * Entry `i`, advanced text's glyph quads (GeometryData.glyphs), drawn by the glyph
    * program from its atlas, which is told the view as it changed, and its
-   * text's mode and table; the glyph program left in use.
+   * row and its text's slot in the glyph tables as they change; the glyph
+   * program left in use.
    */
   private drawGlyphs(scene: SceneList, i: number, place: Place): void {
     const gl = this.gl;
@@ -794,11 +866,23 @@ export class Draws {
       this.glyphStale = false;
     }
 
-    gl.uniform1i(this.glyphRowLocation, scene.row[i]);
-    gl.uniform4fv(this.glyphModeLocation, glyphs.mode);
-    gl.uniform4fv(this.glyphTableLocation, glyphs.table);
+    const row = scene.row[i];
+    if (row !== this.glyphRow) {
+      gl.uniform1i(this.glyphRowLocation, row);
+      this.glyphRow = row;
+    }
+
+    const tables = this.atlas.tables;
+    const slot = glyphs.slot >= 0 ? glyphs.slot : tables.scratch(glyphs.mode, glyphs.table);
+    if (slot !== this.glyphTable) {
+      gl.uniform1i(this.glyphTableLocation, slot);
+      this.glyphTable = slot;
+    }
+
     state.bindTexture(OUTLINE_UNIT, this.gpu.outlines);
     state.bindSampler(OUTLINE_UNIT, null);
+    state.bindTexture(TABLE_UNIT, tables.texture);
+    state.bindSampler(TABLE_UNIT, null);
     gl.drawElements(gl.TRIANGLES, place.indices, gl.UNSIGNED_INT, place.indexStart * 4);
   }
 
@@ -916,9 +1000,7 @@ export class Draws {
 
   /** The programs and draw table made on the context, deleted. */
   destroy(): void {
-    if (this.multi) {
-      this.batches.destroy();
-    }
+    this.batches.destroy();
 
     if (this.runTable) {
       this.state.dropTexture(this.runTable);

package/src/webgl/filters.ts

@@ -5,6 +5,7 @@ import {
   CONVOLUTION_PASS,
   DISPLACE_PASS,
   FilterPlan,
+  FLOAT_LINE,
   FLOATS,
   GLOW_PASS,
   GRADIENT_PASS,
@@ -59,6 +60,8 @@ export interface FilterHost<T extends FilterTarget> {
 const INPUT_UNIT = 4;
 const BLURRED_UNIT = 5;
 const EXTRA_UNIT = 6;
+/** A pass's line of floats (FLOAT_LINE): a convolution's weights, which reads no gradient nor map. */
+const LINE_UNIT = EXTRA_UNIT;
 
 /**
  * A triangle over the output's frame, the viewport, reading its input
@@ -146,6 +149,10 @@ export class FilterRunner<T extends FilterTarget> {
   private readonly hasTexture = (id: number) => id >= 0 && this.host.texture(id) !== null;
   /** The target's pixels a unit of its own, for the chain running. */
   private resolution = 1;
+  /** The texture of a pass's line of floats (FLOAT_LINE), its width, and the floats' bits it holds. */
+  private line: WebGLTexture | null = null;
+  private lineWidth = 0;
+  private lineBits = new Uint32Array(0);
 
   constructor(
     gl: WebGL2RenderingContext,
@@ -356,6 +363,10 @@ export class FilterRunner<T extends FilterTarget> {
         // As many as KERNEL_IMAGES, which the plan holds a kernel to.
         this.kernels.bindImage(location, this.samplers++, values[at], this.host);
         break;
+      case FLOAT_LINE:
+        gl.uniform1i(location, LINE_UNIT);
+        this.bindLine(values, at, count);
+        break;
       case FLOATS:
         this.set(
           pass,
@@ -369,6 +380,45 @@ export class FilterRunner<T extends FilterTarget> {
     }
   }
 
+  /**
+   * `count` of `values` from `at` bound on LINE_UNIT as a line of floats,
+   * uploaded where they are not the ones it holds: a frame's filters alike
+   * take the same.
+   */
+  private bindLine(values: Float32Array, at: number, count: number): void {
+    const gl = this.gl;
+    const bits = new Uint32Array(values.buffer, values.byteOffset + at * 4, count);
+    let same = this.line !== null && count === this.lineBits.length;
+    for (let k = 0; same && k < count; k++) {
+      same = bits[k] === this.lineBits[k];
+    }
+
+    if (!same) {
+      if (!this.line || count > this.lineWidth) {
+        if (this.line) {
+          this.state.dropTexture(this.line);
+          gl.deleteTexture(this.line);
+        }
+
+        this.line = gl.createTexture() as WebGLTexture;
+        this.lineWidth = count;
+        this.state.bindTexture(LINE_UNIT, this.line);
+        this.state.activeTexture(LINE_UNIT);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R32F, count, 1);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      }
+
+      this.state.bindTexture(LINE_UNIT, this.line);
+      this.state.activeTexture(LINE_UNIT);
+      gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, count, 1, gl.RED, gl.FLOAT, values, at);
+      this.lineBits = bits.slice();
+    }
+
+    this.state.bindTexture(LINE_UNIT, this.line);
+    this.state.bindSampler(LINE_UNIT, null);
+  }
+
   /** The pass of program `id` (filter-plan.ts), in use. */
   private program(id: number): Pass {
     switch (id) {
@@ -498,5 +548,10 @@ export class FilterRunner<T extends FilterTarget> {
     }
 
     this.passes.clear();
+    if (this.line) {
+      this.state.dropTexture(this.line);
+      this.gl.deleteTexture(this.line);
+      this.line = null;
+    }
   }
 }

package/src/webgl/glyph-tables.ts

@@ -0,0 +1,179 @@
+import type { GlState } from "@swf2es/context3d/device";
+import { TABLE_ENTRIES, TABLE_LINE, TABLE_SLOT, TABLE_UNIT } from "./programs.js";
+
+/** Floats a slot: its texels' four each. */
+const SLOT_FLOATS = TABLE_SLOT * 4;
+/** Slots a line of the texture. */
+const SLOTS_A_LINE = TABLE_LINE / TABLE_SLOT;
+/** Floats a text's mode and table take of a slot, compared and hashed. */
+const USED_FLOATS = 4 + TABLE_ENTRIES * 4;
+
+/**
+ * Advanced text's modes and CSM cutoff tables (GeometryData.glyphs), each
+ * distinct one in a slot of a float texture the glyph program reads by
+ * texelFetch: the mode in a slot's first texel, its table's entries after
+ * it. They were a uniform array the shader indexed by each glyph's table
+ * start, the access that hung Intel's GPUs in the fill program's run table
+ * (#717), and uploaded whole for every text drawn. Texts alike share a slot; slots are only
+ * added, between the glyph atlas' repacks, which take them all afresh
+ * (reset), or once the texture is as large as it may be (full). Slot 0 is
+ * left for a text past the room (scratch), uploaded as it is drawn.
+ */
+export class GlyphTables {
+  private readonly gl: WebGL2RenderingContext;
+  private readonly state: GlState;
+  texture: WebGLTexture | null = null;
+  /** The slots' floats as uploaded and to upload, and the texture's lines. */
+  private data = new Float32Array(SLOT_FLOATS * SLOTS_A_LINE);
+  private words = new Uint32Array(this.data.buffer);
+  private lines = 0;
+  private lineMost = 1;
+  /** Slots taken, the first not yet uploaded, and whether the texture's lines are all taken. */
+  private count = 1;
+  private uploaded = 1;
+  full = false;
+  /** The first slot by its contents' hash, then the next of that hash, -1 for none. */
+  private readonly byHash = new Map<number, number>();
+  private next = new Int32Array(SLOTS_A_LINE);
+
+  constructor(gl: WebGL2RenderingContext, state: GlState) {
+    this.gl = gl;
+    this.state = state;
+  }
+
+  /** No texture yet, nor slots, as the context comes or comes back. */
+  setUp(): void {
+    this.texture = null;
+    this.lines = 0;
+    this.lineMost = this.gl.getParameter(this.gl.MAX_TEXTURE_SIZE) as number;
+    this.reset();
+  }
+
+  /** Every slot but the scratch let go of, for the texts to take theirs again. */
+  reset(): void {
+    this.count = 1;
+    this.uploaded = 1;
+    this.full = false;
+    this.byHash.clear();
+  }
+
+  /** The slot holding `mode` and `table`, taken if none does; -1 where the room is full. */
+  slot(mode: Float32Array, table: Float32Array): number {
+    let hash = 0x811c9dc5;
+    const modeWords = new Uint32Array(mode.buffer, mode.byteOffset, 4);
+    const tableWords = new Uint32Array(table.buffer, table.byteOffset, TABLE_ENTRIES * 4);
+    for (let i = 0; i < 4; i++) {
+      hash = Math.imul(hash ^ modeWords[i], 0x01000193);
+    }
+
+    for (let i = 0; i < tableWords.length; i++) {
+      hash = Math.imul(hash ^ tableWords[i], 0x01000193);
+    }
+
+    const words = this.words;
+    let s = this.byHash.get(hash) ?? -1;
+    for (; s >= 0; s = this.next[s]) {
+      const at = s * SLOT_FLOATS;
+      let k = 0;
+      while (k < 4 && words[at + k] === modeWords[k]) {
+        k++;
+      }
+
+      while (k < USED_FLOATS && words[at + k] === tableWords[k - 4]) {
+        k++;
+      }
+
+      if (k === USED_FLOATS) {
+        return s;
+      }
+    }
+
+    if (this.count >= this.lineMost * SLOTS_A_LINE) {
+      this.full = true;
+      return -1;
+    }
+
+    s = this.count++;
+    if (this.count * SLOT_FLOATS > this.data.length) {
+      const grown = new Float32Array(this.data.length * 2);
+      grown.set(this.data);
+      this.data = grown;
+      this.words = new Uint32Array(grown.buffer);
+      const next = new Int32Array(this.next.length * 2);
+      next.set(this.next);
+      this.next = next;
+    }
+
+    this.write(s, mode, table);
+    this.next[s] = this.byHash.get(hash) ?? -1;
+    this.byHash.set(hash, s);
+    return s;
+  }
+
+  /** The slots taken since uploaded: into a texture grown to hold them, all of them if grown. */
+  upload(): void {
+    const gl = this.gl;
+    if (this.uploaded === this.count || gl.isContextLost()) {
+      return;
+    }
+
+    const lines = Math.ceil(this.count / SLOTS_A_LINE);
+    let from = Math.floor(this.uploaded / SLOTS_A_LINE);
+    if (!this.texture || lines > this.lines) {
+      if (this.texture) {
+        this.state.dropTexture(this.texture);
+        gl.deleteTexture(this.texture);
+      }
+
+      this.lines = Math.min(this.lineMost, Math.max(lines, this.lines * 2));
+      this.texture = gl.createTexture() as WebGLTexture;
+      this.state.bindTexture(TABLE_UNIT, this.texture);
+      this.state.activeTexture(TABLE_UNIT);
+      gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA32F, TABLE_LINE, this.lines);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      from = 0;
+    }
+
+    this.state.bindTexture(TABLE_UNIT, this.texture);
+    this.state.activeTexture(TABLE_UNIT);
+    gl.texSubImage2D(
+      gl.TEXTURE_2D,
+      0,
+      0,
+      from,
+      TABLE_LINE,
+      lines - from,
+      gl.RGBA,
+      gl.FLOAT,
+      this.data,
+      from * TABLE_LINE * 4,
+    );
+    this.uploaded = this.count;
+  }
+
+  /** The scratch slot made to hold `mode` and `table` now, for a text drawn next past the room. */
+  scratch(mode: Float32Array, table: Float32Array): number {
+    this.write(0, mode, table);
+    const gl = this.gl;
+    this.state.bindTexture(TABLE_UNIT, this.texture);
+    this.state.activeTexture(TABLE_UNIT);
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, TABLE_SLOT, 1, gl.RGBA, gl.FLOAT, this.data, 0);
+    return 0;
+  }
+
+  private write(s: number, mode: Float32Array, table: Float32Array): void {
+    const at = s * SLOT_FLOATS;
+    this.data.set(mode.subarray(0, 4), at);
+    this.data.set(table.subarray(0, TABLE_ENTRIES * 4), at + 4);
+  }
+
+  /** The texture made on the context, deleted. */
+  destroy(): void {
+    if (this.texture) {
+      this.state.dropTexture(this.texture);
+      this.gl.deleteTexture(this.texture);
+      this.texture = null;
+    }
+  }
+}