vgpu-render 0.1.0 → 0.3.0

package/README.md

@@ -30,23 +30,23 @@ dependencies of this package.
 
 ## Usage
 
-The public API uses an explicit frame recorder:
+The public API uses an explicit frame draw list:
 
 ```ts
-const recorder = debug.beginFrame();
-recorder.point([0, 0, 0], { color: [1, 0, 0, 1], size: 8 });
-recorder.line([0, 0, 0], [1, 0, 0], { color: [0, 1, 0, 1], width: 2 });
-recorder.arrow([0, 0, 0], [1, 1, 0], { color: [0, 0.5, 1, 1] });
-recorder.lineStrip([[0, 0, 0], [1, 0, 1], [2, 0, 0]], { width: 4, joint: "round" }, false);
+const drawList = debug.beginFrame();
+drawList.point([0, 0, 0], { color: [1, 0, 0, 1], size: 8 });
+drawList.line([0, 0, 0], [1, 0, 0], { color: [0, 1, 0, 1], width: 2 });
+drawList.arrow([0, 0, 0], [1, 1, 0], { color: [0, 0.5, 1, 1] });
+drawList.lineStrip([[0, 0, 0], [1, 0, 1], [2, 0, 0]], { width: 4, joint: "round" }, false);
 // Per-vertex normals select the reference `*_n` shading: each segment uses its start
 // vertex's normal and the joints between them blend the two normals.
-recorder.lineStrip([[0, 0, 0], [1, 0, 0], [1, 1, 0]], { width: 4, joint: "round", normals: [[0, 1, 0], [0, 1, 0], [0, 1, 0]] }, false);
-recorder.grid([0, 0, 0], [4, 4], [0.5, 0.5], { color: [0.4, 0.4, 0.5, 1] });
-recorder.curve(cubicBezier, { color: [1, 1, 1, 1], tolerance: 0.08 });
-recorder.mesh(sphere(0.5), { solid: true, color: [0.2, 0.6, 1, 0.8] });
-recorder.text([0, 1, 0], "world label", { fontSize: 32, pixelSize: 0.01, color: [1, 0.8, 0.2, 1] });
-recorder.text([24, 24, 0], "screen HUD", { space: "screen", anchor: "top-left", fontSize: 16 });
-const commands = debug.finishFrame(recorder);
+drawList.lineStrip([[0, 0, 0], [1, 0, 0], [1, 1, 0]], { width: 4, joint: "round", normals: [[0, 1, 0], [0, 1, 0], [0, 1, 0]] }, false);
+drawList.grid([0, 0, 0], [4, 4], [0.5, 0.5], { color: [0.4, 0.4, 0.5, 1] });
+drawList.curve(cubicBezier, { color: [1, 1, 1, 1], tolerance: 0.08 });
+drawList.mesh(sphere(0.5), { solid: true, color: [0.2, 0.6, 1, 0.8] });
+drawList.text([0, 1, 0], "world label", { fontSize: 32, pixelSize: 0.01, color: [1, 0.8, 0.2, 1] });
+drawList.text([24, 24, 0], "screen HUD", { space: "screen", anchor: "top-left", fontSize: 16 });
+const commands = debug.finishFrame(drawList);
 
 // `view` is the world-to-view matrix; normal-aware strokes read it like the reference view matrix.
 renderer.prepare(commands, { viewProjection, view });
@@ -108,7 +108,7 @@ alphas, which the addon does not expose.
 ## Pipeline
 
 ```text
-FrameRecorder -> FrameCommand[] -> GpuDebugDraw3D
+FrameDrawList -> FrameCommand[] -> GpuDebugDraw3D
   points    -> instanced billboards
   lines     -> screen-space or world-space quads, dash + normal aware
   triangles -> transient solid meshes
@@ -129,10 +129,12 @@ const frame = debug.beginFrame();
 frame.d2.line([0, 0], [120, 40], { width: 2, color: [1, 0, 0, 1] });
 frame.d2.lineStrip([[0, 0], [40, 80], [90, 10]], { width: 4, joint: "round" });
 frame.d2.grid([0, 0], [8, 5], [40, 40], { color: [0.4, 0.4, 0.5, 1] });
