@flighthq/render-gl 0.2.0 → 0.2.1-next.410.a23f189

package/src/glDraw.test.ts

@@ -1,8 +1,12 @@
-import { BlendMode } from '@flighthq/types';
+import type { ImageResource, SamplerLike, VideoTexture } from '@flighthq/types';
+import { AdvancedBlendMode, BlendMode } from '@flighthq/types';
 
+import { registerGlCompressedTextureDecoder, registerGlCompressedTextureUpload } from './glCompressedTexture';
 import {
   applyGlBlendMode,
+  bindGlImageResourceTexture,
   bindGlTexture,
+  bindGlVideoTexture,
   createGlTexture,
   drawGlQuad,
   enableGlBlendModeSupport,
@@ -17,6 +21,47 @@ import { getGlRenderStateRuntime } from './glRenderState';
 import { registerGlBitmapShader } from './glShaderRegistry';
 import { createGlState } from './glTestHelper';
 
+// A compressed-only ImageResource (single 4×4 bc3 level, no element/data) for exercising the opt-in
+// compressed upload seam.
+function compressedBc3ImageResource(): ImageResource {
+  return {
+    source: null,
+    data: null,
+    compressed: {
+      container: {
+        format: 'bc3',
+        width: 4,
+        height: 4,
+        depth: 1,
+        mipLevels: 1,
+        layers: 1,
+        faces: 1,
+        supercompression: 'None',
+        levels: [{ byteOffset: 0, byteLength: 16, width: 4, height: 4 }],
+      },
+      payload: new Uint8Array(16),
+    },
+    width: 4,
+    height: 4,
+    version: 1,
+    alphaType: 'straight',
+  } as unknown as ImageResource;
+}
+
+// A plain SamplerLike with the AAA sampling defaults (clamp/linear/trilinear/mips, anisotropy off),
+// mirroring createSampler in @flighthq/texture without pulling that package into render-gl's tests.
+function makeSampler(overrides?: Partial<SamplerLike>): SamplerLike {
+  return {
+    anisotropy: 1,
+    magFilter: 'linear',
+    minFilter: 'linear-mipmap-linear',
+    mipmaps: true,
+    wrapU: 'clamp-to-edge',
+    wrapV: 'clamp-to-edge',
+    ...overrides,
+  };
+}
+
 describe('applyGlBlendMode', () => {
   it('does not call blendFunc when blend mode has not changed', () => {
     const { state, gl } = createGlState();
@@ -50,14 +95,6 @@ describe('applyGlBlendMode', () => {
     expect(gl.blendFunc).toHaveBeenCalledWith(g.DST_COLOR, g.ONE_MINUS_SRC_ALPHA);
   });
 
-  it('sets (ONE, ZERO) for BlendMode.None', () => {
-    const { state, gl } = createGlState();
-    registerDefaultGlBlendModes(state);
-    applyGlBlendMode(state, BlendMode.None);
-    const g = gl as unknown as { ONE: number; ZERO: number };
-    expect(gl.blendFunc).toHaveBeenCalledWith(g.ONE, g.ZERO);
-  });
-
   it('sets (ONE, ONE_MINUS_SRC_COLOR) for BlendMode.Screen', () => {
     const { state, gl } = createGlState();
     registerDefaultGlBlendModes(state);
@@ -84,23 +121,6 @@ describe('applyGlBlendMode', () => {
     expect(gl.blendFunc).toHaveBeenCalledWith(g.ONE, g.ONE);
   });
 
-  it('sets the reverse-subtract equation with (ONE, ONE) for BlendMode.Subtract', () => {
-    const { state, gl } = createGlState();
-    registerDefaultGlBlendModes(state);
-    applyGlBlendMode(state, BlendMode.Subtract);
-    const g = gl as unknown as { ONE: number; FUNC_REVERSE_SUBTRACT: number };
-    expect(gl.blendEquation).toHaveBeenCalledWith(g.FUNC_REVERSE_SUBTRACT);
-    expect(gl.blendFunc).toHaveBeenCalledWith(g.ONE, g.ONE);
-  });
-
-  it('sets (ZERO, ONE_MINUS_SRC_ALPHA) for BlendMode.Erase', () => {
-    const { state, gl } = createGlState();
-    registerDefaultGlBlendModes(state);
-    applyGlBlendMode(state, BlendMode.Erase);
-    const g = gl as unknown as { ZERO: number; ONE_MINUS_SRC_ALPHA: number };
-    expect(gl.blendFunc).toHaveBeenCalledWith(g.ZERO, g.ONE_MINUS_SRC_ALPHA);
-  });
-
   it('resets the blend equation to FUNC_ADD for a mode that does not carry one', () => {
     const { state, gl } = createGlState();
     registerDefaultGlBlendModes(state);
@@ -113,7 +133,7 @@ describe('applyGlBlendMode', () => {
   it('falls back to normal blend for a mode with no registered realization', () => {
     const { state, gl } = createGlState();
     registerDefaultGlBlendModes(state);
-    applyGlBlendMode(state, BlendMode.Overlay);
+    applyGlBlendMode(state, AdvancedBlendMode.Overlay);
     const g = gl as unknown as { ONE: number; ONE_MINUS_SRC_ALPHA: number };
     expect(gl.blendFunc).toHaveBeenCalledWith(g.ONE, g.ONE_MINUS_SRC_ALPHA);
   });
@@ -141,6 +161,78 @@ describe('applyGlBlendMode', () => {
   });
 });
 
+describe('bindGlImageResourceTexture', () => {
+  function dataResource(size: number, version: number): ImageResource {
+    return {
+      source: null,
+      data: new Uint8ClampedArray(size * size * 4),
+      width: size,
+      height: size,
+      version,
+      alphaType: 'straight',
+    } as unknown as ImageResource;
+  }
+
+  it('uploads a data-only ImageResource (a generated Surface) via the raw-pixel path', () => {
+    const { state, gl } = createGlState();
+    bindGlImageResourceTexture(state, dataResource(4, 1));
+    expect(gl.createTexture).toHaveBeenCalled();
+    expect(gl.texImage2D).toHaveBeenCalled();
+  });
+
+  it('uploads an element-backed ImageResource via the element path', () => {
+    const { state, gl } = createGlState();
+    const image = {
+      source: document.createElement('img'),
+      data: null,
+      width: 1,
+      height: 1,
+      version: 1,
+      alphaType: 'straight',
+    } as unknown as ImageResource;
+    bindGlImageResourceTexture(state, image);
+    expect(gl.texImage2D).toHaveBeenCalled();
+  });
+
+  it('caches by resource identity and re-uploads only when the version changes', () => {
+    const { state, gl } = createGlState();
+    const image = dataResource(1, 1);
+    const t1 = bindGlImageResourceTexture(state, image);
+    const uploads = (gl.texImage2D as ReturnType<typeof vi.fn>).mock.calls.length;
+    const t2 = bindGlImageResourceTexture(state, image);
+    expect(t2).toBe(t1);
+    expect((gl.texImage2D as ReturnType<typeof vi.fn>).mock.calls.length).toBe(uploads);
+    image.version = 2;
+    bindGlImageResourceTexture(state, image);
+    expect((gl.texImage2D as ReturnType<typeof vi.fn>).mock.calls.length).toBe(uploads + 1);
+  });
+
+  it('routes a compressed-only ImageResource through the registered compressed upload seam (decode fallback)', () => {
+    // The device mock exposes no block extension, so the compressed container falls back to the
+    // registered RGBA decoder and uploads via texImage2D — proving the real bind/draw path reaches the
+    // installed compressed uploader, not just the raw data/element branches.
+    const { state, gl } = createGlState();
+    const rgba = new Uint8ClampedArray(4 * 4 * 4);
+    const decode = vi.fn(() => rgba);
+    registerGlCompressedTextureUpload(state);
+    registerGlCompressedTextureDecoder(state, decode);
+    const image = compressedBc3ImageResource();
+    bindGlImageResourceTexture(state, image);
+    expect(decode).toHaveBeenCalledWith('bc3', 4, 4, expect.any(Uint8Array));
+    expect(gl.texImage2D).toHaveBeenCalled();
+  });
+
+  it('skips a compressed-only ImageResource when no compressed uploader is registered', () => {
+    // The compressed path is an opt-in seam: without registerGlCompressedTextureUpload, a compressed
+    // resource uploads nothing (the enum table tree-shakes out of a bitmap-only bundle) rather than
+    // reaching texImage2D.
+    const { state, gl } = createGlState();
+    bindGlImageResourceTexture(state, compressedBc3ImageResource());
+    expect(gl.texImage2D).not.toHaveBeenCalled();
+    expect(gl.compressedTexImage2D).not.toHaveBeenCalled();
+  });
+});
+
 describe('bindGlTexture', () => {
   it('creates a new texture for an uncached image source', () => {
     const { state, gl } = createGlState();
@@ -206,6 +298,198 @@ describe('bindGlTexture', () => {
     expect(gl.bindTexture).toHaveBeenCalledWith((gl as unknown as { TEXTURE_2D: number }).TEXTURE_2D, texture);
     expect(runtime.currentTexture).toBe(texture);
   });
+
+  it('rebinds a cached texture even when it is already current, for multi-unit correctness', () => {
+    // The same image reused as two maps (e.g. normal + metallic-roughness) is bound to two active
+    // units in a row; currentTexture is unit-blind, so a skip would leave the second unit unbound.
+    const { state, gl } = createGlState();
+    const img = document.createElement('img');
+    const texture = bindGlTexture(state, img);
+    const g = gl as unknown as { TEXTURE_2D: number };
+    const bindsBefore = (gl.bindTexture as ReturnType<typeof vi.fn>).mock.calls.filter((c) => c[1] === texture).length;
+    // currentTexture === texture here; the second bind (a different active unit in practice) must not skip.
+    bindGlTexture(state, img);
+    const bindsAfter = (gl.bindTexture as ReturnType<typeof vi.fn>).mock.calls.filter((c) => c[1] === texture).length;
+    expect(bindsAfter).toBe(bindsBefore + 1);
+    expect(gl.bindTexture).toHaveBeenLastCalledWith(g.TEXTURE_2D, texture);
+  });
+
+  it('defaults both wrap modes to clamp-to-edge', () => {
+    const { state, gl } = createGlState();
+    bindGlTexture(state, document.createElement('img'));
+    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('applies the sampler wrap mode — repeat → REPEAT — so tiled uvs actually repeat', () => {
+    const { state, gl } = createGlState();
+    bindGlTexture(state, document.createElement('img'), makeSampler({ wrapU: 'repeat', wrapV: 'repeat' }));
+    const g = gl as unknown as { TEXTURE_2D: number; TEXTURE_WRAP_S: number; TEXTURE_WRAP_T: number; REPEAT: number };
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_WRAP_S, g.REPEAT);
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_WRAP_T, g.REPEAT);
+  });
+
+  it('maps mirror-repeat to MIRRORED_REPEAT', () => {
+    const { state, gl } = createGlState();
+    bindGlTexture(
+      state,
+      document.createElement('img'),
+      makeSampler({ wrapU: 'mirror-repeat', wrapV: 'mirror-repeat' }),
+    );
+    const g = gl as unknown as {
+      TEXTURE_2D: number;
+      TEXTURE_WRAP_S: number;
+      TEXTURE_WRAP_T: number;
+      MIRRORED_REPEAT: number;
+    };
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_WRAP_S, g.MIRRORED_REPEAT);
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_WRAP_T, g.MIRRORED_REPEAT);
+  });
+
+  it('re-applies wrap on a cache hit so a shared image follows the current draw sampler', () => {
+    // The torus in basic-shading reuses one jpg as both normal and metallic-roughness; if wrap were
+    // baked only at upload, the second material would inherit the first's wrap. Re-applying per bind
+    // means a repeat draw then a clamp draw each set their own wrap on the shared cached texture.
+    const { state, gl } = createGlState();
+    const img = document.createElement('img');
+    bindGlTexture(state, img, makeSampler({ wrapU: 'repeat', wrapV: 'repeat' }));
+    bindGlTexture(state, img, makeSampler({ wrapU: 'clamp-to-edge', wrapV: 'clamp-to-edge' }));
+    const g = gl as unknown as {
+      TEXTURE_2D: number;
+      TEXTURE_WRAP_S: number;
+      REPEAT: number;
+      CLAMP_TO_EDGE: number;
+    };
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_WRAP_S, g.REPEAT);
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_WRAP_S, g.CLAMP_TO_EDGE);
+  });
+
+  it('falls back to the allowSmoothing LINEAR filter and clamp-to-edge when no sampler is given', () => {
+    // The 2D bitmap/sprite path passes no sampler and must keep its historical bilinear, no-mip,
+    // clamp default — a material sampler never leaks into it.
+    const { state, gl } = createGlState({ allowSmoothing: true });
+    bindGlTexture(state, document.createElement('img'));
+    const g = gl as unknown as {
+      TEXTURE_2D: number;
+      TEXTURE_MIN_FILTER: number;
+      TEXTURE_MAG_FILTER: number;
+      TEXTURE_WRAP_S: number;
+      LINEAR: number;
+      CLAMP_TO_EDGE: 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);
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_WRAP_S, g.CLAMP_TO_EDGE);
+    expect(gl.generateMipmap).not.toHaveBeenCalled();
+  });
+
+  it('applies the sampler min/mag filter and generates a mip chain for a trilinear sampler', () => {
+    const { state, gl } = createGlState({ allowSmoothing: false });
+    bindGlTexture(state, document.createElement('img'), makeSampler());
+    const g = gl as unknown as {
+      TEXTURE_2D: number;
+      TEXTURE_MIN_FILTER: number;
+      TEXTURE_MAG_FILTER: number;
+      LINEAR: number;
+      LINEAR_MIPMAP_LINEAR: number;
+    };
+    // Sampler filters win over the state's allowSmoothing flag for material textures.
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_MIN_FILTER, g.LINEAR_MIPMAP_LINEAR);
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_MAG_FILTER, g.LINEAR);
+    expect(gl.generateMipmap).toHaveBeenCalledWith(g.TEXTURE_2D);
+  });
+
+  it('collapses a mip-named min filter to LINEAR and skips mip generation when mipmaps is false', () => {
+    // minFilter names a mip level but mipmaps is off: selecting an absent chain would render black, so
+    // the filter must fall back to the base level and generateMipmap must not run.
+    const { state, gl } = createGlState();
+    bindGlTexture(state, document.createElement('img'), makeSampler({ mipmaps: false }));
+    const g = gl as unknown as { TEXTURE_2D: number; TEXTURE_MIN_FILTER: number; LINEAR: number };
+    expect(gl.texParameteri).toHaveBeenCalledWith(g.TEXTURE_2D, g.TEXTURE_MIN_FILTER, g.LINEAR);
+    expect(gl.generateMipmap).not.toHaveBeenCalled();
+  });
+
+  it('generates the mip chain only once for a texture bound repeatedly', () => {
+    const { state, gl } = createGlState();
+    const img = document.createElement('img');
+    bindGlTexture(state, img, makeSampler());
+    bindGlTexture(state, img, makeSampler());
+    expect((gl.generateMipmap as ReturnType<typeof vi.fn>).mock.calls.length).toBe(1);
+  });
+
+  it('applies clamped anisotropy through EXT_texture_filter_anisotropic when supported', () => {
+    const { state, gl } = createGlState();
+    const ext = { TEXTURE_MAX_ANISOTROPY_EXT: 0x84fe, MAX_TEXTURE_MAX_ANISOTROPY_EXT: 0x84ff };
+    (gl.getExtension as ReturnType<typeof vi.fn>).mockImplementation((name: string) =>
+      name === 'EXT_texture_filter_anisotropic' ? ext : null,
+    );
+    (gl.getParameter as ReturnType<typeof vi.fn>).mockImplementation((p: number) =>
+      p === ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT ? 8 : undefined,
+    );
+    bindGlTexture(state, document.createElement('img'), makeSampler({ anisotropy: 16 }));
+    const g = gl as unknown as { TEXTURE_2D: number };
+    // Requested 16 clamps to the hardware max of 8.
+    expect(gl.texParameterf).toHaveBeenCalledWith(g.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, 8);
+  });
+
+  it('skips anisotropy setup when the extension is unavailable', () => {
+    const { state, gl } = createGlState();
+    (gl.getExtension as ReturnType<typeof vi.fn>).mockImplementation(() => null);
+    bindGlTexture(state, document.createElement('img'), makeSampler({ anisotropy: 16 }));
+    expect(gl.texParameterf).not.toHaveBeenCalled();
+  });
+});
+
+describe('bindGlVideoTexture', () => {
+  function videoTexture(frameId: number, readyState = 4, videoWidth = 320, videoHeight = 240): VideoTexture {
+    return {
+      frameId,
+      sampler: null,
+      source: { element: { readyState, videoWidth, videoHeight } as unknown as HTMLVideoElement },
+    } as unknown as VideoTexture;
+  }
+
+  it('creates a texture, uploads the current frame, and caches by VideoTexture identity', () => {
+    const { state, gl } = createGlState();
+    const vt = videoTexture(3);
+    const t1 = bindGlVideoTexture(state, vt);
+    expect(gl.createTexture).toHaveBeenCalled();
+    expect(gl.texImage2D).toHaveBeenCalledWith(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, vt.source.element);
+    const t2 = bindGlVideoTexture(state, vt);
+    expect(t2).toBe(t1);
+  });
+
+  it('re-uploads only when the frameId advances (the dirty-gate)', () => {
+    const { state, gl } = createGlState();
+    const vt = videoTexture(1);
+    bindGlVideoTexture(state, vt);
+    const uploads = (gl.texImage2D as ReturnType<typeof vi.fn>).mock.calls.length;
+    bindGlVideoTexture(state, vt);
+    expect((gl.texImage2D as ReturnType<typeof vi.fn>).mock.calls.length).toBe(uploads);
+    vt.frameId = 2;
+    bindGlVideoTexture(state, vt);
+    expect((gl.texImage2D as ReturnType<typeof vi.fn>).mock.calls.length).toBe(uploads + 1);
+  });
+
+  it('does not upload when the element has no decoded frame yet', () => {
+    const { state, gl } = createGlState();
+    bindGlVideoTexture(state, videoTexture(1, 1, 0, 0));
+    expect(gl.texImage2D).not.toHaveBeenCalled();
+  });
+
+  it('applies the VideoTexture sampler when no explicit sampler is passed', () => {
+    const { state, gl } = createGlState();
+    const vt = videoTexture(1);
+    (vt as { sampler: SamplerLike }).sampler = makeSampler({ wrapU: 'repeat' });
+    bindGlVideoTexture(state, vt);
+    expect(gl.texParameteri).toHaveBeenCalledWith(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+  });
 });
 
 describe('createGlTexture', () => {
@@ -346,10 +630,10 @@ describe('isBlendModeSupported', () => {
     expect(isBlendModeSupported(state, BlendMode.Screen)).toBe(true);
   });
 
-  it('returns false for a built-in with no fixed-function realization', () => {
+  it('returns false for an advanced mode with no fixed-function realization', () => {
     const { state } = createGlState();
     registerDefaultGlBlendModes(state);
-    expect(isBlendModeSupported(state, BlendMode.Overlay)).toBe(false);
+    expect(isBlendModeSupported(state, AdvancedBlendMode.Overlay)).toBe(false);
   });
 
   it('returns true for a custom registered mode', () => {
@@ -365,23 +649,20 @@ describe('registerDefaultGlBlendModes', () => {
     registerDefaultGlBlendModes(state);
     for (const mode of [
       BlendMode.Normal,
-      BlendMode.Layer,
       BlendMode.Add,
       BlendMode.Multiply,
       BlendMode.Screen,
       BlendMode.Darken,
       BlendMode.Lighten,
-      BlendMode.Subtract,
-      BlendMode.Erase,
     ]) {
       expect(isBlendModeSupported(state, mode)).toBe(true);
     }
   });
 
-  it('does not register the shader-only modes', () => {
+  it('does not register the shader-composited or unary modes', () => {
     const { state } = createGlState();
     registerDefaultGlBlendModes(state);
-    for (const mode of [BlendMode.Overlay, BlendMode.HardLight, BlendMode.Difference, BlendMode.Invert]) {
+    for (const mode of [AdvancedBlendMode.Overlay, AdvancedBlendMode.HardLight, AdvancedBlendMode.Difference]) {
       expect(isBlendModeSupported(state, mode)).toBe(false);
     }
   });
@@ -449,12 +730,14 @@ describe('updateGlTexture', () => {
     expect(runtime.currentTexture).toBe(texture);
   });
 
-  it('skips bindTexture when texture is already current', () => {
+  it('rebinds even when the texture is already current (currentTexture is unit-blind)', () => {
     const { state, gl } = createGlState();
     const texture = {} as WebGLTexture;
     getGlRenderStateRuntime(state).currentTexture = texture;
     updateGlTexture(state, texture, document.createElement('canvas'));
-    expect(gl.bindTexture).not.toHaveBeenCalled();
+    // Never skip on currentTexture: the active unit may have changed since it was set, so uploading
+    // without rebinding could target the wrong texture.
+    expect(gl.bindTexture).toHaveBeenCalledWith((gl as unknown as { TEXTURE_2D: number }).TEXTURE_2D, texture);
   });
 
   it('always calls texImage2D to upload canvas data', () => {

package/src/glFullscreenPass.test.ts

@@ -19,6 +19,9 @@ function makeTarget(framebuffer: WebGLFramebuffer, width = 32, height = 16): GlR
     width,
     height,
     format: 'rgba8',
+    colorSpace: 'srgb',
+    clearColors: [],
+    clearDepth: 1,
     sampleCount: 1,
     framebuffer,
     resolveFramebuffer: null,
@@ -172,14 +175,32 @@ describe('drawGlFullscreenPass', () => {
     expect(drawSpy).toHaveBeenCalled();
   });
 
-  it('sets premultiplied-alpha blending and invalidates the cached blend mode', () => {
+  it('sets premultiplied-alpha blending and caches the normal blend mode', () => {
     const { state, gl } = createGlState();
     const program = compileGlFullscreenProgram(gl, FRAG_SRC);
     const blendSpy = vi.spyOn(gl, 'blendFunc');
+    const blendEquationSpy = vi.spyOn(gl, 'blendEquation');
 
     drawGlFullscreenPass(state, program, [], null, () => {});
 
     expect(blendSpy).toHaveBeenCalledWith(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    expect(blendEquationSpy).toHaveBeenCalledWith(gl.FUNC_ADD);
+    expect(getGlRenderStateRuntime(state).currentBlendMode).toBeNull();
+  });
+
+  it('restores normal blending when setUniforms overrides the blend function', () => {
+    const { state, gl } = createGlState();
+    const program = compileGlFullscreenProgram(gl, FRAG_SRC);
+    const blendSpy = vi.spyOn(gl, 'blendFunc');
+    const blendEquationSpy = vi.spyOn(gl, 'blendEquation');
+
+    drawGlFullscreenPass(state, program, [], null, (gl) => {
+      gl.blendFunc(gl.ZERO, gl.ONE_MINUS_SRC_ALPHA);
+    });
+
+    expect(blendSpy).toHaveBeenCalledWith(gl.ZERO, gl.ONE_MINUS_SRC_ALPHA);
+    expect(blendSpy).toHaveBeenLastCalledWith(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    expect(blendEquationSpy).toHaveBeenLastCalledWith(gl.FUNC_ADD);
     expect(getGlRenderStateRuntime(state).currentBlendMode).toBeNull();
   });
 });

package/src/glLinearToSrgbPass.test.ts

@@ -0,0 +1,75 @@
+import type { GlRenderTarget } from '@flighthq/types';
+
+import { drawGlLinearToSrgbPass, LINEAR_TO_SRGB_FRAGMENT_SRC } from './glLinearToSrgbPass';
+import { createGlState } from './glTestHelper';
+
+function makeTarget(framebuffer: WebGLFramebuffer, texture: WebGLTexture, width = 32, height = 16): GlRenderTarget {
+  return {
+    width,
+    height,
+    format: 'rgba16f',
+    colorSpace: 'linear',
+    clearColors: [],
+    clearDepth: 1,
+    sampleCount: 1,
+    framebuffer,
+    resolveFramebuffer: null,
+    textures: [],
+    texture,
+    depthTexture: null,
+    colorRenderbuffers: [],
+    depthStencilRenderbuffer: null,
+  };
+}
+
+describe('drawGlLinearToSrgbPass', () => {
+  it('binds the source texture and draws to the canvas when dest is null', () => {
+    const { state, gl, canvas } = createGlState();
+    const source = makeTarget({} as WebGLFramebuffer, { id: 'src' } as unknown as WebGLTexture);
+    const bindTexture = vi.spyOn(gl, 'bindTexture');
+    const viewport = vi.spyOn(gl, 'viewport');
+    const drawElements = vi.spyOn(gl, 'drawElements');
+
+    drawGlLinearToSrgbPass(state, source, null);
+
+    expect(bindTexture).toHaveBeenCalledWith(gl.TEXTURE_2D, source.texture);
+    // dest === null presents to the canvas, so the viewport covers the full canvas.
+    expect(viewport).toHaveBeenCalledWith(0, 0, canvas.width, canvas.height);
+    expect(drawElements).toHaveBeenCalled();
+  });
+
+  it('presents into dest when a target is given', () => {
+    const { state, gl } = createGlState();
+    const source = makeTarget({} as WebGLFramebuffer, { id: 'src' } as unknown as WebGLTexture);
+    const dest = makeTarget({ id: 'destFb' } as unknown as WebGLFramebuffer, { id: 'dst' } as unknown as WebGLTexture);
+    const bindFramebuffer = vi.spyOn(gl, 'bindFramebuffer');
+
+    drawGlLinearToSrgbPass(state, source, dest);
+
+    expect(bindFramebuffer).toHaveBeenCalledWith(gl.FRAMEBUFFER, dest.framebuffer);
+  });
+
+  it('compiles its program once per state and reuses it across frames', () => {
+    const { state, gl } = createGlState();
+    const source = makeTarget({} as WebGLFramebuffer, {} as WebGLTexture);
+    const createProgram = vi.spyOn(gl, 'createProgram');
+
+    drawGlLinearToSrgbPass(state, source, null);
+    drawGlLinearToSrgbPass(state, source, null);
+    drawGlLinearToSrgbPass(state, source, null);
+
+    expect(createProgram).toHaveBeenCalledTimes(1);
+  });
+
+  it('encodes the exact IEC 61966-2-1 sRGB OETF constants (parity with color.linearChannelToSrgb)', () => {
+    // Guards against the shader drifting from @flighthq/color's canonical transfer, which cannot be
+    // executed here (jsdom does not compile GLSL). The constants are the piecewise sRGB OETF.
+    expect(LINEAR_TO_SRGB_FRAGMENT_SRC).toContain('0.0031308');
+    expect(LINEAR_TO_SRGB_FRAGMENT_SRC).toContain('12.92');
+    expect(LINEAR_TO_SRGB_FRAGMENT_SRC).toContain('1.055');
+    expect(LINEAR_TO_SRGB_FRAGMENT_SRC).toContain('1.0 / 2.4');
+    expect(LINEAR_TO_SRGB_FRAGMENT_SRC).toContain('0.055');
+    // Alpha must pass through unencoded — it is linear coverage, not a color channel.
+    expect(LINEAR_TO_SRGB_FRAGMENT_SRC).toContain('linear.a');
+  });
+});

package/src/glPresentRenderTarget.test.ts

@@ -0,0 +1,62 @@
+import type { GlRenderTarget } from '@flighthq/types';
+
+import { presentGlRenderTarget } from './glPresentRenderTarget';
+import { createGlState } from './glTestHelper';
+
+function makeTarget(colorSpace: 'linear' | 'srgb', texture: WebGLTexture): GlRenderTarget {
+  return {
+    width: 32,
+    height: 16,
+    format: colorSpace === 'linear' ? 'rgba16f' : 'rgba8',
+    colorSpace,
+    clearColors: [],
+    clearDepth: 1,
+    sampleCount: 1,
+    framebuffer: {} as WebGLFramebuffer,
+    resolveFramebuffer: null,
+    textures: [texture],
+    texture,
+    depthTexture: null,
+    colorRenderbuffers: [],
+    depthStencilRenderbuffer: null,
+  };
+}
+
+describe('presentGlRenderTarget', () => {
+  it('encodes a linear target to sRGB and draws to the canvas when dest is null', () => {
+    const { state, gl, canvas } = createGlState();
+    const source = makeTarget('linear', { id: 'lin' } as unknown as WebGLTexture);
+    const bindTexture = vi.spyOn(gl, 'bindTexture');
+    const viewport = vi.spyOn(gl, 'viewport');
+    const drawElements = vi.spyOn(gl, 'drawElements');
+
+    presentGlRenderTarget(state, source);
+
+    expect(bindTexture).toHaveBeenCalledWith(gl.TEXTURE_2D, source.texture);
+    expect(viewport).toHaveBeenCalledWith(0, 0, canvas.width, canvas.height);
+    expect(drawElements).toHaveBeenCalled();
+  });
+
+  it('copies an srgb target straight through (already encoded, no OETF pass)', () => {
+    const { state, gl } = createGlState();
+    const source = makeTarget('srgb', { id: 'srgb' } as unknown as WebGLTexture);
+    const bindTexture = vi.spyOn(gl, 'bindTexture');
+    const drawElements = vi.spyOn(gl, 'drawElements');
+
+    presentGlRenderTarget(state, source);
+
+    expect(bindTexture).toHaveBeenCalledWith(gl.TEXTURE_2D, source.texture);
+    expect(drawElements).toHaveBeenCalled();
+  });
+
+  it('presents into dest when a target is given', () => {
+    const { state, gl } = createGlState();
+    const source = makeTarget('srgb', { id: 'srgb' } as unknown as WebGLTexture);
+    const dest = makeTarget('srgb', { id: 'dst' } as unknown as WebGLTexture);
+    const bindFramebuffer = vi.spyOn(gl, 'bindFramebuffer');
+
+    presentGlRenderTarget(state, source, dest);
+
+    expect(bindFramebuffer).toHaveBeenCalledWith(gl.FRAMEBUFFER, dest.framebuffer);
+  });
+});

package/src/glReadback.test.ts

@@ -8,6 +8,7 @@ function makeTarget(overrides?: Partial<GlRenderTarget>): GlRenderTarget {
     width: 4,
     height: 4,
     format: 'rgba8',
+    colorSpace: 'srgb',
     sampleCount: 1,
     framebuffer: {} as WebGLFramebuffer,
     resolveFramebuffer: null,