@swf2es/render 0.0.0-stage → 0.1.0

package/src/scene.ts

@@ -0,0 +1,297 @@
+/**
+ * Blend modes as a scene list names them, in Flash's order: the separable
+ * ones blend straight colours, the rest have formulas of their own.
+ */
+export const NORMAL = 0;
+export const LAYER = 1;
+export const MULTIPLY = 2;
+export const SCREEN = 3;
+export const LIGHTEN = 4;
+export const DARKEN = 5;
+export const DIFFERENCE = 6;
+export const ADD = 7;
+export const SUBTRACT = 8;
+export const INVERT = 9;
+export const ALPHA = 10;
+export const ERASE = 11;
+export const OVERLAY = 12;
+export const HARDLIGHT = 13;
+/**
+ * A Pixel Bender blend shader's, from KERNEL on: KERNEL + k blends by the
+ * kernel of chain k of the frame's filters (filters.ts, BLEND). A layer
+ * alone takes it, never a draw or a kept layer, whose modes are bytes.
+ */
+export const KERNEL = 14;
+/**
+ * Not Flash's: an alpha mask's layer composited onto the unfiltered layer
+ * that ends after it, the layer of what it masks, keeping only what the
+ * mask covers, scaled by the mask's alpha. measureLayers cuts that layer to
+ * the mask's rectangle, past which nothing of it shows. A LAYER_END alone
+ * takes it; negative, as no blend mode's number is.
+ */
+export const ALPHA_MASK = -2;
+
+/** Flash's blend mode names, by their number here. */
+export const BLEND_NAMES = [
+  "normal",
+  "layer",
+  "multiply",
+  "screen",
+  "lighten",
+  "darken",
+  "difference",
+  "add",
+  "subtract",
+  "invert",
+  "alpha",
+  "erase",
+  "overlay",
+  "hardlight",
+];
+
+/**
+ * What an entry is: a draw, or a mask's marker. A mask's own draws lie
+ * between its MASK_BEGIN and its MASK_USE, which names them (its geometry
+ * the first, its row how many) for the planner to push them into the
+ * stencil; what it masks follows, up to the MASK_POP that names them again
+ * to take them out.
+ */
+export const DRAW = 0;
+export const MASK_BEGIN = 1;
+export const MASK_USE = 2;
+export const MASK_POP = 3;
+/**
+ * A layer: what lies between LAYER_BEGIN and LAYER_END is drawn into a
+ * target of its own over a rectangle of the target, then composited onto
+ * what is below in the END's blend mode (its geometry), its colour
+ * transform the END's row, or none (-1), after the END's chain of filters
+ * (its texture, or none, -1) runs over it. The BEGIN's geometry is the
+ * layer's number, whose rectangle measureLayers finds.
+ */
+export const LAYER_BEGIN = 4;
+export const LAYER_END = 5;
+/**
+ * A layer kept from a frame before (Keeps) composited again, over the
+ * rectangle of its layer number (its geometry), in its blend mode, its
+ * colour transform its row; its texture the kept one's id.
+ */
+export const KEPT = 6;
+
+/** How an entry samples its texture: smoothed, and clamped, repeated or mirrored past its edges. */
+export const SMOOTH = 1;
+export const CLAMP = 0;
+export const REPEAT = 2;
+export const MIRROR = 4;
+/**
+ * Drawn as drawTriangles' textured triangles are: its texels each
+ * vertex's u and v from 0 to 1, interpolated in perspective by the depth
+ * (t) it carries (GeometryData.depths), and the texture read as Flash
+ * reads it, once a pixel of Flash's (webgl/programs.ts, meshFragment).
+ */
+export const MESH = 8;
+/**
+ * A 3D object's quad: drawn by the mesh program, its texture the kept
+ * output (Keeps) its bitmap was drawn into (WebGLBackend.drawPlane), its
+ * texels in that bitmap's texels, read smoothed at the centre of each pixel
+ * of Flash's, as Flash reads it.
+ */
+export const PLANE = 16;
+/**
+ * Its vertices placed on quarters of a pixel of Flash's, ties to even, as
+ * Flash places a glyph's outline (the `legacy-static-text` case, drawn in
+ * adl): a pixel of the screen, a BitmapData's in a draw, a texel of a 3D
+ * object's bitmap.
+ */
+export const SNAP = 32;
+/**
+ * A shader fill's part: its texels the kernel's coordinates, carried as a
+ * mesh's are with a depth of 1, and its texture the chain of the frame's
+ * filters that holds the kernel (filters.ts, FILL_SHADER); drawn by a
+ * program of the kernel's, once a pixel of Flash's, at its centre, as adl
+ * draws one.
+ */
+export const SHADED = 64;
+
+/**
+ * Which pixels a filtered layer's object covers (SceneList.wholes): those
+ * of the target its drawing touches; or whole units, as Flash's bitmap of
+ * an object is, antialiased those its edges touch and one more right and
+ * down where an edge lies on one, aliased those whose centres it covers.
+ */
+export const NO_WHOLE = 0;
+export const WHOLE_SMOOTH = 1;
+export const WHOLE_ALIASED = 2;
+
+/**
+ * A frame's drawing in order: each entry a geometry drawn under a row with
+ * a blend mode, and the texture it samples (-1 for none) and how. Boundaries
+ * (filters, masks, blend layers) come with the features that need them.
+ */
+export class SceneList {
+  geometry = new Int32Array(1024);
+  row = new Int32Array(1024);
+  blend = new Uint8Array(1024);
+  texture = new Int32Array(1024);
+  sampler = new Uint8Array(1024);
+  kind = new Uint8Array(1024);
+  length = 0;
+  /** Each layer's rectangle of the target, in its pixels from the top left: x, y, width, height. */
+  layers = new Int32Array(64);
+  /**
+   * Each layer's padding, as its filters reach past what is drawn: in the
+   * target's units (its pixels over the resolution), or -1 for an
+   * unfiltered layer, which covers what is drawn alone.
+   */
+  pads = new Int32Array(16);
+  /**
+   * Whether each filtered layer covers whole units of the target, as Flash
+   * places the bitmap a ShaderFilter's kernel runs over, its coordinates
+   * from its corner: NO_WHOLE, WHOLE_SMOOTH or WHOLE_ALIASED.
+   */
+  wholes = new Uint8Array(16);
+  /**
+   * Each whole layer's object, Flash's bitmap of it, uncut by the target:
+   * x, y, width and height in target pixels, as measureLayers finds it.
+   */
+  objects = new Float64Array(64);
+  /** Each layer's kept output, which its output becomes (Keeps), or -1. */
+  keeps = new Int32Array(16);
+  /** The layer each layer is in, or -1. */
+  parents = new Int32Array(16);
+  /** The layers begun and not yet ended, innermost last. */
+  private readonly open: number[] = [];
+  /**
+   * Each filtered layer's area as measured, before it was rounded and
+   * padded: least x and y, greatest x and y, in target pixels.
+   */
+  areas = new Float64Array(64);
+  layerCount = 0;
+
+  reset(): void {
+    this.length = 0;
+    this.layerCount = 0;
+    this.open.length = 0;
+  }
+
+  draw(geometry: number, row: number, blend: number, texture = -1, sampler = 0): void {
+    this.push(DRAW, geometry, row, blend, texture, sampler);
+  }
+
+  /**
+   * A layer begun, padded for its filters (or -1), over whole units as
+   * `whole` says (wholes), its rectangle none till measured (layerRect):
+   * its number.
+   */
+  layerBegin(padding = -1, keep = -1, whole = NO_WHOLE): number {
+    const layer = this.newLayer(padding, keep);
+    this.wholes[layer] = whole;
+    this.push(LAYER_BEGIN, layer, 0, 0, -1, 0);
+    this.open.push(layer);
+    return layer;
+  }
+
+  /**
+   * Kept output `keep` composited again over the rectangle x y width height
+   * of the target, in blend mode `mode`, coloured by `row`.
+   */
+  keptLayer(
+    keep: number,
+    mode: number,
+    row: number,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+  ): void {
+    const layer = this.newLayer(-1, keep);
+    this.layerRect(layer, x, y, width, height);
+    this.push(KEPT, layer, row, mode, keep, 0);
+  }
+
+  private newLayer(padding: number, keep: number): number {
+    const layer = this.layerCount++;
+    if (layer >= this.pads.length) {
+      this.layers = grow(this.layers);
+      this.pads = grow(this.pads);
+      this.wholes = grow(this.wholes);
+      const objects = new Float64Array(this.objects.length * 2);
+      objects.set(this.objects);
+      this.objects = objects;
+      this.keeps = grow(this.keeps);
+      this.parents = grow(this.parents);
+      const areas = new Float64Array(this.areas.length * 2);
+      areas.set(this.areas);
+      this.areas = areas;
+    }
+
+    this.pads[layer] = padding;
+    this.wholes[layer] = NO_WHOLE;
+    this.keeps[layer] = keep;
+    this.parents[layer] = this.open.at(-1) ?? -1;
+    this.layerRect(layer, 0, 0, 0, 0);
+    return layer;
+  }
+
+  /** Filtered layer `layer` padded by `padding` after all, as its filters were fitted once it was drawn. */
+  padLayer(layer: number, padding: number): void {
+    this.pads[layer] = padding;
+  }
+
+  /** The layer begun last ended: filtered by `chain` (or -1), composited in `mode`, coloured by `row`. */
+  layerEnd(mode: number, row: number, chain = -1): void {
+    this.open.pop();
+    this.push(LAYER_END, mode, row, 0, chain, 0);
+  }
+
+  /**
+   * Layer `layer` covers the rectangle x y width height of the target, in
+   * its pixels from the top left; one of no size shows nothing.
+   */
+  layerRect(layer: number, x: number, y: number, width: number, height: number): void {
+    const r = this.layers;
+    r[layer * 4] = x;
+    r[layer * 4 + 1] = y;
+    r[layer * 4 + 2] = width;
+    r[layer * 4 + 3] = height;
+  }
+
+  /**
+   * A mask's marker, with two numbers in its geometry and row: MASK_USE
+   * and MASK_POP name the mask's draws, from the first, so many of them.
+   */
+  marker(kind: number, a = 0, b = 0): void {
+    this.push(kind, a, b, 0, -1, 0);
+  }
+
+  private push(
+    kind: number,
+    geometry: number,
+    row: number,
+    blend: number,
+    texture: number,
+    sampler: number,
+  ): void {
+    if (this.length === this.geometry.length) {
+      this.geometry = grow(this.geometry);
+      this.row = grow(this.row);
+      this.blend = grow(this.blend);
+      this.texture = grow(this.texture);
+      this.sampler = grow(this.sampler);
+      this.kind = grow(this.kind);
+    }
+
+    const at = this.length++;
+    this.kind[at] = kind;
+    this.geometry[at] = geometry;
+    this.row[at] = row;
+    this.blend[at] = blend;
+    this.texture[at] = texture;
+    this.sampler[at] = sampler;
+  }
+}
+
+function grow<T extends Int32Array | Uint8Array>(array: T): T {
+  const grown = new (array.constructor as new (length: number) => T)(array.length * 2);
+  grown.set(array);
+  return grown;
+}

