@flighthq/displayobject-gl 0.1.0

package/src/glSpriteRenderer.test.ts

@@ -0,0 +1,75 @@
+import type { RenderProxy2D } from '@flighthq/types';
+
+import { registerDefaultGlMaterial } from './glDefaultMaterial';
+import { flushGlSpriteBatch } from './glSpriteBatch';
+import { defaultGlSpriteRenderer } from './glSpriteRenderer';
+import { createGlState } from './glTestHelper';
+
+function makeAtlas(regionWidth = 32, regionHeight = 32) {
+  const img = document.createElement('img');
+  return {
+    image: { source: img, width: 64, height: 64 },
+    regions: [{ x: 0, y: 0, width: regionWidth, height: regionHeight }],
+  };
+}
+
+function makeSpriteNode(data: Record<string, unknown> = {}): RenderProxy2D {
+  return {
+    source: { data: { atlas: null, id: 0, ...data } },
+    blendMode: 0,
+    alpha: 1,
+    material: null,
+    materialData: null,
+    renderer: null,
+    traverseChildren: false,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+  } as unknown as RenderProxy2D;
+}
+
+describe('defaultGlSpriteRenderer', () => {
+  it('has a createData function', () => {
+    expect(typeof defaultGlSpriteRenderer.createData).toBe('function');
+  });
+
+  it('has a submit function', () => {
+    expect(typeof defaultGlSpriteRenderer.submit).toBe('function');
+  });
+});
+
+describe('defaultGlSpriteRenderer.submit', () => {
+  it('returns early without drawing when atlas is null', () => {
+    const { state, gl } = createGlState();
+    defaultGlSpriteRenderer.submit(state, makeSpriteNode({ atlas: null }));
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('returns early without drawing when atlas.image is null', () => {
+    const { state, gl } = createGlState();
+    defaultGlSpriteRenderer.submit(state, makeSpriteNode({ atlas: { image: null, regions: [] } }));
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('returns early without drawing when id is negative', () => {
+    const { state, gl } = createGlState();
+    defaultGlSpriteRenderer.submit(state, makeSpriteNode({ atlas: makeAtlas(), id: -1 }));
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('returns early without drawing when region width is zero', () => {
+    const { state, gl } = createGlState();
+    defaultGlSpriteRenderer.submit(state, makeSpriteNode({ atlas: makeAtlas(0, 32), id: 0 }));
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('draws a quad when the atlas region is valid', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlSpriteRenderer.submit(state, makeSpriteNode({ atlas: makeAtlas(), id: 0 }));
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 1);
+  });
+});

package/src/glTextInput.test.ts

@@ -0,0 +1,51 @@
+import { createRichText } from '@flighthq/text';
+import { enableTextInput, setTextInputSelection } from '@flighthq/textinput';
+import type { RenderProxy2D, RichText } from '@flighthq/types';
+
+import { drawGlRichText } from './glRichText';
+import { createGlState } from './glTestHelper';
+import { drawGlTextInputOverlay, enableGlTextInput } from './glTextInput';
+
+function makeFocusedInputProxy(): RenderProxy2D {
+  const node = createRichText({ data: { height: 40, text: 'hello', width: 100 } });
+  enableTextInput(node).focused = true;
+  return {
+    source: node,
+    blendMode: 0,
+    alpha: 1,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+    rendererData: { texture: null },
+  } as unknown as RenderProxy2D;
+}
+
+describe('drawGlTextInputOverlay', () => {
+  it('is the installed overlay function', () => {
+    expect(typeof drawGlTextInputOverlay).toBe('function');
+  });
+
+  it('rasterizes a focused collapsed selection without throwing', () => {
+    enableGlTextInput();
+    const { state, gl } = createGlState();
+    const renderProxy = makeFocusedInputProxy();
+    setTextInputSelection(renderProxy.source as RichText, 2, 2);
+
+    expect(() => drawGlRichText(state, renderProxy)).not.toThrow();
+    expect(gl.drawElements).toHaveBeenCalled();
+  });
+
+  it('rasterizes a focused expanded selection without throwing', () => {
+    enableGlTextInput();
+    const { state, gl } = createGlState();
+    const renderProxy = makeFocusedInputProxy();
+    setTextInputSelection(renderProxy.source as RichText, 1, 4);
+
+    expect(() => drawGlRichText(state, renderProxy)).not.toThrow();
+    expect(gl.drawElements).toHaveBeenCalled();
+  });
+});
+
+describe('enableGlTextInput', () => {
+  it('installs the overlay without throwing', () => {
+    expect(() => enableGlTextInput()).not.toThrow();
+  });
+});

package/src/glTextLabel.test.ts

@@ -0,0 +1,151 @@
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+import { createTextLabel, setTextLabelString } from '@flighthq/text';
+import type { RenderProxy2D, TextLabel } from '@flighthq/types';
+import { BatchFormat } from '@flighthq/types';
+
+import { registerDefaultGlMaterial } from './glDefaultMaterial';
+import { flushGlSpriteBatch } from './glSpriteBatch';
+import { createGlState } from './glTestHelper';
+import type * as GlTextLabelModule from './glTextLabel';
+import { scopeModuleMocks } from './moduleMockTestHelper';
+
+// @flighthq/textlayout.computeTextLayout is stubbed to emit one deterministic glyph group.
+// scopeModuleMocks scopes the stub to this file (registry reset before the mock applies, unmock +
+// reset after), so under a shared (isolate:false) worker it never leaks into the real text-layout
+// consumers (text package) — and a sibling that pre-evaluated ./glTextLabel still picks up the stub.
+let defaultGlTextLabelRenderer: typeof GlTextLabelModule.defaultGlTextLabelRenderer;
+let drawGlTextLabel: typeof GlTextLabelModule.drawGlTextLabel;
+
+scopeModuleMocks(['@flighthq/textlayout']);
+
+beforeAll(async () => {
+  vi.doMock('@flighthq/textlayout', async (importOriginal) => {
+    const actual = (await importOriginal()) as Record<string, unknown>;
+    return {
+      ...actual,
+      computeTextLayout: vi.fn((result: { groups: object[] }) => {
+        result.groups.push({
+          offsetX: 0,
+          offsetY: 0,
+          width: 50,
+          ascent: 12,
+          descent: 4,
+          format: {},
+          startIndex: 0,
+          endIndex: 5,
+        });
+      }),
+    };
+  });
+  ({ defaultGlTextLabelRenderer, drawGlTextLabel } = await import('./glTextLabel'));
+});
+
+function makeTextData() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext('2d')!;
+  return { canvas, ctx, lastHash: '', logW: 0, logH: 0 };
+}
+
+function makeTextProxy(text = '', rendererData: unknown = null): RenderProxy2D {
+  const source = createTextLabel();
+  source.data.text = text;
+  source.data.textFormat = {};
+  source.data.width = 200;
+  source.data.height = 100;
+  return {
+    source,
+    blendMode: 0,
+    alpha: 1,
+    material: null,
+    materialData: null,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+    rendererData,
+  } as unknown as RenderProxy2D;
+}
+
+describe('defaultGlTextLabelRenderer', () => {
+  it('declares BatchFormat.Quad', () => {
+    expect(defaultGlTextLabelRenderer.format).toBe(BatchFormat.Quad);
+  });
+
+  it('has a createData function', () => {
+    expect(typeof defaultGlTextLabelRenderer.createData).toBe('function');
+  });
+
+  it('has a submit function pointing to drawGlTextLabel', () => {
+    expect(defaultGlTextLabelRenderer.submit).toBe(drawGlTextLabel);
+  });
+});
+
+describe('drawGlTextLabel', () => {
+  it('returns early without writing to batch when text is empty', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlTextLabel(state, makeTextProxy('', makeTextData()));
+    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
+  });
+
+  it('returns early without writing to batch when rendererData is null', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlTextLabel(state, makeTextProxy('hello', null));
+    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
+  });
+
+  it('returns early without writing to batch when no material renderer is registered', () => {
+    const { state } = createGlState();
+    drawGlTextLabel(state, makeTextProxy('hello', makeTextData()));
+    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
+  });
+
+  it('writes one instance to the sprite batch when text has content', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlTextLabel(state, makeTextProxy('hello', makeTextData()));
+    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(1);
+  });
+
+  it('draws via drawElementsInstanced after flush', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlTextLabel(state, makeTextProxy('hello', makeTextData()));
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).toHaveBeenCalled();
+  });
+
+  it('skips layout and rasterization on repeated calls when the content version is unchanged', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    const proxy = makeTextProxy('hello', makeTextData());
+    const deleteSpy = vi.spyOn(getGlRenderStateRuntime(state).textureCache, 'delete');
+    drawGlTextLabel(state, proxy);
+    drawGlTextLabel(state, proxy);
+    // textureCache.delete only happens during rasterization (first call); skipped on second.
+    expect(deleteSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('re-rasterizes when the content version is bumped', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    const proxy = makeTextProxy('hello', makeTextData());
+    const deleteSpy = vi.spyOn(getGlRenderStateRuntime(state).textureCache, 'delete');
+    drawGlTextLabel(state, proxy);
+    setTextLabelString(proxy.source as TextLabel, 'world');
+    drawGlTextLabel(state, proxy);
+    expect(deleteSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('does not re-rasterize when only alpha changes (version unchanged)', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    const proxy = makeTextProxy('hello', makeTextData());
+    const deleteSpy = vi.spyOn(getGlRenderStateRuntime(state).textureCache, 'delete');
+    drawGlTextLabel(state, proxy);
+    proxy.alpha = 0.5;
+    drawGlTextLabel(state, proxy);
+    // Alpha is applied per-instance in the batch; the expensive raster cache is untouched.
+    expect(deleteSpy).toHaveBeenCalledTimes(1);
+  });
+});

package/src/glTilemap.test.ts

@@ -0,0 +1,127 @@
+import type { RenderProxy2D } from '@flighthq/types';
+
+import { registerDefaultGlMaterial } from './glDefaultMaterial';
+import { flushGlSpriteBatch } from './glSpriteBatch';
+import { createGlState } from './glTestHelper';
+import { defaultGlTilemapRenderer } from './glTilemap';
+
+function makeAtlas() {
+  const img = document.createElement('img');
+  return {
+    image: { source: img, width: 64, height: 64 },
+    regions: [{ x: 0, y: 0, width: 16, height: 16 }],
+  };
+}
+
+function makeTileset(atlasOverride?: unknown) {
+  return {
+    atlas: atlasOverride !== undefined ? atlasOverride : makeAtlas(),
+    tileWidth: 16,
+    tileHeight: 16,
+  };
+}
+
+function makeTilemapNode(data: Record<string, unknown> = {}): RenderProxy2D {
+  return {
+    source: {
+      data: {
+        tileset: makeTileset(),
+        columns: 2,
+        rows: 2,
+        tiles: [0, 0, 0, 0],
+        ...data,
+      },
+    },
+    blendMode: 0,
+    alpha: 1,
+    material: null,
+    materialData: null,
+    renderer: null,
+    traverseChildren: false,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+  } as unknown as RenderProxy2D;
+}
+
+describe('defaultGlTilemapRenderer', () => {
+  it('has a createData function', () => {
+    expect(typeof defaultGlTilemapRenderer.createData).toBe('function');
+  });
+
+  it('has a submit function', () => {
+    expect(typeof defaultGlTilemapRenderer.submit).toBe('function');
+  });
+});
+
+describe('defaultGlTilemapRenderer.submit', () => {
+  it('returns early without drawing when tileset is null', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlTilemapRenderer.submit(state, makeTilemapNode({ tileset: null }));
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('returns early without drawing when atlas is null', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlTilemapRenderer.submit(state, makeTilemapNode({ tileset: makeTileset(null) }));
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('returns early without drawing when atlas.image is null', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlTilemapRenderer.submit(
+      state,
+      makeTilemapNode({ tileset: { atlas: { image: null, regions: [] }, tileWidth: 16, tileHeight: 16 } }),
+    );
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('returns early without drawing when atlas.image.source is null', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlTilemapRenderer.submit(
+      state,
+      makeTilemapNode({ tileset: { atlas: { image: { source: null }, regions: [] }, tileWidth: 16, tileHeight: 16 } }),
+    );
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('returns early without drawing when columns is 0', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlTilemapRenderer.submit(state, makeTilemapNode({ columns: 0 }));
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('returns early without drawing when rows is 0', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlTilemapRenderer.submit(state, makeTilemapNode({ rows: 0 }));
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('draws all valid tiles in a single instanced call', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlTilemapRenderer.submit(state, makeTilemapNode());
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
+    expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 4);
+  });
+
+  it('excludes out-of-range tile ids from the instanced draw count', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    defaultGlTilemapRenderer.submit(state, makeTilemapNode({ tiles: [0, 99, 99, 0] }));
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
+    expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 2);
+  });
+});

package/src/glUniformColorTransformMaterial.test.ts

@@ -0,0 +1,24 @@
+import { getGlMaterialRenderer } from '@flighthq/render-gl';
+import { UniformColorTransformMaterialKind } from '@flighthq/types';
+
+import { createGlState } from './glTestHelper';
+import {
+  registerGlUniformColorTransformMaterial,
+  uniformColorTransformGlMaterialRenderer,
+} from './glUniformColorTransformMaterial';
+
+describe('registerGlUniformColorTransformMaterial', () => {
+  it('registers the uniform color transform material renderer', () => {
+    const { state } = createGlState();
+    registerGlUniformColorTransformMaterial(state);
+    expect(getGlMaterialRenderer(state, UniformColorTransformMaterialKind)).toBe(
+      uniformColorTransformGlMaterialRenderer,
+    );
+  });
+});
+
+describe('uniformColorTransformGlMaterialRenderer', () => {
+  it('declares no per-instance float data', () => {
+    expect(uniformColorTransformGlMaterialRenderer.instanceFloatCount).toBe(0);
+  });
+});

package/src/glVelocity.test.ts

@@ -0,0 +1,155 @@
+import { createDisplayObject } from '@flighthq/displayobject';
+import { createParticleEmitter, createQuadBatch, getQuadBatchRuntime, reserveParticleEmitter } from '@flighthq/sprite';
+import type { QuadBatchRuntime, TextureAtlas, TextureAtlasRegion } from '@flighthq/types';
+import { QuadBatchKind } from '@flighthq/types';
+import { beginVelocityFrame, contributeVelocity, createVelocityField } from '@flighthq/velocity';
+
+import { createGlState } from './glTestHelper';
+import {
+  createGlVelocityTarget,
+  defaultGlDisplayObjectVelocityWriter,
+  defaultGlParticleEmitterVelocityWriter,
+  defaultGlQuadBatchVelocityWriter,
+  drawGlVelocityQuad,
+  getGlVelocityWriter,
+  registerGlVelocityWriter,
+  renderGlVelocity,
+} from './glVelocity';
+
+describe('createGlVelocityTarget', () => {
+  it('allocates an rgba16f target at the requested size', () => {
+    const { state } = createGlState();
+    const target = createGlVelocityTarget(state, 128, 64);
+    expect(target.format).toBe('rgba16f');
+    expect(target.width).toBe(128);
+    expect(target.height).toBe(64);
+  });
+});
+
+describe('defaultGlDisplayObjectVelocityWriter', () => {
+  it('is a velocity writer function', () => {
+    expect(typeof defaultGlDisplayObjectVelocityWriter).toBe('function');
+  });
+});
+
+describe('defaultGlParticleEmitterVelocityWriter', () => {
+  it('is a velocity writer function', () => {
+    expect(typeof defaultGlParticleEmitterVelocityWriter).toBe('function');
+  });
+
+  it('emits per-particle velocity for an emitter with a velocities array without throwing', () => {
+    const { state } = createGlState();
+    const target = createGlVelocityTarget(state, 128, 64);
+    const region = { id: 0, x: 0, y: 0, width: 16, height: 16, pivotX: null, pivotY: null } as TextureAtlasRegion;
+    const atlas = { image: null, regions: [region] } as TextureAtlas;
+    const emitter = createParticleEmitter();
+    reserveParticleEmitter(emitter, 2);
+    emitter.data.atlas = atlas;
+    emitter.data.particleCount = 2;
+    emitter.data.ids[0] = 0;
+    emitter.data.ids[1] = 0;
+    emitter.data.transforms.set([10, 10, 0, 1, 40, 20, 0, 1]);
+    emitter.data.velocities.set([3, -2, -1, 4]);
+
+    registerGlVelocityWriter(state, emitter.kind, defaultGlParticleEmitterVelocityWriter);
+    const field = createVelocityField();
+    beginVelocityFrame(field);
+
+    expect(() => renderGlVelocity(state, emitter, field, target)).not.toThrow();
+  });
+});
+
+describe('defaultGlQuadBatchVelocityWriter', () => {
+  it('is a velocity writer function', () => {
+    expect(typeof defaultGlQuadBatchVelocityWriter).toBe('function');
+  });
+
+  it('emits per-instance velocity for a batch with an instanceVelocities array without throwing', () => {
+    const { state } = createGlState();
+    const target = createGlVelocityTarget(state, 128, 64);
+    const region = { id: 0, x: 0, y: 0, width: 32, height: 32, pivotX: null, pivotY: null } as TextureAtlasRegion;
+    const atlas = { image: null, regions: [region] } as TextureAtlas;
+    // Two vector2 instances at distinct positions, each moving independently.
+    const batch = createQuadBatch({
+      data: {
+        atlas,
+        ids: new Uint16Array([0, 0]),
+        instanceCount: 2,
+        transforms: new Float32Array([0, 0, 40, 10]),
+        transformType: 'vector2',
+      },
+    });
+    // The batch owns its per-instance velocity (NOT the VelocityField); whatever drives the quads fills it.
+    (getQuadBatchRuntime(batch) as QuadBatchRuntime).instanceVelocities = new Float32Array([3, -2, -1, 4]);
+
+    registerGlVelocityWriter(state, QuadBatchKind, defaultGlQuadBatchVelocityWriter);
+    const field = createVelocityField();
+    beginVelocityFrame(field);
+
+    expect(() => renderGlVelocity(state, batch, field, target)).not.toThrow();
+  });
+
+  it('falls back to coarse batch velocity when no instanceVelocities array is present', () => {
+    const { state } = createGlState();
+    const target = createGlVelocityTarget(state, 128, 64);
+    const region = { id: 0, x: 0, y: 0, width: 32, height: 32, pivotX: null, pivotY: null } as TextureAtlasRegion;
+    const atlas = { image: null, regions: [region] } as TextureAtlas;
+    const batch = createQuadBatch({
+      data: { atlas, ids: new Uint16Array([0]), instanceCount: 1, transforms: new Float32Array([0, 0]) },
+    });
+
+    registerGlVelocityWriter(state, QuadBatchKind, defaultGlQuadBatchVelocityWriter);
+    const field = createVelocityField();
+    beginVelocityFrame(field);
+    contributeVelocity(field, batch, 5, 1);
+
+    expect(() => renderGlVelocity(state, batch, field, target)).not.toThrow();
+  });
+});
+
+describe('drawGlVelocityQuad', () => {
+  it('is callable', () => {
+    expect(typeof drawGlVelocityQuad).toBe('function');
+  });
+});
+
+describe('getGlVelocityWriter', () => {
+  it('returns null for an unregistered kind', () => {
+    const { state } = createGlState();
+    expect(getGlVelocityWriter(state, 'unregistered')).toBeNull();
+  });
+});
+
+describe('registerGlVelocityWriter', () => {
+  it('registers a writer dispatched by kind', () => {
+    const { state } = createGlState();
+    const root = createDisplayObject();
+    registerGlVelocityWriter(state, root.kind, defaultGlDisplayObjectVelocityWriter);
+    expect(getGlVelocityWriter(state, root.kind)).toBe(defaultGlDisplayObjectVelocityWriter);
+  });
+});
+
+describe('renderGlVelocity', () => {
+  it('dispatches the registered writer for a moving node without throwing', () => {
+    const { state } = createGlState();
+    const target = createGlVelocityTarget(state, 128, 64);
+    const root = createDisplayObject();
+    registerGlVelocityWriter(state, root.kind, defaultGlDisplayObjectVelocityWriter);
+
+    const field = createVelocityField();
+    beginVelocityFrame(field);
+    contributeVelocity(field, root, 3, -2);
+
+    expect(() => renderGlVelocity(state, root, field, target)).not.toThrow();
+  });
+
+  it('runs without throwing when no writer is registered', () => {
+    const { state } = createGlState();
+    const target = createGlVelocityTarget(state, 128, 64);
+    const root = createDisplayObject();
+    const field = createVelocityField();
+    beginVelocityFrame(field);
+
+    expect(() => renderGlVelocity(state, root, field, target)).not.toThrow();
+  });
+});

package/src/glVideo.test.ts

@@ -0,0 +1,65 @@
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+import type { RendererData, RenderProxy2D } from '@flighthq/types';
+
+import { createGlState } from './glTestHelper';
+import { createGlVideoData, defaultGlVideoRenderer, destroyGlVideoData, drawGlVideo } from './glVideo';
+
+function makeVideoNode(element: HTMLVideoElement | null = null): RenderProxy2D {
+  return {
+    source: { data: { source: element !== null ? { element } : null } },
+    blendMode: 0,
+    alpha: 1,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+    rendererData: { lastElement: null },
+  } as unknown as RenderProxy2D;
+}
+
+describe('createGlVideoData', () => {
+  it('allocates per-node data with no element recorded yet', () => {
+    const { state } = createGlState();
+    const data = createGlVideoData(state, {} as never) as unknown as { lastElement: HTMLVideoElement | null };
+    expect(data.lastElement).toBeNull();
+  });
+});
+
+describe('defaultGlVideoRenderer', () => {
+  it('has submit, and createData functions', () => {
+    expect(typeof defaultGlVideoRenderer.submit).toBe('function');
+    expect(typeof defaultGlVideoRenderer.createData).toBe('function');
+  });
+});
+
+describe('destroyGlVideoData', () => {
+  it('deletes the cached GPU texture for the recorded element', () => {
+    const { state, gl } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    const element = document.createElement('video');
+    const texture = gl.createTexture();
+    runtime.textureCache.set(element, texture as WebGLTexture);
+    const deleteSpy = vi.spyOn(gl, 'deleteTexture');
+    destroyGlVideoData(state, { lastElement: element } as unknown as RendererData);
+    expect(deleteSpy).toHaveBeenCalledWith(texture);
+    expect(runtime.textureCache.has(element)).toBe(false);
+  });
+
+  it('is a no-op when no element was recorded', () => {
+    const { state, gl } = createGlState();
+    const deleteSpy = vi.spyOn(gl, 'deleteTexture');
+    destroyGlVideoData(state, { lastElement: null } as unknown as RendererData);
+    expect(deleteSpy).not.toHaveBeenCalled();
+  });
+});
+
+describe('drawGlVideo', () => {
+  it('returns early when source is null', () => {
+    const { state, gl } = createGlState();
+    drawGlVideo(state, makeVideoNode(null));
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+
+  it('returns early when element has not loaded', () => {
+    const { state, gl } = createGlState();
+    drawGlVideo(state, makeVideoNode(document.createElement('video')));
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+});