@elah/core 0.1.0

package/dist/renderer/gpu/GpuRenderer.js

@@ -0,0 +1,208 @@
+import { GpuRendererDebugPanel, } from './debug/GpuRendererDebugPanel';
+import { GpuDebugCounters } from './debug/GpuDebugCounters';
+import { VideoLayer } from './layers/VideoLayer';
+import { FrameProbeLayer } from './layers/FrameProbeLayer';
+import { TextLayer } from './layers/TextLayer';
+import { ImageLayer } from './layers/ImageLayer';
+import { RenderGraph } from './RenderGraph';
+import { TexturePool } from './TexturePool';
+import { computeContainViewport } from './viewport';
+import { WebGLContext } from './WebGLContext';
+export class GpuRenderer {
+    constructor(options = {}) {
+        this._glCtx = null;
+        this._renderGraph = null;
+        this._texturePool = null;
+        this._videoLayer = null;
+        this._textLayer = null;
+        this._imageLayer = null;
+        this._debugPanel = null;
+        this._container = null;
+        this._mounted = false;
+        this._debugEnabled = false;
+        this._lastScene = null;
+        this._viewport = { width: 0, height: 0 };
+        this._lastRenderTime = 0;
+        this._fps = 0;
+        this._lastRenderDurationMs = 0;
+        this._noOpTicks = 0;
+        this._options = options;
+    }
+    mount(container) {
+        if (this._mounted) {
+            throw new Error('GpuRenderer: mount() called more than once');
+        }
+        const clearColor = this._options.clearColor ?? [0, 0, 0, 1];
+        this._glCtx = new WebGLContext({
+            onLost: () => this._handleContextLost(),
+            onRestore: () => this._handleContextRestored(),
+            preserveDrawingBuffer: this._options.preserveDrawingBuffer,
+        });
+        this._glCtx.setClearColor(...clearColor);
+        container.appendChild(this._glCtx.canvas);
+        this._container = container;
+        this._viewport = {
+            width: this._glCtx.canvas.width,
+            height: this._glCtx.canvas.height,
+        };
+        this._texturePool = new TexturePool({
+            maxTextures: this._options.maxTextures,
+        });
+        const videoLayerArg = this._options.providerFactory
+            ?? (this._options.demuxerFactory
+                ? {
+                    demuxerFactory: this._options.demuxerFactory,
+                    decoderFactory: this._options.decoderFactory,
+                    maxOutstanding: this._options.maxOutstandingDecodes,
+                }
+                : undefined);
+        let videoLayer;
+        if (this._options.probeLayer) {
+            videoLayer = new FrameProbeLayer();
+        }
+        else {
+            this._videoLayer = new VideoLayer(this._texturePool, videoLayerArg);
+            videoLayer = this._videoLayer;
+        }
+        this._renderGraph = new RenderGraph();
+        this._renderGraph.registerLayer(videoLayer, (scene) => scene.videos, (item) => item.id, (item) => item.zIndex);
+        this._imageLayer = new ImageLayer();
+        this._renderGraph.registerLayer(this._imageLayer, (scene) => scene.images, (item) => item.id, (item) => item.zIndex);
+        this._textLayer = new TextLayer();
+        this._renderGraph.registerLayer(this._textLayer, (scene) => scene.texts, (item) => item.id, (item) => item.zIndex);
+        this._mounted = true;
+        if (this._debugEnabled) {
+            this._attachDebugPanel();
+        }
+    }
+    resize(cssWidth, cssHeight, dpr = 1) {
+        if (!this._glCtx || !this._mounted)
+            return;
+        this._glCtx.resize(cssWidth, cssHeight, dpr);
+        this._viewport = {
+            width: this._glCtx.canvas.width,
+            height: this._glCtx.canvas.height,
+        };
+    }
+    render(scene) {
+        if (!this._mounted || !this._glCtx || !this._renderGraph)
+            return;
+        if (this._glCtx.isLost)
+            return;
+        if (scene === this._lastScene) {
+            this._lastRenderDurationMs = 0;
+            this._noOpTicks++;
+            return;
+        }
+        const gl = this._glCtx.gl;
+        if (!gl)
+            return;
+        const now = performance.now();
+        if (this._lastRenderTime > 0) {
+            const dt = now - this._lastRenderTime;
+            if (dt > 0) {
+                this._fps = 1000 / dt;
+            }
+        }
+        this._lastRenderTime = now;
+        const renderStart = now;
+        this._glCtx.clear();
+        const canvas = this._glCtx.canvas;
+        const fit = computeContainViewport(canvas.width, canvas.height, scene.stage.width, scene.stage.height);
+        gl.viewport(fit.x, fit.y, fit.width, fit.height);
+        const ctx = this._buildLayerContext(scene, gl);
+        this._renderGraph.execute(scene, ctx);
+        this._lastRenderDurationMs = performance.now() - renderStart;
+        this._lastScene = scene;
+    }
+    getCanvas() {
+        return this._glCtx?.canvas ?? null;
+    }
+    setDebug(enabled) {
+        this._debugEnabled = enabled;
+        if (enabled) {
+            this._attachDebugPanel();
+        }
+        else if (this._debugPanel) {
+            this._debugPanel.dispose();
+            this._debugPanel = null;
+        }
+    }
+    dispose() {
+        this._debugPanel?.dispose();
+        this._debugPanel = null;
+        this._renderGraph?.dispose();
+        this._renderGraph = null;
+        this._videoLayer = null;
+        this._textLayer = null;
+        this._imageLayer = null;
+        const gl = this._glCtx?.gl ?? null;
+        if (gl && this._texturePool) {
+            this._texturePool.dispose(gl);
+        }
+        this._texturePool = null;
+        this._glCtx?.dispose();
+        this._glCtx?.canvas.remove();
+        this._glCtx = null;
+        this._container = null;
+        this._mounted = false;
+        this._lastScene = null;
+        this._viewport = { width: 0, height: 0 };
+        this._lastRenderTime = 0;
+        this._fps = 0;
+        this._lastRenderDurationMs = 0;
+        this._noOpTicks = 0;
+    }
+    get videoLayer() {
+        return this._videoLayer;
+    }
+    get fps() {
+        return this._fps;
+    }
+    get lastRenderDurationMs() {
+        return this._lastRenderDurationMs;
+    }
+    _buildLayerContext(scene, gl) {
+        return {
+            gl,
+            stage: scene.stage,
+            viewport: this._viewport,
+            fps: scene.fps,
+        };
+    }
+    _attachDebugPanel() {
+        if (!this._debugEnabled || this._debugPanel || !this._container)
+            return;
+        this._debugPanel = new GpuRendererDebugPanel(this._container, () => this._buildDebugSnapshot());
+    }
+    _buildDebugSnapshot() {
+        const counters = GpuDebugCounters.snapshot();
+        const scene = this._lastScene;
+        return {
+            fps: this._fps,
+            currentFrame: scene?.frame ?? 0,
+            activeClipCount: scene?.videos.length ?? 0,
+            textureCount: this._videoLayer?.getTextureCount() ?? 0,
+            cacheHitRatio: counters.cacheHitRatio,
+            renderDurationMs: this._lastRenderDurationMs,
+            decoderStates: this._videoLayer?.getDecoderStates() ?? {},
+            droppedFrames: counters.droppedFrames,
+            outstandingDecodes: counters.outstandingDecodes,
+            activeProviders: this._videoLayer?.getProviderCount() ?? 0,
+            noOpTicks: this._noOpTicks,
+        };
+    }
+    _handleContextLost() {
+        this._lastScene = null;
+        this._texturePool?.handleContextLost();
+        this._videoLayer?.notifyContextLost();
+        this._textLayer?.notifyContextLost();
+        this._imageLayer?.notifyContextLost();
+        this._renderGraph?.notifyContextLost();
+    }
+    _handleContextRestored() {
+        this._lastScene = null;
+        const clearColor = this._options.clearColor ?? [0, 0, 0, 1];
+        this._glCtx?.setClearColor(...clearColor);
+    }
+}