package/src/shelves.ts

@@ -0,0 +1,70 @@
+// Rectangles placed side by side on pages, in shelves, in the order they
+// come: a frame's held layers and their filters' targets (plan, HOLD_PUSH),
+// each of a page a pass draws into with the others of its kind.
+
+/** Rectangles on pages `width` wide and at most `most` high, each page as high as they need. */
+export class Shelves {
+  /** Each rectangle's page, and its corner there. */
+  readonly page: number[] = [];
+  readonly x: number[] = [];
+  readonly y: number[] = [];
+  count = 0;
+  /** Each page's height, as far down as its rectangles reach. */
+  readonly heights: number[] = [];
+  pages = 0;
+  private width = 0;
+  private most = 0;
+  /** Where the shelf open starts, how high it is, and how far along it is filled. */
+  private shelf = 0;
+  private shelfHeight = 0;
+  private along = 0;
+
+  /** Empty, for pages `width` wide and at most `most` high. */
+  reset(width: number, most: number): void {
+    this.width = width;
+    this.most = most;
+    this.count = 0;
+    this.pages = 0;
+    this.shelf = 0;
+    this.shelfHeight = 0;
+    this.along = 0;
+  }
+
+  /** A rectangle `w` by `h` placed: its number; -1 for one larger than a page. */
+  add(w: number, h: number): number {
+    if (w > this.width || h > this.most) {
+      return -1;
+    }
+
+    if (this.pages === 0) {
+      this.newPage();
+    }
+
+    if (this.along + w > this.width) {
+      this.shelf += this.shelfHeight;
+      this.shelfHeight = 0;
+      this.along = 0;
+    }
+
+    if (this.shelf + h > this.most) {
+      this.newPage();
+    }
+
+    const i = this.count++;
+    const page = this.pages - 1;
+    this.page[i] = page;
+    this.x[i] = this.along;
+    this.y[i] = this.shelf;
+    this.along += w;
+    this.shelfHeight = Math.max(this.shelfHeight, h);
+    this.heights[page] = Math.max(this.heights[page], this.shelf + this.shelfHeight);
+    return i;
+  }
+
+  private newPage(): void {
+    this.heights[this.pages++] = 0;
+    this.shelf = 0;
+    this.shelfHeight = 0;
+    this.along = 0;
+  }
+}

