@elah/core 0.1.0

package/dist/renderer/gpu/layers/FrameProbeLayer.js

@@ -0,0 +1,127 @@
+import { ShaderProgram } from '../ShaderProgram';
+import { QUAD_FRAG_SRC } from '../shaders/quad.frag';
+import { QUAD_VERT_SRC } from '../shaders/quad.vert';
+import { buildVideoTransformMatrix } from './VideoLayer';
+const PROBE_WIDTH = 640;
+const PROBE_HEIGHT = 360;
+function frameColor(frame) {
+    const hue = (frame * 37) % 360;
+    return `hsl(${hue}, 70%, 45%)`;
+}
+export class FrameProbeLayer {
+    constructor() {
+        this._program = null;
+        this._vao = null;
+        this._gl = null;
+        this._resources = new Map();
+    }
+    acquire(item, ctx) {
+        const { gl } = ctx;
+        this._gl = gl;
+        this._ensurePipeline(gl);
+        const texture = gl.createTexture();
+        if (!texture) {
+            throw new Error('FrameProbeLayer: gl.createTexture() returned null');
+        }
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        const canvas = document.createElement('canvas');
+        canvas.width = PROBE_WIDTH;
+        canvas.height = PROBE_HEIGHT;
+        const ctx2d = canvas.getContext('2d');
+        if (!ctx2d) {
+            throw new Error('FrameProbeLayer: 2D context unavailable');
+        }
+        this._resources.set(item.id, {
+            texture,
+            canvas,
+            ctx2d,
+            lastPaintedFrame: -1,
+        });
+        console.log(`[PROBE-ACQUIRE] clip=${item.id} sourceFrame=${item.sourceFrame}`);
+    }
+    release(itemId) {
+        const res = this._resources.get(itemId);
+        if (!res)
+            return;
+        if (this._gl) {
+            this._gl.deleteTexture(res.texture);
+        }
+        this._resources.delete(itemId);
+        console.log(`[PROBE-RELEASE] clip=${itemId}`);
+    }
+    draw(item, ctx) {
+        this._gl = ctx.gl;
+        const res = this._resources.get(item.id);
+        if (!res || !this._program || !this._vao)
+            return;
+        const { gl } = ctx;
+        const frame = item.sourceFrame;
+        if (res.lastPaintedFrame !== frame) {
+            this._paint(res, frame);
+            gl.bindTexture(gl.TEXTURE_2D, res.texture);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, res.canvas);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+            res.lastPaintedFrame = frame;
+            console.log(`[PROBE-UPLOAD] clip=${item.id} frame=${frame}`);
+        }
+        const opacity = item.opacity ?? 1;
+        this._program.use(gl);
+        gl.bindVertexArray(this._vao);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, res.texture);
+        this._program.setUniform1i(gl, 'uTexture', 0);
+        this._program.setUniform1f(gl, 'uOpacity', opacity);
+        this._program.setUniformMatrix3fv(gl, 'uTransform', false, buildVideoTransformMatrix(item, ctx.stage.width, ctx.stage.height));
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        console.log(`[PROBE-DRAW] clip=${item.id} frame=${frame}`);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.bindVertexArray(null);
+    }
+    dispose() {
+        this._resources.clear();
+        this._program = null;
+        this._vao = null;
+        this._gl = null;
+    }
+    notifyContextLost() {
+        this._resources.clear();
+        this._program = null;
+        this._vao = null;
+        this._gl = null;
+    }
+    disposeGL(gl) {
+        for (const res of this._resources.values()) {
+            gl.deleteTexture(res.texture);
+        }
+        if (this._vao)
+            gl.deleteVertexArray(this._vao);
+        if (this._program)
+            this._program.dispose(gl);
+        this.dispose();
+    }
+    _paint(res, frame) {
+        const { ctx2d } = res;
+        ctx2d.fillStyle = frameColor(frame);
+        ctx2d.fillRect(0, 0, PROBE_WIDTH, PROBE_HEIGHT);
+        ctx2d.fillStyle = '#ffffff';
+        ctx2d.font = 'bold 96px monospace';
+        ctx2d.textAlign = 'center';
+        ctx2d.textBaseline = 'middle';
+        ctx2d.fillText(`frame ${frame}`, PROBE_WIDTH / 2, PROBE_HEIGHT / 2);
+    }
+    _ensurePipeline(gl) {
+        if (this._program && this._vao)
+            return;
+        this._program = ShaderProgram.create(gl, QUAD_VERT_SRC, QUAD_FRAG_SRC);
+        const vao = gl.createVertexArray();
+        if (!vao) {
+            throw new Error('FrameProbeLayer: gl.createVertexArray() returned null');
+        }
+        this._vao = vao;
+    }
+}

