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

package/dist/glVideo.js

@@ -1,55 +1,57 @@
-import { createGlTexture, drawGlQuad, useGlProgram } from '@flighthq/render-gl';
-import { getGlRenderStateRuntime } from '@flighthq/render-gl';
-import { resolveGlShader } from '@flighthq/render-gl';
+import { bindGlVideoTexture, drawGlQuad, getGlRenderStateRuntime, resolveGlShader, useGlProgram, } from '@flighthq/render-gl';
+import { advanceVideoTexture, createVideoTexture } from '@flighthq/texture';
 import { flushGlSpriteBatch } from './glSpriteBatch';
 export function createGlVideoData(_state, _source) {
-    return { lastElement: null };
+    return { source: null, videoTexture: null };
 }
-// Frees the GPU texture uploaded for this video's element when the node is torn down via
-// disposeDisplayObjectRender. The element-keyed textureCache entry would otherwise leak.
+// Frees the GPU texture the VideoTexture uploaded through when the node is torn down via
+// disposeDisplayObjectRender. The VideoTexture-keyed videoTextureCache entry would otherwise leak.
 export function destroyGlVideoData(state, data) {
     const runtime = getGlRenderStateRuntime(state);
-    const { lastElement } = data;
-    if (lastElement === null)
+    const { videoTexture } = data;
+    if (videoTexture === null)
         return;
-    const texture = runtime.textureCache.get(lastElement);
-    if (texture !== undefined) {
-        state.gl.deleteTexture(texture);
-        runtime.textureCache.delete(lastElement);
+    const cache = runtime.videoTextureCache;
+    const entry = cache?.get(videoTexture);
+    if (entry !== undefined) {
+        state.gl.deleteTexture(entry.texture);
+        cache.delete(videoTexture);
     }
 }
 export function drawGlVideo(state, renderProxy) {
-    const runtime = getGlRenderStateRuntime(state);
     flushGlSpriteBatch(state);
     const source = renderProxy.source;
-    const element = source.data.source?.element;
-    if (element === undefined || element === null || element.readyState < 2)
+    const resource = source.data.source ?? null;
+    const element = resource?.element ?? null;
+    if (resource === null || element === null || element.readyState < 2)
         return;
     const vw = element.videoWidth;
     const vh = element.videoHeight;
     if (vw === 0 || vh === 0)
         return;
-    if (renderProxy.rendererData !== null) {
-        renderProxy.rendererData.lastElement = element;
+    const data = renderProxy.rendererData;
+    // Rebuild the VideoTexture when the node's stream swaps (or on the first draw), so the new stream's
+    // frameId gate starts fresh and its first frame uploads.
+    let videoTexture;
+    if (data !== null && data.videoTexture !== null && data.source === resource) {
+        videoTexture = data.videoTexture;
+    }
+    else {
+        videoTexture = createVideoTexture(resource);
+        if (data !== null) {
+            data.source = resource;
+            data.videoTexture = videoTexture;
+        }
     }
-    const gl = state.gl;
-    const { textureCache } = runtime;
+    // The element decodes a new frame each rendered tick; bump the revision so bindGlVideoTexture's gate
+    // re-uploads this frame. A frame that has not advanced (a driver that only bumps on a real decode)
+    // would skip the upload — here the display node advances every draw to match the element's live pixels.
+    advanceVideoTexture(videoTexture);
     const shader = resolveGlShader(state, renderProxy);
     useGlProgram(state, shader);
     state.applyBlendMode?.(state, renderProxy.blendMode);
-    let texture = textureCache.get(element);
-    if (!texture) {
-        texture = createGlTexture(state);
-        textureCache.set(element, texture);
-    }
-    else {
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        runtime.currentTexture = texture;
-    }
-    // Upload current frame every time — video content changes each frame.
-    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, element);
-    shader.bind(gl, state, renderProxy);
+    bindGlVideoTexture(state, videoTexture);
+    shader.bind(state.gl, state, renderProxy);
     drawGlQuad(state, 0, 0, vw, vh, 0, 0, 1, 1);
 }
 export const defaultGlVideoRenderer = {

package/dist/glVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"glVideo.js","sourceRoot":"","sources":["../src/glVideo.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"glVideo.js","sourceRoot":"","sources":["../src/glVideo.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flighthq/displayobject-gl",
-  "version": "0.2.0",
+  "version": "0.2.1-next.410.a23f189",
   "repository": {
     "type": "git",
     "url": "https://github.com/flighthq/flight.git",
@@ -32,21 +32,23 @@
     "clean:dist": "tsx ../../scripts/clean-package-dist.ts"
   },
   "dependencies": {
-    "@flighthq/displayobject": "0.2.0",
-    "@flighthq/displayobject-canvas": "0.2.0",
-    "@flighthq/geometry": "0.2.0",
-    "@flighthq/log": "0.2.0",
-    "@flighthq/materials": "0.2.0",
-    "@flighthq/node": "0.2.0",
-    "@flighthq/path": "0.2.0",
-    "@flighthq/render": "0.2.0",
-    "@flighthq/render-gl": "0.2.0",
-    "@flighthq/shape": "0.2.0",
-    "@flighthq/text": "0.2.0",
-    "@flighthq/textinput": "0.2.0",
-    "@flighthq/textlayout": "0.2.0",
-    "@flighthq/types": "0.2.0",
-    "@flighthq/velocity": "0.2.0"
+    "@flighthq/color": "0.2.1-next.410.a23f189",
+    "@flighthq/displayobject": "0.2.1-next.410.a23f189",
+    "@flighthq/displayobject-canvas": "0.2.1-next.410.a23f189",
+    "@flighthq/geometry": "0.2.1-next.410.a23f189",
+    "@flighthq/image": "0.2.1-next.410.a23f189",
+    "@flighthq/log": "0.2.1-next.410.a23f189",
+    "@flighthq/node": "0.2.1-next.410.a23f189",
+    "@flighthq/path": "0.2.1-next.410.a23f189",
+    "@flighthq/render": "0.2.1-next.410.a23f189",
+    "@flighthq/render-gl": "0.2.1-next.410.a23f189",
+    "@flighthq/shape": "0.2.1-next.410.a23f189",
+    "@flighthq/text": "0.2.1-next.410.a23f189",
+    "@flighthq/textinput": "0.2.1-next.410.a23f189",
+    "@flighthq/textlayout": "0.2.1-next.410.a23f189",
+    "@flighthq/texture": "0.2.1-next.410.a23f189",
+    "@flighthq/types": "0.2.1-next.410.a23f189",
+    "@flighthq/velocity": "0.2.1-next.410.a23f189"
   },
   "devDependencies": {
     "@flighthq/particleemitter": "*",

package/src/enableGlColorAdjustmentGuards.test.ts

@@ -66,7 +66,7 @@ describe('enableGlColorAdjustmentGuards', () => {
     try {
       enableGlColorAdjustmentGuards(state);
       // Simulate the fold being installed so the dispatcher never reaches the guard branch.
-      runtime.glColorAdjustmentFold = { flush: () => false, record: () => {} };
+      runtime.glColorAdjustmentFold = { drawShapeMeshes: () => {}, flush: () => false, record: () => {} };
       recordGlSpriteBatchColorTransform(state, ct(), 0);
       expect(getMemoryLogSinkEntries(sink).length).toBe(0);
     } finally {

package/src/glBitmap.test.ts

@@ -23,8 +23,8 @@ function makeRenderProxy(image: unknown = null, rendererData: unknown = makeBitm
   } as unknown as RenderProxy2D;
 }
 
-function makeImageResource(source: unknown = null, width = 32, height = 32) {
-  return { source, width, height };
+function makeImageResource(source: unknown = null, width = 32, height = 32, data: Uint8ClampedArray | null = null) {
+  return { source, data, compressed: null, width, height, version: 1, alphaType: 'straight' };
 }
 
 describe('defaultGlBitmapRenderer', () => {
@@ -53,13 +53,21 @@ describe('drawGlBitmap', () => {
     expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
   });
 
-  it('returns early without writing to batch when image.source is null', () => {
+  it('returns early without writing to batch when the image has neither source nor data', () => {
     const { state } = createGlState();
     registerDefaultGlMaterial(state);
     drawGlBitmap(state, makeRenderProxy(makeImageResource(null)));
     expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
   });
 
+  it('writes one instance for a data-only image (a generated Surface with no element)', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    const data = new Uint8ClampedArray(32 * 32 * 4);
+    drawGlBitmap(state, makeRenderProxy(makeImageResource(null, 32, 32, data)));
+    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(1);
+  });
+
   it('writes one instance to the sprite batch when image is valid', () => {
     const { state } = createGlState();
     registerDefaultGlMaterial(state);

package/src/glCache.test.ts

@@ -47,7 +47,8 @@ beforeAll(async () => {
     const actual = await importOriginal<typeof GlRenderGlModule>();
     return {
       ...actual,
-      beginGlRenderTarget: vi.fn(),
+      beginGlRenderPass: vi.fn(),
+      setGlRenderTransform2D: vi.fn(),
       createGlRenderTarget: vi.fn((_state: unknown, descriptor: { width: number; height: number }): GlRenderTarget => {
         const texture = {} as WebGLTexture;
         return {
@@ -59,6 +60,9 @@ beforeAll(async () => {
           colorRenderbuffers: [],
           depthStencilRenderbuffer: null,
           format: 'rgba8',
+          colorSpace: 'srgb',
+          clearColors: [],
+          clearDepth: 1,
           sampleCount: 1,
           width: descriptor.width,
           height: descriptor.height,
@@ -66,7 +70,7 @@ beforeAll(async () => {
       }),
       destroyGlRenderTarget: vi.fn(),
       drawGlRenderTargetResult: vi.fn(),
-      endGlRenderTarget: vi.fn(),
+      endGlRenderPass: vi.fn(),
       resizeGlRenderTarget: vi.fn((_state: unknown, target: GlRenderTarget, width: number, height: number) => {
         target.width = width;
         target.height = height;

package/src/glColorAdjustment.test.ts

@@ -1,13 +1,14 @@
+import { createImageResource } from '@flighthq/image';
 import { getGlRenderStateRuntime } from '@flighthq/render-gl';
-import type { ColorTransform } from '@flighthq/types';
+import type { ColorTransform, ImageResource } from '@flighthq/types';
 
 import { enableGlColorAdjustment } from './glColorAdjustment';
 import { defaultGlMaterialRenderer } from './glDefaultMaterial';
 import { flushGlSpriteBatch, prepareGlSpriteBatchWrite, recordGlSpriteBatchColorTransform } from './glSpriteBatch';
 import { createGlState } from './glTestHelper';
 
-function makeTexture(): HTMLImageElement {
-  return document.createElement('img');
+function makeTexture(): ImageResource {
+  return createImageResource(document.createElement('img'));
 }
 
 function ct(

package/src/glShape.test.ts

@@ -1,3 +1,4 @@
+import { createImageResource } from '@flighthq/image';
 import type * as FlightNodeModule from '@flighthq/node';
 import { getGlRenderStateRuntime } from '@flighthq/render-gl';
 import type { RenderProxy2D } from '@flighthq/types';
@@ -33,7 +34,7 @@ function makeShapeData() {
   canvas.width = 1;
   canvas.height = 1;
   const ctx = canvas.getContext('2d')!;
-  return { canvas, ctx, lastContentId: -1, lastW: 0, lastH: 0 };
+  return { canvas, ctx, image: createImageResource(canvas), lastContentId: -1, lastW: 0, lastH: 0 };
 }
 
 function makeShapeNode(data: Record<string, unknown> = {}, rendererData: unknown = null): RenderProxy2D {

package/src/glShapeMesh.test.ts

@@ -1,17 +1,42 @@
 import { getGlRenderStateRuntime } from '@flighthq/render-gl';
-import type { RenderProxy2D } from '@flighthq/types';
+import type { ColorTransform, RenderProxy2D } from '@flighthq/types';
 
-import { drawGlShapeMeshes } from './glShapeMesh';
+import { enableGlColorAdjustment } from './glColorAdjustment';
+import { drawGlShapeMeshBatch, drawGlShapeMeshes, ensureGlShapeMeshProgram } from './glShapeMesh';
 import { createGlState } from './glTestHelper';
 
-function makeProxy(): RenderProxy2D {
+function makeProxy(overrides?: Partial<RenderProxy2D>): RenderProxy2D {
   return {
     alpha: 1,
     blendMode: null,
+    colorTransform: null,
     transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+    ...overrides,
   } as unknown as RenderProxy2D;
 }
 
+function ct(
+  redMultiplier = 1,
+  greenMultiplier = 1,
+  blueMultiplier = 1,
+  alphaMultiplier = 1,
+  redOffset = 0,
+  greenOffset = 0,
+  blueOffset = 0,
+  alphaOffset = 0,
+): ColorTransform {
+  return {
+    redMultiplier,
+    greenMultiplier,
+    blueMultiplier,
+    alphaMultiplier,
+    redOffset,
+    greenOffset,
+    blueOffset,
+    alphaOffset,
+  } as ColorTransform;
+}
+
 const TRIANGLE = {
   vertices: new Float32Array([0, 0, 10, 0, 0, 10]),
   indices: new Uint16Array([0, 1, 2]),
@@ -19,6 +44,25 @@ const TRIANGLE = {
   alpha: 1,
 };
 
+describe('drawGlShapeMeshBatch', () => {
+  it('runs onProgramBound after the matrix upload and before the draw loop', () => {
+    const { state, gl } = createGlState();
+    const calls: string[] = [];
+    (gl.uniformMatrix3fv as ReturnType<typeof vi.fn>).mockImplementation(() => calls.push('matrix'));
+    (gl.drawElements as ReturnType<typeof vi.fn>).mockImplementation(() => calls.push('draw'));
+
+    drawGlShapeMeshBatch(state, makeProxy(), [TRIANGLE], ensureGlShapeMeshProgram(state), () => calls.push('bound'));
+
+    expect(calls).toEqual(['matrix', 'bound', 'draw']);
+  });
+
+  it('is a no-op for an empty mesh list', () => {
+    const { state, gl } = createGlState();
+    drawGlShapeMeshBatch(state, makeProxy(), [], ensureGlShapeMeshProgram(state));
+    expect(gl.useProgram).not.toHaveBeenCalled();
+  });
+});
+
 describe('drawGlShapeMeshes', () => {
   it('binds the mesh program and draws each mesh', () => {
     const { state, gl } = createGlState();
@@ -61,4 +105,60 @@ describe('drawGlShapeMeshes', () => {
 
     expect(gl.useProgram).not.toHaveBeenCalled();
   });
+
+  it('ignores a color transform when color adjustment is not enabled (default path pays nothing)', () => {
+    const { state } = createGlState();
+
+    drawGlShapeMeshes(state, makeProxy({ colorTransform: ct(0.5) }), [TRIANGLE]);
+
+    // The tinted program is compiled only through the opt-in fold; the base path never touches it.
+    expect(getGlRenderStateRuntime(state).shapeMeshColorTransformShader).toBeUndefined();
+  });
+
+  it('tints solid-fill meshes through the fold with the same uniforms as the quad-batch path', () => {
+    const { state, gl } = createGlState();
+    enableGlColorAdjustment(state);
+
+    // White fill, half-brightness multiplier, +128 red offset — mirrors the Path-B uniform upload.
+    drawGlShapeMeshes(state, makeProxy({ colorTransform: ct(0.5, 0.5, 0.5, 1, 128, 0, 0, 0) }), [
+      { ...TRIANGLE, color: 0xffffff, alpha: 1 },
+    ]);
+
+    const shader = getGlRenderStateRuntime(state).shapeMeshColorTransformShader!;
+    expect(shader).toBeDefined();
+    // Multiplier uploaded verbatim; offsets normalized by 255 — identical to glColorAdjustment's
+    // bindGlSpriteBatchUniformColorTransform.
+    expect(gl.uniform4f).toHaveBeenCalledWith(shader.colorMultiplierLocation, 0.5, 0.5, 0.5, 1);
+    expect(gl.uniform4f).toHaveBeenCalledWith(shader.colorOffsetLocation, 128 / 255, 0, 0, 0);
+    // Flat mesh color still uploaded premultiplied (white, alpha 1); the shader un/re-premultiplies.
+    expect(gl.uniform4f).toHaveBeenCalledWith(shader.colorLocation, 1, 1, 1, 1);
+    expect(gl.drawElements).toHaveBeenCalled();
+  });
+
+  it('falls back to the lean path through the fold when the node carries no transform', () => {
+    const { state } = createGlState();
+    enableGlColorAdjustment(state);
+
+    drawGlShapeMeshes(state, makeProxy({ colorTransform: null }), [TRIANGLE]);
+
+    // No transform → the fold is not consulted (gated on non-null), so no tint shader is compiled.
+    expect(getGlRenderStateRuntime(state).shapeMeshColorTransformShader).toBeUndefined();
+  });
+});
+
+describe('ensureGlShapeMeshProgram', () => {
+  it('compiles once and caches the binding per context', () => {
+    const { state } = createGlState();
+    const first = ensureGlShapeMeshProgram(state);
+    const second = ensureGlShapeMeshProgram(state);
+    expect(second).toBe(first);
+  });
+
+  it('exposes shared vertex and index buffers for the draw driver', () => {
+    const { state } = createGlState();
+    const binding = ensureGlShapeMeshProgram(state);
+    expect(binding.vertexBuffer).toBeDefined();
+    expect(binding.indexBuffer).toBeDefined();
+    expect(binding.vertexBuffer).not.toBe(binding.indexBuffer);
+  });
 });

package/src/glSpriteBatch.test.ts

@@ -1,5 +1,6 @@
+import { createImageResource } from '@flighthq/image';
 import { getGlRenderStateRuntime } from '@flighthq/render-gl';
-import type { ColorTransform, Material } from '@flighthq/types';
+import type { ColorTransform, ImageResource, Material } from '@flighthq/types';
 
 import { enableGlColorAdjustment } from './glColorAdjustment';
 import { defaultGlMaterialRenderer } from './glDefaultMaterial';
@@ -15,8 +16,8 @@ import {
 } from './glSpriteBatch';
 import { createGlState } from './glTestHelper';
 
-function makeTexture(): HTMLImageElement {
-  return document.createElement('img');
+function makeTexture(): ImageResource {
+  return createImageResource(document.createElement('img'));
 }
 
 function makeMaterial(): Material {

package/src/glTextLabel.test.ts

@@ -1,3 +1,4 @@
+import { createImageResource } from '@flighthq/image';
 import { getGlRenderStateRuntime } from '@flighthq/render-gl';
 import { createTextLabel, setTextLabelString } from '@flighthq/text';
 import type { RenderProxy2D, TextLabel } from '@flighthq/types';
@@ -45,7 +46,7 @@ function makeTextData() {
   canvas.width = 1;
   canvas.height = 1;
   const ctx = canvas.getContext('2d')!;
-  return { canvas, ctx, lastHash: '', logW: 0, logH: 0 };
+  return { canvas, ctx, image: createImageResource(canvas), lastHash: '', logW: 0, logH: 0 };
 }
 
 function makeTextProxy(text = '', rendererData: unknown = null): RenderProxy2D {
@@ -118,34 +119,38 @@ describe('drawGlTextLabel', () => {
   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');
+    const data = makeTextData();
+    const proxy = makeTextProxy('hello', data);
     drawGlTextLabel(state, proxy);
+    // Rasterization bumps the canvas resource's version (setImageResourceSource); a skipped raster leaves
+    // it untouched. First draw rasterizes (version → 1); the repeat is skipped.
+    const rasterized = data.image.version;
     drawGlTextLabel(state, proxy);
-    // textureCache.delete only happens during rasterization (first call); skipped on second.
-    expect(deleteSpy).toHaveBeenCalledTimes(1);
+    expect(data.image.version).toBe(rasterized);
   });
 
   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');
+    const data = makeTextData();
+    const proxy = makeTextProxy('hello', data);
     drawGlTextLabel(state, proxy);
+    const rasterized = data.image.version;
     setTextLabelString(proxy.source as TextLabel, 'world');
     drawGlTextLabel(state, proxy);
-    expect(deleteSpy).toHaveBeenCalledTimes(2);
+    expect(data.image.version).toBeGreaterThan(rasterized);
   });
 
   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');
+    const data = makeTextData();
+    const proxy = makeTextProxy('hello', data);
     drawGlTextLabel(state, proxy);
+    const rasterized = data.image.version;
     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);
+    // Alpha is applied per-instance in the batch; the expensive raster (and its version bump) is untouched.
+    expect(data.image.version).toBe(rasterized);
   });
 });

package/src/glVideo.test.ts

@@ -1,5 +1,5 @@
-import { getGlRenderStateRuntime } from '@flighthq/render-gl';
-import type { RendererData, RenderProxy2D } from '@flighthq/types';
+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';
@@ -10,15 +10,27 @@ function makeVideoNode(element: HTMLVideoElement | null = null): RenderProxy2D {
     blendMode: 0,
     alpha: 1,
     transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
-    rendererData: { lastElement: null },
+    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 element recorded yet', () => {
+  it('allocates per-node data with no stream or texture recorded yet', () => {
     const { state } = createGlState();
-    const data = createGlVideoData(state, {} as never) as unknown as { lastElement: HTMLVideoElement | null };
-    expect(data.lastElement).toBeNull();
+    const data = createGlVideoData(state, {} as never) as unknown as {
+      source: unknown;
+      videoTexture: VideoTexture | null;
+    };
+    expect(data.source).toBeNull();
+    expect(data.videoTexture).toBeNull();
   });
 });
 
@@ -30,22 +42,23 @@ describe('defaultGlVideoRenderer', () => {
 });
 
 describe('destroyGlVideoData', () => {
-  it('deletes the cached GPU texture for the recorded element', () => {
+  it('deletes the cached GPU texture for the recorded VideoTexture', () => {
     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 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, { lastElement: element } as unknown as RendererData);
+    destroyGlVideoData(state, { source: null, videoTexture } as unknown as RendererData);
     expect(deleteSpy).toHaveBeenCalledWith(texture);
-    expect(runtime.textureCache.has(element)).toBe(false);
+    expect(runtime.videoTextureCache.has(videoTexture)).toBe(false);
   });
 
-  it('is a no-op when no element was recorded', () => {
+  it('is a no-op when no VideoTexture was recorded', () => {
     const { state, gl } = createGlState();
     const deleteSpy = vi.spyOn(gl, 'deleteTexture');
-    destroyGlVideoData(state, { lastElement: null } as unknown as RendererData);
+    destroyGlVideoData(state, { source: null, videoTexture: null } as unknown as RendererData);
     expect(deleteSpy).not.toHaveBeenCalled();
   });
 });
@@ -62,4 +75,24 @@ describe('drawGlVideo', () => {
     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);
+  });
 });