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

package/src/glColorAdjustmentMaterialFeature.test.ts

@@ -1,14 +1,14 @@
-import { createImageResource } from '@flighthq/image/contract';
 import { getGlRenderStateRuntime } from '@flighthq/render-gl/contract';
-import type { ColorScaleBias, ImageResource } from '@flighthq/types/contract';
+import { areColorAdjustmentsEnabled } from '@flighthq/render/contract';
+import type { ColorScaleBias } from '@flighthq/types/contract';
 
 import { registerGlColorAdjustmentMaterialFeature } from './glColorAdjustmentMaterialFeature';
-import { flushGlSpriteBatch, prepareGlSpriteBatchWrite, recordGlSpriteBatchColorScaleBias } from './glSpriteBatch';
+import { flushGlQuadBatchWriter, prepareGlQuadBatchWrite, recordGlQuadBatchColorScaleBias } 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 ct(
@@ -45,6 +45,7 @@ describe('registerGlColorAdjustmentMaterialFeature', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
+    expect(areColorAdjustmentsEnabled(state)).toBe(true);
     expect(runtime.glColorAdjustmentMaterialFeature).not.toBeNull();
     expect(runtime.glColorAdjustmentMaterialFeature).toBeDefined();
   });
@@ -62,11 +63,11 @@ describe('registerGlColorAdjustmentMaterialFeature', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    recordGlSpriteBatchColorScaleBias(state, null, 0);
-    recordGlSpriteBatchColorScaleBias(state, null, 1);
-    expect(runtime.spriteBatchColorScaleBiasMode).toBe(CT_MODE_NONE);
-    expect(runtime.spriteBatchColorTintData).toBeUndefined();
-    expect(runtime.spriteBatchColorScaleBiasData).toBeUndefined();
+    recordGlQuadBatchColorScaleBias(state, null, 0);
+    recordGlQuadBatchColorScaleBias(state, null, 1);
+    expect(runtime.quadBatchWriterColorScaleBiasMode).toBe(CT_MODE_NONE);
+    expect(runtime.quadBatchWriterColorTintData).toBeUndefined();
+    expect(runtime.quadBatchWriterColorScaleBiasData).toBeUndefined();
   });
 
   it('uses one whole-batch uniform when every instance shares one tint', () => {
@@ -74,43 +75,43 @@ describe('registerGlColorAdjustmentMaterialFeature', () => {
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
     const tint = ct(0.5);
-    recordGlSpriteBatchColorScaleBias(state, tint, 0);
-    recordGlSpriteBatchColorScaleBias(state, tint, 1);
-    recordGlSpriteBatchColorScaleBias(state, tint, 2);
-    expect(runtime.spriteBatchColorScaleBiasMode).toBe(CT_MODE_UNIFORM);
-    expect(runtime.spriteBatchUniformColorScaleBias).toBe(tint);
+    recordGlQuadBatchColorScaleBias(state, tint, 0);
+    recordGlQuadBatchColorScaleBias(state, tint, 1);
+    recordGlQuadBatchColorScaleBias(state, tint, 2);
+    expect(runtime.quadBatchWriterColorScaleBiasMode).toBe(CT_MODE_UNIFORM);
+    expect(runtime.quadBatchWriterUniformColorScaleBias).toBe(tint);
   });
 
   it('keeps the uniform path for a distinct-but-equal tint', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    recordGlSpriteBatchColorScaleBias(state, ct(0.5), 0);
-    recordGlSpriteBatchColorScaleBias(state, ct(0.5), 1);
-    expect(runtime.spriteBatchColorScaleBiasMode).toBe(CT_MODE_UNIFORM);
+    recordGlQuadBatchColorScaleBias(state, ct(0.5), 0);
+    recordGlQuadBatchColorScaleBias(state, ct(0.5), 1);
+    expect(runtime.quadBatchWriterColorScaleBiasMode).toBe(CT_MODE_UNIFORM);
   });
 
   it('promotes varying multiply-only tints to packed RGBA8 without splitting', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    recordGlSpriteBatchColorScaleBias(state, ct(0.5), 0);
-    recordGlSpriteBatchColorScaleBias(state, ct(0.25), 1);
-    expect(runtime.spriteBatchColorScaleBiasMode).toBe(CT_MODE_PACKED_TINT);
-    expect(Array.from(new Uint8Array(runtime.spriteBatchColorTintData!.buffer, 0, 8))).toEqual([
+    recordGlQuadBatchColorScaleBias(state, ct(0.5), 0);
+    recordGlQuadBatchColorScaleBias(state, ct(0.25), 1);
+    expect(runtime.quadBatchWriterColorScaleBiasMode).toBe(CT_MODE_PACKED_TINT);
+    expect(Array.from(new Uint8Array(runtime.quadBatchWriterColorTintData!.buffer, 0, 8))).toEqual([
       128, 255, 255, 255, 64, 255, 255, 255,
     ]);
-    expect(runtime.spriteBatchColorScaleBiasData).toBeUndefined();
+    expect(runtime.quadBatchWriterColorScaleBiasData).toBeUndefined();
   });
 
   it('promotes with identity fill when a tinted instance follows an untinted one', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    recordGlSpriteBatchColorScaleBias(state, null, 0);
-    recordGlSpriteBatchColorScaleBias(state, ct(0.5), 1);
-    expect(runtime.spriteBatchColorScaleBiasMode).toBe(CT_MODE_PACKED_TINT);
-    expect(Array.from(new Uint8Array(runtime.spriteBatchColorTintData!.buffer, 0, 8))).toEqual([
+    recordGlQuadBatchColorScaleBias(state, null, 0);
+    recordGlQuadBatchColorScaleBias(state, ct(0.5), 1);
+    expect(runtime.quadBatchWriterColorScaleBiasMode).toBe(CT_MODE_PACKED_TINT);
+    expect(Array.from(new Uint8Array(runtime.quadBatchWriterColorTintData!.buffer, 0, 8))).toEqual([
       255, 255, 255, 255, 128, 255, 255, 255,
     ]);
   });
@@ -119,43 +120,45 @@ describe('registerGlColorAdjustmentMaterialFeature', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    recordGlSpriteBatchColorScaleBias(state, ct(0.5), 0);
-    recordGlSpriteBatchColorScaleBias(state, ct(0.25), 1);
-    recordGlSpriteBatchColorScaleBias(state, null, 2);
-    expect(Array.from(new Uint8Array(runtime.spriteBatchColorTintData!.buffer, 8, 4))).toEqual([255, 255, 255, 255]);
+    recordGlQuadBatchColorScaleBias(state, ct(0.5), 0);
+    recordGlQuadBatchColorScaleBias(state, ct(0.25), 1);
+    recordGlQuadBatchColorScaleBias(state, null, 2);
+    expect(Array.from(new Uint8Array(runtime.quadBatchWriterColorTintData!.buffer, 8, 4))).toEqual([
+      255, 255, 255, 255,
+    ]);
   });
 
   it('stores normalized-linear color biases without conversion', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    recordGlSpriteBatchColorScaleBias(state, ct(1, 1, 1, 1, 1, 0, 0, 0), 0);
-    recordGlSpriteBatchColorScaleBias(state, ct(0.5), 1);
-    expect(runtime.spriteBatchColorScaleBiasData![4]).toBe(1);
-    expect(runtime.spriteBatchColorScaleBiasMode).toBe(CT_MODE_PER_INSTANCE);
+    recordGlQuadBatchColorScaleBias(state, ct(1, 1, 1, 1, 1, 0, 0, 0), 0);
+    recordGlQuadBatchColorScaleBias(state, ct(0.5), 1);
+    expect(runtime.quadBatchWriterColorScaleBiasData![4]).toBe(1);
+    expect(runtime.quadBatchWriterColorScaleBiasMode).toBe(CT_MODE_PER_INSTANCE);
   });
 
   it('widens to a full matrix stream only when channel mixing appears', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    recordGlSpriteBatchColorScaleBias(state, { tint: 0x808080ff }, 0);
-    recordGlSpriteBatchColorScaleBias(state, MIX_RED_GREEN, 1);
-    expect(runtime.spriteBatchColorScaleBiasMode).toBe(CT_MODE_MATRIX);
-    expect(runtime.spriteBatchColorMatrixData![0]).toBeCloseTo(128 / 255);
-    expect(runtime.spriteBatchColorMatrixData![20]).toBe(1);
-    expect(runtime.spriteBatchColorMatrixData![21]).toBe(0.5);
-    expect(runtime.spriteBatchColorMatrixData![36]).toBe(0.25);
+    recordGlQuadBatchColorScaleBias(state, { tint: 0x808080ff }, 0);
+    recordGlQuadBatchColorScaleBias(state, MIX_RED_GREEN, 1);
+    expect(runtime.quadBatchWriterColorScaleBiasMode).toBe(CT_MODE_MATRIX);
+    expect(runtime.quadBatchWriterColorMatrixData![0]).toBeCloseTo(128 / 255);
+    expect(runtime.quadBatchWriterColorMatrixData![20]).toBe(1);
+    expect(runtime.quadBatchWriterColorMatrixData![21]).toBe(0.5);
+    expect(runtime.quadBatchWriterColorMatrixData![36]).toBe(0.25);
   });
 
   it('records compact per-item tint data directly as four bytes', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    recordGlSpriteBatchColorScaleBias(state, null, 0);
-    recordGlSpriteBatchColorScaleBias(state, { tint: 0x12345678 }, 1);
-    expect(runtime.spriteBatchColorScaleBiasMode).toBe(CT_MODE_PACKED_TINT);
-    expect(Array.from(new Uint8Array(runtime.spriteBatchColorTintData!.buffer, 4, 4))).toEqual([
+    recordGlQuadBatchColorScaleBias(state, null, 0);
+    recordGlQuadBatchColorScaleBias(state, { tint: 0x12345678 }, 1);
+    expect(runtime.quadBatchWriterColorScaleBiasMode).toBe(CT_MODE_PACKED_TINT);
+    expect(Array.from(new Uint8Array(runtime.quadBatchWriterColorTintData!.buffer, 4, 4))).toEqual([
       0x12, 0x34, 0x56, 0x78,
     ]);
   });
@@ -164,10 +167,10 @@ describe('registerGlColorAdjustmentMaterialFeature', () => {
     const { state, gl } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    prepareGlSpriteBatchWrite(state, makeTexture(), null, null, standardGlMaterialRenderer, 1);
-    recordGlSpriteBatchColorScaleBias(state, ct(0.5), 0);
-    runtime.spriteBatchCount = 1;
-    flushGlSpriteBatch(state);
+    prepareGlQuadBatchWrite(state, makeTexture(), false, null, null, null, standardGlMaterialRenderer, 1);
+    recordGlQuadBatchColorScaleBias(state, ct(0.5), 0);
+    runtime.quadBatchWriterCount = 1;
+    flushGlQuadBatchWriter(state);
     expect(gl.uniform4f).toHaveBeenCalled();
     expect(gl.drawElementsInstanced).toHaveBeenCalled();
   });
@@ -176,12 +179,12 @@ describe('registerGlColorAdjustmentMaterialFeature', () => {
     const { state, gl } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    prepareGlSpriteBatchWrite(state, makeTexture(), null, null, standardGlMaterialRenderer, 2);
-    recordGlSpriteBatchColorScaleBias(state, ct(0.5), 0);
-    recordGlSpriteBatchColorScaleBias(state, ct(0.25), 1);
-    runtime.spriteBatchCount = 2;
-    flushGlSpriteBatch(state);
-    expect(runtime.spriteBatchColorScaleBiasBuffer).not.toBeNull();
+    prepareGlQuadBatchWrite(state, makeTexture(), false, null, null, null, standardGlMaterialRenderer, 2);
+    recordGlQuadBatchColorScaleBias(state, ct(0.5), 0);
+    recordGlQuadBatchColorScaleBias(state, ct(0.25), 1);
+    runtime.quadBatchWriterCount = 2;
+    flushGlQuadBatchWriter(state);
+    expect(runtime.quadBatchWriterColorScaleBiasBuffer).not.toBeNull();
     expect(gl.vertexAttribPointer).toHaveBeenCalledWith(7, 4, gl.UNSIGNED_BYTE, true, 4, 0);
     expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 2);
   });
