@flighthq/render-gl 0.1.0

package/src/glDraw.test.ts

@@ -0,0 +1,360 @@
+import { BlendMode } from '@flighthq/types';
+
+import {
+  applyGlBlendMode,
+  bindGlTexture,
+  createGlTexture,
+  drawGlQuad,
+  enableGlBlendModeSupport,
+  setGlQuadMatrixFromOffset,
+  updateGlTexture,
+  useGlProgram,
+} from './glDraw';
+import { getGlRenderStateRuntime } from './glRenderState';
+import { registerGlBitmapShader } from './glShaderRegistry';
+import { createGlState } from './glTestHelper';
+
+describe('applyGlBlendMode', () => {
+  it('does not call blendFunc when blend mode has not changed', () => {
+    const { state, gl } = createGlState();
+    getGlRenderStateRuntime(state).currentBlendMode = BlendMode.Normal;
+    applyGlBlendMode(state, BlendMode.Normal);
+    expect(gl.blendFunc).not.toHaveBeenCalled();
+  });
+
+  it('sets normal blend (ONE, ONE_MINUS_SRC_ALPHA) for BlendMode.Normal', () => {
+    const { state, gl } = createGlState();
+    applyGlBlendMode(state, BlendMode.Normal);
+    const g = gl as unknown as { ONE: number; ONE_MINUS_SRC_ALPHA: number };
+    expect(gl.blendFunc).toHaveBeenCalledWith(g.ONE, g.ONE_MINUS_SRC_ALPHA);
+  });
+
+  it('sets additive blend (ONE, ONE) for BlendMode.Add', () => {
+    const { state, gl } = createGlState();
+    applyGlBlendMode(state, BlendMode.Add);
+    const g = gl as unknown as { ONE: number };
+    expect(gl.blendFunc).toHaveBeenCalledWith(g.ONE, g.ONE);
+  });
+
+  it('falls back to normal blend for a mode with no fixed-function equivalent', () => {
+    const { state, gl } = createGlState();
+    applyGlBlendMode(state, BlendMode.Multiply);
+    const g = gl as unknown as { ONE: number; ONE_MINUS_SRC_ALPHA: number };
+    expect(gl.blendFunc).toHaveBeenCalledWith(g.ONE, g.ONE_MINUS_SRC_ALPHA);
+  });
+
+  it('updates currentBlendMode after the change', () => {
+    const { state } = createGlState();
+    applyGlBlendMode(state, BlendMode.Add);
+    expect(getGlRenderStateRuntime(state).currentBlendMode).toBe(BlendMode.Add);
+  });
+
+  it('calls blendFunc again when mode switches', () => {
+    const { state, gl } = createGlState();
+    applyGlBlendMode(state, BlendMode.Normal);
+    applyGlBlendMode(state, BlendMode.Add);
+    expect(gl.blendFunc).toHaveBeenCalledTimes(2);
+  });
+});
+
+describe('bindGlTexture', () => {
+  it('creates a new texture for an uncached image source', () => {
+    const { state, gl } = createGlState();
+    const img = document.createElement('img');
+    bindGlTexture(state, img);
+    expect(gl.createTexture).toHaveBeenCalled();
+  });
+
+  it('uploads texture data on first bind', () => {
+    const { state, gl } = createGlState();
+    const img = document.createElement('img');
+    bindGlTexture(state, img);
+    expect(gl.texImage2D).toHaveBeenCalled();
+  });
+
+  it('returns the same texture object on subsequent calls with the same source', () => {
+    const { state } = createGlState();
+    const img = document.createElement('img');
+    const t1 = bindGlTexture(state, img);
+    const t2 = bindGlTexture(state, img);
+    expect(t1).toBe(t2);
+  });
+
+  it('does not call texImage2D again for a cached texture', () => {
+    const { state, gl } = createGlState();
+    const img = document.createElement('img');
+    bindGlTexture(state, img);
+    const uploadCount = (gl.texImage2D as ReturnType<typeof vi.fn>).mock.calls.length;
+    bindGlTexture(state, img);
+    expect((gl.texImage2D as ReturnType<typeof vi.fn>).mock.calls.length).toBe(uploadCount);
+  });
+
+  it('premultiplies alpha on upload for HTMLCanvasElement sources', () => {
+    // Canvas pixels reach texImage2D as straight alpha; premultiplying on upload keeps canvas-backed
+    // shapes/text consistent with the premultiplied (ONE, ONE_MINUS_SRC_ALPHA) blend. Without this a
+    // semi-transparent shape blows out to full opacity.
+    const { state, gl } = createGlState();
+    const canvas = document.createElement('canvas');
+    bindGlTexture(state, canvas);
+    expect(gl.pixelStorei).toHaveBeenCalledWith(
+      (gl as unknown as { UNPACK_PREMULTIPLY_ALPHA_WEBGL: number }).UNPACK_PREMULTIPLY_ALPHA_WEBGL,
+      true,
+    );
+  });
+
+  it('sets premultiply to true for non-canvas image sources', () => {
+    const { state, gl } = createGlState();
+    const img = document.createElement('img');
+    bindGlTexture(state, img);
+    expect(gl.pixelStorei).toHaveBeenCalledWith(
+      (gl as unknown as { UNPACK_PREMULTIPLY_ALPHA_WEBGL: number }).UNPACK_PREMULTIPLY_ALPHA_WEBGL,
+      true,
+    );
+  });
+
+  it('rebinds and updates currentTexture when switching to a cached texture', () => {
+    const { state, gl } = createGlState();
+    const img = document.createElement('img');
+    const texture = bindGlTexture(state, img);
+    const runtime = getGlRenderStateRuntime(state);
+    runtime.currentTexture = null;
+    bindGlTexture(state, img);
+    expect(gl.bindTexture).toHaveBeenCalledWith((gl as unknown as { TEXTURE_2D: number }).TEXTURE_2D, texture);
+    expect(runtime.currentTexture).toBe(texture);
+  });
+});
+
+describe('createGlTexture', () => {
+  it('creates and returns a WebGLTexture', () => {
+    const { state } = createGlState();
+    const texture = createGlTexture(state);
+    expect(texture).toBeDefined();
+  });
+
+  it('binds the new texture', () => {
+    const { state, gl } = createGlState();
+    const texture = createGlTexture(state);
+    expect(gl.bindTexture).toHaveBeenCalledWith((gl as unknown as { TEXTURE_2D: number }).TEXTURE_2D, texture);
+  });
+
+  it('sets CLAMP_TO_EDGE for both wrap modes', () => {
+    const { state, gl } = createGlState();
+    createGlTexture(state);
+    const g = gl as unknown as {
+      TEXTURE_2D: number;
+      TEXTURE_WRAP_S: number;
+      TEXTURE_WRAP_T: number;
+      CLAMP_TO_EDGE: number;
+    };
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_WRAP_S, g.CLAMP_TO_EDGE);
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_WRAP_T, g.CLAMP_TO_EDGE);
+  });
+
+  it('uses LINEAR filter when allowSmoothing is true', () => {
+    const { state, gl } = createGlState({ allowSmoothing: true });
+    createGlTexture(state);
+    const g = gl as unknown as {
+      TEXTURE_2D: number;
+      TEXTURE_MIN_FILTER: number;
+      TEXTURE_MAG_FILTER: number;
+      LINEAR: number;
+    };
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_MIN_FILTER, g.LINEAR);
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_MAG_FILTER, g.LINEAR);
+  });
+
+  it('uses NEAREST filter when allowSmoothing is false', () => {
+    const { state, gl } = createGlState({ allowSmoothing: false });
+    createGlTexture(state);
+    const g = gl as unknown as {
+      TEXTURE_2D: number;
+      TEXTURE_MIN_FILTER: number;
+      TEXTURE_MAG_FILTER: number;
+      NEAREST: number;
+    };
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_MIN_FILTER, g.NEAREST);
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_MAG_FILTER, g.NEAREST);
+  });
+
+  it('stores the new texture as currentTexture on state', () => {
+    const { state } = createGlState();
+    const texture = createGlTexture(state);
+    expect(getGlRenderStateRuntime(state).currentTexture).toBe(texture);
+  });
+});
+
+describe('drawGlQuad', () => {
+  it('writes vertex positions and UVs into quadVertexData', () => {
+    const { state } = createGlState();
+    drawGlQuad(state, 0, 0, 100, 50, 0, 0, 1, 1);
+    const v = getGlRenderStateRuntime(state).quadVertexData;
+    // Bottom-left
+    expect(v[0]).toBe(0);
+    expect(v[1]).toBe(0);
+    expect(v[2]).toBe(0);
+    expect(v[3]).toBe(0);
+    // Bottom-right
+    expect(v[4]).toBe(100);
+    expect(v[5]).toBe(0);
+    expect(v[6]).toBe(1);
+    expect(v[7]).toBe(0);
+    // Top-right
+    expect(v[8]).toBe(100);
+    expect(v[9]).toBe(50);
+    expect(v[10]).toBe(1);
+    expect(v[11]).toBe(1);
+    // Top-left
+    expect(v[12]).toBe(0);
+    expect(v[13]).toBe(50);
+    expect(v[14]).toBe(0);
+    expect(v[15]).toBe(1);
+  });
+
+  it('calls bufferSubData to upload vertex data', () => {
+    const { state, gl } = createGlState();
+    drawGlQuad(state, 10, 20, 110, 70, 0.1, 0.2, 0.9, 0.8);
+    expect(gl.bufferSubData).toHaveBeenCalledWith(
+      (gl as unknown as { ARRAY_BUFFER: number }).ARRAY_BUFFER,
+      0,
+      getGlRenderStateRuntime(state).quadVertexData,
+    );
+  });
+
+  it('calls drawElements for 6 indices forming 2 triangles', () => {
+    const { state, gl } = createGlState();
+    drawGlQuad(state, 0, 0, 100, 50, 0, 0, 1, 1);
+    const g = gl as unknown as { TRIANGLES: number; UNSIGNED_SHORT: number };
+    expect(gl.drawElements).toHaveBeenCalledWith(g.TRIANGLES, 6, g.UNSIGNED_SHORT, 0);
+  });
+});
+
+describe('enableGlBlendModeSupport', () => {
+  it('wires applyBlendMode onto the state', () => {
+    const { state } = createGlState();
+    expect(state.applyBlendMode).toBeNull();
+    enableGlBlendModeSupport(state);
+    expect(state.applyBlendMode).not.toBeNull();
+  });
+
+  it('causes blend modes to be applied via gl.blendFunc', () => {
+    const { state, gl } = createGlState();
+    enableGlBlendModeSupport(state);
+    state.applyBlendMode!(state, BlendMode.Add);
+    expect(gl.blendFunc).toHaveBeenCalled();
+  });
+});
+
+describe('setGlQuadMatrixFromOffset', () => {
+  it('bakes the offset into the translation before setting the matrix', () => {
+    const { state, gl } = createGlState();
+    // Identity transform + offset (dx=10, dy=20): effective tx = 0 + 1*10 + 0*20 = 10
+    const runtime = getGlRenderStateRuntime(state);
+    setGlQuadMatrixFromOffset(state, 1, 0, 0, 1, 0, 0, 10, 20);
+    expect(gl.uniformMatrix3fv).toHaveBeenCalledWith(runtime.shaderLoc.locMatrix, false, runtime.matrixArray);
+    // tx * 2/200 - 1 = 10 * 0.01 - 1 = -0.9
+    expect(runtime.matrixArray[6]).toBeCloseTo(-0.9);
+    // -ty * 2/100 + 1 = -20 * 0.02 + 1 = 0.6
+    expect(runtime.matrixArray[7]).toBeCloseTo(0.6);
+  });
+
+  it('applies the offset through the transform matrix components', () => {
+    const { state } = createGlState();
+    // Scale-2 transform with offset (dx=5, dy=0): effective tx = 0 + 2*5 + 0*0 = 10
+    setGlQuadMatrixFromOffset(state, 2, 0, 0, 2, 0, 0, 5, 0);
+    // tx * 2/200 - 1 = 10 * 0.01 - 1 = -0.9
+    expect(getGlRenderStateRuntime(state).matrixArray[6]).toBeCloseTo(-0.9);
+  });
+});
+
+describe('updateGlTexture', () => {
+  it('binds the texture when it is not the current one', () => {
+    const { state, gl } = createGlState();
+    const texture = {} as WebGLTexture;
+    const canvas = document.createElement('canvas');
+    getGlRenderStateRuntime(state).currentTexture = null;
+    updateGlTexture(state, texture, canvas);
+    expect(gl.bindTexture).toHaveBeenCalledWith((gl as unknown as { TEXTURE_2D: number }).TEXTURE_2D, texture);
+  });
+
+  it('updates currentTexture after binding', () => {
+    const { state } = createGlState();
+    const texture = {} as WebGLTexture;
+    const runtime = getGlRenderStateRuntime(state);
+    runtime.currentTexture = null;
+    updateGlTexture(state, {} as WebGLTexture, document.createElement('canvas'));
+    updateGlTexture(state, texture, document.createElement('canvas'));
+    // The last call should have updated currentTexture
+    expect(runtime.currentTexture).toBe(texture);
+  });
+
+  it('skips bindTexture when texture is already current', () => {
+    const { state, gl } = createGlState();
+    const texture = {} as WebGLTexture;
+    getGlRenderStateRuntime(state).currentTexture = texture;
+    updateGlTexture(state, texture, document.createElement('canvas'));
+    expect(gl.bindTexture).not.toHaveBeenCalled();
+  });
+
+  it('always calls texImage2D to upload canvas data', () => {
+    const { state, gl } = createGlState();
+    const texture = {} as WebGLTexture;
+    getGlRenderStateRuntime(state).currentTexture = texture;
+    updateGlTexture(state, texture, document.createElement('canvas'));
+    expect(gl.texImage2D).toHaveBeenCalled();
+  });
+
+  it('sets premultiply alpha before uploading', () => {
+    const { state, gl } = createGlState();
+    const texture = {} as WebGLTexture;
+    getGlRenderStateRuntime(state).currentTexture = texture;
+    updateGlTexture(state, texture, document.createElement('canvas'));
+    expect(gl.pixelStorei).toHaveBeenCalledWith(
+      (gl as unknown as { UNPACK_PREMULTIPLY_ALPHA_WEBGL: number }).UNPACK_PREMULTIPLY_ALPHA_WEBGL,
+      true,
+    );
+  });
+});
+
+describe('useGlProgram', () => {
+  it('calls useProgram when no program is active', () => {
+    const { state, gl } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    runtime.currentProgram = null;
+    useGlProgram(state);
+    expect(gl.useProgram).toHaveBeenCalledWith(runtime.shaderLoc.program);
+  });
+
+  it('does not call useProgram when program is already active', () => {
+    const { state, gl } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    runtime.currentProgram = runtime.shaderLoc.program;
+    useGlProgram(state);
+    expect(gl.useProgram).not.toHaveBeenCalled();
+  });
+
+  it('stores the program as currentProgram after activation', () => {
+    const { state } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    runtime.currentProgram = null;
+    useGlProgram(state);
+    expect(runtime.currentProgram).toBe(runtime.shaderLoc.program);
+  });
+
+  it('uses the registered bitmap shader program and locations', () => {
+    const { state, gl } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    const shader = {
+      bind: vi.fn(),
+      locations: { ...runtime.shaderLoc, program: {} as WebGLProgram },
+      program: {} as WebGLProgram,
+    };
+    shader.locations.program = shader.program;
+
+    registerGlBitmapShader(state, shader);
+    useGlProgram(state);
+
+    expect(gl.useProgram).toHaveBeenCalledWith(shader.program);
+    expect(runtime.shaderLoc).toBe(shader.locations);
+    expect(runtime.currentProgram).toBe(shader.program);
+  });
+});

