@flighthq/scene2d-gl 0.2.1-next.840.857425c

package/src/glClipContours.test.ts

@@ -0,0 +1,61 @@
+import { createMatrix } from '@flighthq/geometry';
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+
+import { popGlClipContours, pushGlClipContours } from './glClipContours';
+import { createGlState } from './glTestHelper';
+
+const SQUARE = [[0, 0, 50, 0, 50, 50, 0, 50]];
+
+describe('popGlClipContours', () => {
+  it('decrements the stencil depth and disables the stencil test at depth 0', () => {
+    const { state, gl } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    pushGlClipContours(state, SQUARE, 'nonZero', createMatrix());
+    expect(runtime.currentMaskDepth).toBe(1);
+
+    popGlClipContours(state);
+
+    expect(runtime.currentMaskDepth).toBe(0);
+    expect(gl.disable).toHaveBeenCalledWith(gl.STENCIL_TEST);
+  });
+});
+
+describe('pushGlClipContours', () => {
+  it('enables the stencil test and clears the buffer when opening the first clip', () => {
+    const { state, gl } = createGlState();
+
+    pushGlClipContours(state, SQUARE, 'nonZero', createMatrix());
+
+    expect(gl.enable).toHaveBeenCalledWith(gl.STENCIL_TEST);
+    expect(gl.clear).toHaveBeenCalledWith(gl.STENCIL_BUFFER_BIT);
+    expect(getGlRenderStateRuntime(state).currentMaskDepth).toBe(1);
+  });
+
+  it('syncs state.currentProgram to the clip program so content draws re-bind their own program', () => {
+    const { state } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    expect(runtime.currentProgram).toBeNull();
+
+    pushGlClipContours(state, SQUARE, 'nonZero', createMatrix());
+
+    // The clip binds its own position-only program; recording it forces the next content draw to detect
+    // the change and re-bind, instead of setting its uniforms against the clip program.
+    expect(runtime.currentProgram).not.toBeNull();
+  });
+
+  it('re-enables color writes after stencilling so gated content is drawn', () => {
+    const { state, gl } = createGlState();
+
+    pushGlClipContours(state, SQUARE, 'nonZero', createMatrix());
+
+    expect(gl.colorMask).toHaveBeenLastCalledWith(true, true, true, true);
+  });
+
+  it('uses the even-odd stencil op for an evenOdd winding', () => {
+    const { state, gl } = createGlState();
+
+    pushGlClipContours(state, SQUARE, 'evenOdd', createMatrix());
+
+    expect(gl.stencilOp).toHaveBeenCalledWith(gl.KEEP, gl.KEEP, gl.INVERT);
+  });
+});

package/src/glClipRectangle.test.ts

@@ -0,0 +1,47 @@
+import { createMatrix, createRectangle } from '@flighthq/geometry';
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+
+import { popGlClipRectangle, pushGlClipRectangle } from './glClipRectangle';
+import { createGlState } from './glTestHelper';
+
+describe('popGlClipRectangle', () => {
+  it('restores the previous scissor rectangle', () => {
+    const { state, gl } = createGlState();
+    pushGlClipRectangle(state, createRectangle(0, 0, 100, 50), createMatrix());
+    pushGlClipRectangle(state, createRectangle(10, 10, 10, 10), createMatrix());
+
+    popGlClipRectangle(state);
+
+    expect(gl.scissor).toHaveBeenLastCalledWith(0, 50, 100, 50);
+  });
+
+  it('disables scissor testing when the stack becomes empty', () => {
+    const { state, gl } = createGlState();
+    pushGlClipRectangle(state, createRectangle(0, 0, 100, 50), createMatrix());
+
+    popGlClipRectangle(state);
+
+    expect(gl.disable).toHaveBeenLastCalledWith(gl.SCISSOR_TEST);
+    expect(getGlRenderStateRuntime(state).currentScissorRect).toBeNull();
+  });
+});
+
+describe('pushGlClipRectangle', () => {
+  it('enables scissor testing with a transformed rectangle', () => {
+    const { state, gl } = createGlState();
+
+    pushGlClipRectangle(state, createRectangle(10, 20, 30, 40), createMatrix(1, 0, 0, 1, 5, 6));
+
+    expect(gl.enable).toHaveBeenLastCalledWith(gl.SCISSOR_TEST);
+    expect(gl.scissor).toHaveBeenLastCalledWith(15, 34, 30, 40);
+  });
+
+  it('intersects nested scissor rectangles', () => {
+    const { state, gl } = createGlState();
+
+    pushGlClipRectangle(state, createRectangle(0, 0, 100, 100), createMatrix());
+    pushGlClipRectangle(state, createRectangle(50, 25, 100, 50), createMatrix());
+
+    expect(gl.scissor).toHaveBeenLastCalledWith(50, 25, 50, 50);
+  });
+});

