@flighthq/scene2d-gl 0.3.0-next.906.07cea63 → 0.3.0

package/src/{glSpriteBatch.test.ts → glQuadBatchWriter.test.ts}

@@ -1,29 +1,50 @@
-import { createImageResource } from '@flighthq/image/contract';
 import { getGlRenderStateRuntime } from '@flighthq/render-gl/contract';
-import type { ColorScaleBias, ImageResource, Material } from '@flighthq/types/contract';
+import type { BlendMode, ColorScaleBias, GlMaterialRenderer, GlRenderState, Material } from '@flighthq/types/contract';
 
 import { registerGlColorAdjustmentMaterialFeature } from './glColorAdjustmentMaterialFeature';
 import {
   bindGlQuadBatchBaseAttributes,
   ensureGlQuadBatchShader,
-  flushGlSpriteBatch,
-  packGlSpriteBatchMaterialInstance,
-  prepareGlSpriteBatchWrite,
-  recordGlSpriteBatchColorScaleBias,
+  flushGlQuadBatchWriter,
+  packGlQuadBatchMaterialInstance,
+  prepareGlQuadBatchWrite as prepareResolvedGlQuadBatchWrite,
+  recordGlQuadBatchColorScaleBias,
   setGlQuadBatchWorldAndTexture,
   useGlQuadBatchProgram,
-} from './glSpriteBatch';
+} from './glQuadBatchWriter';
 import { standardGlMaterialRenderer } from './glStandardMaterial';
 import { createGlState } from './glTestHelper';
 
-function makeTexture(): ImageResource {
-  return createImageResource(document.createElement('img'));
+function makeTexture(): WebGLTexture {
+  return {} as WebGLTexture;
 }
 
 function makeMaterial(): Material {
   return { kind: 'TestMaterial' } as Material;
 }
 
+function prepareGlQuadBatchWrite(
+  state: GlRenderState,
+  texture: WebGLTexture,
+  blendMode: BlendMode | null,
+  material: Material | null,
+  materialRenderer: GlMaterialRenderer,
+  maxInstances: number,
+  smoothing: boolean | null = null,
+): number {
+  return prepareResolvedGlQuadBatchWrite(
+    state,
+    texture,
+    false,
+    null,
+    blendMode,
+    material,
+    materialRenderer,
+    maxInstances,
+    smoothing,
+  );
+}
+
 function ct(
   redScale = 1,
   greenScale = 1,
@@ -77,10 +98,10 @@ describe('ensureGlQuadBatchShader', () => {
   });
 });
 
