@vysmo/transitions 0.1.0

package/src/__tests__/endpoint-correctness.test.ts

@@ -0,0 +1,161 @@
+import { beforeAll, afterAll, describe, expect, it } from "vitest";
+import {
+  ALL_TRANSITIONS,
+  Runner,
+  directionalBurn,
+  directionalWarp,
+  flowWarp,
+  kineticBands,
+  lightLeak,
+  paintBleed,
+  slide,
+  smolderingEdge,
+  tangentMotionBlur,
+  wind,
+  wipeDirectional,
+  type Transition,
+  type UniformParams,
+} from "../index.js";
+
+const SIZE = 32;
+const TOLERANCE = 2;
+
+function makeSolid(r: number, g: number, b: number): HTMLCanvasElement {
+  const canvas = document.createElement("canvas");
+  canvas.width = SIZE;
+  canvas.height = SIZE;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("2D context unavailable");
+  ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
+  ctx.fillRect(0, 0, SIZE, SIZE);
+  return canvas;
+}
+
+function readPixels(runner: Runner): Uint8Array {
+  const pixels = new Uint8Array(SIZE * SIZE * 4);
+  runner.gl.readPixels(
+    0,
+    0,
+    SIZE,
+    SIZE,
+    runner.gl.RGBA,
+    runner.gl.UNSIGNED_BYTE,
+    pixels,
+  );
+  return pixels;
+}
+
+function assertAllPixelsMatch(
+  pixels: Uint8Array,
+  expected: [number, number, number],
+  tolerance = TOLERANCE,
+): void {
+  let worstDiff = 0;
+  let worstIndex = -1;
+  for (let i = 0; i < pixels.length; i += 4) {
+    for (let c = 0; c < 3; c++) {
+      const diff = Math.abs((pixels[i + c] ?? 0) - (expected[c] ?? 0));
+      if (diff > worstDiff) {
+        worstDiff = diff;
+        worstIndex = i;
+      }
+    }
+  }
+  if (worstDiff > tolerance) {
+    const actual = [
+      pixels[worstIndex] ?? 0,
+      pixels[worstIndex + 1] ?? 0,
+      pixels[worstIndex + 2] ?? 0,
+    ];
+    expect.fail(
+      `Pixel at index ${worstIndex} = [${actual.join(", ")}], expected ≈ [${expected.join(", ")}] (max diff ${worstDiff})`,
+    );
+  }
+}
+
+// Source of truth for the catalog: ALL_TRANSITIONS from the package.
+// Adding a new transition to the package's index automatically picks it
+// up here.
+const TRANSITIONS = ALL_TRANSITIONS;
+
+describe("endpoint correctness — every transition must be pixel-pure from/to at progress 0/1", () => {
+  let runner: Runner;
+  let from: HTMLCanvasElement;
+  let to: HTMLCanvasElement;
+
+  beforeAll(() => {
+    const canvas = document.createElement("canvas");
+    canvas.width = SIZE;
+    canvas.height = SIZE;
+    runner = new Runner({
+      canvas,
+      contextAttributes: { preserveDrawingBuffer: true },
+    });
+    from = makeSolid(255, 0, 0);
+    to = makeSolid(0, 0, 255);
+  });
+
+  afterAll(() => {
+    runner.dispose();
+  });
+
+  for (const transition of TRANSITIONS) {
+    it(`${transition.name} at progress=0 is pure "from"`, () => {
+      runner.render(transition, { from, to, progress: 0 });
+      assertAllPixelsMatch(readPixels(runner), [255, 0, 0]);
+    });
+
+    it(`${transition.name} at progress=1 is pure "to"`, () => {
+      runner.render(transition, { from, to, progress: 1 });
+      assertAllPixelsMatch(readPixels(runner), [0, 0, 255]);
+    });
+  }
+
+  // Regression: TextureCache.resolve() calls gl.bindTexture() against the
+  // active unit; if the runner interleaves resolves with activeTexture()
+  // calls, a supplied displacement source can clobber unit 1 (uTo). Prior
+  // tests passed because they never supplied a displacement and hit the
+  // default 1×1 path that skips resolve().
+  it("endpoints stay correct when a displacement source is supplied", () => {
+    const displacement = makeSolid(200, 80, 40);
+    runner.render(flowWarp, { from, to, progress: 0, displacement });
+    assertAllPixelsMatch(readPixels(runner), [255, 0, 0]);
+    runner.render(flowWarp, { from, to, progress: 1, displacement });
+    assertAllPixelsMatch(readPixels(runner), [0, 0, 255]);
+  });
+
+  // Regression: shaders that compute `0.5 + dot(uv - 0.5, dir)` without
+  // dividing by maxProj = (|dx| + |dy|)/2 produce a sliver of the previous
+  // image at the corners when direction is non-axis-aligned. These tests
+  // exercise the diagonal case so the fix can't silently regress.
+  const DIAGONAL_DIRECTIONAL: ReadonlyArray<[string, Transition<UniformParams>]> = [
+    ["slide", slide as Transition<UniformParams>],
+    ["paintBleed", paintBleed as Transition<UniformParams>],
+      ["kineticBands", kineticBands as Transition<UniformParams>],
+    ["lightLeak", lightLeak as Transition<UniformParams>],
+    ["tangentMotionBlur", tangentMotionBlur as Transition<UniformParams>],
+    ["wind", wind as Transition<UniformParams>],
+    ["directionalBurn", directionalBurn as Transition<UniformParams>],
+    ["smolderingEdge", smolderingEdge as Transition<UniformParams>],
+    ["directionalWarp", directionalWarp as Transition<UniformParams>],
+  ];
+  for (const [name, transition] of DIAGONAL_DIRECTIONAL) {
+    it(`${name} endpoints correct with diagonal direction [1, 1]`, () => {
+      const params = { direction: [1, 1] as const };
+      runner.render(transition, { from, to, progress: 0, params });
+      assertAllPixelsMatch(readPixels(runner), [255, 0, 0]);
+      runner.render(transition, { from, to, progress: 1, params });
+      assertAllPixelsMatch(readPixels(runner), [0, 0, 255]);
+    });
+  }
+
+  // wipe-directional uses an angle (radians), not a vec2 — but the same
+  // gradient pattern. Verify diagonal angle (π/4 = 45°) is endpoint-correct.
+  it("wipeDirectional endpoints correct at 45° (diagonal angle)", () => {
+    const params = { angle: Math.PI / 4 };
+    runner.render(wipeDirectional, { from, to, progress: 0, params });
+    assertAllPixelsMatch(readPixels(runner), [255, 0, 0]);
+    runner.render(wipeDirectional, { from, to, progress: 1, params });
+    assertAllPixelsMatch(readPixels(runner), [0, 0, 255]);
+  });
+});