package/dist/renderer/gpu/RenderGraph.d.ts

@@ -0,0 +1,10 @@
+import type { Scene } from '../../resolver/scene';
+import type { Layer, LayerContext } from './layers/types';
+export declare class RenderGraph {
+    private readonly _registrations;
+    registerLayer<TItem>(layer: Layer<TItem>, getItems: (scene: Scene) => TItem[], getId: (item: TItem) => string, getZIndex: (item: TItem) => number): void;
+    execute(scene: Scene, ctx: LayerContext): void;
+    notifyContextLost(): void;
+    dispose(): void;
+    private _diff;
+}

package/dist/renderer/gpu/RenderGraph.js

@@ -0,0 +1,80 @@
+export class RenderGraph {
+    constructor() {
+        this._registrations = [];
+    }
+    registerLayer(layer, getItems, getId, getZIndex) {
+        this._registrations.push({
+            layer: layer,
+            getItems: getItems,
+            getId: getId,
+            getZIndex: getZIndex,
+            activeItems: new Map(),
+        });
+    }
+    execute(scene, ctx) {
+        const drawList = [];
+        for (const reg of this._registrations) {
+            const currentItems = reg.getItems(scene);
+            const diff = this._diff(currentItems, reg.activeItems, reg.getId);
+            for (const id of diff.leaving) {
+                reg.layer.release(id);
+                reg.activeItems.delete(id);
+            }
+            for (const item of diff.entering) {
+                reg.layer.acquire(item, ctx);
+                reg.activeItems.set(reg.getId(item), item);
+            }
+            for (const item of currentItems) {
+                const id = reg.getId(item);
+                if (reg.activeItems.has(id)) {
+                    reg.activeItems.set(id, item);
+                }
+            }
+            for (const item of reg.activeItems.values()) {
+                drawList.push({
+                    layer: reg.layer,
+                    item,
+                    zIndex: reg.getZIndex(item),
+                });
+            }
+        }
+        drawList.sort((a, b) => a.zIndex - b.zIndex);
+        for (const entry of drawList) {
+            entry.layer.draw(entry.item, ctx);
+        }
+    }
+    notifyContextLost() {
+        for (const reg of this._registrations) {
+            for (const id of reg.activeItems.keys()) {
+                reg.layer.release(id);
+            }
+            reg.activeItems.clear();
+        }
+    }
+    dispose() {
+        for (const reg of this._registrations) {
+            for (const id of reg.activeItems.keys()) {
+                reg.layer.release(id);
+            }
+            reg.activeItems.clear();
+            reg.layer.dispose();
+        }
+        this._registrations.length = 0;
+    }
+    _diff(current, active, getId) {
+        const currentIds = new Set(current.map(getId));
+        const entering = [];
+        const leaving = [];
+        for (const item of current) {
+            if (!active.has(getId(item))) {
+                entering.push(item);
+            }
+        }
+        for (const id of active.keys()) {
+            if (!currentIds.has(id)) {
+                leaving.push(id);
+            }
+        }
+        return { entering, leaving };
+    }
+}

