@swf2es/render 0.1.7 → 0.1.10

package/dist/webgl/programs.d.ts

@@ -13,6 +13,8 @@ export declare const ORIGIN_AT = 4;
 export declare const GLYPH_AT = 5;
 export declare const RUN_AT = 6;
 export declare const TINT_AT = 7;
+/** A merged fill's packed row, in the streaming vertex buffer. */
+export declare const DRAW_AT = 8;
 /** The most cutoff table entries a text's draw takes, as the player's text/saffron.ts builds them. */
 export declare const TABLE_ENTRIES = 48;
 /** Segments a row of the outlines' texture, as the player's text/saffron.ts stores them. */
@@ -51,7 +53,8 @@ export declare const RUN_UNIT: number;
  * space), and passes on its straight colour, the row's colour transform
  * and the texture it samples. uRow names the draw's row (FILL_SLOT); with
  * `multi` (WEBGL_multi_draw), uRunTable names each draw's of a multi-draw by
- * gl_DrawID, which is 0 in a draw of its own.
+ * gl_DrawID, which is 0 in a draw of its own. Merged fills supply the packed
+ * row as aDraw; the atlas leaves that attribute disabled and negative.
  */
 export declare const fillVertex: (multi: boolean) => string;
 /**

package/dist/webgl/programs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"programs.d.ts","sourceRoot":"","sources":["../../src/webgl/programs.ts"],"names":[],"mappings":"AAkBA,2CAA2C;AAC3C,eAAO,MAAM,UAAU,IAAI,CAAC;AAE5B;;;GAGG;AACH,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,oGAAoG;AACpG,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,MAAM,IAAI,CAAC;AACxB,eAAO,MAAM,OAAO,IAAI,CAAC;AAEzB,sGAAsG;AACtG,eAAO,MAAM,aAAa,KAAK,CAAC;AAChC,4FAA4F;AAC5F,eAAO,MAAM,WAAW,OAAO,CAAC;AAEhC;;;;GAIG;AACH,eAAO,MAAM,QAAQ,MAAM,CAAC;AAE5B,qFAAqF;AACrF,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B;;;;;GAKG;AACH,eAAO,MAAM,SAAS,KAAK,CAAC;AAC5B,eAAO,MAAM,QAAQ,QAAU,CAAC;AAEhC,sGAAsG;AACtG,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,oEAAoE;AACpE,eAAO,MAAM,UAAU,IAAI,CAAC;AAC5B,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,0FAA0F;AAC1F,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,uFAAuF;AACvF,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,+DAA+D;AAC/D,eAAO,MAAM,QAAQ,QAA4B,CAAC;AAElD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,UAAW,OAAO,WAkCxC,CAAC;AAiBF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,QAkCxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,QAsBtB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,0qEAqExB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,QAmGxB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,QAwD1B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,wPAO3B,CAAC;AAeF,kHAAkH;AAClH,eAAO,MAAM,WAAW,QAAqB,CAAC;AAuD9C;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,QAmB7B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,QA0C7B,CAAC"}
+{"version":3,"file":"programs.d.ts","sourceRoot":"","sources":["../../src/webgl/programs.ts"],"names":[],"mappings":"AAkBA,2CAA2C;AAC3C,eAAO,MAAM,UAAU,IAAI,CAAC;AAE5B;;;GAGG;AACH,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,oGAAoG;AACpG,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,MAAM,IAAI,CAAC;AACxB,eAAO,MAAM,OAAO,IAAI,CAAC;AACzB,kEAAkE;AAClE,eAAO,MAAM,OAAO,IAAI,CAAC;AAEzB,sGAAsG;AACtG,eAAO,MAAM,aAAa,KAAK,CAAC;AAChC,4FAA4F;AAC5F,eAAO,MAAM,WAAW,OAAO,CAAC;AAEhC;;;;GAIG;AACH,eAAO,MAAM,QAAQ,MAAM,CAAC;AAE5B,qFAAqF;AACrF,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B;;;;;GAKG;AACH,eAAO,MAAM,SAAS,KAAK,CAAC;AAC5B,eAAO,MAAM,QAAQ,QAAU,CAAC;AAEhC,sGAAsG;AACtG,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,oEAAoE;AACpE,eAAO,MAAM,UAAU,IAAI,CAAC;AAC5B,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,0FAA0F;AAC1F,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,uFAAuF;AACvF,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,+DAA+D;AAC/D,eAAO,MAAM,QAAQ,QAA4B,CAAC;AAElD;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,UAAW,OAAO,WAkCxC,CAAC;AAiBF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,QAkCxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,QAsBtB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,0qEAqExB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,QAmGxB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,QAwD1B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,wPAO3B,CAAC;AAeF,kHAAkH;AAClH,eAAO,MAAM,WAAW,QAAqB,CAAC;AAuD9C;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,QAmB7B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,QA0C7B,CAAC"}

package/dist/webgl/programs.js

@@ -15,6 +15,8 @@ export const ORIGIN_AT = 4;
 export const GLYPH_AT = 5;
 export const RUN_AT = 6;
 export const TINT_AT = 7;
+/** A merged fill's packed row, in the streaming vertex buffer. */
+export const DRAW_AT = 8;
 /** The most cutoff table entries a text's draw takes, as the player's text/saffron.ts builds them. */
 export const TABLE_ENTRIES = 48;
 /** Segments a row of the outlines' texture, as the player's text/saffron.ts stores them. */