package/src/__tests__/readme.test.ts

@@ -0,0 +1,39 @@
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+import { describe, expect, it } from "vitest";
+import { ALL_TRANSITIONS } from "../index.js";
+
+/**
+ * Guard against the README's hardcoded transition count drifting from
+ * the actual catalog. If the count changes, this test fails on every
+ * phrase that still embeds the stale number, so the README copy is
+ * forced into sync with `ALL_TRANSITIONS`.
+ *
+ * Add a phrase here when you write a new "N transitions" sentence in
+ * the README. The list is the contract.
+ */
+
+const README_PATH = join(
+  dirname(fileURLToPath(import.meta.url)),
+  "..",
+  "..",
+  "README.md",
+);
+
+const COUNT_PHRASES = (n: number) => [
+  `${n} WebGL2 transition shaders`,
+  `Runner + all ${n} transitions`,
+  `Runner + all ${n})`,
+];
+
+describe("README catalog count stays in sync with ALL_TRANSITIONS", () => {
+  const readme = readFileSync(README_PATH, "utf-8");
+  const expected = ALL_TRANSITIONS.length;
+
+  for (const phrase of COUNT_PHRASES(expected)) {
+    it(`README contains "${phrase}"`, () => {
+      expect(readme).toContain(phrase);
+    });
+  }
+});