package/src/glElement.test.ts

@@ -0,0 +1,38 @@
+import { createGlCanvasElement } from './glElement';
+
+describe('createGlCanvasElement', () => {
+  it('returns an HTMLCanvasElement', () => {
+    const canvas = createGlCanvasElement(100, 200);
+    expect(canvas).toBeInstanceOf(HTMLCanvasElement);
+  });
+
+  it('sets pixel dimensions equal to logical size with default pixelRatio', () => {
+    const canvas = createGlCanvasElement(100, 200);
+    expect(canvas.width).toBe(100);
+    expect(canvas.height).toBe(200);
+  });
+
+  it('scales pixel dimensions by pixelRatio', () => {
+    const canvas = createGlCanvasElement(100, 200, 2);
+    expect(canvas.width).toBe(200);
+    expect(canvas.height).toBe(400);
+  });
+
+  it('sets CSS style width to the logical width', () => {
+    const canvas = createGlCanvasElement(100, 200, 2);
+    expect(canvas.style.width).toBe('100px');
+  });
+
+  it('sets CSS style height to the logical height', () => {
+    const canvas = createGlCanvasElement(100, 200, 2);
+    expect(canvas.style.height).toBe('200px');
+  });
+
+  it('keeps CSS dimensions unchanged regardless of pixelRatio', () => {
+    const canvas = createGlCanvasElement(300, 150, 3);
+    expect(canvas.style.width).toBe('300px');
+    expect(canvas.style.height).toBe('150px');
+    expect(canvas.width).toBe(900);
+    expect(canvas.height).toBe(450);
+  });
+});

