@swf2es/player 0.0.0-stage → 0.1.0

package/src/scene/shapes.ts

@@ -0,0 +1,386 @@
+// A shape layer's fills as geometries of the renderer's (@swf2es/render): each fill tessellated
+// (fills.ts), in order, a geometry for each stretch of solid fills, each stretch of fills of one
+// bitmap sampled alike, and each gradient fill, its vertices carrying where they sample in texels;
+// then drawTriangles' textured triangles, a geometry each mesh. What is left out is counted.
+
+import { IDENTITY, type Matrix } from "@swf2es/format";
+import type { GeometryData } from "@swf2es/render";
+import { invert } from "../display/geometry.js";
+import { type Region as Area, RADIAL_MAX } from "../display/gradients.js";
+import type {
+  GradientFill,
+  ImageFill,
+  Path,
+  ShaderPaint,
+  ShapeLayer,
+  TriangleMesh,
+} from "../display/shapes.js";
+import { type FillTessellator, regionOf, resolveFills } from "./fills.js";
+
+/**
+ * What the renderer cannot draw yet, counted as it is met, for a test or a
+ * probe to read: advanced text drawn as normal; clips within masks left
+ * out; displacement maps and other filters it has no pass for, ignored.
+ */
+export const unsupported = {
+  /** Texts with advanced anti-aliasing, drawn as normal. */
+  advancedTexts: 0,
+  /**
+   * Masks that mask nothing, a 3D one or one inside what it masks; and what
+   * would clip a mask's own coverage (its mask, scrollRect, clip layer or
+   * gutter), which it is drawn without.
+   */
+  masks: 0,
+  /** Blend modes no blend is drawn for, a Pixel Bender shader's, drawn as normal. */
+  blendModes: 0,
+  filters: 0,
+};
+
+/**
+ * A layer's geometry for one paint: a stretch of solid fills (null), a
+ * stretch of fills of one bitmap (the first's paint), a gradient fill, or
+ * drawTriangles' mesh, whose texels are its u and v and which carries its
+ * t (MESH).
+ */
+/**
+ * What a bitmap part is sampled by, all the view reads of its paint
+ * (paintTexture, paintSampler): fills of one bitmap that sample it alike
+ * (samplesAlike) share a part, each through its own matrix, which its
+ * vertices' texels hold.
+ */
+export type BitmapSampling = Pick<ImageFill, "type" | "image" | "smooth" | "repeat">;
+
+/** Whether `a` and `b` sample one bitmap alike, and so may share a part. */
+function samplesAlike(a: BitmapSampling, b: BitmapSampling): boolean {
+  return a.image === b.image && a.smooth === b.smooth && a.repeat === b.repeat;
+}
+
+export interface Part {
+  geometry: GeometryData;
+  /** A shader fill's part has its kernel's coordinates for texels, and a depth of 1 for each vertex (MESH's). */
+  paint: BitmapSampling | GradientFill | ShaderPaint | null;
+  /** A radial gradient's region, the texels its texture covers. */
+  region: Area | null;
+  mesh: TriangleMesh | null;
+}
+
+const WHITE = 0xffffffff;
+/** The texels a linear gradient's ramp has: 256 across the gradient square, -819.2 to 819.2. */
+const RAMP = 256;
+
+/** A straight ARGB colour as a vertex carries it: its bytes red, green, blue and alpha from the lowest. */
+export function vertexColor(argb: number): number {
+  return (
+    (((argb >>> 16) & 0xff) | (argb & 0xff00) | ((argb & 0xff) << 16) | (argb & 0xff000000)) >>> 0
+  );
+}
+
+/**
+ * What the part open is gathered in, grown as it needs and kept for the
+ * next: a drawing redrawn on every frame made each part's numbers in lists
+ * and copied them out, garbage on every frame. A part copies out what it used.
+ */
+const SCRATCH_VERTICES = 512;
+/** The vertices past which scratch grown for a large drawing is let go of after it, not kept. */
+const MOST_KEPT_VERTICES = 65536;
+let scratchPositions = new Float32Array(SCRATCH_VERTICES * 2);
+let scratchColors = new Uint32Array(SCRATCH_VERTICES);
+let scratchTexels = new Float32Array(SCRATCH_VERTICES * 2);
+let scratchIndices = new Uint32Array(SCRATCH_VERTICES * 3);
+
+/** `array` with room for `n` elements, its first `used` kept. */
+function roomy<T extends Float32Array | Uint32Array>(array: T, n: number, used: number): T {
+  if (n <= array.length) {
+    return array;
+  }
+
+  const grown = new (array.constructor as new (n: number) => T)(Math.max(n, array.length * 2));
+  grown.set(array.subarray(0, used));
+
+  return grown;
+}
+
+/** The scratch back at its usual size, where a large drawing grew it. */
+function shrinkScratch(): void {
+  if (scratchColors.length > MOST_KEPT_VERTICES) {
+    scratchPositions = new Float32Array(SCRATCH_VERTICES * 2);
+    scratchColors = new Uint32Array(SCRATCH_VERTICES);
+    scratchTexels = new Float32Array(SCRATCH_VERTICES * 2);
+  }
+
+  if (scratchIndices.length > MOST_KEPT_VERTICES * 3) {
+    scratchIndices = new Uint32Array(SCRATCH_VERTICES * 3);
+  }
+}
+
+/** The parts being gathered: positions, colours, texels and indices of the part open. */
+class Gathered {
+  readonly parts: Part[] = [];
+  private vertices = 0;
+  private corners = 0;
+  private paint: ImageFill | GradientFill | ShaderPaint | null = null;
+  private region: Area | null = null;
+  /** The fills in the part open, which is flat (GeometryData.flat) with one alone. */
+  private fills = 0;
+
+  /**
+   * Open a part for `paint`, the one open first closed, unless both are
+   * solid, or both sample one bitmap alike (samplesAlike): a drawing of a
+   * bitmap fill a triangle so draws in a few parts. A shader fill is a part
+   * of its own.
+   */
+  open(paint: ImageFill | GradientFill | ShaderPaint | null, region: Area | null): void {
+    if (paint === null && this.paint === null) {
+      return;
+    }
+
+    const open = this.paint;
+    if (paint?.type === "image" && open?.type === "image" && samplesAlike(paint, open)) {
+      return;
+    }
+
+    this.close();
+    this.paint = paint;
+    this.region = region;
+  }
+
+  /** The index the next vertex takes in the part. */
+  get next(): number {
+    return this.vertices;
+  }
+
+  /** Room for `vertices` more vertices and `corners` more indices, which vertex and triangle take. */
+  reserve(vertices: number, corners: number): void {
+    const n = this.vertices + vertices;
+    scratchPositions = roomy(scratchPositions, n * 2, this.vertices * 2);
+    scratchColors = roomy(scratchColors, n, this.vertices);
+    scratchTexels = roomy(scratchTexels, n * 2, this.vertices * 2);
+    scratchIndices = roomy(scratchIndices, this.corners + corners, this.corners);
+  }
+
+  /** A vertex at (x, y) of `color`, sampling at texel (u, v), in room reserve made. */
+  vertex(x: number, y: number, color: number, u: number, v: number): void {
+    const n = this.vertices;
+    scratchPositions[n * 2] = x;
+    scratchPositions[n * 2 + 1] = y;
+    scratchColors[n] = color;
+    scratchTexels[n * 2] = u;
+    scratchTexels[n * 2 + 1] = v;
+    this.vertices = n + 1;
+  }
+
+  /** A fill begun in the part open: its vertices and triangles follow. */
+  fill(): void {
+    this.fills++;
+  }
+
+  /** A triangle of the part's vertices `a`, `b` and `c`, in room reserve made. */
+  triangle(a: number, b: number, c: number): void {
+    const n = this.corners;
+    scratchIndices[n] = a;
+    scratchIndices[n + 1] = b;
+    scratchIndices[n + 2] = c;
+    this.corners = n + 3;
+  }
+
+  close(): void {
+    const n = this.vertices;
+    const shader = this.paint?.type === "shader";
+    if (this.corners > 0) {
+      this.parts.push({
+        geometry: {
+          positions: scratchPositions.slice(0, n * 2),
+          // A shader fill's vertices carry a depth where others carry their colour (MESH's).
+          colors: shader ? NO_COLORS : scratchColors.slice(0, n),
+          texels: this.paint ? scratchTexels.slice(0, n * 2) : undefined,
+          depths: shader ? new Float32Array(n).fill(1) : undefined,
+          indices: scratchIndices.slice(0, this.corners),
+          // One fill's triangles cover each point of it once; fills of a drawing may overlap.
+          flat: this.fills === 1,
+        },
+        paint: this.paint,
+        region: this.region,
+        mesh: null,
+      });
+    }
+
+    this.vertices = 0;
+    this.corners = 0;
+    this.fills = 0;
+  }
+}
+
+/**
+ * Where a textured fill samples, in texels, at (x, y) of the shape. A
+ * bitmap: through its matrix's inverse. A linear gradient: across its ramp,
+ * half a pixel back so that a pixel's centre reads what Flash reads at its
+ * corner. A radial one: across the region its texture was computed over.
+ * at() leaves the texel in u and v, not in a pair made for each vertex,
+ * and one is set again for each fill (sampling), not made for each.
+ */
+class Sampling {
+  u = 0;
+  v = 0;
+  region: Area | null = null;
+  private kind: "image" | "linear" | "radial" = "image";
+  private m: Matrix = IDENTITY;
+  private columns = 0;
+  private rows = 0;
+
+  set(paint: ImageFill | GradientFill | ShaderPaint, contours: readonly Path[]): this {
+    this.m = invert(paint.matrix) as Matrix;
+    // A shader's coordinates are its matrix's inverse of the shape's, as a bitmap's texels are.
+    this.kind = paint.type !== "gradient" ? "image" : paint.radial ? "radial" : "linear";
+    this.region = this.kind === "radial" ? regionOf(contours as Path[]) : null;
+    this.columns = this.region ? radialTexels(this.region.width) : 0;
+    this.rows = this.region ? radialTexels(this.region.height) : 0;
+    return this;
+  }
+
+  at(x: number, y: number): void {
+    const m = this.m;
+    switch (this.kind) {
+      case "image":
+        this.u = m.a * x + m.c * y + m.tx;
+        this.v = m.b * x + m.d * y + m.ty;
+        break;
+      case "linear": {
+        const sx = m.a * (x - 0.5) + m.c * (y - 0.5) + m.tx;
+        const sy = m.b * (x - 0.5) + m.d * (y - 0.5) + m.ty;
+        this.u = ((sx + 819.2) * RAMP) / 1638.4;
+        this.v = (sy + 819.2) / 1638.4;
+        break;
+      }
+      default: {
+        const r = this.region as Area;
+        this.u = ((x - r.x) * this.columns) / r.width;
+        this.v = ((y - r.y) * this.rows) / r.height;
+      }
+    }
+  }
+}
+
+/** The one Sampling fillParts sets for each textured fill. */
+const sampling = new Sampling();
+
+/** The texels a radial gradient's texture has across `pixels` of its region. */
+export function radialTexels(pixels: number): number {
+  return Math.min(RADIAL_MAX, pixels);
+}
+
+/**
+ * `layer`'s fills as geometries in order, positions in the shape's pixels,
+ * then its meshes, drawn after the fills, as drawTriangles' are. A fill of
+ * a bitmap the SWF lacks is red, as Flash draws it.
+ */
+export function layerParts(
+  layer: ShapeLayer,
+  tessellator: FillTessellator,
+  masking = false,
+): Part[] {
+  const parts = layer.fills.length > 0 ? fillParts(layer, tessellator, masking) : [];
+
+  for (const mesh of layer.meshes ?? []) {
+    const part = meshPart(mesh);
+    if (part) {
+      parts.push(part);
+    }
+  }
+
+  return parts;
+}
+
+const NO_COLORS = new Uint32Array(0);
+
+/** A mesh's triangles, three vertices each, as a geometry: its u and v the texels, its t their depths. */
+function meshPart(mesh: TriangleMesh): Part | null {
+  // Three vertices a triangle, as drawTriangles keeps them.
+  const count = mesh.positions.length / 2;
+  if (count === 0) {
+    return null;
+  }
+
+  const texels = new Float32Array(count * 2);
+  const depths = new Float32Array(count);
+
+  for (let k = 0; k < count; k++) {
+    texels[k * 2] = mesh.uvt[k * 3];
+    texels[k * 2 + 1] = mesh.uvt[k * 3 + 1];
+    depths[k] = mesh.uvt[k * 3 + 2];
+  }
+
+  const indices = new Uint32Array(count);
+
+  for (let k = 0; k < count; k++) {
+    indices[k] = k;
+  }
+
+  return {
+    geometry: { positions: mesh.positions, colors: NO_COLORS, texels, depths, indices },
+    paint: null,
+    region: null,
+    mesh,
+  };
+}
+
+/** `layer`'s fills as geometries in order. */
+function fillParts(layer: ShapeLayer, tessellator: FillTessellator, masking: boolean): Part[] {
+  // A drawing used as a mask fills non-zero, whatever its winding (fills.ts, resolveFills).
+  const geometries = resolveFills(layer, masking, tessellator);
+  const out = new Gathered();
+  for (let i = 0; i < layer.fills.length; i++) {
+    const { fill, contours } = layer.fills[i];
+    const textured =
+      fill.type === "image" || fill.type === "gradient" || fill.type === "shader" ? fill : null;
+    // A paint whose matrix collapses the plane covers nothing.
+    if (textured) {
+      const m = textured.matrix;
+      if (m.a * m.d - m.b * m.c === 0) {
+        continue;
+      }
+    }
+
+    const how = textured ? sampling.set(textured, contours) : null;
+    out.open(textured, how?.region ?? null);
+    const color = textured ? WHITE : vertexColor(fill.type === "solid" ? fill.color : 0xffff0000);
+
+    // A fill refused, or of nothing, adds no vertex.
+    const geometry = geometries[i];
+    if (geometry && geometry.vertices.length > 0) {
+      const { vertices, indices, indexOffset = 0 } = geometry;
+      out.reserve(vertices.length / 2, indices.length);
+      out.fill();
+      const first = out.next;
+      for (let k = 0; k < vertices.length; k += 2) {
+        const x = vertices[k];
+        const y = vertices[k + 1];
+        how?.at(x, y);
+        out.vertex(x, y, color, how ? how.u : 0, how ? how.v : 0);
+      }
+
+      for (let k = 0; k < indices.length; k += 3) {
+        out.triangle(
+          first + indices[k] - indexOffset,
+          first + indices[k + 1] - indexOffset,
+          first + indices[k + 2] - indexOffset,
+        );
+      }
+    }
+  }
+
+  out.close();
+  shrinkScratch();
+
+  return out.parts;
+}
+
+/** A bitmap's quad, `width` by `height` pixels, its texels its pixels. */
+export function bitmapQuad(width: number, height: number): GeometryData {
+  return {
+    positions: Float32Array.of(0, 0, width, 0, width, height, 0, height),
+    colors: Uint32Array.of(WHITE, WHITE, WHITE, WHITE),
+    texels: Float32Array.of(0, 0, width, 0, width, height, 0, height),
+    indices: Uint32Array.of(0, 1, 2, 0, 2, 3),
+    flat: true,
+  };
+}