package/dist/renderer/gpu/layers/ImageLayer.d.ts

@@ -0,0 +1,23 @@
+import type { ActiveImageClip } from '../../../resolver/scene';
+import type { Layer, LayerContext } from './types';
+export interface LoadedImage {
+    source: TexImageSource;
+    width: number;
+    height: number;
+}
+export type ImageLoader = (src: string) => Promise<LoadedImage>;
+export declare class ImageLayer implements Layer<ActiveImageClip> {
+    private _program;
+    private _vao;
+    private _gl;
+    private readonly _resources;
+    private readonly _loadImage;
+    constructor(loadImage?: ImageLoader);
+    acquire(item: ActiveImageClip, ctx: LayerContext): void;
+    release(itemId: string): void;
+    draw(item: ActiveImageClip, ctx: LayerContext): void;
+    dispose(): void;
+    notifyContextLost(): void;
+    getTextureCount(): number;
+    private _ensurePipeline;
+}

package/dist/renderer/gpu/layers/ImageLayer.js

@@ -0,0 +1,124 @@
+import { ShaderProgram } from '../ShaderProgram';
+import { QUAD_FRAG_SRC } from '../shaders/quad.frag';
+import { QUAD_VERT_SRC } from '../shaders/quad.vert';
+import { buildDrawTransformMatrix } from './drawRect';
+const defaultImageLoader = (src) => new Promise((resolve, reject) => {
+    const img = document.createElement('img');
+    img.onload = () => {
+        img.onload = null;
+        img.onerror = null;
+        resolve({ source: img, width: img.naturalWidth, height: img.naturalHeight });
+    };
+    img.onerror = () => {
+        img.onload = null;
+        img.onerror = null;
+        reject(new Error(`ImageLayer: failed to load image "${src}"`));
+    };
+    img.src = src;
+});
+export class ImageLayer {
+    constructor(loadImage) {
+        this._program = null;
+        this._vao = null;
+        this._gl = null;
+        this._resources = new Map();
+        this._loadImage = loadImage ?? defaultImageLoader;
+    }
+    acquire(item, ctx) {
+        const { gl } = ctx;
+        this._gl = gl;
+        this._ensurePipeline(gl);
+        const texture = gl.createTexture();
+        if (!texture) {
+            throw new Error('ImageLayer: gl.createTexture() returned null');
+        }
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        const res = { texture, image: null, uploaded: false };
+        this._resources.set(item.id, res);
+        void this._loadImage(item.src)
+            .then((image) => {
+            if (this._resources.get(item.id) === res) {
+                res.image = image;
+            }
+        })
+            .catch((err) => {
+            console.warn(`[ImageLayer] ${err.message}`);
+        });
+    }
+    release(itemId) {
+        const res = this._resources.get(itemId);
+        if (!res)
+            return;
+        if (this._gl) {
+            this._gl.deleteTexture(res.texture);
+        }
+        this._resources.delete(itemId);
+    }
+    draw(item, ctx) {
+        this._gl = ctx.gl;
+        const res = this._resources.get(item.id);
+        if (!res || !this._program || !this._vao)
+            return;
+        const { gl } = ctx;
+        if (res.image && !res.uploaded) {
+            gl.bindTexture(gl.TEXTURE_2D, res.texture);
+            gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, res.image.source);
+            gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+            res.uploaded = true;
+        }
+        if (!res.uploaded || !res.image)
+            return;
+        const opacity = item.opacity ?? 1;
+        this._program.use(gl);
+        gl.bindVertexArray(this._vao);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, res.texture);
+        this._program.setUniform1i(gl, 'uTexture', 0);
+        this._program.setUniform1f(gl, 'uOpacity', opacity);
+        this._program.setUniformMatrix3fv(gl, 'uTransform', false, buildDrawTransformMatrix(item.transform, ctx.stage.width, ctx.stage.height, res.image.width, res.image.height));
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.bindVertexArray(null);
+    }
+    dispose() {
+        if (this._gl) {
+            for (const res of this._resources.values()) {
+                this._gl.deleteTexture(res.texture);
+            }
+            if (this._vao)
+                this._gl.deleteVertexArray(this._vao);
+            if (this._program)
+                this._program.dispose(this._gl);
+        }
+        this._resources.clear();
+        this._program = null;
+        this._vao = null;
+        this._gl = null;
+    }
+    notifyContextLost() {
+        this._resources.clear();
+        this._program = null;
+        this._vao = null;
+        this._gl = null;
+    }
+    getTextureCount() {
+        return this._resources.size;
+    }
+    _ensurePipeline(gl) {
+        if (this._program && this._vao)
+            return;
+        this._program = ShaderProgram.create(gl, QUAD_VERT_SRC, QUAD_FRAG_SRC);
+        const vao = gl.createVertexArray();
+        if (!vao) {
+            throw new Error('ImageLayer: gl.createVertexArray() returned null');
+        }
+        this._vao = vao;
+    }
+}