-frame.d2.rect([0, 0], [80, 40], { fill: false, strokeWidth: 2 });
-frame.d2.roundedRect([0, -60], [120, 40], 12, { color: [1, 0.7, 0.3, 1] });
-frame.d2.circle([0, 120], 60, { color: [0, 0.5, 1, 1] });
-frame.d2.arc([0, 120], 80, { fill: false, strokeWidth: 3, startAngle: 0, sweep: Math.PI / 2 });
+frame.d2.rect([0, 0], [80, 40], { strokeWidth: 2 });
+frame.d2.rect_s([160, 0], [80, 40], { color: [0.9, 0.9, 1, 1] });
+frame.d2.rect_d([320, 0], [80, 40], [12, 6, 0], { strokeWidth: 2 });
+frame.d2.rect_r_s([0, -60], [120, 40], 12, { color: [1, 0.7, 0.3, 1] });
+frame.d2.circle_s([0, 120], 60, { color: [0, 0.5, 1, 1] });
+frame.d2.arc([0, 120], 80, { strokeWidth: 3, startAngle: 0, sweep: Math.PI / 2 });
 const commands = debug.finishFrame(frame);
 // The third argument is the 2D camera; omit it and the last one stays in effect.
 renderer.prepare(commands, { viewProjection, view }, { pan: [0, 0], zoom: 1 });
@@ -146,17 +148,32 @@ Two coordinate spaces share one pixel-based pipeline:
 | `screen` | top-left corner | down | one canvas pixel | no |
 
 `world2d` mirrors the reference 2D camera: the origin is the centre of the target, `+y` points up and
-`zoom` is canvas pixels per world unit. `2d_shapes`' `X_EXTENT = 1000` is a pixel-scale world
+`zoom` is canvas pixels per world unit. Both spaces are in **target pixels**, like the text `screen`
+space, so a HiDPI caller scales `screen` content itself (`gallery/screen-scale.ts` does that for the
+gallery); `world2d` needs no such step because its projection already reads the target size. `2d_shapes`' `X_EXTENT = 1000` is a pixel-scale world
 coordinate in that sense, not a top-left one — the top-left, +y-down space is the reference UI space,
 and here it is `screen`, the same one `TextSpace "screen"` already uses.
 
-- Strokes: `line`, `ray`, `lineStrip`/`polyline`, `grid`, `point`; screen-pixel or world widths,
-dashes with the same phase accumulation as the 3D paths, and round/bevel/miter joints.
-- Shapes: `rect`, `roundedRect`, `circle`, `ellipse`, `arc`, `annulus`, `capsule`, `polygon`,
+- Strokes: `line`, `ray`, `lineStrip`/`polyline`, `lineLoop`, `grid`, `point`; every stroke has a
+`_d` twin (`line_d`, `ray_d`, `lineStrip_d`, `polyline_d`, `lineLoop_d`, `grid_d`) that takes the
+same `[visible, gap, phase]` triple and phase accumulation as the 3D dashed paths. Screen-pixel or
+world widths, and round/bevel/miter joints.
+- Arrows: `arrow` / `arrow_s` / `arrow_d` / `arrow_s_d` — the open V head by default, a filled head
+for `_s`, and the same two forms dashed for `_d`, with `headLength` / `headAngle` options.
+- Curves: `curve(curve, options)` / `curve_d(curve, dash, options)` sample a cubic control polygon
+(`Curve2D`, the 2D twin of `Curve3D`) into a strip, with `tolerance`, `transform.center/rotation/scale`
+and `closed` the same way the 3D page uses them. The 2D Curve page mirrors the 3D one: a
+construction band below the matrix draws every control point (pink anchors, amber handles) for the
+seven reference curve shapes.
+- Shapes: `rect`, `rect_r`, `circle`, `ellipse`, `arc`, `annulus`, `capsule`, `polygon`,
 `triangle`, `rhombus`, `sector`, `segment`. Each is one instanced quad evaluated as a signed
 distance field in the fragment stage, so nothing is triangulated on the CPU and an outline
-width stays a pixel count at any zoom. `fill: false` plus `strokeWidth` turns any of them into
-an outline.
+width stays a pixel count at any zoom. Every primitive follows the 3D naming: `<shape>` strokes
+the outline, `<shape>_s` fills it and `<shape>_d` dashes the outline along its perimeter,
+taking the same `[visible, gap, phase]` triple as the line layer. `arc` has no interior, so it
+has no `_s` variant, and `Shape2DOptions` no longer carries `fill` — the method name decides.
+Dashes are cut from the shape's perimeter parameter, a closed form for every primitive except
+the ellipse (Simpson-integrated arc length), so they stay continuous across corners.
 - The layer is an overlay: it draws after every 3D primitive, pins itself to the near plane and
 does not write depth. Screen-space text remains the last thing drawn.
 - `InfiniteGrid2D` renders the reference's 2D grid as a full-viewport shader quad: decimal LOD levels,