@@ -53,7 +55,8 @@ export const RUN_UNIT = FILL_UNIT + FILL_TEXTURES;
  * space), and passes on its straight colour, the row's colour transform
  * and the texture it samples. uRow names the draw's row (FILL_SLOT); with
  * `multi` (WEBGL_multi_draw), uRunTable names each draw's of a multi-draw by
- * gl_DrawID, which is 0 in a draw of its own.
+ * gl_DrawID, which is 0 in a draw of its own. Merged fills supply the packed
+ * row as aDraw; the atlas leaves that attribute disabled and negative.
  */
 export const fillVertex = (multi) => `#version 300 es
 ${multi ? "#extension GL_ANGLE_multi_draw : require" : ""}
@@ -62,7 +65,7 @@ layout(location = ${POSITION_AT}) in vec2 aPosition;
 layout(location = ${TEXEL_AT}) in vec2 aTexel;
 layout(location = ${COLOR_AT}) in vec4 aColor;
 uniform highp sampler2D uRows;
-${multi ? "uniform highp isampler2D uRunTable;\nuniform int uRunBase;" : "uniform int uRow;"}
+${multi ? `layout(location = ${DRAW_AT}) in int aDraw;\nuniform highp isampler2D uRunTable;\nuniform int uRunBase;` : "uniform int uRow;"}
 uniform vec4 uView;
 uniform float uUnit;
 out vec4 vColor;
@@ -72,7 +75,7 @@ flat out vec4 vAdd;
 flat out int vSlot;
 
 void main(void) {
-  int draw = ${multi ? `texelFetch(uRunTable, ivec2((uRunBase + gl_DrawID) & ${RUN_MOST - 1}, (uRunBase + gl_DrawID) >> ${Math.log2(RUN_MOST)}), 0).r` : "uRow"};
+  int draw = ${multi ? `aDraw >= 0 ? aDraw : texelFetch(uRunTable, ivec2((uRunBase + gl_DrawID) & ${RUN_MOST - 1}, (uRunBase + gl_DrawID) >> ${Math.log2(RUN_MOST)}), 0).r` : "uRow"};
   int row = draw & ${(1 << FILL_SLOT) - 1};
   vSlot = (draw >> ${FILL_SLOT}) & 15;
   ivec2 at = ivec2((row & ${ROWS_A_LINE - 1}) * ${ROW_TEXELS}, row >> ${Math.log2(ROWS_A_LINE)});

package/dist/webgl/programs.js.map

@@ -1 +1 @@
-{"version":3,"file":"programs.js","sourceRoot":"","sources":["../../src/webgl/programs.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"programs.js","sourceRoot":"","sources":["../../src/webgl/programs.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swf2es/render",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "description": "swf2es's own renderer: a scene list, a planner and a WebGL 2 backend (docs/renderer.md)",
   "keywords": [
     "swf",
@@ -33,6 +33,6 @@
     "src"
   ],
   "dependencies": {
-    "@swf2es/context3d": "0.1.7"
+    "@swf2es/context3d": "0.1.10"
   }
 }

package/src/webgl/atlas.ts

@@ -34,6 +34,8 @@ export interface Place {
   glyphs: { mode: Float32Array; table: Float32Array } | null;
   /** Its geometry's flat (GeometryData.flat). */
   flat: boolean;
+  /** Small, unchanged geometries may be copied into a run's streaming buffer. */
+  batch: { data: GeometryData; frame: number } | null;
 }
 
 /**
@@ -44,6 +46,7 @@ export interface Place {
  * holes outweigh what is live.
  */
 export class GeometryAtlas {
+  frame = 0;
   private readonly gl: WebGL2RenderingContext;
   private readonly state: GlState;
   vertexArray!: WebGLVertexArrayObject;
@@ -129,6 +132,7 @@ export class GeometryAtlas {
    * grown to twice what is live.
    */
   place(geometries: Geometries): void {
+    this.frame++;
     for (const id of geometries.removed) {
       const place = this.places[id];
       if (place?.glyphs) {
@@ -149,6 +153,7 @@ export class GeometryAtlas {
       const data = geometries.get(id);
       if (place && data && !data.glyphs && place.vertices === data.positions.length / 2) {
         this.copyVertices(data, place.vertexStart);
+        place.batch = this.batch(data);
       } else if (place && data) {
         this.places[id] = null;
         if (place.glyphs) {
@@ -298,6 +303,7 @@ export class GeometryAtlas {
       indices: indices.length,
       glyphs: null,
       flat: data.flat === true,
+      batch: this.batch(data),
     };
     this.vertexTop += count;
     this.indexTop += indices.length;
@@ -329,6 +335,12 @@ export class GeometryAtlas {
     gl.bufferSubData(gl.ARRAY_BUFFER, base * VERTEX_BYTES, floats);
   }
 
+  private batch(data: GeometryData): Place["batch"] {
+    return data.positions.length <= 512 && data.indices.length <= 1024 && !data.depths
+      ? { data, frame: this.frame }
+      : null;
+  }
+
   /** Glyph quads copied in at the top of the glyph atlas, their indices made absolute in it. */
   private copyGlyphs(id: number, data: GeometryData): void {
     const gl = this.gl;
@@ -351,6 +363,7 @@ export class GeometryAtlas {
       indices: indices.length,
       glyphs: { mode: glyphs.mode, table: glyphs.table },
       flat: false,
+      batch: null,
     };
     g.top += count;
     g.indexTop += indices.length;

package/src/webgl/backend.ts

@@ -263,7 +263,6 @@ export class WebGLBackend {
     state.scissor(null);
     state.colorMask(15);
     state.useProgram(this.draws.program);
-    state.bindVertexArray(this.atlas.vertexArray);
     state.bindTexture(0, this.gpu.rowsTexture);
     // As many samples as the GPU takes; a BitmapData's frame supersamples instead, as Flash's draw
     // does. Its layers take the stage's, so that their edges are the stage's.

package/src/webgl/batches.ts

@@ -0,0 +1,344 @@
+import type { GlState } from "@swf2es/context3d/device";
+import type { Place } from "./atlas.js";
+import { COLOR_AT, DRAW_AT, POSITION_AT, TEXEL_AT } from "./programs.js";
+
+/** Atlas attributes followed by the packed row: transforms and snapping stay in the shader. */
+const WORDS = 6;
+/** Bound the extra CPU and GPU storage, falling back to the atlas after it fills. */
+const VERTICES_MOST = 2 << 20;
+const INDICES_MOST = 6 << 20;
+/** The least room the GPU buffers and the staging keep, which shrinking stops at. */
+const VERTICES_LEAST = 1 << 14;
+const INDICES_LEAST = 3 << 14;
+/** Frames over which the most used is watched; room four times that is let go of after them. */
+const SHRINK_FRAMES = 240;
+
+/**
+ * Small stable geometries merged in painter's order; unchanged streams reuse
+ * their GPU buffers. Only what changed since the last frame, from the first
+ * draw that differs to the stream's end, is staged on the CPU and uploaded
+ * where it lies: the stream before it stays on the GPU alone, and a buffer
+ * grown keeps it by a copy there.
+ */
+export class FillBatches {
+  vertexArray!: WebGLVertexArrayObject;
+  private vertexBuffer!: WebGLBuffer;
+  private indexBuffer!: WebGLBuffer;
+  /** The staged words, the same bytes as floats, and indices: the stream from fromVertex and fromIndex. */
+  private words = new Uint32Array(0);
+  private floats = new Float32Array(0);
+  private indices = new Uint32Array(0);
+  private vertexCapacity = 0;
+  private indexCapacity = 0;
+  private vertexTop = 0;
+  indexTop = 0;
+  /** Where this frame's staging starts in the stream: the first draw that differs from the last frame's. */
+  private fromVertex = 0;
+  private fromIndex = 0;
+  private readonly previous: NonNullable<Place["batch"]>[] = [];
+  private readonly previousRows: number[] = [];
+  private cursor = 0;
+  /** Stays dirty if preparation aborts before upload, as an overflowing run table can do. */
+  private changed = false;
+  /** The frames of the current watch, and the most of the stream and of the staging they used. */
+  private frames = 0;
+  private mostVertices = 0;
+  private mostIndices = 0;
+  private mostStaged = 0;
+  private mostStagedIndices = 0;
+
+  constructor(
+    private readonly gl: WebGL2RenderingContext,
+    private readonly state: GlState,
+  ) {}
+
+  setUp(): void {
+    const gl = this.gl;
+    this.vertexArray = gl.createVertexArray() as WebGLVertexArrayObject;
+    this.vertexBuffer = gl.createBuffer() as WebGLBuffer;
+    this.indexBuffer = gl.createBuffer() as WebGLBuffer;
+    this.state.bindVertexArray(this.vertexArray);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+    gl.enableVertexAttribArray(POSITION_AT);
+    gl.vertexAttribPointer(POSITION_AT, 2, gl.FLOAT, false, WORDS * 4, 0);
+    gl.enableVertexAttribArray(TEXEL_AT);
+    gl.vertexAttribPointer(TEXEL_AT, 2, gl.FLOAT, false, WORDS * 4, 8);
+    gl.enableVertexAttribArray(COLOR_AT);
+    gl.vertexAttribPointer(COLOR_AT, 4, gl.UNSIGNED_BYTE, true, WORDS * 4, 16);
+    gl.enableVertexAttribArray(DRAW_AT);
+    gl.vertexAttribIPointer(DRAW_AT, 1, gl.INT, WORDS * 4, 20);
+    // Disabled in the atlas VAO: a negative attribute selects the existing run-table path.
+    gl.vertexAttribI4i(DRAW_AT, -1, 0, 0, 0);
+    this.vertexCapacity = 0;
+    this.indexCapacity = 0;
+    this.previous.length = 0;
+    this.previousRows.length = 0;
+    this.changed = false;
+    this.reset();
+  }
+
+  reset(): void {
+    this.vertexTop = 0;
+    this.indexTop = 0;
+    this.cursor = 0;
+    // A preparation that aborted left the whole stream to stage again.
+    this.fromVertex = 0;
+    this.fromIndex = 0;
+  }
+
+  /** Append the whole run, or leave it to multi-draw if copying would cost too much. */
+  add(places: Place[], rows: Int32Array, count: number, frame: number): void {
+    if (count < 32) {
+      return;
+    }
+
+    let vertices = this.vertexTop;
+    let indices = this.indexTop;
+    for (let i = 0; i < count; i++) {
+      const place = places[i];
+      if (!place.batch || place.batch.frame === frame) {
+        return;
+      }
+
+      vertices += place.vertices;
+      indices += place.indices;
+    }
+
+    if (vertices > VERTICES_MOST || indices > INDICES_MOST) {
+      return;
+    }
+
+    for (let i = 0; i < count; i++) {
+      const place = places[i];
+      const batch = place.batch as NonNullable<Place["batch"]>;
+      // An unchanged prefix has the same offsets. After a mismatch, stage the rest in order.
+      if (
+        !this.changed &&
+        (this.previous[this.cursor] !== batch || this.previousRows[this.cursor] !== rows[i])
+      ) {
+        this.changed = true;
+        this.fromVertex = this.vertexTop;
+        this.fromIndex = this.indexTop;
+      }
+
+      this.previous[this.cursor] = batch;
+      this.previousRows[this.cursor++] = rows[i];
+      if (!this.changed) {
+        this.vertexTop += place.vertices;
+        this.indexTop += place.indices;
+        continue;
+      }
+
+      this.stageRoom(vertices - this.fromVertex, indices - this.fromIndex);
+      const data = batch.data;
+      const base = this.vertexTop;
+      const floats = this.floats;
+      const words = this.words;
+      for (let j = 0; j < place.vertices; j++) {
+        const at = (base - this.fromVertex + j) * WORDS;
+        floats[at] = data.positions[j * 2];
+        floats[at + 1] = data.positions[j * 2 + 1];
+        floats[at + 2] = data.texels ? data.texels[j * 2] : 0;
+        floats[at + 3] = data.texels ? data.texels[j * 2 + 1] : 0;
+        words[at + 4] = data.colors[j];
+        words[at + 5] = rows[i];
+      }
+
+      const staged = this.indices;
+      let at = this.indexTop - this.fromIndex;
+      for (let j = 0; j < place.indices; j++) {
+        staged[at++] = base + data.indices[j];
+      }
+
+      this.vertexTop += place.vertices;
+      this.indexTop += place.indices;
+    }
+  }
+
+  /**
+   * The staged part of the stream uploaded where it lies, the buffers grown
+   * to fit it first, keeping what is before it; and, once a watch of
+   * SHRINK_FRAMES has used a quarter of the room or less, the buffers and
+   * the staging made smaller.
+   */
+  upload(): void {
+    this.previous.length = this.cursor;
+    this.previousRows.length = this.cursor;
+    const staging = this.changed && this.indexTop > 0;
+    if (staging) {
+      this.uploadStaged();
+    }
+
+    this.watch(staging);
+  }
+
+  /** What add staged uploaded where it lies, the buffers grown first to fit the stream. */
+  private uploadStaged(): void {
+    const gl = this.gl;
+    this.state.bindVertexArray(this.vertexArray);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+    if (this.vertexTop > this.vertexCapacity) {
+      this.vertexCapacity = Math.min(
+        VERTICES_MOST,
+        Math.max(this.vertexTop, this.vertexCapacity * 2),
+      );
+      this.resize(
+        gl.ARRAY_BUFFER,
+        this.vertexBuffer,
+        this.vertexCapacity * WORDS * 4,
+        this.fromVertex * WORDS * 4,
+      );
+    }
+
+    if (this.indexTop > this.indexCapacity) {
+      this.indexCapacity = Math.min(INDICES_MOST, Math.max(this.indexTop, this.indexCapacity * 2));
+      this.resize(
+        gl.ELEMENT_ARRAY_BUFFER,
+        this.indexBuffer,
+        this.indexCapacity * 4,
+        this.fromIndex * 4,
+      );
+    }
+
+    gl.bufferSubData(
+      gl.ARRAY_BUFFER,
+      this.fromVertex * WORDS * 4,
+      this.words,
+      0,
+      (this.vertexTop - this.fromVertex) * WORDS,
+    );
+    gl.bufferSubData(
+      gl.ELEMENT_ARRAY_BUFFER,
+      this.fromIndex * 4,
+      this.indices,
+      0,
+      this.indexTop - this.fromIndex,
+    );
+    this.changed = false;
+  }
+
+  destroy(): void {
+    this.gl.deleteVertexArray(this.vertexArray);
+    this.gl.deleteBuffer(this.vertexBuffer);
+    this.gl.deleteBuffer(this.indexBuffer);
+    this.words = new Uint32Array(0);
+    this.floats = new Float32Array(0);
+    this.indices = new Uint32Array(0);
+  }
+
+  /** Staging for at least `vertices` and `indices` from its start, what is staged kept. */
+  private stageRoom(vertices: number, indices: number): void {
+    if (vertices * WORDS > this.words.length) {
+      const grown = new Uint32Array(
+        Math.min(VERTICES_MOST * WORDS, Math.max(vertices * WORDS, this.words.length * 2)),
+      );
+      grown.set(this.words);
+      this.words = grown;
+      this.floats = new Float32Array(grown.buffer);
+    }
+
+    if (indices > this.indices.length) {
+      const grown = new Uint32Array(
+        Math.min(INDICES_MOST, Math.max(indices, this.indices.length * 2)),
+      );
+      grown.set(this.indices);
+      this.indices = grown;
+    }
+  }
+
+  /**
+   * A frame's use counted, after its upload; at a watch's end, room four
+   * times what it used at most let go of: the GPU buffers keep the stream,
+   * all of it there now, and the staging, whose bytes matter only between
+   * add and upload, is made anew.
+   */
+  private watch(staging: boolean): void {
+    this.mostVertices = Math.max(this.mostVertices, this.vertexTop);
+    this.mostIndices = Math.max(this.mostIndices, this.indexTop);
+    if (staging) {
+      this.mostStaged = Math.max(this.mostStaged, this.vertexTop - this.fromVertex);
+      this.mostStagedIndices = Math.max(this.mostStagedIndices, this.indexTop - this.fromIndex);
+    }
+
+    if (++this.frames < SHRINK_FRAMES) {
+      return;
+    }
+
+    const gl = this.gl;
+    // With nothing uploaded for a change, as for a stream of no draws, nothing on the GPU is kept.
+    const kept = !this.changed;
+    const keepVertices = kept ? this.vertexTop : 0;
+    const keepIndices = kept ? this.indexTop : 0;
+    const vertices = Math.max(VERTICES_LEAST, this.mostVertices * 2);
+    if (this.mostVertices * 4 <= this.vertexCapacity && vertices < this.vertexCapacity) {
+      this.state.bindVertexArray(this.vertexArray);
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+      this.vertexCapacity = vertices;
+      this.resize(
+        gl.ARRAY_BUFFER,
+        this.vertexBuffer,
+        vertices * WORDS * 4,
+        keepVertices * WORDS * 4,
+      );
+    }
+
+    const indices = Math.max(INDICES_LEAST, this.mostIndices * 2);
+    if (this.mostIndices * 4 <= this.indexCapacity && indices < this.indexCapacity) {
+      this.state.bindVertexArray(this.vertexArray);
+      this.indexCapacity = indices;
+      this.resize(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer, indices * 4, keepIndices * 4);
+    }
+
+    const staged = Math.max(VERTICES_LEAST, this.mostStaged * 2) * WORDS;
+    if (this.mostStaged * 4 * WORDS <= this.words.length && staged < this.words.length) {
+      this.words = new Uint32Array(staged);
+      this.floats = new Float32Array(this.words.buffer);
+    }
+
+    const stagedIndices = Math.max(INDICES_LEAST, this.mostStagedIndices * 2);
+    if (this.mostStagedIndices * 4 <= this.indices.length && stagedIndices < this.indices.length) {
+      this.indices = new Uint32Array(stagedIndices);
+    }
+
+    this.frames = 0;
+    this.mostVertices = 0;
+    this.mostIndices = 0;
+    this.mostStaged = 0;
+    this.mostStagedIndices = 0;
+  }
+
+  /**
+   * `buffer`, bound to `target` (the index buffer through this VAO), made
+   * `bytes` long, its first `keep` bytes kept by copies on the GPU, through
+   * a buffer of their own, as a new store loses the old one's.
+   */
+  private resize(target: number, buffer: WebGLBuffer, bytes: number, keep: number): void {
+    const gl = this.gl;
+    if (keep <= 0) {
+      gl.bufferData(target, bytes, gl.DYNAMIC_DRAW);
+      return;
+    }
+
+    const copy = gl.createBuffer() as WebGLBuffer;
+    if (target === gl.ELEMENT_ARRAY_BUFFER) {
+      // WebGL copies only between buffers of one kind: the copy becomes an index buffer by a
+      // binding as one, outside this VAO, whose own it would replace.
+      this.state.bindVertexArray(null);
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, copy);
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+      this.state.bindVertexArray(this.vertexArray);
+    }
+
+    gl.bindBuffer(gl.COPY_WRITE_BUFFER, copy);
+    gl.bufferData(gl.COPY_WRITE_BUFFER, keep, gl.STREAM_COPY);
+    gl.bindBuffer(gl.COPY_READ_BUFFER, buffer);
+    gl.copyBufferSubData(gl.COPY_READ_BUFFER, gl.COPY_WRITE_BUFFER, 0, 0, keep);
+    gl.bufferData(target, bytes, gl.DYNAMIC_DRAW);
+    gl.bindBuffer(gl.COPY_READ_BUFFER, copy);
+    gl.copyBufferSubData(gl.COPY_READ_BUFFER, target, 0, 0, keep);
+    gl.bindBuffer(gl.COPY_READ_BUFFER, null);
+    gl.bindBuffer(gl.COPY_WRITE_BUFFER, null);
+    gl.deleteBuffer(copy);
+  }
+}

package/src/webgl/draws.ts

@@ -16,6 +16,7 @@ import {
   SNAP,
 } from "../scene.js";
 import type { GeometryAtlas, Place } from "./atlas.js";
+import { FillBatches } from "./batches.js";
 import { setModeBlend } from "./composite.js";
 import type { GpuTextures } from "./gpu-textures.js";
 import type { KernelHost, KernelPrograms } from "./kernels.js";
@@ -52,8 +53,8 @@ interface MultiDraw {
   ): void;
 }
 
-/** Last scene entry, table start, draw count, used units, then each unit's texture and sampling. */
-const RUN_STRIDE = 4 + FILL_TEXTURES * 2;
+/** Last entry, table start, draws, units, batch start/count, then each unit's texture and sampling. */
+const RUN_STRIDE = 6 + FILL_TEXTURES * 2;
 
 /** The most masks the stencil's eight bits count. */
 const STENCIL_MOST = 255;
@@ -79,6 +80,7 @@ export class Draws {
   private readonly gl: WebGL2RenderingContext;
   private readonly state: GlState;
   private readonly atlas: GeometryAtlas;
+  private readonly batches: FillBatches;
   private readonly gpu: GpuTextures;
   private readonly pool: TargetPool;
   /** The fill program, and where it takes its row, view and Flash's pixels a stage pixel. */
@@ -116,6 +118,7 @@ export class Draws {
   private readonly runCounts = new Int32Array(RUN_MOST);
   private readonly runOffsets = new Int32Array(RUN_MOST);
   private readonly runRows = new Int32Array(RUN_MOST);
+  private readonly runPlaces: Place[] = [];
   /** Draws gathered by gatherRun, and the fill units they sample, a bit each. */
   private runCount = 0;
   private runUnits = 0;
@@ -185,6 +188,7 @@ export class Draws {
     this.gl = gl;
     this.state = state;
     this.atlas = atlas;
+    this.batches = new FillBatches(gl, state);
     this.gpu = gpu;
     this.pool = pool;
   }
@@ -220,6 +224,7 @@ export class Draws {
     this.prepared = false;
     this.runBaseLocation = gl.getUniformLocation(this.program, "uRunBase");
     if (this.multi) {
+      this.batches.setUp();
       this.sizeRunTable(1);
       gl.uniform1i(gl.getUniformLocation(this.program, "uRunTable"), RUN_UNIT);
     }
@@ -270,6 +275,7 @@ export class Draws {
       return;
     }
 
+    this.batches.reset();
     if (commands.length > this.commandStarts.length) {
       this.commandStarts = new Uint32Array(commands.ops.length / 4);
     }
@@ -334,10 +340,17 @@ 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;
         for (let j = 0; j < FILL_TEXTURES; j++) {
           if (this.runUnits & (1 << j)) {
-            this.runs[run + 4 + j * 2] = this.unitIds[j];
-            this.runs[run + 5 + j * 2] = this.unitSampling[j];
+            this.runs[run + 6 + j * 2] = this.unitIds[j];
+            this.runs[run + 7 + j * 2] = this.unitSampling[j];
           }
         }
 
@@ -369,6 +382,7 @@ export class Draws {
       );
     }
 
+    this.batches.upload();
     this.prepared = true;
   }
 
@@ -430,10 +444,9 @@ export class Draws {
     this.lastRow = -1;
   }
 
-  /** The fill program, its vertex array and rows bound, as runs and masks draw with them. */
+  /** The fill program and rows bound; each run selects its vertex array. */
   useFill(): void {
     this.state.useProgram(this.program);
-    this.state.bindVertexArray(this.atlas.vertexArray);
     this.state.bindTexture(0, this.gpu.rowsTexture);
   }
 
@@ -596,12 +609,16 @@ export class Draws {
       let base = 0;
       let draws: number;
       let units: number;
-      const bindings = run + 4;
+      let batchStart = 0;
+      let batchCount = 0;
+      const bindings = run + 6;
       if (this.prepared) {
         i = this.runs[run];
         base = this.runs[run + 1];
         draws = this.runs[run + 2];
         units = this.runs[run + 3];
+        batchStart = this.runs[run + 4];
+        batchCount = this.runs[run + 5];
         run += RUN_STRIDE;
       } else {
         i = this.gatherRun(scene, i, end, stencil);
@@ -622,6 +639,15 @@ export class Draws {
         }
       }
 
+      if (batchCount > 0) {
+        state.bindVertexArray(this.batches.vertexArray);
+        state.bindTexture(RUN_UNIT, this.runTable);
+        state.bindSampler(RUN_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];
@@ -701,6 +727,7 @@ export class Draws {
       }
 
       this.runCounts[draws] = place.indices;
+      this.runPlaces[draws] = place;
       this.runOffsets[draws] = place.indexStart * 4;
       this.runRows[draws] =
         scene.row[j] | (slot << FILL_SLOT) | (scene.sampler[j] & SNAP ? SNAP_BIT : 0);
@@ -709,6 +736,7 @@ export class Draws {
     }
 
     this.runCount = draws;
+    this.runPlaces.length = draws;
 
     return last;
   }
@@ -888,6 +916,10 @@ export class Draws {
 
   /** The programs and draw table made on the context, deleted. */
   destroy(): void {
+    if (this.multi) {
+      this.batches.destroy();
+    }
+
     if (this.runTable) {
       this.state.dropTexture(this.runTable);
       this.gl.deleteTexture(this.runTable);