package/src/__tests__/ssr.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+
+/**
+ * SSR safety: the module graph must load in Node without DOM globals,
+ * because @vysmo/transitions is loaded by SSR frameworks (Astro, Next,
+ * etc.) at build time.
+ *
+ * Constructing a `Runner` requires a live WebGL2 context — that's
+ * exercised in the browser tests. This file only asserts that
+ * *importing* the module + reading the pure-data exports works without
+ * `window` / `WebGLTexture` / `HTMLCanvasElement` defined.
+ */
+describe("SSR safety", () => {
+  it("window is undefined in this runtime", () => {
+    expect(typeof window).toBe("undefined");
+  });
+
+  it("module loads without DOM globals", async () => {
+    const mod = await import("../index.js");
+    expect(mod).toBeDefined();
+    expect(typeof mod.Runner).toBe("function");
+    expect(typeof mod.defineTransition).toBe("function");
+  });
+
+  it("transitions are plain-data and safe to read in Node", async () => {
+    const { dissolve, crossZoom, pageCurl } = await import("../index.js");
+    expect(dissolve.name).toBe("dissolve");
+    expect(typeof dissolve.shader.glsl).toBe("string");
+    expect(dissolve.defaults).toBeDefined();
+    expect(crossZoom.name).toBe("cross-zoom");
+    expect(pageCurl.mesh).toBeDefined();
+  });
+
+  it("defineTransition is pure and runs in Node", async () => {
+    const { defineTransition } = await import("../index.js");
+    const t = defineTransition({
+      name: "test/passthrough",
+      glsl: "vec4 transition(vec2 uv) { return mix(getFromColor(uv), getToColor(uv), uProgress); }",
+      defaults: { strength: 1 },
+    });
+    expect(t.name).toBe("test/passthrough");
+    expect(t.defaults.strength).toBe(1);
+    expect(t.shader.glsl).toContain("transition");
+  });
+});

package/src/index.ts

@@ -0,0 +1,75 @@
+export { Runner } from "./runner/runner.js";
+export type { RunnerOptions } from "./runner/runner.js";
+export {
+  dissolve,
+  wipeDirectional,
+  slide,
+  radialReveal,
+  crossZoom,
+  glitch,
+  noiseDissolve,
+  clockWipe,
+  ripple,
+  pixelate,
+  kineticBands,
+  lightLeak,
+  liquidMorph,
+  gridReveal,
+  warpZoom,
+  chromaticPulse,
+  push,
+  shapeReveal,
+  paintBleed,
+  shockwave,
+  swirl,
+  split,
+  directionalWarp,
+  wind,
+  linearBlur,
+  luminaMelt,
+  pinwheel,
+  dreamy,
+  tangentMotionBlur,
+  colorPhase,
+  filmBurn,
+  mosaic,
+  emberScatter,
+  directionalBurn,
+  inkBloom,
+  smolderingEdge,
+  polkaDotsCurtain,
+  crosshatch,
+  dreamyZoom,
+  heatHaze,
+  prismSplit,
+  irisZoom,
+  gravityPull,
+  waveStripes,
+  flowWarp,
+  dripWipe,
+  portalDive,
+  liquidChrome,
+  glassShatter,
+  inkDiffuse,
+  bloomReveal,
+  godRaysReveal,
+  fluidFlow,
+  lenticularFlip,
+  filmGrain,
+  singularity,
+  polygonFlip,
+  pageCurl,
+  rippleWave,
+  tileScatter,
+  defineTransition,
+  ALL_TRANSITIONS,
+} from "./transitions/index.js";
+export type { DefineTransitionSpec } from "./transitions/index.js";
+export type {
+  RenderArgs,
+  TextureSource,
+  Transition,
+  TransitionShader,
+  UniformParams,
+  UniformValue,
+} from "./types.js";

package/src/inputs/normalize.ts

@@ -0,0 +1 @@
+export { TextureCache } from "@vysmo/gl-core";

package/src/runner/__tests__/mesh.test.ts