@@ -164,11 +181,17 @@ does not write depth. Screen-space text remains the last thing drawn.
   `cellSize`, `lineWidthPixels`, `minPixelsBetweenCells`, the LOD range and both line colors from
   the gallery's grid panel, and draws as the 2D layer's background.
 - The 2D camera is independent of the 3D one (`mode: "3d" | "2d"` in the gallery config); the
-`2d-*` pages fit their declared `view2d` extent, drag to pan and scroll to zoom.
+`2d-*` pages fit their declared `view2d` extent, drag or hold WASD to pan, hold shift to sprint, and scroll to zoom. The gallery
+classifies the 2D layer like the 3D scenes: `2d-index` is the API index, the twelve shape pages
+(`2d-rect`, `2d-rounded-rect`, `2d-circle`, `2d-ellipse`, `2d-arc`, `2d-annulus`, `2d-capsule`,
+`2d-polygon`, `2d-triangle`, `2d-rhombus`, `2d-sector`, `2d-segment`) each own one primitive, and
+`2d-lines`, `2d-curves`, `2d-markers`, `2d-arrows`, `2d-spaces`, `2d-grid` cover the stroke API
+families. Every matrix page's column titles and sample labels are `world2d` text, so they pan
+and zoom with the geometry they annotate.
 
 ## Text
 
-`recorder.text(position, text, options)` draws one block per call. `text` is a string or a list
+`drawList.text(position, text, options)` draws one block per call. `text` is a string or a list
 of spans, the equivalent of a text root entity plus its child span entities.
 
 Three placement spaces share one pipeline and are selected per block:
@@ -179,6 +202,13 @@ Three placement spaces share one pipeline and are selected per block:
 | `world-billboard` | world units, block rebuilt from the camera's axes | `fontSize × pixelSize` |
 | `screen` | **top-left origin pixels** (`position.z` ignored) | `fontSize` pixels |
 
+The `screen` space is in **target pixels** — the same units as the pass's viewport — because the
+library has no DOM access and must not guess a display density. A caller on a HiDPI display owns the
+conversion: the gallery authors its pages in CSS pixels and multiplies every screen-space command by
+`devicePixelRatio` before handing the frame over (`gallery/screen-scale.ts`). A block placed at
+`[24, 24]` with `fontSize: 18` in CSS pixels then draws at `[48, 48]` and 36 target pixels on a 2×
+display, which is what keeps a label the same physical size on every screen.
+
 `fontSize` is in **font pixels** and is the layout unit; `pixelSize` is world units per font pixel.
 That pair is the reference `font_size` / `pixel_size`, and it lets a block keep a fixed world
 size while its glyphs are rasterised at any resolution. Which resolution that is belongs to the glyph
@@ -187,6 +217,12 @@ source: one that can rasterise on demand is asked for the size the block covers
 `fontSize × rasterScale`. Layout options follow the reference layout model: `justify`, `lineBreak`,
 `bounds` (`TextBounds`, in font pixels), `anchor`, `lineHeight` and `letterSpacing`.
 
+`rotation` turns a `world-plane` block away from the XY plane, with the reference `Label3D.rotation`
+Euler order (Y, then X, then Z) in radians. `[-Math.PI / 2, 0, 0]` lays a block flat on the XZ plane
+so it reads from above, which is what the reference example labels do; the two camera-relative
+spaces ignore it. The basis travels in the instance world matrix, so the text pipeline stays inside
+the device's vertex attribute budget.
+
 `lineHeight` is the absolute pixel form when you pass one, and the default is a `1.2` multiple of the
 font size otherwise — which means a line's box is that multiple of **the line's own
 largest span**, so a line holding a bigger span is taller. `lineHeightScale` names that multiple
@@ -198,6 +234,34 @@ shaping pass adds it to each cluster's advance.
 World text is depth-tested but never depth-written, so geometry in front of it
 occludes it; `screen` text pins itself to the near plane and always wins.
 