package/src/glFullscreenPass.test.ts

@@ -0,0 +1,185 @@
+import type { GlRenderTarget } from '@flighthq/types';
+import { BlendMode } from '@flighthq/types';
+
+import { clearGlRenderTarget, compileGlFullscreenProgram, drawGlFullscreenPass } from './glFullscreenPass';
+import { getGlRenderStateRuntime } from './glRenderState';
+import { createGlState, makeGL } from './glTestHelper';
+
+const FRAG_SRC = `#version 300 es
+precision mediump float;
+in vec2 v_texCoord;
+uniform sampler2D u_texture;
+out vec4 fragColor;
+void main() {
+  fragColor = texture(u_texture, v_texCoord);
+}`;
+
+function makeTarget(framebuffer: WebGLFramebuffer, width = 32, height = 16): GlRenderTarget {
+  return {
+    width,
+    height,
+    format: 'rgba8',
+    sampleCount: 1,
+    framebuffer,
+    resolveFramebuffer: null,
+    textures: [],
+    texture: {} as WebGLTexture,
+    depthTexture: null,
+    colorRenderbuffers: [],
+    depthStencilRenderbuffer: null,
+  };
+}
+
+describe('clearGlRenderTarget', () => {
+  it('binds the target framebuffer and clears it', () => {
+    const { state, gl } = createGlState();
+    const fb = {} as WebGLFramebuffer;
+    const target = makeTarget(fb);
+    const bindSpy = vi.spyOn(gl, 'bindFramebuffer');
+    const clearSpy = vi.spyOn(gl, 'clear');
+
+    clearGlRenderTarget(state, target);
+
+    expect(bindSpy).toHaveBeenCalledWith(gl.FRAMEBUFFER, fb);
+    expect(clearSpy).toHaveBeenCalledWith(gl.COLOR_BUFFER_BIT);
+  });
+
+  it('sets the viewport and renderTargetViewport to the target size', () => {
+    const { state, gl } = createGlState();
+    const target = makeTarget({} as WebGLFramebuffer, 48, 24);
+    const viewportSpy = vi.spyOn(gl, 'viewport');
+
+    clearGlRenderTarget(state, target);
+
+    expect(viewportSpy).toHaveBeenCalledWith(0, 0, 48, 24);
+    expect(getGlRenderStateRuntime(state).renderTargetViewport).toEqual({ width: 48, height: 24 });
+  });
+
+  it('clears to fully transparent', () => {
+    const { state, gl } = createGlState();
+    const clearColorSpy = vi.spyOn(gl, 'clearColor');
+
+    clearGlRenderTarget(state, makeTarget({} as WebGLFramebuffer));
+
+    expect(clearColorSpy).toHaveBeenCalledWith(0, 0, 0, 0);
+  });
+
+  it('invalidates cached texture and blend-mode bindings', () => {
+    const { state } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    runtime.currentTexture = {} as WebGLTexture;
+    runtime.currentBlendMode = BlendMode.Add;
+
+    clearGlRenderTarget(state, makeTarget({} as WebGLFramebuffer));
+
+    expect(runtime.currentTexture).toBeNull();
+    expect(runtime.currentBlendMode).toBeNull();
+  });
+
+  it('skips rebinding when the target framebuffer is already current', () => {
+    const { state, gl } = createGlState();
+    const fb = {} as WebGLFramebuffer;
+    const runtime = getGlRenderStateRuntime(state);
+    runtime.currentFramebuffer = fb;
+    const bindSpy = vi.spyOn(gl, 'bindFramebuffer');
+
+    clearGlRenderTarget(state, makeTarget(fb));
+
+    expect(bindSpy).not.toHaveBeenCalled();
+  });
+});
+
+describe('compileGlFullscreenProgram', () => {
+  it('returns a program with position and texCoord attribute locations', () => {
+    const gl = makeGL();
+    const prog = compileGlFullscreenProgram(gl, FRAG_SRC);
+    expect(prog.program).toBeDefined();
+    expect(typeof prog.locPosition).toBe('number');
+    expect(typeof prog.locTexCoord).toBe('number');
+  });
+
+  it('collects u_texture0 sampler uniform locations', () => {
+    const gl = makeGL();
+    const prog = compileGlFullscreenProgram(gl, FRAG_SRC);
+    expect(prog.textures).toBeDefined();
+  });
+
+  it('throws when vertex shader compilation fails', () => {
+    const gl = makeGL();
+    (gl.getShaderParameter as ReturnType<typeof vi.fn>).mockReturnValueOnce(false);
+    expect(() => compileGlFullscreenProgram(gl, FRAG_SRC)).toThrow('shader compile error');
+  });
+
+  it('throws when program linking fails', () => {
+    const gl = makeGL();
+    (gl.getProgramParameter as ReturnType<typeof vi.fn>).mockReturnValue(false);
+    expect(() => compileGlFullscreenProgram(gl, FRAG_SRC)).toThrow('program link error');
+  });
+});
+
+describe('drawGlFullscreenPass', () => {
+  it('binds the destination framebuffer and sets its viewport', () => {
+    const { state, gl } = createGlState();
+    const program = compileGlFullscreenProgram(gl, FRAG_SRC);
+    const dest = makeTarget({} as WebGLFramebuffer, 40, 20);
+    const bindSpy = vi.spyOn(gl, 'bindFramebuffer');
+    const viewportSpy = vi.spyOn(gl, 'viewport');
+
+    drawGlFullscreenPass(state, program, [], dest, () => {});
+
+    expect(bindSpy).toHaveBeenCalledWith(gl.FRAMEBUFFER, dest.framebuffer);
+    expect(viewportSpy).toHaveBeenCalledWith(0, 0, 40, 20);
+    expect(getGlRenderStateRuntime(state).renderTargetViewport).toEqual({ width: 40, height: 20 });
+  });
+
+  it('targets the canvas and clears renderTargetViewport when dest is null', () => {
+    const { state, gl, canvas } = createGlState();
+    const program = compileGlFullscreenProgram(gl, FRAG_SRC);
+    const viewportSpy = vi.spyOn(gl, 'viewport');
+
+    drawGlFullscreenPass(state, program, [], null, () => {});
+
+    expect(viewportSpy).toHaveBeenCalledWith(0, 0, canvas.width, canvas.height);
+    expect(getGlRenderStateRuntime(state).renderTargetViewport).toBeNull();
+  });
+
+  it('binds each input texture to its sampler unit', () => {
+    const { state, gl } = createGlState();
+    const program = compileGlFullscreenProgram(gl, FRAG_SRC);
+    const inputs = [{} as WebGLTexture, {} as WebGLTexture];
+    const bindTextureSpy = vi.spyOn(gl, 'bindTexture');
+    const activeTextureSpy = vi.spyOn(gl, 'activeTexture');
+
+    drawGlFullscreenPass(state, program, inputs, null, () => {});
+
+    expect(activeTextureSpy).toHaveBeenCalledWith(gl.TEXTURE0);
+    expect(activeTextureSpy).toHaveBeenCalledWith(gl.TEXTURE0 + 1);
+    expect(bindTextureSpy).toHaveBeenCalledWith(gl.TEXTURE_2D, inputs[0]);
+    expect(bindTextureSpy).toHaveBeenCalledWith(gl.TEXTURE_2D, inputs[1]);
+  });
+
+  it('invokes the setUniforms callback before drawing', () => {
+    const { state, gl } = createGlState();
+    const program = compileGlFullscreenProgram(gl, FRAG_SRC);
+    const drawSpy = vi.spyOn(gl, 'drawElements');
+    const setUniforms = vi.fn(() => {
+      expect(drawSpy).not.toHaveBeenCalled();
+    });
+
+    drawGlFullscreenPass(state, program, [], null, setUniforms);
+
+    expect(setUniforms).toHaveBeenCalledWith(gl, program);
+    expect(drawSpy).toHaveBeenCalled();
+  });
+
+  it('sets premultiplied-alpha blending and invalidates the cached blend mode', () => {
+    const { state, gl } = createGlState();
+    const program = compileGlFullscreenProgram(gl, FRAG_SRC);
+    const blendSpy = vi.spyOn(gl, 'blendFunc');
+
+    drawGlFullscreenPass(state, program, [], null, () => {});
+
+    expect(blendSpy).toHaveBeenCalledWith(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    expect(getGlRenderStateRuntime(state).currentBlendMode).toBeNull();
+  });
+});

package/src/glMaterialRegistry.test.ts

@@ -0,0 +1,48 @@
+import type { GlMaterialRenderer, Material } from '@flighthq/types';
+import { DefaultMaterialKind } from '@flighthq/types';
+
+import { getGlMaterialRenderer, registerGlMaterialRenderer, resolveGlMaterialRenderer } from './glMaterialRegistry';
+import { createGlState } from './glTestHelper';
+
+const TestKind = 'TestMaterial';
+const testRenderer: GlMaterialRenderer = { instanceFloatCount: 0, bind() {} };
+
+function makeMaterial(kind: string): Material {
+  return { kind } as Material;
+}
+
+describe('getGlMaterialRenderer', () => {
+  it('returns null when nothing is registered for the kind', () => {
+    const { state } = createGlState();
+    expect(getGlMaterialRenderer(state, TestKind)).toBeNull();
+  });
+});
+
+describe('registerGlMaterialRenderer', () => {
+  it('registers a renderer retrievable by kind', () => {
+    const { state } = createGlState();
+    registerGlMaterialRenderer(state, TestKind, testRenderer);
+    expect(getGlMaterialRenderer(state, TestKind)).toBe(testRenderer);
+  });
+});
+
+describe('resolveGlMaterialRenderer', () => {
+  it('returns null when nothing is registered — no built-in fallback', () => {
+    const { state } = createGlState();
+    expect(resolveGlMaterialRenderer(state, null)).toBeNull();
+    expect(resolveGlMaterialRenderer(state, makeMaterial(TestKind))).toBeNull();
+  });
+
+  it('returns the registered renderer for a material kind', () => {
+    const { state } = createGlState();
+    registerGlMaterialRenderer(state, TestKind, testRenderer);
+    expect(resolveGlMaterialRenderer(state, makeMaterial(TestKind))).toBe(testRenderer);
+  });
+
+  it('falls back to the renderer registered for DefaultMaterialKind', () => {
+    const { state } = createGlState();
+    registerGlMaterialRenderer(state, DefaultMaterialKind, testRenderer);
+    expect(resolveGlMaterialRenderer(state, makeMaterial('Other'))).toBe(testRenderer);
+    expect(resolveGlMaterialRenderer(state, null)).toBe(testRenderer);
+  });
+});

package/src/glProgram.test.ts

@@ -0,0 +1,59 @@
+import { compileGlShader, createGlProgram, linkGlProgram } from './glProgram';
+import { makeGL } from './glTestHelper';
+
+describe('compileGlShader', () => {
+  it('compiles a shader of the requested type and returns it', () => {
+    const gl = makeGL();
+    const shader = compileGlShader(gl, gl.VERTEX_SHADER, 'void main(){}');
+    expect(shader).toBeDefined();
+    expect(gl.createShader).toHaveBeenCalledWith(gl.VERTEX_SHADER);
+    expect(gl.shaderSource).toHaveBeenCalledWith(shader, 'void main(){}');
+    expect(gl.compileShader).toHaveBeenCalledWith(shader);
+  });
+
+  it('throws with the label and info log when compilation fails', () => {
+    const gl = makeGL();
+    (gl.getShaderParameter as ReturnType<typeof vi.fn>).mockReturnValueOnce(false);
+    (gl.getShaderInfoLog as ReturnType<typeof vi.fn>).mockReturnValueOnce('bad source');
+    expect(() => compileGlShader(gl, gl.FRAGMENT_SHADER, 'x', 'Widget')).toThrow(
+      'Widget shader compile error: bad source',
+    );
+  });
+});
+
+describe('createGlProgram', () => {
+  it('compiles both stages, links, deletes the shaders, and returns the program', () => {
+    const gl = makeGL();
+    const program = createGlProgram(gl, 'void main(){}', 'void main(){}');
+    expect(program).toBeDefined();
+    expect(gl.createShader).toHaveBeenCalledWith(gl.VERTEX_SHADER);
+    expect(gl.createShader).toHaveBeenCalledWith(gl.FRAGMENT_SHADER);
+    expect(gl.attachShader).toHaveBeenCalledTimes(2);
+    expect(gl.linkProgram).toHaveBeenCalledWith(program);
+    expect(gl.deleteShader).toHaveBeenCalledTimes(2);
+  });
+
+  it('propagates a link failure as a labelled error', () => {
+    const gl = makeGL();
+    (gl.getProgramParameter as ReturnType<typeof vi.fn>).mockReturnValue(false);
+    (gl.getProgramInfoLog as ReturnType<typeof vi.fn>).mockReturnValueOnce('link failed');
+    expect(() => createGlProgram(gl, 'a', 'b', 'Widget')).toThrow('Widget program link error: link failed');
+  });
+});
+
+describe('linkGlProgram', () => {
+  it('links the program and does not throw on success', () => {
+    const gl = makeGL();
+    const program = gl.createProgram()!;
+    expect(() => linkGlProgram(gl, program)).not.toThrow();
+    expect(gl.linkProgram).toHaveBeenCalledWith(program);
+  });
+
+  it('throws with the label and info log when linking fails', () => {
+    const gl = makeGL();
+    const program = gl.createProgram()!;
+    (gl.getProgramParameter as ReturnType<typeof vi.fn>).mockReturnValue(false);
+    (gl.getProgramInfoLog as ReturnType<typeof vi.fn>).mockReturnValueOnce('no link');
+    expect(() => linkGlProgram(gl, program, 'Widget')).toThrow('Widget program link error: no link');
+  });
+});