@@ -190,11 +193,11 @@ describe('registerGlColorAdjustmentMaterialFeature', () => {
     const { state, gl } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    prepareGlSpriteBatchWrite(state, makeTexture(), null, null, standardGlMaterialRenderer, 2);
-    recordGlSpriteBatchColorScaleBias(state, null, 0);
-    recordGlSpriteBatchColorScaleBias(state, MIX_RED_GREEN, 1);
-    runtime.spriteBatchCount = 2;
-    flushGlSpriteBatch(state);
+    prepareGlQuadBatchWrite(state, makeTexture(), false, null, null, null, standardGlMaterialRenderer, 2);
+    recordGlQuadBatchColorScaleBias(state, null, 0);
+    recordGlQuadBatchColorScaleBias(state, MIX_RED_GREEN, 1);
+    runtime.quadBatchWriterCount = 2;
+    flushGlQuadBatchWriter(state);
     expect(gl.vertexAttribPointer).toHaveBeenCalledWith(7, 4, gl.FLOAT, false, 80, 0);
     expect(gl.vertexAttribPointer).toHaveBeenCalledWith(11, 4, gl.FLOAT, false, 80, 64);
   });
@@ -203,22 +206,22 @@ describe('registerGlColorAdjustmentMaterialFeature', () => {
     const { state } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    prepareGlSpriteBatchWrite(state, makeTexture(), null, null, standardGlMaterialRenderer, 1);
-    recordGlSpriteBatchColorScaleBias(state, MIX_RED_GREEN, 0);
-    runtime.spriteBatchCount = 1;
-    flushGlSpriteBatch(state);
-    expect(runtime.spriteBatchColorScaleBiasMode).toBe(CT_MODE_NONE);
+    prepareGlQuadBatchWrite(state, makeTexture(), false, null, null, null, standardGlMaterialRenderer, 1);
+    recordGlQuadBatchColorScaleBias(state, MIX_RED_GREEN, 0);
+    runtime.quadBatchWriterCount = 1;
+    flushGlQuadBatchWriter(state);
+    expect(runtime.quadBatchWriterColorScaleBiasMode).toBe(CT_MODE_NONE);
   });
 
   it('leaves the lean base shader untouched for an untinted batch on flush', () => {
     const { state, gl } = createGlState();
     const runtime = getGlRenderStateRuntime(state);
     registerGlColorAdjustmentMaterialFeature(state);
-    prepareGlSpriteBatchWrite(state, makeTexture(), null, null, standardGlMaterialRenderer, 1);
-    recordGlSpriteBatchColorScaleBias(state, null, 0);
-    runtime.spriteBatchCount = 1;
-    flushGlSpriteBatch(state);
-    expect(runtime.spriteBatchColorScaleBiasBuffer ?? null).toBeNull();
+    prepareGlQuadBatchWrite(state, makeTexture(), false, null, null, null, standardGlMaterialRenderer, 1);
+    recordGlQuadBatchColorScaleBias(state, null, 0);
+    runtime.quadBatchWriterCount = 1;
+    flushGlQuadBatchWriter(state);
+    expect(runtime.quadBatchWriterColorScaleBiasBuffer ?? null).toBeNull();
     expect(gl.drawElementsInstanced).toHaveBeenCalled();
   });
 });