+### Font face
+
+`weight` (1–1000, default `400`), `style` (`normal` or `italic`) and `width` (the nine
+`font-stretch` keywords) select the face a block is rasterised in, mirroring bevy's `TextFont`.
+They are block defaults, and a span overrides one axis of them at a time rather than replacing the
+whole face. The glyph atlas keys on all three, so two weights of one character cannot share texels.
+
+How much of that a browser can honour depends on the loaded face, and the limits are real:
+
+| option | what Canvas2D does |
+| --- | --- |
+| `weight` | A weight the loaded family does not carry is **synthesised** in one step (the threshold sits between 500 and 600), so `700` and `900` then look identical and the advance never changes. A variable font's real `wght` axis is not reachable — Canvas2D has no `font-variation-settings` — but the browser **does** pick a face by the weight it was registered with, so registering the same family once per weight gives real weights. |
+| `style` | `italic` is the only slant the font shorthand keeps; `oblique <angle>` reads back as plain `italic`, which is why bevy's `FontStyle::Oblique(a)` is not exposed. A face without an italic is slanted by the browser. |
+| `width` | The keyword only reaches the font when the face has a `wdth` axis. The bundled static subset has none, so every stop draws at normal width there. A percentage is rejected by the shorthand, so only the nine named stops exist here. |
+
+The bundled Fira Mono subset is a static Medium face, so out of the box `weight` only ever produces
+one synthesised step. `loadFontFaces(family, faces)` is the way out: it registers each entry as a face
+of `family` with its own `weight` descriptor, so `weight: 200` through `900` select genuinely different
+faces. The gallery does exactly that for the `text-font-query` page, which draws with eight instances
+of a variable font built by `bun scripts/build-font-faces.ts` (see
+`gallery/assets/`). That is gallery-only payload: the library's own entry point does not
+carry it.
+
+A custom glyph source receives the resolved face — `{ family, weight, style, width }` — instead of a
+family string, because those are the fields the atlas keys on. A source that holds one fixed face (a
+prebaked page, one parsed font buffer) sets `faceKey` to the part it can honour, so a weight it cannot
+rasterise does not multiply identical atlas entries.
+
 ### Outline
 
 `outlineWidth` (in font pixels) rings every glyph in the block in `outlineColor`, which defaults to
@@ -381,8 +445,8 @@ const renderer = new GpuDebugDraw3D(gpu, {
   },
 });
 
-recorder.text([0, 0, 0], "read me", { source: "sharp" });
-recorder.text([0, -1, 0], "and me", { source: "cheap" });
+drawList.text([0, 0, 0], "read me", { source: "sharp" });
+drawList.text([0, -1, 0], "and me", { source: "cheap" });
 ```
 
 Blocks that name nothing use the first source registered, and `defaultTextStyle` can set one for the
@@ -391,7 +455,10 @@ actually names it, so registering sources you never draw costs nothing.
 
 Seven scenes exercise text end to end, and none of them is a port — the reference addon has no text
 API; the layout they run follows the reference layout model, and `docs/text-reference.md` records how
-that was verified.
+that was verified. The geometry examples also draw their own labels, because the reference scenes
+own `Label3D` captions for every column and row; those go through the same pipeline, lying flat on
+the ground with `rotation: [-Math.PI / 2, 0, 0]`. A `GpuDebugDraw3D` built without a `text` option
+skips those blocks instead of failing, so geometry-only callers keep working.
 
 `text-compare` is the parity matrix, in the shape of the line/circle examples: rows are glyph sources,
 columns are font sizes, transposed relative to those because text grows sideways. The six
@@ -457,7 +524,7 @@ gallery to a single glyph source (`auto`, `bitmap`, `bitmap4x`, `sdf`, `sdf4x`,
 - `InfiniteGrid3D` shader-driven ground grid ported from the reference grid addon
   (decimal LOD layers, screen-space width, edge/grazing/center/far fades).
 - Orbit/pan/zoom camera controls in the gallery, tuned to the reference
-  `entities/free_camera.gd` and layered on a velocity model (`src/demo-camera.ts`): a drag is
+  `entities/free_camera.gd` and layered on a velocity model (`gallery/demo-camera.ts`): a drag is
   an angular velocity (0.25°/px) or a linear velocity (`distance`/FOV in perspective,
   `orthographicHeight` in orthographic), a wheel notch is a scalar velocity in log₂ space
   (1.08× per notch), and a released drag keeps its velocity and glides — the exact integral of
@@ -488,7 +555,7 @@ const debug = new DebugDraw3D({
 });
 ```
 