@@ -0,0 +1,128 @@
+import { describe, expect, it } from "vitest";
+import { buildSubdividedPlane } from "../mesh.js";
+
+describe("buildSubdividedPlane", () => {
+  it("produces 2·nx·ny triangles and 3 vertices per face", () => {
+    const mesh = buildSubdividedPlane(3, 4);
+    expect(mesh.vertexCount).toBe(3 * 4 * 2 * 3);
+    expect(mesh.position.length).toBe(mesh.vertexCount * 2);
+    expect(mesh.uv.length).toBe(mesh.vertexCount * 2);
+    expect(mesh.offset.length).toBe(mesh.vertexCount);
+    expect(mesh.centroid.length).toBe(mesh.vertexCount * 2);
+    expect(mesh.bary.length).toBe(mesh.vertexCount * 3);
+    expect(mesh.random.length).toBe(mesh.vertexCount);
+  });
+
+  it("positions span [-1, 1] in clip space on both axes", () => {
+    const mesh = buildSubdividedPlane(5, 5);
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (let i = 0; i < mesh.position.length; i += 2) {
+      const x = mesh.position[i] as number;
+      const y = mesh.position[i + 1] as number;
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+    }
+    expect(minX).toBeCloseTo(-1, 5);
+    expect(maxX).toBeCloseTo(1, 5);
+    expect(minY).toBeCloseTo(-1, 5);
+    expect(maxY).toBeCloseTo(1, 5);
+  });
+
+  it("uv matches aPosition · 0.5 + 0.5", () => {
+    const mesh = buildSubdividedPlane(3, 3);
+    for (let i = 0; i < mesh.vertexCount; i++) {
+      const px = mesh.position[i * 2] as number;
+      const py = mesh.position[i * 2 + 1] as number;
+      const u = mesh.uv[i * 2] as number;
+      const v = mesh.uv[i * 2 + 1] as number;
+      expect(u).toBeCloseTo(px * 0.5 + 0.5, 5);
+      expect(v).toBeCloseTo(py * 0.5 + 0.5, 5);
+    }
+  });
+
+  it("bary sums to 1 on every vertex and covers all three corners per face", () => {
+    const mesh = buildSubdividedPlane(2, 2);
+    for (let f = 0; f < mesh.vertexCount / 3; f++) {
+      const seen = new Set<string>();
+      for (let k = 0; k < 3; k++) {
+        const base = (f * 3 + k) * 3;
+        const b0 = mesh.bary[base] as number;
+        const b1 = mesh.bary[base + 1] as number;
+        const b2 = mesh.bary[base + 2] as number;
+        expect(b0 + b1 + b2).toBeCloseTo(1, 5);
+        seen.add(`${b0},${b1},${b2}`);
+      }
+      expect(seen.size).toBe(3);
+    }
+  });
+
+  it("offset is shared across all 6 vertices of a quad (per-quad)", () => {
+    const mesh = buildSubdividedPlane(4, 3);
+    const vertsPerQuad = 6;
+    const quadCount = mesh.vertexCount / vertsPerQuad;
+    for (let q = 0; q < quadCount; q++) {
+      const v0 = mesh.offset[q * vertsPerQuad] as number;
+      for (let k = 1; k < vertsPerQuad; k++) {
+        expect(mesh.offset[q * vertsPerQuad + k]).toBe(v0);
+      }
+    }
+  });
+
+  it("offset is a deterministic permutation over quads covering [0, 1]", () => {
+    const mesh = buildSubdividedPlane(3, 3);
+    const vertsPerQuad = 6;
+    const quadCount = mesh.vertexCount / vertsPerQuad;
+    const quadOffsets: number[] = [];
+    for (let q = 0; q < quadCount; q++) {
+      quadOffsets.push(mesh.offset[q * vertsPerQuad] as number);
+    }
+    const sorted = [...quadOffsets].sort((a, b) => a - b);
+    const n = sorted.length;
+    expect(sorted[0]).toBe(0);
+    expect(sorted[n - 1]).toBe(1);
+    const unique = new Set(sorted);
+    expect(unique.size).toBe(n);
+
+    const again = buildSubdividedPlane(3, 3);
+    for (let i = 0; i < mesh.offset.length; i++) {
+      expect(again.offset[i]).toBe(mesh.offset[i]);
+    }
+  });
+
+  it("centroid is shared across a quad and equals the quad centre", () => {
+    const mesh = buildSubdividedPlane(2, 2);
+    const vertsPerQuad = 6;
+    const quadCount = mesh.vertexCount / vertsPerQuad;
+    for (let q = 0; q < quadCount; q++) {
+      const cx0 = mesh.centroid[q * vertsPerQuad * 2] as number;
+      const cy0 = mesh.centroid[q * vertsPerQuad * 2 + 1] as number;
+      // Every vertex of the quad has identical centroid.
+      for (let k = 1; k < vertsPerQuad; k++) {
+        expect(mesh.centroid[(q * vertsPerQuad + k) * 2]).toBeCloseTo(cx0, 5);
+        expect(mesh.centroid[(q * vertsPerQuad + k) * 2 + 1]).toBeCloseTo(cy0, 5);
+      }
+      // And the centroid equals the mean of the quad's 4 distinct corner positions.
+      const positions = new Set<string>();
+      for (let k = 0; k < vertsPerQuad; k++) {
+        const px = mesh.position[(q * vertsPerQuad + k) * 2] as number;
+        const py = mesh.position[(q * vertsPerQuad + k) * 2 + 1] as number;
+        positions.add(`${px},${py}`);
+      }
+      expect(positions.size).toBe(4);
+      let sx = 0;
+      let sy = 0;
+      for (const key of positions) {
+        const [xs, ys] = key.split(",");
+        sx += parseFloat(xs as string);
+        sy += parseFloat(ys as string);
+      }
+      expect(cx0).toBeCloseTo(sx / 4, 5);
+      expect(cy0).toBeCloseTo(sy / 4, 5);
+    }
+  });
+});