package/src/glColorAdjustment.test.ts

@@ -0,0 +1,166 @@
+import { createImageResource } from '@flighthq/image';
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+import type { ColorTransform, ImageResource } from '@flighthq/types';
+
+import { enableGlColorAdjustment } from './glColorAdjustment';
+import { defaultGlMaterialRenderer } from './glDefaultMaterial';
+import { flushGlSpriteBatch, prepareGlSpriteBatchWrite, recordGlSpriteBatchColorTransform } from './glSpriteBatch';
+import { createGlState } from './glTestHelper';
+
+function makeTexture(): ImageResource {
+  return createImageResource(document.createElement('img'));
+}
+
+function ct(
+  redMultiplier = 1,
+  greenMultiplier = 1,
+  blueMultiplier = 1,
+  alphaMultiplier = 1,
+  redOffset = 0,
+  greenOffset = 0,
+  blueOffset = 0,
+  alphaOffset = 0,
+): ColorTransform {
+  return {
+    redMultiplier,
+    greenMultiplier,
+    blueMultiplier,
+    alphaMultiplier,
+    redOffset,
+    greenOffset,
+    blueOffset,
+    alphaOffset,
+  } as ColorTransform;
+}
+
+const CT_MODE_NONE = 0;
+const CT_MODE_UNIFORM = 1;
+const CT_MODE_PER_INSTANCE = 2;
+
+describe('enableGlColorAdjustment', () => {
+  it('installs the fold so recorded tints drive the color-adjustment state machine', () => {
+    const { state } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    enableGlColorAdjustment(state);
+    expect(runtime.glColorAdjustmentFold).not.toBeNull();
+    expect(runtime.glColorAdjustmentFold).toBeDefined();
+  });
+
+  it('is idempotent', () => {
+    const { state } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    enableGlColorAdjustment(state);
+    const fold = runtime.glColorAdjustmentFold;
+    enableGlColorAdjustment(state);
+    expect(runtime.glColorAdjustmentFold).toBe(fold);
+  });
+
+  it('stays untinted (mode NONE) when no instance carries a color transform', () => {
+    const { state } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    enableGlColorAdjustment(state);
+    recordGlSpriteBatchColorTransform(state, null, 0);
+    recordGlSpriteBatchColorTransform(state, null, 1);
+    expect(runtime.spriteBatchColorTransformMode).toBe(CT_MODE_NONE);
+  });
+
+  it('uses one whole-batch uniform when every instance shares one tint', () => {
+    const { state } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    enableGlColorAdjustment(state);
+    const tint = ct(0.5);
+    recordGlSpriteBatchColorTransform(state, tint, 0);
+    recordGlSpriteBatchColorTransform(state, tint, 1);
+    recordGlSpriteBatchColorTransform(state, tint, 2);
+    expect(runtime.spriteBatchColorTransformMode).toBe(CT_MODE_UNIFORM);
+    expect(runtime.spriteBatchUniformColorTransform).toBe(tint);
+  });
+
+  it('keeps the uniform path for a distinct-but-equal tint', () => {
+    const { state } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    enableGlColorAdjustment(state);
+    recordGlSpriteBatchColorTransform(state, ct(0.5), 0);
+    recordGlSpriteBatchColorTransform(state, ct(0.5), 1);
+    expect(runtime.spriteBatchColorTransformMode).toBe(CT_MODE_UNIFORM);
+  });
+
+  it('promotes to per-instance (never splits) when tints diverge, back-filling the earlier tint', () => {
+    const { state } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    enableGlColorAdjustment(state);
+    recordGlSpriteBatchColorTransform(state, ct(0.5), 0);
+    recordGlSpriteBatchColorTransform(state, ct(0.25), 1);
+    expect(runtime.spriteBatchColorTransformMode).toBe(CT_MODE_PER_INSTANCE);
+    expect(runtime.spriteBatchColorTransformData![0]).toBe(0.5);
+    expect(runtime.spriteBatchColorTransformData![8]).toBe(0.25);
+  });
+
+  it('promotes with identity fill when a tinted instance follows an untinted one', () => {
+    const { state } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    enableGlColorAdjustment(state);
+    recordGlSpriteBatchColorTransform(state, null, 0);
+    recordGlSpriteBatchColorTransform(state, ct(0.5), 1);
+    expect(runtime.spriteBatchColorTransformMode).toBe(CT_MODE_PER_INSTANCE);
+    expect(runtime.spriteBatchColorTransformData![0]).toBe(1);
+    expect(runtime.spriteBatchColorTransformData![8]).toBe(0.5);
+  });
+
+  it('writes identity for an untinted instance once the batch is per-instance', () => {
+    const { state } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    enableGlColorAdjustment(state);
+    recordGlSpriteBatchColorTransform(state, ct(0.5), 0);
+    recordGlSpriteBatchColorTransform(state, ct(0.25), 1);
+    recordGlSpriteBatchColorTransform(state, null, 2);
+    expect(runtime.spriteBatchColorTransformData![16]).toBe(1);
+    expect(runtime.spriteBatchColorTransformData![20]).toBe(0);
+  });
+
+  it('normalizes color offsets by 255', () => {
+    const { state } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    enableGlColorAdjustment(state);
+    recordGlSpriteBatchColorTransform(state, ct(1, 1, 1, 1, 255, 0, 0, 0), 0);
+    recordGlSpriteBatchColorTransform(state, ct(0.5), 1);
+    expect(runtime.spriteBatchColorTransformData![4]).toBe(1);
+  });
+
+  it('drives the uniform color-transform shader on flush', () => {
+    const { state, gl } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    enableGlColorAdjustment(state);
+    prepareGlSpriteBatchWrite(state, makeTexture(), null, null, defaultGlMaterialRenderer, 1);
+    recordGlSpriteBatchColorTransform(state, ct(0.5), 0);
+    runtime.spriteBatchCount = 1;
+    flushGlSpriteBatch(state);
+    expect(gl.uniform4f).toHaveBeenCalled();
+    expect(gl.drawElementsInstanced).toHaveBeenCalled();
+  });
+
+  it('uploads a per-instance color-transform buffer on flush when tints vary', () => {
+    const { state, gl } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    enableGlColorAdjustment(state);
+    prepareGlSpriteBatchWrite(state, makeTexture(), null, null, defaultGlMaterialRenderer, 2);
+    recordGlSpriteBatchColorTransform(state, ct(0.5), 0);
+    recordGlSpriteBatchColorTransform(state, ct(0.25), 1);
+    runtime.spriteBatchCount = 2;
+    flushGlSpriteBatch(state);
+    expect(runtime.spriteBatchColorTransformBuffer).not.toBeNull();
+    expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 2);
+  });
+
+  it('leaves the lean base shader untouched for an untinted batch on flush', () => {
+    const { state, gl } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    enableGlColorAdjustment(state);
+    prepareGlSpriteBatchWrite(state, makeTexture(), null, null, defaultGlMaterialRenderer, 1);
+    recordGlSpriteBatchColorTransform(state, null, 0);
+    runtime.spriteBatchCount = 1;
+    flushGlSpriteBatch(state);
+    expect(runtime.spriteBatchColorTransformBuffer ?? null).toBeNull();
+    expect(gl.drawElementsInstanced).toHaveBeenCalled();
+  });
+});