package/src/scene/stale-shapes.ts

@@ -0,0 +1,56 @@
+// A Shape's stale bitmap cache as the view draws it (RenderView): Flash
+// shows the cache of a Shape given another of the same bounds while
+// cached, until it is drawn at another scale or turn, or its cache goes.
+import { cached, type ShapeObject, type StaleCache } from "../display/shapeobject.js";
+import type { ShapeCharacter } from "../display/timeline.js";
+
+export class StaleShapes {
+  /** Each stale cache a Shape has shown, and the scale and turn it was first drawn at. */
+  private readonly stales = new WeakMap<
+    ShapeObject,
+    { cache: StaleCache; a: number; b: number; c: number; d: number; spent: boolean }
+  >();
+
+  /**
+   * The shape a Shape draws: the one Flash's stale bitmap cache shows, given
+   * another of the same bounds while cached (display/shapeobject.ts), while
+   * it stands on the stage at the scale and turn (a b c d) it was first
+   * drawn at and stays cached; from a frame either changes, what it is
+   * (`cache-replace`). Only a frame that
+   * draws it decides: one walked hidden draws nothing of it, and
+   * BitmapData.draw's walk is in the bitmap's space, which shows the cache
+   * as the stage last did.
+   */
+  staleShape(
+    o: ShapeObject,
+    hidden: boolean,
+    snapshotting: boolean,
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+  ): ShapeCharacter | null {
+    const cache = o.stale;
+    if (!cache || hidden) {
+      return o.drawn();
+    }
+
+    let seen = this.stales.get(o);
+    if (snapshotting) {
+      return seen?.cache === cache && seen.spent ? o.drawn() : cache.shape;
+    }
+
+    if (!seen || seen.cache !== cache) {
+      // A first frame with its cache off already draws it as it is.
+      seen = { cache, a, b, c, d, spent: !cached(o) };
+      this.stales.set(o, seen);
+    } else if (
+      !seen.spent &&
+      (seen.a !== a || seen.b !== b || seen.c !== c || seen.d !== d || !cached(o))
+    ) {
+      seen.spent = true;
+    }
+
+    return seen.spent ? o.drawn() : cache.shape;
+  }
+}