package/src/runner/gl.ts

@@ -0,0 +1,69 @@
+export {
+  FULLSCREEN_VERTEX_SHADER as VERTEX_SHADER,
+  compileShader,
+  linkProgram,
+  buildProgram,
+  paramKeyToUniformName,
+} from "@vysmo/gl-core";
+
+export const MESH_VERTEX_SHELL_HEAD = `#version 300 es
+precision highp float;
+uniform float uProgress;
+uniform vec2 uResolution;
+uniform int uPass;
+uniform int uPassCount;
+uniform int uInstances;
+in vec2 aPosition;
+in vec2 aUv;
+in float aOffset;
+in vec2 aCentroid;
+in vec3 aBary;
+in float aRandom;
+out vec2 vUv;
+
+`;
+
+export const FRAGMENT_SHELL_HEAD = `#version 300 es
+precision highp float;
+uniform sampler2D uFrom;
+uniform sampler2D uTo;
+uniform sampler2D uDisplacement;
+uniform sampler2D uEnvironment;
+uniform sampler2D uPrevious;
+uniform float uProgress;
+uniform vec2 uResolution;
+uniform int uPass;
+uniform int uPassCount;
+uniform int uInstances;
+in vec2 vUv;
+out vec4 fragColor;
+
+vec4 getFromColor(vec2 uv) { return texture(uFrom, uv); }
+vec4 getToColor(vec2 uv) { return texture(uTo, uv); }
+vec4 getDisplacement(vec2 uv) { return texture(uDisplacement, uv); }
+vec4 getEnvironment(vec2 uv) { return texture(uEnvironment, uv); }
+vec4 getPrevious(vec2 uv) { return texture(uPrevious, uv); }
+
+// Reflect out-of-range UVs back into [0,1] instead of clamping to edge.
+// Use this when a shader displaces UVs (warp, flow, etc.) and you want
+// the displaced regions to sample real interior content rather than
+// streaked edge texels.
+vec2 mirrorUv(vec2 uv) {
+  return abs(mod(uv + 1.0, 2.0) - 1.0);
+}
+
+`;
+
+export const FRAGMENT_SHELL_TAIL = `
+void main() {
+  fragColor = transition(vUv);
+}
+`;
+
+export function wrapFragmentShader(userBody: string): string {
+  return FRAGMENT_SHELL_HEAD + userBody + FRAGMENT_SHELL_TAIL;
+}
+
+export function wrapMeshVertexShader(userBody: string): string {
+  return MESH_VERTEX_SHELL_HEAD + userBody;
+}

package/src/runner/mesh.ts