package/src/glDefaultMaterial.test.ts

@@ -0,0 +1,19 @@
+import { getGlMaterialRenderer } from '@flighthq/render-gl';
+import { DefaultMaterialKind } from '@flighthq/types';
+
+import { defaultGlMaterialRenderer, registerDefaultGlMaterial } from './glDefaultMaterial';
+import { createGlState } from './glTestHelper';
+
+describe('defaultGlMaterialRenderer', () => {
+  it('declares no per-instance float data', () => {
+    expect(defaultGlMaterialRenderer.instanceFloatCount).toBe(0);
+  });
+});
+
+describe('registerDefaultGlMaterial', () => {
+  it('registers the default renderer under DefaultMaterialKind', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    expect(getGlMaterialRenderer(state, DefaultMaterialKind)).toBe(defaultGlMaterialRenderer);
+  });
+});

package/src/glNode2D.test.ts

@@ -0,0 +1,85 @@
+import { addNodeChild } from '@flighthq/node';
+import { getOrCreateRenderProxy2D, prepareScene2DRender, registerRenderer } from '@flighthq/render';
+import { createGlRenderState } from '@flighthq/render-gl';
+import { createDisplayObject } from '@flighthq/scene2d';
+import type { GlRenderState } from '@flighthq/types';
+import { DisplayObjectKind } from '@flighthq/types';
+
+import { defaultGlScene2DRenderer, drawGlScene2D, renderGlScene2D } from './glNode2D';
+
+function makeState(): GlRenderState {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 100;
+  return createGlRenderState(canvas);
+}
+
+function makeRenderer() {
+  return {
+    createData: () => null,
+    submit: vi.fn(),
+  } as any;
+}
+
+describe('defaultGlScene2DRenderer', () => {
+  it('has draw, and createData functions', () => {
+    expect(defaultGlScene2DRenderer.createData({} as any, {} as any)).toBeNull();
+    expect(defaultGlScene2DRenderer.submit).toBe(drawGlScene2D);
+  });
+});
+
+describe('drawGlScene2D', () => {
+  it('does not draw plain display object geometry', () => {
+    const state = makeState();
+    expect(() => drawGlScene2D(state, {} as any)).not.toThrow();
+  });
+});
+
+describe('renderGlScene2D', () => {
+  it('does not throw for an empty display object', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    prepareScene2DRender(state, obj);
+    expect(() => renderGlScene2D(state, obj)).not.toThrow();
+  });
+
+  it('calls renderer.submit for a visible object with a renderer', () => {
+    const state = makeState();
+    const renderer = makeRenderer();
+    registerRenderer(state, DisplayObjectKind, renderer);
+    const obj = createDisplayObject();
+    const data = getOrCreateRenderProxy2D(state, obj);
+    prepareScene2DRender(state, obj);
+
+    renderGlScene2D(state, obj);
+
+    expect(renderer.submit).toHaveBeenCalledWith(state, data);
+  });
+
+  it('skips objects with zero alpha', () => {
+    const state = makeState();
+    const renderer = makeRenderer();
+    registerRenderer(state, DisplayObjectKind, renderer);
+    const obj = createDisplayObject();
+    obj.alpha = 0;
+    prepareScene2DRender(state, obj);
+
+    renderGlScene2D(state, obj);
+
+    expect(renderer.submit).not.toHaveBeenCalled();
+  });
+
+  it('traverses children and draws visible ones', () => {
+    const state = makeState();
+    const renderer = makeRenderer();
+    registerRenderer(state, DisplayObjectKind, renderer);
+    const parent = createDisplayObject();
+    const child = createDisplayObject();
+    addNodeChild(parent, child);
+    prepareScene2DRender(state, parent);
+
+    renderGlScene2D(state, parent);
+
+    expect(renderer.submit).toHaveBeenCalledTimes(2);
+  });
+});