package/dist/renderer/gpu/ShaderProgram.d.ts

@@ -0,0 +1,14 @@
+export declare class ShaderProgram {
+    private readonly program;
+    private readonly uniformCache;
+    private constructor();
+    static create(gl: WebGL2RenderingContext, vertSrc: string, fragSrc: string): ShaderProgram;
+    use(gl: WebGL2RenderingContext): void;
+    setUniform1i(gl: WebGL2RenderingContext, name: string, value: number): void;
+    setUniform1f(gl: WebGL2RenderingContext, name: string, value: number): void;
+    setUniform2f(gl: WebGL2RenderingContext, name: string, x: number, y: number): void;
+    setUniformMatrix3fv(gl: WebGL2RenderingContext, name: string, transpose: boolean, value: Float32Array | number[]): void;
+    dispose(gl: WebGL2RenderingContext): void;
+    private getUniformLocation;
+    private static compileShader;
+}

package/dist/renderer/gpu/ShaderProgram.js

@@ -0,0 +1,76 @@
+export class ShaderProgram {
+    constructor(program) {
+        this.uniformCache = new Map();
+        this.program = program;
+    }
+    static create(gl, vertSrc, fragSrc) {
+        const vert = ShaderProgram.compileShader(gl, gl.VERTEX_SHADER, vertSrc);
+        const frag = ShaderProgram.compileShader(gl, gl.FRAGMENT_SHADER, fragSrc);
+        const program = gl.createProgram();
+        if (!program)
+            throw new Error('ShaderProgram: gl.createProgram() returned null');
+        gl.attachShader(program, vert);
+        gl.attachShader(program, frag);
+        gl.linkProgram(program);
+        gl.detachShader(program, vert);
+        gl.detachShader(program, frag);
+        gl.deleteShader(vert);
+        gl.deleteShader(frag);
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            const log = gl.getProgramInfoLog(program) ?? '(no log)';
+            gl.deleteProgram(program);
+            throw new Error(`ShaderProgram: link failed — ${log}`);
+        }
+        return new ShaderProgram(program);
+    }
+    use(gl) {
+        gl.useProgram(this.program);
+    }
+    setUniform1i(gl, name, value) {
+        const loc = this.getUniformLocation(gl, name);
+        if (loc !== null)
+            gl.uniform1i(loc, value);
+    }
+    setUniform1f(gl, name, value) {
+        const loc = this.getUniformLocation(gl, name);
+        if (loc !== null)
+            gl.uniform1f(loc, value);
+    }
+    setUniform2f(gl, name, x, y) {
+        const loc = this.getUniformLocation(gl, name);
+        if (loc !== null)
+            gl.uniform2f(loc, x, y);
+    }
+    setUniformMatrix3fv(gl, name, transpose, value) {
+        const loc = this.getUniformLocation(gl, name);
+        if (loc !== null)
+            gl.uniformMatrix3fv(loc, transpose, value);
+    }
+    dispose(gl) {
+        gl.deleteProgram(this.program);
+        this.uniformCache.clear();
+    }
+    getUniformLocation(gl, name) {
+        if (this.uniformCache.has(name)) {
+            return this.uniformCache.get(name) ?? null;
+        }
+        const loc = gl.getUniformLocation(this.program, name);
+        this.uniformCache.set(name, loc);
+        return loc;
+    }
+    static compileShader(gl, type, src) {
+        const shader = gl.createShader(type);
+        if (!shader) {
+            throw new Error(`ShaderProgram: gl.createShader(${type}) returned null`);
+        }
+        gl.shaderSource(shader, src);
+        gl.compileShader(shader);
+        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+            const log = gl.getShaderInfoLog(shader) ?? '(no log)';
+            gl.deleteShader(shader);
+            const typeName = type === gl.VERTEX_SHADER ? 'vertex' : 'fragment';
+            throw new Error(`ShaderProgram: ${typeName} shader compile failed — ${log}`);
+        }
+        return shader;
+    }
+}

