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

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/glVelocity.test.ts

@@ -0,0 +1,156 @@
+import { createParticleEmitter2D, reserveParticleEmitter2D } from '@flighthq/particleemitter';
+import { createDisplayObject } from '@flighthq/scene2d';
+import { createQuadBatch, getQuadBatchRuntime } 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,
+  defaultGlNode2DVelocityWriter,
+  defaultGlParticleEmitter2DVelocityWriter,
+  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('defaultGlNode2DVelocityWriter', () => {
+  it('is a velocity writer function', () => {
+    expect(typeof defaultGlNode2DVelocityWriter).toBe('function');
+  });
+});
+
+describe('defaultGlParticleEmitter2DVelocityWriter', () => {
+  it('is a velocity writer function', () => {
+    expect(typeof defaultGlParticleEmitter2DVelocityWriter).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 = createParticleEmitter2D();
+    reserveParticleEmitter2D(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, defaultGlParticleEmitter2DVelocityWriter);
+    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, defaultGlNode2DVelocityWriter);
+    expect(getGlVelocityWriter(state, root.kind)).toBe(defaultGlNode2DVelocityWriter);
+  });
+});
+
+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, defaultGlNode2DVelocityWriter);
+
+    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,98 @@
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+import type { RendererData, RenderProxy2D, VideoTexture } 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: { source: null, videoTexture: null },
+  } as unknown as RenderProxy2D;
+}
+
+function makeReadyElement(): HTMLVideoElement {
+  const element = document.createElement('video');
+  Object.defineProperty(element, 'readyState', { value: 4, configurable: true });
+  Object.defineProperty(element, 'videoWidth', { value: 320, configurable: true });
+  Object.defineProperty(element, 'videoHeight', { value: 240, configurable: true });
+  return element;
+}
+
+describe('createGlVideoData', () => {
+  it('allocates per-node data with no stream or texture recorded yet', () => {
+    const { state } = createGlState();
+    const data = createGlVideoData(state, {} as never) as unknown as {
+      source: unknown;
+      videoTexture: VideoTexture | null;
+    };
+    expect(data.source).toBeNull();
+    expect(data.videoTexture).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 VideoTexture', () => {
+    const { state, gl } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    const videoTexture = { frameId: -1 } as unknown as VideoTexture;
+    const texture = gl.createTexture() as WebGLTexture;
+    runtime.videoTextureCache = new WeakMap();
+    runtime.videoTextureCache.set(videoTexture, { texture, uploadedFrameId: -1 });
+    const deleteSpy = vi.spyOn(gl, 'deleteTexture');
+    destroyGlVideoData(state, { source: null, videoTexture } as unknown as RendererData);
+    expect(deleteSpy).toHaveBeenCalledWith(texture);
+    expect(runtime.videoTextureCache.has(videoTexture)).toBe(false);
+  });
+
+  it('is a no-op when no VideoTexture was recorded', () => {
+    const { state, gl } = createGlState();
+    const deleteSpy = vi.spyOn(gl, 'deleteTexture');
+    destroyGlVideoData(state, { source: null, videoTexture: 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();
+  });
+
+  it('builds a VideoTexture and uploads the ready frame through the gated bind', () => {
+    const { state, gl } = createGlState();
+    const node = makeVideoNode(makeReadyElement());
+    drawGlVideo(state, node);
+    const data = node.rendererData as unknown as { videoTexture: VideoTexture | null };
+    expect(data.videoTexture).not.toBeNull();
+    expect(gl.texImage2D).toHaveBeenCalled();
+    expect(gl.drawElements).toHaveBeenCalled();
+  });
+
+  it('reuses the VideoTexture across draws of the same stream', () => {
+    const { state } = createGlState();
+    const node = makeVideoNode(makeReadyElement());
+    drawGlVideo(state, node);
+    const first = (node.rendererData as unknown as { videoTexture: VideoTexture | null }).videoTexture;
+    drawGlVideo(state, node);
+    const second = (node.rendererData as unknown as { videoTexture: VideoTexture | null }).videoTexture;
+    expect(second).toBe(first);
+  });
+});