package/src/glNode2DRegistration.test.ts

@@ -0,0 +1,132 @@
+import { getRenderStateRuntime } from '@flighthq/render';
+import { createGlRenderState } from '@flighthq/render-gl';
+import type { GlRenderState } from '@flighthq/types';
+import {
+  BitmapKind,
+  DisplayObjectKind,
+  ParticleEmitter2DKind,
+  QuadBatchKind,
+  RenderCacheKind,
+  RichTextKind,
+  Scale9ShapeKind,
+  ShapeKind,
+  SpriteKind,
+  TextLabelKind,
+  TilemapKind,
+  VideoKind,
+} from '@flighthq/types';
+
+import { defaultGlBitmapRenderer } from './glBitmap';
+import { defaultGlRenderCacheRenderer } from './glCache';
+import { defaultGlScene2DRenderer } from './glNode2D';
+import { registerGlScene2DRenderers } from './glNode2DRegistration';
+import { defaultGlParticleEmitter2DRenderer } from './glParticleEmitter2D';
+import { defaultGlQuadBatchRenderer } from './glQuadBatch';
+import { defaultGlRichTextRenderer } from './glRichText';
+import { defaultGlScale9ShapeRenderer } from './glScale9Shape';
+import { defaultGlShapeRenderer } from './glShape';
+import { defaultGlSpriteRenderer } from './glSpriteRenderer';
+import { defaultGlTextLabelRenderer } from './glTextLabel';
+import { defaultGlTilemapRenderer } from './glTilemap';
+import { defaultGlVideoRenderer } from './glVideo';
+
+function makeState(): GlRenderState {
+  const canvas = document.createElement('canvas');
+  canvas.width = 100;
+  canvas.height = 100;
+  return createGlRenderState(canvas);
+}
+
+describe('registerGlScene2DRenderers', () => {
+  it('registers all twelve display-object renderer kinds in one call', () => {
+    const state = makeState();
+    registerGlScene2DRenderers(state);
+    const { rendererMap } = getRenderStateRuntime(state);
+    expect(rendererMap.get(BitmapKind)).toBe(defaultGlBitmapRenderer);
+    expect(rendererMap.get(DisplayObjectKind)).toBe(defaultGlScene2DRenderer);
+    expect(rendererMap.get(ParticleEmitter2DKind)).toBe(defaultGlParticleEmitter2DRenderer);
+    expect(rendererMap.get(QuadBatchKind)).toBe(defaultGlQuadBatchRenderer);
+    expect(rendererMap.get(RenderCacheKind)).toBe(defaultGlRenderCacheRenderer);
+    expect(rendererMap.get(RichTextKind)).toBe(defaultGlRichTextRenderer);
+    expect(rendererMap.get(Scale9ShapeKind)).toBe(defaultGlScale9ShapeRenderer);
+    expect(rendererMap.get(ShapeKind)).toBe(defaultGlShapeRenderer);
+    expect(rendererMap.get(SpriteKind)).toBe(defaultGlSpriteRenderer);
+    expect(rendererMap.get(TextLabelKind)).toBe(defaultGlTextLabelRenderer);
+    expect(rendererMap.get(TilemapKind)).toBe(defaultGlTilemapRenderer);
+    expect(rendererMap.get(VideoKind)).toBe(defaultGlVideoRenderer);
+  });
+
+  it('registers BitmapKind with the default bitmap renderer', () => {
+    const state = makeState();
+    registerGlScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(BitmapKind)).toBe(defaultGlBitmapRenderer);
+  });
+
+  it('registers DisplayObjectKind with the default display object renderer', () => {
+    const state = makeState();
+    registerGlScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(DisplayObjectKind)).toBe(defaultGlScene2DRenderer);
+  });
+
+  it('registers ParticleEmitter2DKind with the default particle emitter renderer', () => {
+    const state = makeState();
+    registerGlScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(ParticleEmitter2DKind)).toBe(
+      defaultGlParticleEmitter2DRenderer,
+    );
+  });
+
+  it('registers QuadBatchKind with the default quad batch renderer', () => {
+    const state = makeState();
+    registerGlScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(QuadBatchKind)).toBe(defaultGlQuadBatchRenderer);
+  });
+
+  it('registers RenderCacheKind with the default render cache renderer', () => {
+    const state = makeState();
+    registerGlScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(RenderCacheKind)).toBe(defaultGlRenderCacheRenderer);
+  });
+
+  it('registers RichTextKind with the default rich text renderer', () => {
+    const state = makeState();
+    registerGlScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(RichTextKind)).toBe(defaultGlRichTextRenderer);
+  });
+
+  it('registers Scale9ShapeKind with the default scale9 shape renderer', () => {
+    const state = makeState();
+    registerGlScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(Scale9ShapeKind)).toBe(defaultGlScale9ShapeRenderer);
+  });
+
+  it('registers ShapeKind with the default shape renderer', () => {
+    const state = makeState();
+    registerGlScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(ShapeKind)).toBe(defaultGlShapeRenderer);
+  });
+
+  it('registers SpriteKind with the default sprite renderer', () => {
+    const state = makeState();
+    registerGlScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(SpriteKind)).toBe(defaultGlSpriteRenderer);
+  });
+
+  it('registers TextLabelKind with the default text label renderer', () => {
+    const state = makeState();
+    registerGlScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(TextLabelKind)).toBe(defaultGlTextLabelRenderer);
+  });
+
+  it('registers TilemapKind with the default tilemap renderer', () => {
+    const state = makeState();
+    registerGlScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(TilemapKind)).toBe(defaultGlTilemapRenderer);
+  });
+
+  it('registers VideoKind with the default video renderer', () => {
+    const state = makeState();
+    registerGlScene2DRenderers(state);
+    expect(getRenderStateRuntime(state).rendererMap.get(VideoKind)).toBe(defaultGlVideoRenderer);
+  });
+});