package/dist/renderer/gpu/TexturePool.d.ts

@@ -0,0 +1,25 @@
+export interface PoolTexture {
+    readonly glTexture: WebGLTexture;
+    readonly width: number;
+    readonly height: number;
+    readonly internalFormat: GLenum;
+}
+export interface TexturePoolOptions {
+    maxTextures?: number;
+}
+export declare class TexturePool {
+    private readonly _maxTextures;
+    private readonly _free;
+    private readonly _lruFree;
+    private _allocated;
+    constructor(options?: TexturePoolOptions);
+    acquire(gl: WebGL2RenderingContext, width: number, height: number, internalFormat?: GLenum): PoolTexture | null;
+    release(entry: PoolTexture): void;
+    handleContextLost(): void;
+    getLeasedCount(): number;
+    dispose(gl: WebGL2RenderingContext): void;
+    private _bucketKey;
+    private _removeFromLru;
+    private _allocate;
+    private _evict;
+}

package/dist/renderer/gpu/TexturePool.js

@@ -0,0 +1,93 @@
+const DEFAULT_MAX_TEXTURES = 16;
+export class TexturePool {
+    constructor(options = {}) {
+        this._free = new Map();
+        this._lruFree = [];
+        this._allocated = 0;
+        this._maxTextures = options.maxTextures ?? DEFAULT_MAX_TEXTURES;
+    }
+    acquire(gl, width, height, internalFormat) {
+        const fmt = internalFormat ?? gl.RGBA;
+        const key = this._bucketKey(width, height, fmt);
+        const bucket = this._free.get(key);
+        if (bucket && bucket.length > 0) {
+            const entry = bucket.pop();
+            this._removeFromLru(entry);
+            return entry;
+        }
+        if (this._allocated < this._maxTextures) {
+            return this._allocate(gl, width, height, fmt);
+        }
+        if (this._lruFree.length > 0) {
+            this._evict(gl);
+            return this._allocate(gl, width, height, fmt);
+        }
+        return null;
+    }
+    release(entry) {
+        const key = this._bucketKey(entry.width, entry.height, entry.internalFormat);
+        let bucket = this._free.get(key);
+        if (!bucket) {
+            bucket = [];
+            this._free.set(key, bucket);
+        }
+        bucket.push(entry);
+        this._lruFree.push(entry);
+    }
+    handleContextLost() {
+        this._free.clear();
+        this._lruFree.length = 0;
+        this._allocated = 0;
+    }
+    getLeasedCount() {
+        return this._allocated - this._lruFree.length;
+    }
+    dispose(gl) {
+        for (const entry of this._lruFree) {
+            gl.deleteTexture(entry.glTexture);
+        }
+        this._free.clear();
+        this._lruFree.length = 0;
+        this._allocated = 0;
+    }
+    _bucketKey(width, height, internalFormat) {
+        return `${width}:${height}:${internalFormat}`;
+    }
+    _removeFromLru(entry) {
+        const idx = this._lruFree.indexOf(entry);
+        if (idx !== -1) {
+            this._lruFree.splice(idx, 1);
+        }
+    }
+    _allocate(gl, width, height, internalFormat) {
+        const glTexture = gl.createTexture();
+        if (!glTexture) {
+            throw new Error('TexturePool: gl.createTexture() returned null');
+        }
+        gl.bindTexture(gl.TEXTURE_2D, glTexture);
+        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.texImage2D(gl.TEXTURE_2D, 0, internalFormat, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        this._allocated++;
+        return { glTexture, width, height, internalFormat };
+    }
+    _evict(gl) {
+        const oldest = this._lruFree.shift();
+        if (!oldest)
+            return;
+        const key = this._bucketKey(oldest.width, oldest.height, oldest.internalFormat);
+        const bucket = this._free.get(key);
+        if (bucket) {
+            const idx = bucket.indexOf(oldest);
+            if (idx !== -1)
+                bucket.splice(idx, 1);
+            if (bucket.length === 0)
+                this._free.delete(key);
+        }
+        gl.deleteTexture(oldest.glTexture);
+        this._allocated--;
+    }
+}

package/dist/renderer/gpu/VideoTexture.d.ts

@@ -0,0 +1,13 @@
+import type { TexturePool } from './TexturePool';
+export declare class VideoTexture {
+    private readonly _pool;
+    private _entry;
+    private _hasContent;
+    constructor(pool: TexturePool);
+    get hasContent(): boolean;
+    upload(gl: WebGL2RenderingContext, frame: VideoFrame | ImageBitmap): boolean;
+    bind(gl: WebGL2RenderingContext, unit: number): number;
+    handleContextLost(): void;
+    release(): void;
+    dispose(): void;
+}

package/dist/renderer/gpu/VideoTexture.js

@@ -0,0 +1,54 @@
+export class VideoTexture {
+    constructor(pool) {
+        this._entry = null;
+        this._hasContent = false;
+        this._pool = pool;
+    }
+    get hasContent() {
+        return this._hasContent;
+    }
+    upload(gl, frame) {
+        const width = 'displayWidth' in frame ? frame.displayWidth : frame.width;
+        const height = 'displayHeight' in frame ? frame.displayHeight : frame.height;
+        if (!this._entry
+            || this._entry.width !== width
+            || this._entry.height !== height) {
+            if (this._entry) {
+                this._pool.release(this._entry);
+                this._entry = null;
+            }
+            const acquired = this._pool.acquire(gl, width, height, gl.RGBA);
+            if (!acquired) {
+                return false;
+            }
+            this._entry = acquired;
+        }
+        gl.bindTexture(gl.TEXTURE_2D, this._entry.glTexture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, frame);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        this._hasContent = true;
+        return true;
+    }
+    bind(gl, unit) {
+        if (!this._entry || !this._hasContent) {
+            return -1;
+        }
+        gl.activeTexture(gl.TEXTURE0 + unit);
+        gl.bindTexture(gl.TEXTURE_2D, this._entry.glTexture);
+        return unit;
+    }
+    handleContextLost() {
+        this._entry = null;
+        this._hasContent = false;
+    }
+    release() {
+        if (this._entry) {
+            this._pool.release(this._entry);
+            this._entry = null;
+        }
+        this._hasContent = false;
+    }
+    dispose() {
+        this.release();
+    }
+}

package/dist/renderer/gpu/WebGLContext.d.ts

@@ -0,0 +1,28 @@
+export type ContextLostHandler = () => void;
+export type ContextRestoredHandler = (gl: WebGL2RenderingContext) => void;
+export interface WebGLContextOptions {
+    onLost?: ContextLostHandler;
+    onRestore?: ContextRestoredHandler;
+    alpha?: boolean;
+    powerPreference?: WebGLPowerPreference;
+    preserveDrawingBuffer?: boolean;
+}
+export declare class WebGLContext {
+    readonly canvas: HTMLCanvasElement;
+    private _gl;
+    private _isWebGL2;
+    private _lost;
+    private readonly _onLost;
+    private readonly _onRestore;
+    private readonly _handleLost;
+    private readonly _handleRestored;
+    constructor(options?: WebGLContextOptions);
+    get isLost(): boolean;
+    get isWebGL2(): boolean;
+    get gl(): WebGL2RenderingContext | null;
+    resize(cssWidth: number, cssHeight: number, dpr?: number): void;
+    clear(): void;
+    setClearColor(r: number, g: number, b: number, a: number): void;
+    dispose(): void;
+    private _initGLState;
+}