@@ -0,0 +1,135 @@
+/**
+ * Subdivided-plane geometry for mesh-based transitions.
+ *
+ * Output is unindexed (6 vertices per quad, 3 per triangle). Attributes
+ * are organised so the two triangles that form a quad share per-face
+ * data — a quad is the natural "face" unit for flip/scatter/fly effects
+ * because a square quad is self-symmetric under 180° rotation, whereas
+ * a right-isoceles triangle is not.
+ *
+ * Layout per vertex:
+ *   aPosition  — per-vertex, clip space [-1, 1]
+ *   aUv        — per-vertex, texture space [0, 1]
+ *   aBary      — per-vertex, barycentric within its triangle
+ *   aCentroid  — per-QUAD centre, shared by all 6 verts of a quad
+ *   aOffset    — per-QUAD deterministic shuffle in [0, 1]
+ *   aRandom    — per-QUAD independent hash in [0, 1]
+ */
+export interface MeshBuffers {
+  vertexCount: number;
+  position: Float32Array;
+  uv: Float32Array;
+  offset: Float32Array;
+  centroid: Float32Array;
+  bary: Float32Array;
+  random: Float32Array;
+}
+
+const BARY_A: readonly [number, number, number] = [1, 0, 0];
+const BARY_B: readonly [number, number, number] = [0, 1, 0];
+const BARY_C: readonly [number, number, number] = [0, 0, 1];
+
+function seededShuffledOffsets(n: number): Float32Array {
+  const out = new Float32Array(n);
+  if (n === 0) return out;
+  if (n === 1) {
+    out[0] = 0;
+    return out;
+  }
+  for (let i = 0; i < n; i++) out[i] = i / (n - 1);
+  // Park-Miller LCG, seeded deterministically.
+  let seed = 1337;
+  for (let i = n - 1; i > 0; i--) {
+    seed = (seed * 48271) % 0x7fffffff;
+    const j = seed % (i + 1);
+    const tmp = out[i] as number;
+    out[i] = out[j] as number;
+    out[j] = tmp;
+  }
+  return out;
+}
+
+function hash01(k: number): number {
+  // Shadertoy-style hash, deterministic per integer input.
+  const x = Math.sin(k * 12.9898 + 78.233) * 43758.5453;
+  return x - Math.floor(x);
+}
+
+export function buildSubdividedPlane(nx: number, ny: number): MeshBuffers {
+  const gridX = Math.max(1, Math.floor(nx));
+  const gridY = Math.max(1, Math.floor(ny));
+  const quadCount = gridX * gridY;
+  const faceCount = quadCount * 2;
+  const vertexCount = faceCount * 3;
+
+  const position = new Float32Array(vertexCount * 2);
+  const uv = new Float32Array(vertexCount * 2);
+  const offset = new Float32Array(vertexCount);
+  const centroid = new Float32Array(vertexCount * 2);
+  const bary = new Float32Array(vertexCount * 3);
+  const random = new Float32Array(vertexCount);
+
+  const quadOffsets = seededShuffledOffsets(quadCount);
+
+  const dx = 2 / gridX;
+  const dy = 2 / gridY;
+
+  let v = 0;
+
+  for (let iy = 0; iy < gridY; iy++) {
+    for (let ix = 0; ix < gridX; ix++) {
+      const quadIdx = iy * gridX + ix;
+      const x0 = -1 + ix * dx;
+      const x1 = x0 + dx;
+      const y0 = -1 + iy * dy;
+      const y1 = y0 + dy;
+
+      const cx = (x0 + x1) * 0.5;
+      const cy = (y0 + y1) * 0.5;
+      const quadOffset = quadOffsets[quadIdx] as number;
+      const quadRandom = hash01(quadIdx + 1);
+
+      // Two triangles per quad: (x0,y0)-(x1,y0)-(x0,y1) and (x1,y0)-(x1,y1)-(x0,y1).
+      const tris: Array<[[number, number], [number, number], [number, number]]> = [
+        [
+          [x0, y0],
+          [x1, y0],
+          [x0, y1],
+        ],
+        [
+          [x1, y0],
+          [x1, y1],
+          [x0, y1],
+        ],
+      ];
+
+      for (const tri of tris) {
+        const verts = [tri[0], tri[1], tri[2]];
+        const barys = [BARY_A, BARY_B, BARY_C];
+
+        for (let k = 0; k < 3; k++) {
+          const vert = verts[k] as [number, number];
+          const b = barys[k] as readonly [number, number, number];
+          const p0 = vert[0];
+          const p1 = vert[1];
+
+          position[v * 2] = p0;
+          position[v * 2 + 1] = p1;
+          uv[v * 2] = p0 * 0.5 + 0.5;
+          uv[v * 2 + 1] = p1 * 0.5 + 0.5;
+          offset[v] = quadOffset;
+          centroid[v * 2] = cx;
+          centroid[v * 2 + 1] = cy;
+          bary[v * 3] = b[0];
+          bary[v * 3 + 1] = b[1];
+          bary[v * 3 + 2] = b[2];
+          random[v] = quadRandom;
+
+          v++;
+        }
+      }
+    }
+  }
+
+  return { vertexCount, position, uv, offset, centroid, bary, random };
+}