package/src/glMeshShapeRenderer.test.ts

@@ -0,0 +1,112 @@
+import type * as FlightNodeModule from '@flighthq/node/contract';
+import { enableRenderRegistryGuards, explainRenderRegistryMisses } from '@flighthq/render/contract';
+import {
+  appendShapeBeginFill,
+  appendShapeBeginGradientFill,
+  appendShapeEndFill,
+  appendShapeRectangle,
+  createShape,
+} from '@flighthq/shape/contract';
+import type { RenderProxy2D } from '@flighthq/types/contract';
+import { BatchFormat, RenderRegistry } from '@flighthq/types/contract';
+
+import type * as GlMeshShapeModule from './glMeshShapeRenderer';
+import { registerGlShapeRasterizer } from './glShapeRasterizer';
+import { createGlState } from './glTestHelper';
+import { scopeModuleMocks } from './moduleMockTestHelper';
+
+let defaultGlMeshShapeRenderer: typeof GlMeshShapeModule.defaultGlMeshShapeRenderer;
+let drawGlMeshShape: typeof GlMeshShapeModule.drawGlMeshShape;
+
+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,
+  }));
+  ({ defaultGlMeshShapeRenderer, drawGlMeshShape } = await import('./glMeshShapeRenderer'));
+});
+
+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;
+}
+
+function solidShape() {
+  const shape = createShape();
+  appendShapeBeginFill(shape, 0x00cc00);
+  appendShapeRectangle(shape, 8, 8, 32, 24);
+  appendShapeEndFill(shape);
+  return shape;
+}
+
+function gradientShape() {
+  const shape = createShape();
+  appendShapeBeginGradientFill(shape, 'linear', [0xff0000, 0x0000ff], [1, 1], [0, 255], null);
+  appendShapeRectangle(shape, 8, 8, 32, 24);
+  appendShapeEndFill(shape);
+  return shape;
+}
+
+describe('defaultGlMeshShapeRenderer', () => {
+  it('declares BatchFormat.Quad and the shared shape data lifecycle', () => {
+    expect(defaultGlMeshShapeRenderer.format).toBe(BatchFormat.Quad);
+    expect(typeof defaultGlMeshShapeRenderer.createData).toBe('function');
+    expect(typeof defaultGlMeshShapeRenderer.destroyData).toBe('function');
+  });
+
+  it('never rasterizes, even with a rasterizer registered and a fill that cannot tessellate', () => {
+    // The whole point of pinning this strategy: a registered rasterizer is not consulted, so an app can
+    // choose the GPU path and know the canvas replay is dead weight it did not ship.
+    const { state } = createGlState();
+    const rasterizer = vi.fn();
+    registerGlShapeRasterizer(state, rasterizer);
+    defaultGlMeshShapeRenderer.submit!(state, makeShapeNode({ commands: gradientShape().data.commands, version: 1 }));
+    expect(rasterizer).not.toHaveBeenCalled();
+  });
+
+  it('reports a ShapeRasterizer miss rather than silently dropping an untessellatable fill', () => {
+    const { state } = createGlState();
+    enableRenderRegistryGuards(state);
+    defaultGlMeshShapeRenderer.submit!(state, makeShapeNode({ commands: gradientShape().data.commands, version: 1 }));
+    expect(explainRenderRegistryMisses(state).misses).toContainEqual({
+      kind: 'Shape',
+      registry: RenderRegistry.ShapeRasterizer,
+    });
+  });
+});
+
+describe('drawGlMeshShape', () => {
+  it('draws a solid fill as a GPU mesh and reports that it drew', () => {
+    const { state, gl } = createGlState();
+    const drew = drawGlMeshShape(state, makeShapeNode({ commands: solidShape().data.commands, version: 1 }));
+    expect(drew).toBe(true);
+    expect(gl.drawElements).toHaveBeenCalled();
+  });
+
+  it('reports false for a fill with no tessellated form, which is the hybrid fall-through signal', () => {
+    const { state } = createGlState();
+    expect(drawGlMeshShape(state, makeShapeNode({ commands: gradientShape().data.commands, version: 1 }))).toBe(false);
+  });
+
+  it('reports false for an empty command list and for absent renderer data', () => {
+    const { state } = createGlState();
+    expect(drawGlMeshShape(state, makeShapeNode({ commands: [], version: 1 }))).toBe(false);
+    expect(drawGlMeshShape(state, makeShapeNode({ commands: solidShape().data.commands, version: 1 }, null))).toBe(
+      false,
+    );
+  });
+});