package/dist/renderer/gpu/layers/TestLayer.d.ts

@@ -0,0 +1,16 @@
+import type { DebugRenderItem } from '../debug/types';
+import type { Layer, LayerContext } from './types';
+export declare function buildTransformMatrix(item: DebugRenderItem, stageWidth: number, stageHeight: number): Float32Array;
+export declare class TestLayer implements Layer<DebugRenderItem> {
+    private _program;
+    private _vao;
+    private _gl;
+    private readonly _resources;
+    acquire(item: DebugRenderItem, ctx: LayerContext): void;
+    release(itemId: string): void;
+    draw(item: DebugRenderItem, ctx: LayerContext): void;
+    dispose(): void;
+    notifyContextLost(): void;
+    disposeGL(gl: WebGL2RenderingContext): void;
+    private _ensurePipeline;
+}

package/dist/renderer/gpu/layers/TestLayer.js

@@ -0,0 +1,109 @@
+import { ShaderProgram } from '../ShaderProgram';
+import { QUAD_FRAG_SRC } from '../shaders/quad.frag';
+import { QUAD_VERT_SRC } from '../shaders/quad.vert';
+export function buildTransformMatrix(item, stageWidth, stageHeight) {
+    const xs = item.x / stageWidth;
+    const ys = item.y / stageHeight;
+    const ws = item.width / stageWidth;
+    const hs = item.height / stageHeight;
+    const rotation = item.rotation ?? 0;
+    const sc = Math.cos(rotation);
+    const ss = Math.sin(rotation);
+    const tx = 2 * (xs + ws / 2 - 0.5 * sc * ws + 0.5 * ss * hs) - 1;
+    const ty = 2 * (ys + hs / 2 - 0.5 * ss * ws - 0.5 * sc * hs) - 1;
+    return new Float32Array([
+        2 * sc * ws, 2 * ss * ws, 0,
+        -2 * ss * hs, 2 * sc * hs, 0,
+        tx, ty, 1,
+    ]);
+}
+export class TestLayer {
+    constructor() {
+        this._program = null;
+        this._vao = null;
+        this._gl = null;
+        this._resources = new Map();
+    }
+    acquire(item, ctx) {
+        const { gl } = ctx;
+        this._gl = gl;
+        this._ensurePipeline(gl);
+        const texture = gl.createTexture();
+        if (!texture) {
+            throw new Error('TestLayer: gl.createTexture() returned null');
+        }
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        const [r, g, b, a] = item.color;
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([
+            Math.round(r * 255),
+            Math.round(g * 255),
+            Math.round(b * 255),
+            Math.round(a * 255),
+        ]));
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        this._resources.set(item.id, { texture, color: item.color });
+    }
+    release(itemId) {
+        const res = this._resources.get(itemId);
+        if (!res)
+            return;
+        if (this._gl) {
+            this._gl.deleteTexture(res.texture);
+        }
+        this._resources.delete(itemId);
+    }
+    draw(item, ctx) {
+        this._gl = ctx.gl;
+        const res = this._resources.get(item.id);
+        if (!res || !this._program || !this._vao)
+            return;
+        const { gl } = ctx;
+        const opacity = item.opacity ?? 1;
+        this._program.use(gl);
+        gl.bindVertexArray(this._vao);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, res.texture);
+        this._program.setUniform1i(gl, 'uTexture', 0);
+        this._program.setUniform1f(gl, 'uOpacity', opacity);
+        this._program.setUniformMatrix3fv(gl, 'uTransform', false, buildTransformMatrix(item, ctx.stage.width, ctx.stage.height));
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.bindVertexArray(null);
+    }
+    dispose() {
+        this._resources.clear();
+        this._program = null;
+        this._vao = null;
+        this._gl = null;
+    }
+    notifyContextLost() {
+        this._resources.clear();
+        this._program = null;
+        this._vao = null;
+        this._gl = null;
+    }
+    disposeGL(gl) {
+        for (const res of this._resources.values()) {
+            gl.deleteTexture(res.texture);
+        }
+        if (this._vao)
+            gl.deleteVertexArray(this._vao);
+        if (this._program)
+            this._program.dispose(gl);
+        this.dispose();
+    }
+    _ensurePipeline(gl) {
+        if (this._program && this._vao)
+            return;
+        this._program = ShaderProgram.create(gl, QUAD_VERT_SRC, QUAD_FRAG_SRC);
+        const vao = gl.createVertexArray();
+        if (!vao) {
+            throw new Error('TestLayer: gl.createVertexArray() returned null');
+        }
+        this._vao = vao;
+    }
+}