package/src/textures.ts

@@ -0,0 +1,198 @@
+import { IDLE_FRAMES } from "./geometry.js";
+import { type Handle, Registry } from "./registry.js";
+
+/** A texture as its owner holds it: its id, and the generation the id had. */
+export type TextureHandle = Handle;
+
+/**
+ * A texture's size, and its pixels while they wait to be uploaded:
+ * premultiplied RGBA bytes, or RGBA floats, which only a kernel reads, a
+ * texel at a time.
+ */
+export interface TextureData {
+  width: number;
+  height: number;
+  pixels: Uint8Array | Float32Array | null;
+}
+
+/**
+ * How many frames a texture keeps the bytes it was last set from without
+ * being set again, and spare bytes wait for another texture: a texture set
+ * every frame, as a BitmapData drawn into every frame is, is converted into
+ * the same bytes each time; one that stops changing lets them go a couple
+ * of seconds later.
+ */
+export const KEEP_FRAMES = 60;
+
+/** The spare bytes kept at most, the least lately spared let go of first. */
+const SPARE_BYTES = 32 << 20;
+
+/**
+ * Every texture a scene list may name, by id. An owner adds a texture's
+ * pixels, and sets them again as they change; the backend uploads what is
+ * pending in its next render and lets the pixels go, keeping no hold on
+ * them. What goes undrawn for its idle frames, IDLE_FRAMES unless it was
+ * given fewer, is let go of, as geometries are.
+ *
+ * The bytes an owner fills to add or set a texture come from `bytes`, and
+ * stay this registry's: filled, they are passed to add or set at once and
+ * left be after, as they are lent again, to the same texture to be set again
+ * or, once it let them go, to another. A texture set again keeps the bytes it
+ * was last set from for KEEP_FRAMES; then, or once uploaded for one only
+ * added, or when it is removed, idle or with a lost context, they are spare
+ * for as long, for the next texture of their length.
+ */
+export class Textures extends Registry {
+  private readonly data: (TextureData | null)[] = [];
+  /** The bytes each texture was last added or set from, where `bytes` lent them, and the frame. */
+  private readonly kept: (Uint8Array | null)[] = [];
+  private readonly setAt: number[] = [];
+  /** Whether each texture was set again since it was added, which keeps its bytes for a while. */
+  private readonly changing: boolean[] = [];
+  /** Bytes no texture keeps, by length, the least lately spared first. */
+  private readonly spare = new Map<number, { bytes: Uint8Array; at: number }[]>();
+  private spareBytes = 0;
+  private readonly lent = new WeakSet<Uint8Array>();
+  /** Added or set again since the backend last took them. */
+  pending: number[] = [];
+
+  /**
+   * `length` bytes to fill and add or set a texture from: those texture `id`
+   * keeps where they are as long, else spare ones, else new.
+   */
+  bytes(length: number, id = -1): Uint8Array {
+    const own = id >= 0 && this.holds(id) ? this.kept[id] : null;
+    if (own?.length === length) {
+      return own;
+    }
+
+    const spare = this.spare.get(length)?.pop();
+    if (spare) {
+      this.spareBytes -= length;
+      return spare.bytes;
+    }
+
+    const bytes = new Uint8Array(length);
+    this.lent.add(bytes);
+    return bytes;
+  }
+
+  /** A texture of `pixels`, let go of once undrawn for `idle` frames. */
+  add(
+    width: number,
+    height: number,
+    pixels: Uint8Array | Float32Array,
+    idle = IDLE_FRAMES,
+  ): TextureHandle {
+    const handle = this.hold(idle);
+    this.data[handle.id] = { width, height, pixels };
+    this.keep(handle.id, pixels);
+    this.changing[handle.id] = false;
+    this.pending.push(handle.id);
+    return handle;
+  }
+
+  /**
+   * `id`'s pixels changed, its size with them perhaps; with `idle`, it is
+   * let go of after as many undrawn frames where that is fewer.
+   */
+  set(id: number, width: number, height: number, pixels: Uint8Array, idle?: number): void {
+    const data = this.data[id];
+    if (data) {
+      data.width = width;
+      data.height = height;
+      data.pixels = pixels;
+      this.keep(id, pixels);
+      this.changing[id] = true;
+      this.pending.push(id);
+      if (idle !== undefined) {
+        this.idleWithin(id, idle);
+      }
+    }
+  }
+
+  get(id: number): TextureData | null {
+    return this.data[id] ?? null;
+  }
+
+  /** The bytes held on the CPU: those textures keep, and spare ones. */
+  get heldBytes(): number {
+    let held = this.spareBytes;
+    for (const bytes of this.kept) {
+      held += bytes?.length ?? 0;
+    }
+
+    return held;
+  }
+
+  /** A frame ends: what went unused too long is let go of, and bytes kept no longer needed spared. */
+  override endFrame(): void {
+    super.endFrame();
+    for (let id = 0; id < this.kept.length; id++) {
+      const bytes = this.kept[id];
+      const done = !this.changing[id] || this.frame - this.setAt[id] > KEEP_FRAMES;
+      // Never while they wait to be uploaded, as they may where the backend drew no frame.
+      if (bytes && done && this.data[id]?.pixels !== bytes) {
+        this.kept[id] = null;
+        this.spareOf(bytes);
+      }
+    }
+
+    for (const [length, list] of this.spare) {
+      while (list.length && this.frame - list[0].at > KEEP_FRAMES) {
+        list.shift();
+        this.spareBytes -= length;
+      }
+    }
+  }
+
+  protected override dropped(id: number): void {
+    this.data[id] = null;
+    const bytes = this.kept[id];
+    this.kept[id] = null;
+    if (bytes) {
+      this.spareOf(bytes);
+    }
+  }
+
+  /** `pixels` kept for `id` where `bytes` lent them; those it kept before spared. */
+  private keep(id: number, pixels: Uint8Array | Float32Array): void {
+    const before = this.kept[id];
+    const own = pixels instanceof Uint8Array && this.lent.has(pixels) ? pixels : null;
+    if (before && before !== own) {
+      this.spareOf(before);
+    }
+
+    this.kept[id] = own;
+    this.setAt[id] = this.frame;
+  }
+
+  private spareOf(bytes: Uint8Array): void {
+    if (bytes.length > SPARE_BYTES) {
+      return;
+    }
+
+    let list = this.spare.get(bytes.length);
+    if (!list) {
+      list = [];
+      this.spare.set(bytes.length, list);
+    }
+
+    list.push({ bytes, at: this.frame });
+    this.spareBytes += bytes.length;
+    // Past the cap, the least lately spared go, whatever their length.
+    while (this.spareBytes > SPARE_BYTES) {
+      let oldest = -1;
+      let oldestAt = Number.POSITIVE_INFINITY;
+      for (const [length, entries] of this.spare) {
+        if (entries.length && entries[0].at < oldestAt) {
+          oldestAt = entries[0].at;
+          oldest = length;
+        }
+      }
+
+      this.spare.get(oldest)?.shift();
+      this.spareBytes -= oldest;
+    }
+  }
+}