-`src/demo-config.ts` contains independently validated camera/view configuration
+`gallery/demo-config.ts` contains independently validated camera/view configuration
 and injected storage helpers. Gallery controls support grid, opacity, animation,
 width multiplier, projection, background, camera preset and reset; camera
 interaction is persisted. The sidebar groups them into three collapsible
@@ -507,11 +574,11 @@ deterministic preset without localStorage: `/?compare=1&scene=circle`. Orthograp
 changes the orthographic extent.
 
 The gallery UI is built with **Base UI + shadcn (base-lyra preset) + Tailwind v4**
-in `src/components/`, and the imperative WebGPU side lives in `src/demo-engine.ts`.
+in `gallery/components/`, and the imperative WebGPU side lives in `gallery/demo-engine.ts`.
 React only renders chrome; the render loop, camera, and persistence stay outside
 React and are read through `useSyncExternalStore`
-(`src/demo-hooks.ts`). `src/demo.tsx` mounts the shell, `src/index.css` holds the base-lyra
-theme tokens, and `src/demo.css` keeps the three-column layout, compare mode
+(`gallery/demo-hooks.ts`). `gallery/demo.tsx` mounts the shell, `gallery/index.css` holds the base-lyra
+theme tokens, and `gallery/demo.css` keeps the three-column layout, compare mode
 and code highlighting.
 
 Runtime comparison viewers (see `docs/visual-comparison.md` and `docs/text-reference.md`):

package/dist/curve.d.ts