-describe('flushGlSpriteBatch', () => {
+describe('flushGlQuadBatchWriter', () => {
   it('does nothing when batch count is zero', () => {
     const { state, gl } = createGlState();
-    flushGlSpriteBatch(state);
+    flushGlQuadBatchWriter(state);
     expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
   });
 
@@ -89,42 +110,42 @@ describe('flushGlSpriteBatch', () => {
     const runtime = getGlRenderStateRuntime(state);
     const tex = makeTexture();
 
-    prepareGlSpriteBatchWrite(state, tex, null, null, standardGlMaterialRenderer, 1);
-    runtime.spriteBatchCount = 1;
-    flushGlSpriteBatch(state);
+    prepareGlQuadBatchWrite(state, tex, null, null, standardGlMaterialRenderer, 1);
+    runtime.quadBatchWriterCount = 1;
+    flushGlQuadBatchWriter(state);
 
     expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 1);
-    expect(runtime.spriteBatchCount).toBe(0);
-    expect(runtime.spriteBatchTexture).toBeNull();
-    expect(runtime.spriteBatchBlendMode).toBeNull();
-    expect(runtime.spriteBatchMaterial).toBeNull();
+    expect(runtime.quadBatchWriterCount).toBe(0);
+    expect(runtime.quadBatchWriterTexture).toBeNull();
+    expect(runtime.quadBatchWriterBlendMode).toBeNull();
+    expect(runtime.quadBatchWriterMaterial).toBeNull();
   });
 });
 
-describe('packGlSpriteBatchMaterialInstance', () => {
+describe('packGlQuadBatchMaterialInstance', () => {
   it('is a no-op when no per-instance material renderer is active', () => {
     const { state } = createGlState();
-    getGlRenderStateRuntime(state).spriteBatchMaterialRenderer = null;
-    expect(() => packGlSpriteBatchMaterialInstance(state, null, 0)).not.toThrow();
+    getGlRenderStateRuntime(state).quadBatchWriterMaterialRenderer = null;
+    expect(() => packGlQuadBatchMaterialInstance(state, null, 0)).not.toThrow();
   });
 });
 
-describe('prepareGlSpriteBatchWrite', () => {
+describe('prepareGlQuadBatchWrite', () => {
   it('installs the pending-draw flush seam on the render state runtime', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
 
     expect(runtime.flushPendingDraws).toBeNull();
-    prepareGlSpriteBatchWrite(state, makeTexture(), null, null, standardGlMaterialRenderer, 1);
+    prepareGlQuadBatchWrite(state, makeTexture(), null, null, standardGlMaterialRenderer, 1);
 
-    expect(runtime.flushPendingDraws).toBe(flushGlSpriteBatch);
+    expect(runtime.flushPendingDraws).toBe(flushGlQuadBatchWriter);
   });
 
   it('returns float index 0 for an empty batch', () => {
     const { state } = createGlState();
     const tex = makeTexture();
 
-    const base = prepareGlSpriteBatchWrite(state, tex, null, null, standardGlMaterialRenderer, 2);
+    const base = prepareGlQuadBatchWrite(state, tex, null, null, standardGlMaterialRenderer, 2);
     expect(base).toBe(0);
   });
 
@@ -134,13 +155,13 @@ describe('prepareGlSpriteBatchWrite', () => {
     const tex1 = makeTexture();
     const tex2 = makeTexture();
 
-    prepareGlSpriteBatchWrite(state, tex1, null, null, standardGlMaterialRenderer, 1);
-    runtime.spriteBatchCount = 1;
+    prepareGlQuadBatchWrite(state, tex1, null, null, standardGlMaterialRenderer, 1);
+    runtime.quadBatchWriterCount = 1;
 
-    prepareGlSpriteBatchWrite(state, tex2, null, null, standardGlMaterialRenderer, 1);
+    prepareGlQuadBatchWrite(state, tex2, null, null, standardGlMaterialRenderer, 1);
 
     expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
-    expect(runtime.spriteBatchTexture).toBe(tex2);
+    expect(runtime.quadBatchWriterTexture).toBe(tex2);
   });
 
   it('flushes when material changes', () => {
@@ -150,24 +171,24 @@ describe('prepareGlSpriteBatchWrite', () => {
     const materialA = makeMaterial();
     const materialB = makeMaterial();
 
-    prepareGlSpriteBatchWrite(state, tex, null, materialA, standardGlMaterialRenderer, 1);
-    runtime.spriteBatchCount = 1;
+    prepareGlQuadBatchWrite(state, tex, null, materialA, standardGlMaterialRenderer, 1);
+    runtime.quadBatchWriterCount = 1;
 
-    prepareGlSpriteBatchWrite(state, tex, null, materialB, standardGlMaterialRenderer, 1);
+    prepareGlQuadBatchWrite(state, tex, null, materialB, standardGlMaterialRenderer, 1);
 
     expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
-    expect(runtime.spriteBatchMaterial).toBe(materialB);
+    expect(runtime.quadBatchWriterMaterial).toBe(materialB);
   });
 
   it('grows instance data when capacity is exceeded', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     const tex = makeTexture();
-    const initialFloats = runtime.spriteBatchInstanceData.length;
+    const initialFloats = runtime.quadBatchWriterInstanceData.length;
 
-    prepareGlSpriteBatchWrite(state, tex, null, null, standardGlMaterialRenderer, initialFloats + 100);
+    prepareGlQuadBatchWrite(state, tex, null, null, standardGlMaterialRenderer, initialFloats + 100);
 
-    expect(runtime.spriteBatchInstanceData.length).toBeGreaterThan(initialFloats);
+    expect(runtime.quadBatchWriterInstanceData.length).toBeGreaterThan(initialFloats);
   });
 
   it('flushes when per-bitmap smoothing changes on the same texture', () => {
@@ -176,13 +197,13 @@ describe('prepareGlSpriteBatchWrite', () => {
     const tex = makeTexture();
 
     // Same texture/blend/material, but a NEAREST bitmap must not share a bind with a LINEAR one.
-    prepareGlSpriteBatchWrite(state, tex, null, null, standardGlMaterialRenderer, 1, false);
-    runtime.spriteBatchCount = 1;
+    prepareGlQuadBatchWrite(state, tex, null, null, standardGlMaterialRenderer, 1, false);
+    runtime.quadBatchWriterCount = 1;
 
-    prepareGlSpriteBatchWrite(state, tex, null, null, standardGlMaterialRenderer, 1, true);
+    prepareGlQuadBatchWrite(state, tex, null, null, standardGlMaterialRenderer, 1, true);
 
     expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
-    expect(runtime.spriteBatchSmoothing).toBe(true);
+    expect(runtime.quadBatchWriterSmoothing).toBe(true);
   });
 
   it('keeps same-smoothing bitmaps in one batch (no spurious flush)', () => {
@@ -190,24 +211,24 @@ describe('prepareGlSpriteBatchWrite', () => {
     const runtime = getGlRenderStateRuntime(state);
     const tex = makeTexture();
 
-    prepareGlSpriteBatchWrite(state, tex, null, null, standardGlMaterialRenderer, 1, true);
-    runtime.spriteBatchCount = 1;
-    prepareGlSpriteBatchWrite(state, tex, null, null, standardGlMaterialRenderer, 1, true);
+    prepareGlQuadBatchWrite(state, tex, null, null, standardGlMaterialRenderer, 1, true);
+    runtime.quadBatchWriterCount = 1;
+    prepareGlQuadBatchWrite(state, tex, null, null, standardGlMaterialRenderer, 1, true);
 
     expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
   });
 });
 
-describe('recordGlSpriteBatchColorScaleBias', () => {
+describe('recordGlQuadBatchColorScaleBias', () => {
   it('skips the tint (draws untinted) and records no fold state when color adjustment is not enabled', () => {
     const { state, gl } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
-    prepareGlSpriteBatchWrite(state, makeTexture(), null, null, standardGlMaterialRenderer, 1);
-    recordGlSpriteBatchColorScaleBias(state, ct(0.5), 0);
-    runtime.spriteBatchCount = 1;
+    prepareGlQuadBatchWrite(state, makeTexture(), null, null, standardGlMaterialRenderer, 1);
+    recordGlQuadBatchColorScaleBias(state, ct(0.5), 0);
+    runtime.quadBatchWriterCount = 1;
     // No fold installed → the CT mode stays uninitialized and no CT program is bound.
-    expect(runtime.spriteBatchColorScaleBiasMode ?? CT_MODE_NONE).toBe(CT_MODE_NONE);
-    flushGlSpriteBatch(state);
+    expect(runtime.quadBatchWriterColorScaleBiasMode ?? CT_MODE_NONE).toBe(CT_MODE_NONE);
+    flushGlQuadBatchWriter(state);
     expect(gl.uniform4f).not.toHaveBeenCalled();
     expect(gl.drawElementsInstanced).toHaveBeenCalled();
   });
@@ -215,16 +236,16 @@ describe('recordGlSpriteBatchColorScaleBias', () => {
   it('is a no-op for an untinted instance whether or not the fold is enabled', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
-    expect(() => recordGlSpriteBatchColorScaleBias(state, null, 0)).not.toThrow();
-    expect(runtime.spriteBatchColorScaleBiasMode ?? CT_MODE_NONE).toBe(CT_MODE_NONE);
+    expect(() => recordGlQuadBatchColorScaleBias(state, null, 0)).not.toThrow();
+    expect(runtime.quadBatchWriterColorScaleBiasMode ?? CT_MODE_NONE).toBe(CT_MODE_NONE);
   });
 
   it('delegates to the installed fold when color adjustment is enabled', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    recordGlSpriteBatchColorScaleBias(state, ct(0.5), 0);
-    expect(runtime.spriteBatchColorScaleBiasMode).toBe(CT_MODE_UNIFORM);
+    recordGlQuadBatchColorScaleBias(state, ct(0.5), 0);
+    expect(runtime.quadBatchWriterColorScaleBiasMode).toBe(CT_MODE_UNIFORM);
   });
 });
 

package/src/glRasterShapeRenderer.test.ts

@@ -0,0 +1,109 @@
+import type * as FlightNodeModule from '@flighthq/node/contract';
+import { enableRenderRegistryGuards, explainRenderRegistryMisses } from '@flighthq/render/contract';
+import { appendShapeBeginFill, appendShapeEndFill, appendShapeRectangle, createShape } from '@flighthq/shape/contract';
+import type { RenderProxy2D } from '@flighthq/types/contract';
+import { BatchFormat, RenderRegistry } from '@flighthq/types/contract';
+
+import type * as GlRasterShapeModule from './glRasterShapeRenderer';
+import { registerGlShapeRasterizer } from './glShapeRasterizer';
+import { registerGlStandardMaterial } from './glStandardMaterial';
+import { createGlState } from './glTestHelper';
+import { scopeModuleMocks } from './moduleMockTestHelper';
+
+let defaultGlRasterShapeRenderer: typeof GlRasterShapeModule.defaultGlRasterShapeRenderer;
+let drawGlRasterShape: typeof GlRasterShapeModule.drawGlRasterShape;
+
+scopeModuleMocks(['@flighthq/node']);
+
+beforeAll(async () => {
+  vi.doMock('@flighthq/node/contract', async (importOriginal) => ({
+    ...(await importOriginal<typeof FlightNodeModule>()),
+    getNodeLocalBoundsRectangle: () => ({ x: 0, y: 0, width: 64, height: 48 }),
+    getNodeLocalContentRevision: (source: any) => source?.data?.version ?? 0,
+  }));
+  ({ defaultGlRasterShapeRenderer, drawGlRasterShape } = await import('./glRasterShapeRenderer'));
+});
+
+function makeShapeData() {
+  return { surface: null, lastContentId: -1, lastPixelRatio: 0, lastW: 0, lastH: 0, meshVersion: -1, meshes: null };
+}
+
+function makeShapeNode(data: Record<string, unknown>, rendererData: unknown = makeShapeData()): RenderProxy2D {
+  return {
+    source: { data: { commands: [], version: 0, ...data } },
+    rendererData,
+    blendMode: 0,
+    alpha: 1,
+    material: null,
+    materialData: null,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+  } as unknown as RenderProxy2D;
+}
+
+// A plain solid rectangle — precisely the shape the mesh strategy would tessellate.
+function solidShape() {
+  const shape = createShape();
+  appendShapeBeginFill(shape, 0x00cc00);
+  appendShapeRectangle(shape, 8, 8, 32, 24);
+  appendShapeEndFill(shape);
+  return shape;
+}
+
+describe('defaultGlRasterShapeRenderer', () => {
+  it('declares BatchFormat.Quad and the shared shape data lifecycle', () => {
+    expect(defaultGlRasterShapeRenderer.format).toBe(BatchFormat.Quad);
+    expect(typeof defaultGlRasterShapeRenderer.createData).toBe('function');
+    expect(typeof defaultGlRasterShapeRenderer.destroyData).toBe('function');
+    expect(defaultGlRasterShapeRenderer.submit).toBe(drawGlRasterShape);
+  });
+});
+
+describe('drawGlRasterShape', () => {
+  it('rasterizes a fill the mesh path could have tessellated, which is what pinning this strategy means', () => {
+    // The behavioural difference from defaultGlShapeRenderer: no tessellation is attempted first, so a
+    // solid rectangle still goes through the canvas replay.
+    const { state, gl } = createGlState();
+    registerGlStandardMaterial(state);
+    const rasterizer = vi.fn();
+    registerGlShapeRasterizer(state, rasterizer);
+
+    drawGlRasterShape(state, makeShapeNode({ commands: solidShape().data.commands, version: 1 }));
+
+    expect(rasterizer).toHaveBeenCalledTimes(1);
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+
+  it('replays the whole command stream, not the subset a mesh path could not express', () => {
+    // Why a rasterizing state needs the full canvas command vocabulary rather than some gap set.
+    const { state } = createGlState();
+    registerGlStandardMaterial(state);
+    const shape = solidShape();
+    let replayed: readonly unknown[] = [];
+    registerGlShapeRasterizer(state, (_ctx, commands) => {
+      replayed = commands;
+    });
+
+    drawGlRasterShape(state, makeShapeNode({ commands: shape.data.commands, version: 1 }));
+
+    expect(replayed).toEqual(shape.data.commands);
+  });
+
+  it('reports a ShapeRasterizer miss when no rasterizer is registered', () => {
+    const { state } = createGlState();
+    enableRenderRegistryGuards(state);
+    drawGlRasterShape(state, makeShapeNode({ commands: solidShape().data.commands, version: 1 }));
+    expect(explainRenderRegistryMisses(state).misses).toContainEqual({
+      kind: 'Shape',
+      registry: RenderRegistry.ShapeRasterizer,
+    });
+  });
+
+  it('does nothing for an empty command list or absent renderer data', () => {
+    const { state } = createGlState();
+    const rasterizer = vi.fn();
+    registerGlShapeRasterizer(state, rasterizer);
+    drawGlRasterShape(state, makeShapeNode({ commands: [], version: 1 }));
+    drawGlRasterShape(state, makeShapeNode({ commands: solidShape().data.commands, version: 1 }, null));
+    expect(rasterizer).not.toHaveBeenCalled();
+  });
+});

package/src/glScale9Shape.test.ts

@@ -7,7 +7,6 @@ import {
   destroyGlScale9ShapeData,
   drawGlScale9Shape,
   drawGlScale9ShapeMask,
-  remapGlScale9Commands,
 } from './glScale9Shape';
 import { createGlState } from './glTestHelper';
 
@@ -76,15 +75,3 @@ describe('drawGlScale9ShapeMask', () => {
     expect(gl.drawElements).not.toHaveBeenCalled();
   });
 });
-
-describe('remapGlScale9Commands', () => {
-  it('remaps coordinates with a compatible mapper', () => {
-    const out: unknown[] = [];
-    remapGlScale9Commands(out, ['drawRectangle', 4, 10, 20, 50, 30], {
-      mapX: (x: number) => x * 2,
-      mapY: (y: number) => y * 3,
-    });
-
-    expect(out).toEqual(['drawRectangle', 4, 20, 60, 100, 90]);
-  });
-});

package/src/glShape.test.ts

@@ -1,13 +1,27 @@
 import { createImageResource } from '@flighthq/image/contract';
 import type * as FlightNodeModule from '@flighthq/node/contract';
 import { getGlRenderStateRuntime } from '@flighthq/render-gl/contract';
+import {
+  appendShapeBeginFill,
+  appendShapeEndFill,
+  appendShapePath,
+  appendShapeLineStyle,
+  appendShapeLineTo,
+  appendShapeMoveTo,
+  appendShapeRectangle,
+  createShape,
+} from '@flighthq/shape/contract';
 import type { RenderProxy2D } from '@flighthq/types/contract';
-import { BatchFormat } from '@flighthq/types/contract';
+import { BatchFormat, PathCommand } from '@flighthq/types/contract';
 
+import { enableGlStrokePathTessellation } from './enableGlStrokePathTessellation';
+import { flushGlQuadBatchWriter } from './glQuadBatchWriter';
 import type * as GlShapeModule from './glShape';
-import { flushGlSpriteBatch } from './glSpriteBatch';
-import { registerStandardGlMaterial } from './glStandardMaterial';
+import { registerGlShapeRasterizer } from './glShapeRasterizer';
+import { registerGlStandardMaterial } from './glStandardMaterial';
 import { createGlState } from './glTestHelper';
+
+const noopRasterizer = (): void => {};
 import { scopeModuleMocks } from './moduleMockTestHelper';
 
 // @flighthq/node's bounds/revision queries expect a real BoundsNode; these tests drive drawGlShape
@@ -15,6 +29,7 @@ import { scopeModuleMocks } from './moduleMockTestHelper';
 // this file (registry reset before the mock applies, unmock + reset after), so under a shared
 // (isolate:false) worker it never leaks into the many real consumers of these functions (node,
 // interaction, shape, text) — and a sibling that pre-evaluated ./glShape still picks up the stub.
+let defaultGlMorphShapeRenderer: typeof GlShapeModule.defaultGlMorphShapeRenderer;
 let defaultGlShapeRenderer: typeof GlShapeModule.defaultGlShapeRenderer;
 let drawGlShape: typeof GlShapeModule.drawGlShape;
 
@@ -26,15 +41,19 @@ beforeAll(async () => {
     getNodeLocalBoundsRectangle: () => ({ x: 0, y: 0, width: 64, height: 48 }),
     getNodeLocalContentRevision: (source: any) => source?.data?.version ?? 0,
   }));
-  ({ defaultGlShapeRenderer, drawGlShape } = await import('./glShape'));
+  ({ defaultGlMorphShapeRenderer, defaultGlShapeRenderer, drawGlShape } = await import('./glShape'));
 });
 
+// Mirrors createGlShapeData: the rasterization surface is absent until a shape actually needs one.
 function makeShapeData() {
-  const canvas = document.createElement('canvas');
-  canvas.width = 1;
-  canvas.height = 1;
-  const ctx = canvas.getContext('2d')!;
-  return { canvas, ctx, image: createImageResource(canvas), lastContentId: -1, lastW: 0, lastH: 0 };
+  return {
+    surface: null,
+    lastContentId: -1,
+    lastW: 0,
+    lastH: 0,
+    meshVersion: -1,
+    meshes: null,
+  };
 }
 
 function makeShapeNode(data: Record<string, unknown> = {}, rendererData: unknown = null): RenderProxy2D {
@@ -56,6 +75,10 @@ function makeShapeNode(data: Record<string, unknown> = {}, rendererData: unknown
 }
 
 describe('defaultGlShapeRenderer', () => {
+  it('provides the MorphShape renderer alias', () => {
+    expect(defaultGlMorphShapeRenderer).toBe(defaultGlShapeRenderer);
+  });
+
   it('declares BatchFormat.Quad', () => {
     expect(defaultGlShapeRenderer.format).toBe(BatchFormat.Quad);
   });
@@ -70,46 +93,168 @@ describe('defaultGlShapeRenderer', () => {
 });
 
 describe('drawGlShape', () => {
+  it('draws a solid fill and open solid stroke as GPU meshes in one shape', () => {
+    const { state, gl } = createGlState();
+    registerGlShapeRasterizer(state, noopRasterizer);
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0x00cc00);
+    appendShapeLineStyle(shape, 0);
+    appendShapeRectangle(shape, 8, 8, 32, 24);
+    appendShapeEndFill(shape);
+    appendShapeLineStyle(shape, 4, 0xff0000);
+    appendShapeMoveTo(shape, 8, 4);
+    appendShapeLineTo(shape, 40, 4);
+
+    drawGlShape(state, makeShapeNode({ commands: shape.data.commands, version: 1 }, makeShapeData()));
+
+    expect(gl.drawElements).toHaveBeenCalledTimes(2);
+    expect(getGlRenderStateRuntime(state).quadBatchWriterCount).toBe(0);
+  });
+
+  it('draws a closed solid stroke ring as one GPU mesh', () => {
+    const { state, gl } = createGlState();
+    registerGlShapeRasterizer(state, noopRasterizer);
+    enableGlStrokePathTessellation(state);
+    const shape = createShape();
+    appendShapeLineStyle(shape, 8, 0xff0000);
+    appendShapeRectangle(shape, 8, 8, 32, 24);
+
+    drawGlShape(state, makeShapeNode({ commands: shape.data.commands, version: 1 }, makeShapeData()));
+
+    expect(gl.drawElements).toHaveBeenCalledTimes(1);
+    expect(getGlRenderStateRuntime(state).quadBatchWriterCount).toBe(0);
+  });
+
+  it('keeps a closed stroke on the raster lane until stroke-path tessellation is enabled', () => {
+    const { state, gl } = createGlState();
+    registerGlShapeRasterizer(state, noopRasterizer);
+    registerGlStandardMaterial(state);
+    const shape = createShape();
+    appendShapeLineStyle(shape, 8, 0xff0000);
+    appendShapeRectangle(shape, 8, 8, 32, 24);
+
+    drawGlShape(state, makeShapeNode({ commands: shape.data.commands, version: 1 }, makeShapeData()));
+
+    expect(gl.drawElements).not.toHaveBeenCalled();
+    expect(getGlRenderStateRuntime(state).quadBatchWriterCount).toBe(1);
+  });
+
+  it('rasterizes at the state pixel ratio, so the fallback is not soft on a dense display', () => {
+    const { state } = createGlState({ pixelRatio: 3 });
+    registerGlStandardMaterial(state);
+    const rasterized: { width: number; height: number; transform: DOMMatrix }[] = [];
+    registerGlShapeRasterizer(state, (context) => {
+      rasterized.push({
+        width: context.canvas.width,
+        height: context.canvas.height,
+        transform: context.getTransform(),
+      });
+    });
+    const shape = createShape();
+    appendShapeLineStyle(shape, 8, 0xff0000);
+    appendShapeRectangle(shape, 8, 8, 32, 24);
+
+    // The stubbed bounds are 64x48; a shape on the raster lane must back that with 3x the pixels and
+    // pre-scale the replay to match, or the quad samples a 1x raster stretched over a 3x screen area.
+    drawGlShape(state, makeShapeNode({ commands: shape.data.commands, version: 1 }, makeShapeData()));
+
+    expect(rasterized).toHaveLength(1);
+    expect(rasterized[0].width).toBe(192);
+    expect(rasterized[0].height).toBe(144);
+    expect(rasterized[0].transform.a).toBe(3);
+    expect(rasterized[0].transform.d).toBe(3);
+  });
+
+  it('re-rasterizes when only the pixel ratio changes, since the cached raster is the wrong density', () => {
+    const { state } = createGlState({ pixelRatio: 1 });
+    registerGlStandardMaterial(state);
+    let rasterCount = 0;
+    registerGlShapeRasterizer(state, () => void rasterCount++);
+    const shape = createShape();
+    appendShapeLineStyle(shape, 8, 0xff0000);
+    appendShapeRectangle(shape, 8, 8, 32, 24);
+    const proxy = makeShapeNode({ commands: shape.data.commands, version: 1 }, makeShapeData());
+
+    drawGlShape(state, proxy);
+    drawGlShape(state, proxy);
+    expect(rasterCount).toBe(1);
+
+    (state as { pixelRatio: number }).pixelRatio = 2;
+    drawGlShape(state, proxy);
+
+    expect(rasterCount).toBe(2);
+  });
+
+  it('falls back to the raster quad for a self-intersecting stroke centerline', () => {
+    const { state, gl } = createGlState();
+    registerGlShapeRasterizer(state, noopRasterizer);
+    enableGlStrokePathTessellation(state);
+    registerGlStandardMaterial(state);
+    const shape = createShape();
+    appendShapeLineStyle(shape, 8, 0xff0000);
+    appendShapePath(
+      shape,
+      [PathCommand.MOVE_TO, PathCommand.LINE_TO, PathCommand.LINE_TO, PathCommand.LINE_TO, PathCommand.CLOSE],
+      [8, 8, 40, 40, 8, 40, 40, 8],
+      'nonZero',
+    );
+
+    const rendererData = makeShapeData();
+    const proxy = makeShapeNode({ commands: shape.data.commands, version: 1 }, rendererData);
+
+    drawGlShape(state, proxy);
+    drawGlShape(state, proxy);
+
+    expect(gl.drawElements).not.toHaveBeenCalled();
+    expect(getGlRenderStateRuntime(state).quadBatchWriterCount).toBe(2);
+  });
+
   it('returns early without writing to batch when commands array is empty', () => {
     const { state } = createGlState();
-    registerStandardGlMaterial(state);
+    registerGlShapeRasterizer(state, noopRasterizer);
+    registerGlStandardMaterial(state);
     drawGlShape(state, makeShapeNode({ commands: [] }, makeShapeData()));
-    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
+    expect(getGlRenderStateRuntime(state).quadBatchWriterCount).toBe(0);
   });
 
   it('returns early without writing to batch when rendererData is null', () => {
     const { state } = createGlState();
-    registerStandardGlMaterial(state);
+    registerGlShapeRasterizer(state, noopRasterizer);
+    registerGlStandardMaterial(state);
     drawGlShape(state, makeShapeNode({ commands: [{}] }, null));
-    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
+    expect(getGlRenderStateRuntime(state).quadBatchWriterCount).toBe(0);
   });
 
   it('returns early without writing to batch when no material renderer is registered', () => {
     const { state } = createGlState();
+    registerGlShapeRasterizer(state, noopRasterizer);
     drawGlShape(state, makeShapeNode({ commands: [{}] }, makeShapeData()));
-    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
+    expect(getGlRenderStateRuntime(state).quadBatchWriterCount).toBe(0);
   });
 
-  it('writes one instance to the sprite batch when shape has valid commands and bounds', () => {
+  it('writes one instance to the quad-batch writer when shape has valid commands and bounds', () => {
     const { state } = createGlState();
-    registerStandardGlMaterial(state);
+    registerGlShapeRasterizer(state, noopRasterizer);
+    registerGlStandardMaterial(state);
     drawGlShape(state, makeShapeNode({ commands: [{}], version: 1 }, makeShapeData()));
-    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(1);
+    expect(getGlRenderStateRuntime(state).quadBatchWriterCount).toBe(1);
   });
 
   it('draws via drawElementsInstanced after flush', () => {
     const { state, gl } = createGlState();
-    registerStandardGlMaterial(state);
+    registerGlShapeRasterizer(state, noopRasterizer);
+    registerGlStandardMaterial(state);
     drawGlShape(state, makeShapeNode({ commands: [{}], version: 1 }, makeShapeData()));
-    flushGlSpriteBatch(state);
+    flushGlQuadBatchWriter(state);
     expect(gl.drawElementsInstanced).toHaveBeenCalled();
   });
 
   it('writes correct size into instance data', () => {
     const { state } = createGlState();
-    registerStandardGlMaterial(state);
+    registerGlShapeRasterizer(state, noopRasterizer);
+    registerGlStandardMaterial(state);
     drawGlShape(state, makeShapeNode({ commands: [{}], version: 1 }, makeShapeData()));
-    const d = getGlRenderStateRuntime(state).spriteBatchInstanceData;
+    const d = getGlRenderStateRuntime(state).quadBatchWriterInstanceData;
     expect(d[6]).toBe(64); // width from mocked bounds
     expect(d[7]).toBe(48); // height from mocked bounds
   });