package/src/glParticleEmitter2D.test.ts

@@ -1,17 +1,33 @@
-import { getGlRenderStateRuntime } from '@flighthq/render-gl/contract';
-import type { RenderProxy2D } from '@flighthq/types/contract';
+import { createImageResource } from '@flighthq/image/contract';
+import {
+  getGlRenderStateRuntime,
+  registerGlCompressedImageTextureResolver,
+  registerGlImageTextureResolver,
+} from '@flighthq/render-gl/contract';
+import { createTexture } from '@flighthq/texture/contract';
+import type { CompressedImage, RenderProxy2D } from '@flighthq/types/contract';
+import { CompressedImageTextureSourceKind } from '@flighthq/types/contract';
 
 import { defaultGlParticleEmitter2DRenderer, drawGlParticleEmitter2D } from './glParticleEmitter2D';
 import { createGlState } from './glTestHelper';
 
 function makeAtlas() {
   const img = document.createElement('img');
+  const image = createImageResource(img);
+  image.width = 64;
+  image.height = 64;
   return {
-    image: { source: img, width: 64, height: 64 },
     regions: [{ id: 0, x: 0, y: 0, width: 32, height: 32 }],
+    texture: createTexture({ dimension: '2d', source: image }),
   };
 }
 
+function createAtlasGlState() {
+  const result = createGlState();
+  registerGlImageTextureResolver(result.state);
+  return result;
+}
+
 function makeParticleEmitter2DNode(data: Record<string, unknown> = {}): RenderProxy2D {
   return {
     source: {
@@ -43,34 +59,31 @@ describe('defaultGlParticleEmitter2DRenderer', () => {
 
 describe('drawGlParticleEmitter2D', () => {
   it('returns early without drawing when atlas is null', () => {
-    const { state, gl } = createGlState();
+    const { state, gl } = createAtlasGlState();
     drawGlParticleEmitter2D(state, makeParticleEmitter2DNode({ atlas: null }));
     expect(gl.drawElements).not.toHaveBeenCalled();
   });
 
-  it('returns early without drawing when atlas.image is null', () => {
-    const { state, gl } = createGlState();
-    drawGlParticleEmitter2D(state, makeParticleEmitter2DNode({ atlas: { image: null, regions: [] } }));
+  it('returns early without drawing when atlas.texture is null', () => {
+    const { state, gl } = createAtlasGlState();
+    drawGlParticleEmitter2D(state, makeParticleEmitter2DNode({ atlas: { regions: [], texture: null } }));
     expect(gl.drawElements).not.toHaveBeenCalled();
   });
 
-  it('returns early without drawing when atlas.image.source is null', () => {
-    const { state, gl } = createGlState();
-    drawGlParticleEmitter2D(
-      state,
-      makeParticleEmitter2DNode({ atlas: { image: { source: null, data: null, compressed: null }, regions: [] } }),
-    );
+  it('returns early without drawing when atlas Texture is unbound', () => {
+    const { state, gl } = createAtlasGlState();
+    drawGlParticleEmitter2D(state, makeParticleEmitter2DNode({ atlas: { regions: [], texture: createTexture() } }));
     expect(gl.drawElements).not.toHaveBeenCalled();
   });
 
   it('returns early without drawing when particleCount is 0', () => {
-    const { state, gl } = createGlState();
+    const { state, gl } = createAtlasGlState();
     drawGlParticleEmitter2D(state, makeParticleEmitter2DNode({ particleCount: 0 }));
     expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
   });
 
   it('draws all live particles in a single instanced draw call', () => {
-    const { state, gl } = createGlState();
+    const { state, gl } = createAtlasGlState();
     drawGlParticleEmitter2D(
       state,
       makeParticleEmitter2DNode({
@@ -86,7 +99,7 @@ describe('drawGlParticleEmitter2D', () => {
   });
 
   it('skips out-of-range region ids and draws only valid particles', () => {
-    const { state, gl } = createGlState();
+    const { state, gl } = createAtlasGlState();
     drawGlParticleEmitter2D(
       state,
       makeParticleEmitter2DNode({
@@ -101,21 +114,24 @@ describe('drawGlParticleEmitter2D', () => {
   });
 
   it('uploads the straight-alpha flag for a compressed particle atlas', () => {
-    const { state, gl } = createGlState();
+    const { state, gl } = createAtlasGlState();
+    registerGlCompressedImageTextureResolver(state);
+    getGlRenderStateRuntime(state).compressedTextureUpload = () => true;
     const image = {
-      alphaType: 'straight',
       compressed: { container: {}, payload: new Uint8Array() },
-      data: null,
       height: 4,
-      source: null,
+      kind: CompressedImageTextureSourceKind,
       version: 1,
       width: 4,
-    };
+    } as unknown as CompressedImage;
 
     drawGlParticleEmitter2D(
       state,
       makeParticleEmitter2DNode({
-        atlas: { image, regions: [{ id: 0, x: 0, y: 0, width: 4, height: 4 }] },
+        atlas: {
+          regions: [{ id: 0, x: 0, y: 0, width: 4, height: 4 }],
+          texture: createTexture({ dimension: '2d', source: image }),
+        },
       }),
     );
 

package/src/glQuadBatch.test.ts

@@ -1,18 +1,27 @@
 import type { RenderProxy2D } from '@flighthq/types/contract';
 
 import { defaultGlQuadBatchRenderer } from './glQuadBatch';
-import { flushGlSpriteBatch } from './glSpriteBatch';
-import { registerStandardGlMaterial } from './glStandardMaterial';
+import { flushGlQuadBatchWriter } from './glQuadBatchWriter';
+import { registerGlStandardMaterial } from './glStandardMaterial';
 import { createGlState } from './glTestHelper';
 
 function makeAtlas() {
   const img = document.createElement('img');
+  const image = createImageResource(img);
+  image.width = 64;
+  image.height = 64;
   return {
-    image: { source: img, width: 64, height: 64 },
     regions: [{ x: 0, y: 0, width: 32, height: 32 }],
+    texture: createTexture({ dimension: '2d', source: image }),
   };
 }
 
+function createAtlasGlState() {
+  const result = createGlState();
+  registerGlImageTextureResolver(result.state);
+  return result;
+}
+
 function makeQuadBatchNode(data: Record<string, unknown> = {}): RenderProxy2D {
   return {
     source: {
@@ -47,40 +56,40 @@ describe('defaultGlQuadBatchRenderer', () => {
 
 describe('defaultGlQuadBatchRenderer.submit', () => {
   it('returns early without drawing when atlas is null', () => {
-    const { state, gl } = createGlState();
-    registerStandardGlMaterial(state);
+    const { state, gl } = createAtlasGlState();
+    registerGlStandardMaterial(state);
     defaultGlQuadBatchRenderer.submit(state, makeQuadBatchNode({ atlas: null }));
-    flushGlSpriteBatch(state as any);
+    flushGlQuadBatchWriter(state as any);
     expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
   });
 
-  it('returns early without drawing when atlas.image is null', () => {
-    const { state, gl } = createGlState();
-    registerStandardGlMaterial(state);
-    defaultGlQuadBatchRenderer.submit(state, makeQuadBatchNode({ atlas: { image: null, regions: [] } }));
-    flushGlSpriteBatch(state as any);
+  it('returns early without drawing when atlas.texture is null', () => {
+    const { state, gl } = createAtlasGlState();
+    registerGlStandardMaterial(state);
+    defaultGlQuadBatchRenderer.submit(state, makeQuadBatchNode({ atlas: { regions: [], texture: null } }));
+    flushGlQuadBatchWriter(state as any);
     expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
   });
 
-  it('returns early without drawing when atlas.image.source is null', () => {
-    const { state, gl } = createGlState();
-    registerStandardGlMaterial(state);
-    defaultGlQuadBatchRenderer.submit(state, makeQuadBatchNode({ atlas: { image: { source: null }, regions: [] } }));
-    flushGlSpriteBatch(state as any);
+  it('returns early without drawing when atlas Texture is unbound', () => {
+    const { state, gl } = createAtlasGlState();
+    registerGlStandardMaterial(state);
+    defaultGlQuadBatchRenderer.submit(state, makeQuadBatchNode({ atlas: { regions: [], texture: createTexture() } }));
+    flushGlQuadBatchWriter(state as any);
     expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
   });
 
   it('returns early without drawing when instanceCount is 0', () => {
-    const { state, gl } = createGlState();
-    registerStandardGlMaterial(state);
+    const { state, gl } = createAtlasGlState();
+    registerGlStandardMaterial(state);
     defaultGlQuadBatchRenderer.submit(state, makeQuadBatchNode({ instanceCount: 0 }));
-    flushGlSpriteBatch(state as any);
+    flushGlQuadBatchWriter(state as any);
     expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
   });
 
   it('draws all valid instances in a single instanced call with vector2 transform type', () => {
-    const { state, gl } = createGlState();
-    registerStandardGlMaterial(state);
+    const { state, gl } = createAtlasGlState();
+    registerGlStandardMaterial(state);
     defaultGlQuadBatchRenderer.submit(
       state,
       makeQuadBatchNode({
@@ -90,14 +99,14 @@ describe('defaultGlQuadBatchRenderer.submit', () => {
         transformType: 'vector2',
       }),
     );
-    flushGlSpriteBatch(state as any);
+    flushGlQuadBatchWriter(state as any);
     expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
     expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 2);
   });
 
   it('excludes out-of-range ids from the instanced draw count', () => {
-    const { state, gl } = createGlState();
-    registerStandardGlMaterial(state);
+    const { state, gl } = createAtlasGlState();
+    registerGlStandardMaterial(state);
     defaultGlQuadBatchRenderer.submit(
       state,
       makeQuadBatchNode({
@@ -107,14 +116,14 @@ describe('defaultGlQuadBatchRenderer.submit', () => {
         transformType: 'vector2',
       }),
     );
-    flushGlSpriteBatch(state as any);
+    flushGlQuadBatchWriter(state as any);
     expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
     expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 2);
   });
 
   it('draws all valid instances in a single instanced call with full matrix transform type', () => {
-    const { state, gl } = createGlState();
-    registerStandardGlMaterial(state);
+    const { state, gl } = createAtlasGlState();
+    registerGlStandardMaterial(state);
     const transforms = new Float32Array([1, 0, 0, 1, 0, 0]);
     defaultGlQuadBatchRenderer.submit(
       state,
@@ -125,8 +134,11 @@ describe('defaultGlQuadBatchRenderer.submit', () => {
         transformType: 'matrix',
       }),
     );
-    flushGlSpriteBatch(state as any);
+    flushGlQuadBatchWriter(state as any);
     expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
     expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 1);
   });
 });
+import { createImageResource } from '@flighthq/image/contract';
+import { registerGlImageTextureResolver } from '@flighthq/render-gl/contract';
+import { createTexture } from '@flighthq/texture/contract';