@@ -1,4 +1,5 @@
-import type { Vec3 } from "./frame-recorder.js";
+import type { Vec2 } from "./camera-2d.js";
+import type { Vec3 } from "./frame-draw-list.js";
 export type CurvePoint = {
     readonly position: Vec3;
     readonly in?: Vec3;
@@ -14,3 +15,27 @@ export type CurveTransform = {
 };
 export declare function rotatePoint(p: Vec3, rotation: readonly [number, number, number]): Vec3;
 export declare function sampleCurve(curve: Curve3D, tolerance?: number, transform?: CurveTransform): Vec3[];
+/** One control point of a 2D cubic curve; `in`/`out` are handles relative to `position`. */
+export type CurvePoint2D = {
+    readonly position: Vec2;
+    readonly in?: Vec2;
+    readonly out?: Vec2;
+};
+export type Curve2D = {
+    readonly points: readonly CurvePoint2D[];
+    readonly closed?: boolean;
+};
+export type CurveTransform2D = {
+    readonly center?: Vec2;
+    /** Anticlockwise rotation in radians. */
+    readonly rotation?: number;
+    readonly scale?: number;
+};
+/** Applies a curve transform to one point; callers drawing control points use this. */
+export declare function placeCurvePoint2D(point: Vec2, transform?: CurveTransform2D): Vec2;
+/**
+ * Samples a 2D cubic curve into a polyline, the 2D twin of `sampleCurve`. `tolerance` is the
+ * approximate segment length in `world2d` units: smaller values subdivide each cubic further, so
+ * a `lineStrip` can follow the curve as closely as the caller needs.
+ */
+export declare function sampleCurve2D(curve: Curve2D, tolerance?: number, transform?: CurveTransform2D): Vec2[];

package/dist/curve.js

@@ -44,3 +44,56 @@ export function sampleCurve(curve, tolerance = 0.08, transform = {}) {
     out.push(place(curve.closed ? points[0].position : points[points.length - 1].position));
     return out;
 }
+const add2 = (a, b) => [a[0] + b[0], a[1] + b[1]];
+function cubic2(p0, p1, p2, p3, t) {
+    const u = 1 - t;
+    const a = u * u * u;
+    const b = 3 * u * u * t;
+    const c = 3 * u * t * t;
+    const d = t * t * t;
+    return [
+        a * p0[0] + b * p1[0] + c * p2[0] + d * p3[0],
+        a * p0[1] + b * p1[1] + c * p2[1] + d * p3[1],
+    ];
+}
+/** Applies a curve transform to one point; callers drawing control points use this. */
+export function placeCurvePoint2D(point, transform = {}) {
+    const rotation = transform.rotation ?? 0;
+    const scale = transform.scale ?? 1;
+    const center = transform.center ?? [0, 0];
+    const cos = Math.cos(rotation);
+    const sin = Math.sin(rotation);
+    const x = point[0] * scale;
+    const y = point[1] * scale;
+    return [center[0] + x * cos - y * sin, center[1] + x * sin + y * cos];
+}
+/**
+ * Samples a 2D cubic curve into a polyline, the 2D twin of `sampleCurve`. `tolerance` is the
+ * approximate segment length in `world2d` units: smaller values subdivide each cubic further, so
+ * a `lineStrip` can follow the curve as closely as the caller needs.
+ */
+export function sampleCurve2D(curve, tolerance = 1, transform = {}) {
+    const points = curve.points;
+    const place = (p) => placeCurvePoint2D(p, transform);
+    if (points.length < 2)
+        return points.map((point) => place(point.position));
+    const out = [];
+    const count = curve.closed ? points.length : points.length - 1;
+    const step = Math.max(tolerance, 0.1);
+    for (let i = 0; i < count; i++) {
+        const a = points[i];
+        const b = points[(i + 1) % points.length];
+        const p0 = a.position;
+        const p1 = add2(a.position, a.out ?? [0, 0]);
+        const p2 = add2(b.position, b.in ?? [0, 0]);
+        const p3 = b.position;
+        const hull = Math.hypot(p1[0] - p0[0], p1[1] - p0[1]) +
+            Math.hypot(p2[0] - p1[0], p2[1] - p1[1]) +
+            Math.hypot(p3[0] - p2[0], p3[1] - p2[1]);
+        const steps = Math.max(2, Math.min(64, Math.ceil(hull / step)));
+        for (let s = 0; s < steps; s++)
+            out.push(place(cubic2(p0, p1, p2, p3, s / steps)));
+    }
+    out.push(place(curve.closed ? points[0].position : points[points.length - 1].position));
+    return out;
+}

package/dist/debug-draw-3d.d.ts

@@ -1,4 +1,4 @@
-import { FrameRecorder, type FrameCommand, type LayerMask, type LineDefaults, type PointDefaults } from "./frame-recorder.js";
+import { FrameDrawList, type FrameCommand, type LayerMask, type LineDefaults, type PointDefaults } from "./frame-draw-list.js";
 export type DebugDrawOptions = {
     defaultVisibleLayers?: LayerMask;
     /** Style applied to every point that does not override it. */
@@ -9,6 +9,6 @@ export type DebugDrawOptions = {
 export declare class DebugDraw3D {
     #private;
     constructor(options?: DebugDrawOptions);
-    beginFrame(): FrameRecorder;
-    finishFrame(recorder: FrameRecorder): readonly FrameCommand[];
+    beginFrame(): FrameDrawList;
+    finishFrame(drawList: FrameDrawList): readonly FrameCommand[];
 }

package/dist/debug-draw-3d.js

@@ -1,4 +1,4 @@
-import { FrameRecorder, resolveFrameRecorderDefaults, } from "./frame-recorder.js";
+import { FrameDrawList, resolveFrameDrawListDefaults, } from "./frame-draw-list.js";
 export class DebugDraw3D {
     #visibleLayers;
     #defaults;
@@ -14,22 +14,22 @@ export class DebugDraw3D {
             ...(options.defaultLineStyle === undefined ? {} : { line: { ...options.defaultLineStyle } }),
         };
         // Validate eagerly so invalid defaults fail at construction, not on the first frame.
-        resolveFrameRecorderDefaults(this.#defaults);
+        resolveFrameDrawListDefaults(this.#defaults);
     }
     beginFrame() {
         if (this.#active !== undefined) {
             throw new Error("a debug draw frame is already active");
         }
-        const recorder = new FrameRecorder(this.#defaults);
-        this.#active = recorder;
-        return recorder;
+        const drawList = new FrameDrawList(this.#defaults);
+        this.#active = drawList;
+        return drawList;
     }
-    finishFrame(recorder) {
-        if (this.#active !== recorder) {
-            throw new Error("recorder does not belong to this debug draw instance");
+    finishFrame(drawList) {
+        if (this.#active !== drawList) {
+            throw new Error("drawList does not belong to this debug draw instance");
         }
-        const commands = recorder.commands(this.#visibleLayers);
-        recorder.seal();
+        const commands = drawList.commands(this.#visibleLayers);
+        drawList.seal();
         this.#active = undefined;
         return commands;
     }