package/src/glParticleEmitter2D.test.ts

@@ -0,0 +1,122 @@
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+import type { RenderProxy2D } from '@flighthq/types';
+
+import { defaultGlParticleEmitter2DRenderer, drawGlParticleEmitter2D } from './glParticleEmitter2D';
+import { createGlState } from './glTestHelper';
+
+function makeAtlas() {
+  const img = document.createElement('img');
+  return {
+    image: { source: img, width: 64, height: 64 },
+    regions: [{ id: 0, x: 0, y: 0, width: 32, height: 32 }],
+  };
+}
+
+function makeParticleEmitter2DNode(data: Record<string, unknown> = {}): RenderProxy2D {
+  return {
+    source: {
+      data: {
+        atlas: makeAtlas(),
+        particleCount: 1,
+        ids: new Uint16Array([0]),
+        transforms: new Float32Array([0, 0, 0, 1]),
+        alphas: new Float32Array([1]),
+        colors: new Float32Array([1, 1, 1]),
+        ...data,
+      },
+    },
+    blendMode: 0,
+    alpha: 1,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+  } as unknown as RenderProxy2D;
+}
+
+describe('defaultGlParticleEmitter2DRenderer', () => {
+  it('has a createData function', () => {
+    expect(typeof defaultGlParticleEmitter2DRenderer.createData).toBe('function');
+  });
+
+  it('has a submit function', () => {
+    expect(typeof defaultGlParticleEmitter2DRenderer.submit).toBe('function');
+  });
+});
+
+describe('drawGlParticleEmitter2D', () => {
+  it('returns early without drawing when atlas is null', () => {
+    const { state, gl } = createGlState();
+    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: [] } }));
+    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 }, regions: [] } }));
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+
+  it('returns early without drawing when particleCount is 0', () => {
+    const { state, gl } = createGlState();
+    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();
+    drawGlParticleEmitter2D(
+      state,
+      makeParticleEmitter2DNode({
+        particleCount: 3,
+        ids: new Uint16Array([0, 0, 0]),
+        transforms: new Float32Array([0, 0, 0, 1, 10, 10, 0, 1, 20, 20, 0, 1]),
+        alphas: new Float32Array([1, 0.5, 0.25]),
+        colors: new Float32Array([1, 1, 1, 1, 1, 1, 1, 1, 1]),
+      }),
+    );
+    expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
+    expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 3);
+  });
+
+  it('skips out-of-range region ids and draws only valid particles', () => {
+    const { state, gl } = createGlState();
+    drawGlParticleEmitter2D(
+      state,
+      makeParticleEmitter2DNode({
+        particleCount: 3,
+        ids: new Uint16Array([0, 99, 0]),
+        transforms: new Float32Array([0, 0, 0, 1, 10, 10, 0, 1, 20, 20, 0, 1]),
+        alphas: new Float32Array([1, 1, 1]),
+        colors: new Float32Array([1, 1, 1, 1, 1, 1, 1, 1, 1]),
+      }),
+    );
+    expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 2);
+  });
+
+  it('uploads the straight-alpha flag for a compressed particle atlas', () => {
+    const { state, gl } = createGlState();
+    const image = {
+      alphaType: 'straight',
+      compressed: { container: {}, payload: new Uint8Array() },
+      data: null,
+      height: 4,
+      source: null,
+      version: 1,
+      width: 4,
+    };
+
+    drawGlParticleEmitter2D(
+      state,
+      makeParticleEmitter2DNode({
+        atlas: { image, regions: [{ id: 0, x: 0, y: 0, width: 4, height: 4 }] },
+      }),
+    );
+
+    const shader = getGlRenderStateRuntime(state).particleShader!;
+    expect(gl.uniform1i).toHaveBeenCalledWith(shader.locStraightTextureAlpha, 1);
+  });
+});