@swf2es/player 0.0.0-stage → 0.1.1

package/src/display/filters.ts

@@ -0,0 +1,393 @@
+// A display object's filters as records of their values, as adl keeps
+// them: what flash.filters' objects read and set (playerglobal's
+// flash/filters/, a file per class), what a PlaceObject3's list becomes,
+// and what the renderer will draw. A record holds the keys of its kind alone.
+import type { SwfFilter } from "@swf2es/format";
+import type { ShaderUse } from "../bitmap/pixel-bender.js";
+
+export type FilterKind =
+  | "blur"
+  | "glow"
+  | "dropShadow"
+  | "bevel"
+  | "gradientGlow"
+  | "gradientBevel"
+  | "colorMatrix"
+  | "convolution"
+  | "displacementMap"
+  | "shader";
+
+/** Every value a filter may have; a kind's record has its own keys only. */
+export interface Filter {
+  kind: FilterKind;
+  blurX: number;
+  blurY: number;
+  quality: number;
+  alpha: number;
+  color: number;
+  strength: number;
+  /** In degrees, within a turn either way. */
+  angle: number;
+  distance: number;
+  inner: boolean;
+  knockout: boolean;
+  hideObject: boolean;
+  highlightColor: number;
+  highlightAlpha: number;
+  shadowColor: number;
+  shadowAlpha: number;
+  type: string;
+  colors: number[];
+  alphas: number[];
+  ratios: number[];
+  matrix: number[];
+  matrixX: number;
+  matrixY: number;
+  divisor: number;
+  bias: number;
+  clamp: boolean;
+  preserveAlpha: boolean;
+  /** The AS3 BitmapData a displacement map reads. */
+  mapBitmap: object | null;
+  /**
+   * A display object's displacement map as it was when its filters were
+   * set, which it draws with: a copy of `mapBitmap`, which stays the live
+   * one that reading `filters` back gives. Null where not taken.
+   */
+  mapSnapshot?: object | null;
+  mapPoint: [number, number];
+  componentX: number;
+  componentY: number;
+  scaleX: number;
+  scaleY: number;
+  mode: string;
+  /** A ShaderFilter's AS3 Shader. */
+  shader: object | null;
+  /** How far a ShaderFilter grows the object's bitmap, in stage pixels: left, top, right, bottom. */
+  extensions: [number, number, number, number];
+  /**
+   * A display object's ShaderFilter's kernel as it was when its filters
+   * were set, with its parameters and images then, which it draws with.
+   */
+  shaderUse?: ShaderUse | null;
+}
+
+const IDENTITY_MATRIX = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
+
+/**
+ * A kind's values as a new filter object of it has them in adl: made for
+ * the kind alone, as a timeline that writes a filter on each frame asks
+ * for one each time.
+ */
+export function filterDefaults(kind: FilterKind): Filter {
+  return { kind, ...kindDefaults(kind) } as Filter;
+}
+
+function kindDefaults(kind: FilterKind): object {
+  const shadow = () => ({
+    angle: 45,
+    blurX: 4,
+    blurY: 4,
+    distance: 4,
+    knockout: false,
+    quality: 1,
+  });
+  switch (kind) {
+    case "blur":
+      return { blurX: 4, blurY: 4, quality: 1 };
+    case "glow":
+      return {
+        alpha: 1,
+        blurX: 6,
+        blurY: 6,
+        color: 0xff0000,
+        inner: false,
+        knockout: false,
+        quality: 1,
+        strength: 2,
+      };
+    case "dropShadow":
+      return {
+        ...shadow(),
+        alpha: 1,
+        color: 0,
+        hideObject: false,
+        inner: false,
+        strength: 1,
+      };
+    case "bevel":
+      return {
+        ...shadow(),
+        highlightAlpha: 1,
+        highlightColor: 0xffffff,
+        shadowAlpha: 1,
+        shadowColor: 0,
+        strength: 1,
+        type: "inner",
+      };
+    case "gradientGlow":
+    case "gradientBevel":
+      return { ...shadow(), strength: 1, type: "inner", colors: [], alphas: [], ratios: [] };
+    case "colorMatrix":
+      return { matrix: [...IDENTITY_MATRIX] };
+    case "convolution":
+      return {
+        alpha: 0,
+        bias: 0,
+        clamp: true,
+        color: 0,
+        divisor: 1,
+        matrix: [],
+        matrixX: 0,
+        matrixY: 0,
+        preserveAlpha: true,
+      };
+    case "displacementMap":
+      return {
+        alpha: 0,
+        color: 0,
+        componentX: 0,
+        componentY: 0,
+        mapBitmap: null,
+        mapPoint: [0, 0],
+        mode: "wrap",
+        scaleX: 0,
+        scaleY: 0,
+      };
+    case "shader":
+      return { shader: null, extensions: [0, 0, 0, 0] };
+  }
+}
+
+/** A copy of a record, its lists its own. */
+export function copyFilter(f: Filter): Filter {
+  const copy = { ...f };
+  for (const key of ["colors", "alphas", "ratios", "matrix", "mapPoint", "extensions"] as const) {
+    if (key in f) {
+      (copy as Record<string, unknown>)[key] = [...(f[key] as number[])];
+    }
+  }
+
+  return copy;
+}
+
+const DEGREES = 180 / Math.PI;
+
+/** A PlaceObject3 filter as the record its object reads back. */
+export function filterOfSwf(f: SwfFilter): Filter {
+  switch (f.type) {
+    case "blur":
+      return { ...filterDefaults("blur"), blurX: f.blurX, blurY: f.blurY, quality: f.passes };
+    case "glow":
+      return {
+        ...filterDefaults("glow"),
+        color: f.color.rgb,
+        alpha: f.color.alpha / 255,
+        blurX: f.blurX,
+        blurY: f.blurY,
+        strength: f.strength,
+        inner: f.inner,
+        knockout: f.knockout,
+        quality: f.passes,
+      };
+    case "dropShadow":
+      return {
+        ...filterDefaults("dropShadow"),
+        color: f.color.rgb,
+        alpha: f.color.alpha / 255,
+        blurX: f.blurX,
+        blurY: f.blurY,
+        angle: f.angle * DEGREES,
+        distance: f.distance,
+        strength: f.strength,
+        inner: f.inner,
+        knockout: f.knockout,
+        hideObject: !f.composite,
+        quality: f.passes,
+      };
+    case "bevel":
+    case "gradientGlow":
+    case "gradientBevel": {
+      const shared = {
+        blurX: f.blurX,
+        blurY: f.blurY,
+        angle: f.angle * DEGREES,
+        distance: f.distance,
+        strength: f.strength,
+        knockout: f.knockout,
+        quality: f.passes,
+        type: f.inner ? "inner" : f.onTop ? "full" : "outer",
+      };
+      if (f.type === "bevel") {
+        const [shadow, highlight] = f.colors;
+        return {
+          ...filterDefaults("bevel"),
+          ...shared,
+          shadowColor: shadow.rgb,
+          shadowAlpha: shadow.alpha / 255,
+          highlightColor: highlight.rgb,
+          highlightAlpha: highlight.alpha / 255,
+        };
+      }
+
+      return {
+        ...filterDefaults(f.type),
+        ...shared,
+        colors: f.colors.map((c) => c.rgb),
+        alphas: f.colors.map((c) => c.alpha / 255),
+        ratios: [...f.ratios],
+      };
+    }
+    case "convolution":
+      return {
+        ...filterDefaults("convolution"),
+        matrixX: f.matrixX,
+        matrixY: f.matrixY,
+        divisor: f.divisor,
+        bias: f.bias,
+        matrix: [...f.matrix],
+        color: f.color.rgb,
+        alpha: f.color.alpha / 255,
+        clamp: f.clamp,
+        preserveAlpha: f.preserveAlpha,
+      };
+    case "colorMatrix":
+      return { ...filterDefaults("colorMatrix"), matrix: [...f.matrix] };
+  }
+}
+
+/**
+ * Whether two lists of filter records hold the same values, which draw the
+ * same: a timeline's tween writes its filters again on each frame, and a
+ * script may set them from their own. A map is the same only as the same
+ * object, so that a displacement's map taken anew is drawn anew.
+ */
+export function sameFilterRecords(a: readonly Filter[], b: readonly Filter[]): boolean {
+  if (a.length !== b.length) {
+    return false;
+  }
+
+  // Compared each frame for every object a tween filters, so without allocating.
+  for (let i = 0; i < a.length; i++) {
+    const x = a[i] as unknown as Record<string, unknown>;
+    const y = b[i] as unknown as Record<string, unknown>;
+    let keys = 0;
+    for (const key in x) {
+      keys++;
+      if (!(key in y) || !sameValue(x[key], y[key])) {
+        return false;
+      }
+    }
+
+    for (const _ in y) {
+      keys--;
+    }
+
+    if (keys !== 0) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function sameValue(u: unknown, v: unknown): boolean {
+  if (!Array.isArray(u) || !Array.isArray(v)) {
+    return Object.is(u, v);
+  }
+
+  if (u.length !== v.length) {
+    return false;
+  }
+
+  for (let k = 0; k < u.length; k++) {
+    if (!Object.is(u[k], v[k])) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * A convolution with no taps as adl draws it, a copy moved up and left by
+ * the half of the other size: one tap there, of 1, the edges transparent.
+ */
+export function emptyKernel(f: Filter): Filter {
+  const hx = f.matrixX >> 1;
+  const hy = f.matrixY >> 1;
+  const matrixX = 2 * hx + 1;
+  const matrixY = 2 * hy + 1;
+  const matrix = new Array(matrixX * matrixY).fill(0);
+  matrix[matrix.length - 1] = 1;
+  return {
+    ...f,
+    matrixX,
+    matrixY,
+    matrix,
+    divisor: 1,
+    bias: 0,
+    clamp: false,
+    color: 0,
+    alpha: 0,
+    preserveAlpha: false,
+  };
+}
+
+/** A filter's offset into `out`, `distance` stage pixels at its angle, in `units` a stage pixel. */
+export function filterOffset(
+  out: { [i: number]: number },
+  f: Filter,
+  distance: number,
+  units: number,
+): void {
+  const radians = ((f.angle || 0) * Math.PI) / 180;
+  out[0] = distance * Math.cos(radians) * units;
+  out[1] = distance * Math.sin(radians) * units;
+}
+
+/**
+ * How far either side of a display object its filters may pad, in the
+ * target's units: what a texture `limit` texels a side holds at
+ * `resolution` texels a unit, past the object's area on the target
+ * (`width` by `height` units, cut to it) and a little.
+ */
+export function filterRoom(
+  limit: number,
+  resolution: number,
+  width: number,
+  height: number,
+): number {
+  return Math.floor((limit / resolution - Math.max(width, height, 0)) / 2) - 2;
+}
+
+/**
+ * The most any one filter pads, where their paddings as their reach asks
+ * (`wanted`) together pass `room`: cut alike from the furthest reaching
+ * down to what fits, as a shadow cast 1e9 away, or Infinity, asks;
+ * Infinity where they fit. What is cut lies past the screen, but for an
+ * object off it whose shadow is not.
+ */
+export function paddingCap(wanted: readonly number[], room: number): number {
+  let total = 0;
+  for (const p of wanted) {
+    total += p;
+  }
+
+  if (total <= room) {
+    return Number.POSITIVE_INFINITY;
+  }
+
+  const sorted = [...wanted].sort((a, b) => a - b);
+  let below = 0;
+  for (let i = 0; i < sorted.length; i++) {
+    const level = Math.floor((Math.max(0, room) - below) / (sorted.length - i));
+    if (level <= sorted[i]) {
+      return Math.max(0, level);
+    }
+
+    below += sorted[i];
+  }
+
+  return 0;
+}

package/src/display/geometry.ts

@@ -0,0 +1,237 @@
+// Affine geometry in pixels, for bounds, hit tests and Transform: the
+// format's Matrix is {a, b, c, d, tx, ty}, a point going (a x + c y + tx,
+// b x + d y + ty). A 3D object's plane in its parent's, in perspective,
+// is a Projective one, which divides by (u x + v y + w); the functions
+// here take either, and the affine ones pay one test.
+import type { Matrix } from "@swf2es/format";
+
+/** A matrix with a projective row: a point goes to ((a x + c y + tx) / q, (b x + d y + ty) / q), q = u x + v y + w. */
+export interface Projective extends Matrix {
+  u: number;
+  v: number;
+  w: number;
+}
+
+export function isProjective(m: Matrix): m is Projective {
+  return (m as Projective).w !== undefined;
+}
+
+/** `m` then `p`, either projective. */
+function concatProjective(m: Matrix, p: Matrix): Projective {
+  const [mu, mv, mw] = isProjective(m) ? [m.u, m.v, m.w] : [0, 0, 1];
+  const [pu, pv, pw] = isProjective(p) ? [p.u, p.v, p.w] : [0, 0, 1];
+  return {
+    a: p.a * m.a + p.c * m.b + p.tx * mu,
+    b: p.b * m.a + p.d * m.b + p.ty * mu,
+    c: p.a * m.c + p.c * m.d + p.tx * mv,
+    d: p.b * m.c + p.d * m.d + p.ty * mv,
+    tx: p.a * m.tx + p.c * m.ty + p.tx * mw,
+    ty: p.b * m.tx + p.d * m.ty + p.ty * mw,
+    u: pu * m.a + pv * m.b + pw * mu,
+    v: pu * m.c + pv * m.d + pw * mv,
+    w: pu * m.tx + pv * m.ty + pw * mw,
+  };
+}
+
+/** The inverse of a projective matrix, by its adjugate, or null for one that flattens the plane. */
+function invertProjective(m: Projective): Projective | null {
+  const { a, b, c, d, tx, ty, u, v, w } = m;
+  const A = d * w - ty * v;
+  const B = -(b * w - ty * u);
+  const C = b * v - d * u;
+  const det = a * A + c * B + tx * C;
+  if (det === 0 || !Number.isFinite(det)) {
+    return null;
+  }
+
+  return {
+    a: A / det,
+    b: B / det,
+    u: C / det,
+    c: -(c * w - tx * v) / det,
+    d: (a * w - tx * u) / det,
+    v: -(a * v - c * u) / det,
+    tx: (c * ty - tx * d) / det,
+    ty: -(a * ty - tx * b) / det,
+    w: (a * d - c * b) / det,
+  };
+}
+
+/** An axis-aligned rectangle by its edges. */
+export interface Rect {
+  xMin: number;
+  yMin: number;
+  xMax: number;
+  yMax: number;
+}
+
+/** `m` then `p`: the matrix that applies `m` and then `p`, as a child's in its parent's. */
+export function concat(m: Matrix, p: Matrix): Matrix {
+  if (isProjective(m) || isProjective(p)) {
+    return concatProjective(m, p);
+  }
+
+  return {
+    a: m.a * p.a + m.b * p.c,
+    b: m.a * p.b + m.b * p.d,
+    c: m.c * p.a + m.d * p.c,
+    d: m.c * p.b + m.d * p.d,
+    tx: m.tx * p.a + m.ty * p.c + p.tx,
+    ty: m.tx * p.b + m.ty * p.d + p.ty,
+  };
+}
+
+/** The inverse, or null for a matrix that flattens the plane. */
+export function invert(m: Matrix): Matrix | null {
+  if (isProjective(m)) {
+    return invertProjective(m);
+  }
+
+  const det = m.a * m.d - m.b * m.c;
+  if (det === 0) {
+    return null;
+  }
+
+  return {
+    a: m.d / det,
+    b: -m.b / det,
+    c: -m.c / det,
+    d: m.a / det,
+    tx: (m.c * m.ty - m.d * m.tx) / det,
+    ty: (m.b * m.tx - m.a * m.ty) / det,
+  };
+}
+
+export function apply(m: Matrix, x: number, y: number): [number, number] {
+  if (isProjective(m)) {
+    const q = m.u * x + m.v * y + m.w;
+    return [(m.a * x + m.c * y + m.tx) / q, (m.b * x + m.d * y + m.ty) / q];
+  }
+
+  return [m.a * x + m.c * y + m.tx, m.b * x + m.d * y + m.ty];
+}
+
+/**
+ * The rectangle around `r`'s four corners through `m`. Through a
+ * projective one, out to whole pixels, as Flash reports a 3D object's;
+ * and a point at the origin where a corner is behind the eye, where Flash
+ * draws nothing.
+ */
+export function transformRect(r: Rect, m: Matrix): Rect {
+  if (isProjective(m)) {
+    return projectRect(r, m);
+  }
+
+  // The corners as apply places them, without its arrays: every bounds, width and hitTest asks.
+  const x0 = m.a * r.xMin + m.c * r.yMin + m.tx;
+  const y0 = m.b * r.xMin + m.d * r.yMin + m.ty;
+  const x1 = m.a * r.xMax + m.c * r.yMin + m.tx;
+  const y1 = m.b * r.xMax + m.d * r.yMin + m.ty;
+  const x2 = m.a * r.xMin + m.c * r.yMax + m.tx;
+  const y2 = m.b * r.xMin + m.d * r.yMax + m.ty;
+  const x3 = m.a * r.xMax + m.c * r.yMax + m.tx;
+  const y3 = m.b * r.xMax + m.d * r.yMax + m.ty;
+  return {
+    xMin: Math.min(x0, x1, x2, x3),
+    yMin: Math.min(y0, y1, y2, y3),
+    xMax: Math.max(x0, x1, x2, x3),
+    yMax: Math.max(y0, y1, y2, y3),
+  };
+}
+
+/** How far past a whole pixel a projected edge may go and still be bounded by it. */
+const SLACK = 0.125;
+
+function projectRect(r: Rect, m: Projective): Rect {
+  let xMin = Number.POSITIVE_INFINITY;
+  let yMin = Number.POSITIVE_INFINITY;
+  let xMax = Number.NEGATIVE_INFINITY;
+  let yMax = Number.NEGATIVE_INFINITY;
+  for (let i = 0; i < 4; i++) {
+    const x = i & 1 ? r.xMax : r.xMin;
+    const y = i & 2 ? r.yMax : r.yMin;
+    const q = m.u * x + m.v * y + m.w;
+    if (!(q > 0)) {
+      return { xMin: 0, yMin: 0, xMax: 0, yMax: 0 };
+    }
+
+    const px = (m.a * x + m.c * y + m.tx) / q;
+    const py = (m.b * x + m.d * y + m.ty) / q;
+    xMin = Math.min(xMin, px);
+    yMin = Math.min(yMin, py);
+    xMax = Math.max(xMax, px);
+    yMax = Math.max(yMax, py);
+  }
+
+  // Out to whole pixels, but for an eighth of one: an edge that passes a pixel by less is not
+  // counted to the next, as adl reports (the `three-d-bounds` case).
+  return {
+    xMin: Math.floor(xMin + SLACK),
+    yMin: Math.floor(yMin + SLACK),
+    xMax: Math.ceil(xMax - SLACK),
+    yMax: Math.ceil(yMax - SLACK),
+  };
+}
+
+/** The rectangle around `r`'s four corners through `m`, each divided where `m` is projective: not out to whole pixels. */
+export function boxThrough(r: Rect, m: Matrix): Rect {
+  let xMin = Number.POSITIVE_INFINITY;
+  let yMin = Number.POSITIVE_INFINITY;
+  let xMax = Number.NEGATIVE_INFINITY;
+  let yMax = Number.NEGATIVE_INFINITY;
+  for (let i = 0; i < 4; i++) {
+    const [x, y] = apply(m, i & 1 ? r.xMax : r.xMin, i & 2 ? r.yMax : r.yMin);
+    xMin = Math.min(xMin, x);
+    yMin = Math.min(yMin, y);
+    xMax = Math.max(xMax, x);
+    yMax = Math.max(yMax, y);
+  }
+
+  return { xMin, yMin, xMax, yMax };
+}
+
+/** Whether a corner of `r` goes behind the eye through `m`, or onto its plane: Flash then draws none of it. */
+export function behindEye(r: Rect, m: Matrix): boolean {
+  if (!isProjective(m)) {
+    return false;
+  }
+
+  for (let i = 0; i < 4; i++) {
+    const q = m.u * (i & 1 ? r.xMax : r.xMin) + m.v * (i & 2 ? r.yMax : r.yMin) + m.w;
+    if (!(q > 0)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function union(a: Rect | null, b: Rect | null): Rect | null {
+  if (!a || !b) {
+    return a ?? b;
+  }
+
+  return {
+    xMin: Math.min(a.xMin, b.xMin),
+    yMin: Math.min(a.yMin, b.yMin),
+    xMax: Math.max(a.xMax, b.xMax),
+    yMax: Math.max(a.yMax, b.yMax),
+  };
+}
+
+export function contains(r: Rect, x: number, y: number): boolean {
+  return x >= r.xMin && x <= r.xMax && y >= r.yMin && y <= r.yMax;
+}
+
+export function overlaps(a: Rect, b: Rect): boolean {
+  return a.xMin <= b.xMax && b.xMin <= a.xMax && a.yMin <= b.yMax && b.yMin <= a.yMax;
+}
+
+/** `m` after a shift of (-left, -top) of `r`: a scrolled object's, its scroll's corner at its origin. */
+export function shifted(m: Matrix, r: Rect): Matrix {
+  return {
+    ...m,
+    tx: m.tx - m.a * r.xMin - m.c * r.yMin,
+    ty: m.ty - m.b * r.xMin - m.d * r.yMin,
+  };
+}