package/dist/renderer/gpu/layers/TextLayer.d.ts

@@ -0,0 +1,19 @@
+import type { ActiveTextClip } from '../../../resolver/scene';
+import type { Layer, LayerContext } from './types';
+export type TextCanvasFactory = () => HTMLCanvasElement;
+export declare class TextLayer implements Layer<ActiveTextClip> {
+    private _program;
+    private _vao;
+    private _gl;
+    private readonly _resources;
+    private readonly _createCanvas;
+    constructor(createCanvas?: TextCanvasFactory);
+    acquire(item: ActiveTextClip, ctx: LayerContext): void;
+    release(itemId: string): void;
+    draw(item: ActiveTextClip, ctx: LayerContext): void;
+    dispose(): void;
+    notifyContextLost(): void;
+    getTextureCount(): number;
+    private _paint;
+    private _ensurePipeline;
+}

package/dist/renderer/gpu/layers/TextLayer.js

@@ -0,0 +1,166 @@
+import { ShaderProgram } from '../ShaderProgram';
+import { QUAD_FRAG_SRC } from '../shaders/quad.frag';
+import { QUAD_VERT_SRC } from '../shaders/quad.vert';
+import { computeTextLayout } from './textLayout';
+const FULL_STAGE_MAT3 = new Float32Array([2, 0, 0, 0, 2, 0, -1, -1, 1]);
+function buildTextTransformMatrix(transform, stage) {
+    if (!transform || transform.rotation === 0) {
+        return FULL_STAGE_MAT3;
+    }
+    const a = Math.cos(transform.rotation);
+    const b = Math.sin(transform.rotation);
+    const px = transform.x;
+    const py = transform.y;
+    const wOverH = stage.width / stage.height;
+    const hOverW = stage.height / stage.width;
+    const txx = 2 * (px - a * px + b * hOverW * py) - 1;
+    const tyy = 2 * (py - b * wOverH * px - a * py) - 1;
+    return new Float32Array([
+        2 * a, 2 * b * wOverH, 0,
+        -2 * b * hOverW, 2 * a, 0,
+        txx, tyy, 1,
+    ]);
+}
+function paintSignature(item, stage) {
+    return JSON.stringify([
+        item.content,
+        item.fontSize,
+        item.color,
+        item.fontFamily,
+        item.fontWeight,
+        item.textAlign,
+        item.transform?.x,
+        item.transform?.y,
+        item.transform?.scale,
+        stage.width,
+        stage.height,
+    ]);
+}
+export class TextLayer {
+    constructor(createCanvas) {
+        this._program = null;
+        this._vao = null;
+        this._gl = null;
+        this._resources = new Map();
+        this._createCanvas = createCanvas ?? (() => document.createElement('canvas'));
+    }
+    acquire(item, ctx) {
+        const { gl } = ctx;
+        this._gl = gl;
+        this._ensurePipeline(gl);
+        const texture = gl.createTexture();
+        if (!texture) {
+            throw new Error('TextLayer: gl.createTexture() returned null');
+        }
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        const canvas = this._createCanvas();
+        canvas.width = ctx.stage.width;
+        canvas.height = ctx.stage.height;
+        const ctx2d = canvas.getContext('2d');
+        if (!ctx2d) {
+            throw new Error('TextLayer: 2D context unavailable');
+        }
+        this._resources.set(item.id, {
+            texture,
+            canvas,
+            ctx2d,
+            width: canvas.width,
+            height: canvas.height,
+            lastSignature: '',
+        });
+    }
+    release(itemId) {
+        const res = this._resources.get(itemId);
+        if (!res)
+            return;
+        if (this._gl) {
+            this._gl.deleteTexture(res.texture);
+        }
+        this._resources.delete(itemId);
+    }
+    draw(item, ctx) {
+        this._gl = ctx.gl;
+        const res = this._resources.get(item.id);
+        if (!res || !this._program || !this._vao)
+            return;
+        const { gl } = ctx;
+        if (res.width !== ctx.stage.width || res.height !== ctx.stage.height) {
+            res.canvas.width = ctx.stage.width;
+            res.canvas.height = ctx.stage.height;
+            res.width = ctx.stage.width;
+            res.height = ctx.stage.height;
+            res.lastSignature = '';
+        }
+        const sig = paintSignature(item, ctx.stage);
+        if (res.lastSignature !== sig) {
+            this._paint(res, item, ctx.stage);
+            gl.bindTexture(gl.TEXTURE_2D, res.texture);
+            gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, res.canvas);
+            gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+            res.lastSignature = sig;
+        }
+        const opacity = item.opacity ?? 1;
+        this._program.use(gl);
+        gl.bindVertexArray(this._vao);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, res.texture);
+        this._program.setUniform1i(gl, 'uTexture', 0);
+        this._program.setUniform1f(gl, 'uOpacity', opacity);
+        this._program.setUniformMatrix3fv(gl, 'uTransform', false, buildTextTransformMatrix(item.transform, ctx.stage));
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.bindVertexArray(null);
+    }
+    dispose() {
+        if (this._gl) {
+            for (const res of this._resources.values()) {
+                this._gl.deleteTexture(res.texture);
+            }
+            if (this._vao)
+                this._gl.deleteVertexArray(this._vao);
+            if (this._program)
+                this._program.dispose(this._gl);
+        }
+        this._resources.clear();
+        this._program = null;
+        this._vao = null;
+        this._gl = null;
+    }
+    notifyContextLost() {
+        this._resources.clear();
+        this._program = null;
+        this._vao = null;
+        this._gl = null;
+    }
+    getTextureCount() {
+        return this._resources.size;
+    }
+    _paint(res, item, stage) {
+        const { ctx2d } = res;
+        ctx2d.clearRect(0, 0, stage.width, stage.height);
+        const layout = computeTextLayout(ctx2d, item, stage);
+        ctx2d.fillStyle = layout.style.color;
+        ctx2d.textBaseline = 'middle';
+        ctx2d.textAlign = layout.style.textAlign;
+        layout.lines.forEach((line, i) => {
+            ctx2d.fillText(line, layout.anchorX, layout.firstLineY + i * layout.lineAdvance);
+        });
+    }
+    _ensurePipeline(gl) {
+        if (this._program && this._vao)
+            return;
+        this._program = ShaderProgram.create(gl, QUAD_VERT_SRC, QUAD_FRAG_SRC);
+        const vao = gl.createVertexArray();
+        if (!vao) {
+            throw new Error('TextLayer: gl.createVertexArray() returned null');
+        }
+        this._vao = vao;
+    }
+}