package/src/scene/strokes.ts

@@ -0,0 +1,157 @@
+// A shape layer's lines as a geometry of the renderer's, stroked as Flash
+// strokes them, by @swf2es/native's line builder (strokes.zig) in one call:
+// in the stage's axes, at one width all along, never under a pixel of the
+// screen (strokeWidth), each line's path outlined and its outline filled
+// non-zero, so that where it overlaps itself it is drawn once. A line drawn
+// at whole alpha, where an overlap shows nothing, is triangles along its
+// path instead, with no tessellator. Here the layer is packed as
+// strokes.zig reads it.
+import type { Line } from "@swf2es/format";
+import type { GeometryData } from "@swf2es/render";
+import { LINE, type ShapeLayer } from "../display/shapes.js";
+import type { LineBuilder } from "./fills.js";
+import { vertexColor } from "./shapes.js";
+
+/**
+ * How far, in pixels of the screen, a line's flattened curves and its
+ * round joins' and caps' chords may stray from the curve: a tenth of one,
+ * where the fills' finer flatness made strokes several times the
+ * triangles, which a software rasteriser pays for; a
+ * quarter shows on the references' curved lines. A 9-slice's lines take
+ * half that, as its small rounded corners, which Flash draws as exact
+ * curves, show a tenth.
+ */
+const STROKE_FLATNESS = 0.1;
+
+/**
+ * A line's width on the stage through the linear transform (a b c d): its
+ * own width scaled as its scale mode allows, never under `least`, a pixel
+ * of the screen, which is also a hairline's.
+ */
+export function strokeWidth(
+  line: Line,
+  a: number,
+  b: number,
+  c: number,
+  d: number,
+  least: number,
+): number {
+  const sx = Math.abs(a + c);
+  const sy = Math.abs(b + d);
+  const scale = line.noHScale
+    ? line.noVScale
+      ? 1
+      : sy
+    : line.noVScale
+      ? sx
+      : Math.sqrt((sx * sx + sy * sy) / 2);
+  return Math.max(least, (line.width / 20) * scale);
+}
+
+/** A line's flags in the input: drawn as triangles that may overlap; its paths' outlines filled as one. */
+const OVERLAPS = 1;
+const TOGETHER = 2;
+
+/**
+ * `layer`'s lines through the linear transform (a b c d), at least `least`
+ * wide, as wide as `by` makes them (a 9-slice's line space) or null, built
+ * by `builder`; those of whole alpha as triangles that may overlap where
+ * `opaque`. Null for none, or where the builder refused them (a position
+ * not a number, or past its memory); undefined where it had no instance, or
+ * unwound again, which a later frame may try again.
+ */
+export function layerStrokes(
+  layer: ShapeLayer,
+  a: number,
+  b: number,
+  c: number,
+  d: number,
+  least: number,
+  builder: LineBuilder,
+  by: readonly number[] | null = null,
+  opaque = false,
+): GeometryData | null | undefined {
+  // Seen through a transform that collapses the plane, lines cover nothing.
+  if (a * d - b * c === 0) {
+    return null;
+  }
+
+  const built = build(layer, a, b, c, d, least, builder, by, opaque);
+  // Once more where libtess2 trapped: the builder's next instance fills the outlines by the bands.
+  return built === undefined && builder.unwound
+    ? build(layer, a, b, c, d, least, builder, by, opaque)
+    : built;
+}
+
+/**
+ * The layer packed into the builder's input and built: null where the
+ * builder refused it, undefined where it had no instance or unwound.
+ */
+function build(
+  layer: ShapeLayer,
+  a: number,
+  b: number,
+  c: number,
+  d: number,
+  least: number,
+  builder: LineBuilder,
+  by: readonly number[] | null,
+  opaque: boolean,
+): GeometryData | null | undefined {
+  let size = 6;
+  for (const { paths } of layer.strokes) {
+    size += 7;
+    for (const path of paths) {
+      size += 5 + path.length;
+    }
+  }
+
+  const input = builder.input(size);
+  if (!input) {
+    return undefined;
+  }
+
+  input[0] = a;
+  input[1] = b;
+  input[2] = c;
+  input[3] = d;
+  // `least` is a pixel of the screen, in the stage's pixels the lines are drawn in.
+  input[4] = (by ? STROKE_FLATNESS / 2 : STROKE_FLATNESS) * least;
+  input[5] = layer.strokes.length;
+  let at = 6;
+  for (const { line, paths, closes, triangles } of layer.strokes) {
+    input[at] = by
+      ? strokeWidth(line, by[0], by[1], by[2], by[3], least) / 2
+      : strokeWidth(line, a, b, c, d, least) / 2;
+    // Codes a SWF reserves draw round.
+    input[at + 1] = line.startCap <= 2 ? line.startCap : 0;
+    input[at + 2] = line.join <= 2 ? line.join : 0;
+    input[at + 3] = Math.max(1, line.miterLimit);
+    input[at + 4] = vertexColor(line.color);
+    input[at + 5] =
+      (opaque && line.color >>> 24 === 255 ? OVERLAPS : 0) | (triangles ? TOGETHER : 0);
+    input[at + 6] = paths.length;
+    at += 7;
+    // Each path as strokePaths gives it.
+    let next = 0;
+    for (let i = 0; i < paths.length; i++) {
+      const path = paths[i];
+      const close = closes?.[next]?.at === i ? closes[next++] : null;
+      const home = Boolean(triangles) || (close?.x === path[1] && close.y === path[2]);
+      const extra = close && !home;
+      input[at] = home ? 1 : 0;
+      input[at + 1] = path.length + (extra ? 3 : 0);
+      input.set(path, at + 2);
+      at += 2 + path.length;
+      if (extra) {
+        input[at] = LINE;
+        input[at + 1] = close.x;
+        input[at + 2] = close.y;
+        at += 3;
+      }
+    }
+  }
+
+  const built = builder.build(at);
+  return built === undefined && !builder.unwound ? null : built;
+}