package/dist/renderer/gpu/layers/VideoLayer.d.ts

@@ -0,0 +1,38 @@
+import type { ActiveVideoClip } from '../../../resolver/scene';
+import type { TexturePool } from '../TexturePool';
+import { type VideoFrameProvider, type VideoFrameProviderDeps } from '../../../media/video';
+import { type DrawRect } from './drawRect';
+import type { Layer, LayerContext } from './types';
+export { buildTransformMatrixFromRect, resolveTransformRect, resolveDrawRect, buildDrawTransformMatrix, } from './drawRect';
+export type { DrawRect } from './drawRect';
+export type VideoDrawRect = DrawRect;
+export declare function buildVideoTransformMatrix(item: ActiveVideoClip, stageWidth: number, stageHeight: number, contentWidth?: number, contentHeight?: number): Float32Array;
+export type VideoFrameProviderFactory = (src: string) => VideoFrameProvider;
+export declare class VideoLayer implements Layer<ActiveVideoClip> {
+    private readonly _pool;
+    private readonly _providerFactory;
+    private readonly _deps;
+    private _program;
+    private _vao;
+    private _gl;
+    private readonly _providers;
+    private readonly _textures;
+    private readonly _srcByItemId;
+    private readonly _contentSizeByItemId;
+    private readonly _lastLoggedSourceFrameByItemId;
+    private _holdoverTexture;
+    constructor(pool: TexturePool, providerFactoryOrDeps?: VideoFrameProviderFactory | VideoFrameProviderDeps);
+    acquire(item: ActiveVideoClip, ctx: LayerContext): void;
+    release(itemId: string): void;
+    draw(item: ActiveVideoClip, ctx: LayerContext): void;
+    dispose(): void;
+    notifyContextLost(): void;
+    disposeGL(gl: WebGL2RenderingContext): void;
+    getProviderForItemId(itemId: string): VideoFrameProvider | undefined;
+    getProviderForSrc(src: string): VideoFrameProvider | undefined;
+    getProviderRefCount(itemId: string): number;
+    getTextureCount(): number;
+    getProviderCount(): number;
+    getDecoderStates(): Record<string, string>;
+    private _ensurePipeline;
+}