@lightningjs/renderer 2.14.4 → 2.16.0

package/dist/src/core/renderers/webgl/WebGlCtxTexture.js

@@ -0,0 +1,224 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { CoreContextTexture } from '../CoreContextTexture.js';
+import { isHTMLImageElement } from './internal/RendererUtils.js';
+const TRANSPARENT_TEXTURE_DATA = new Uint8Array([0, 0, 0, 0]);
+/**
+ * A wrapper around a WebGLTexture that handles loading the texture data
+ * from a Texture source and uploading it to the GPU as well as freeing
+ * the uploaded texture.
+ *
+ * @remarks
+ * When accessing the ctxTexture property, the texture will be loaded if
+ * it hasn't been already. ctxTexture will always return a valid WebGLTexture
+ * and trigger the loading/uploading of the texture's data if it hasn't been
+ * loaded yet.
+ */
+export class WebGlCtxTexture extends CoreContextTexture {
+    glw;
+    _nativeCtxTexture = null;
+    _w = 0;
+    _h = 0;
+    constructor(glw, memManager, textureSource) {
+        super(memManager, textureSource);
+        this.glw = glw;
+    }
+    get ctxTexture() {
+        if (this.state === 'freed') {
+            this.load();
+            return null;
+        }
+        return this._nativeCtxTexture;
+    }
+    get w() {
+        return this._w;
+    }
+    get h() {
+        return this._h;
+    }
+    /**
+     * Load the texture data from the Texture source and upload it to the GPU
+     *
+     * @remarks
+     * This method is called automatically when accessing the ctxTexture property
+     * if the texture hasn't been loaded yet. But it can also be called manually
+     * to force the texture to be pre-loaded prior to accessing the ctxTexture
+     * property.
+     */
+    load() {
+        // If the texture is already loading or loaded, don't load it again.
+        if (this.state === 'loading' || this.state === 'loaded') {
+            return;
+        }
+        this.state = 'loading';
+        this.textureSource.setState('loading');
+        this._nativeCtxTexture = this.createNativeCtxTexture();
+        if (this._nativeCtxTexture === null) {
+            this.state = 'failed';
+            this.textureSource.setState('failed', new Error('Could not create WebGL Texture'));
+            console.error('Could not create WebGL Texture');
+            return;
+        }
+        this.onLoadRequest()
+            .then(({ width, height }) => {
+            // If the texture has been freed while loading, return early.
+            if (this.state === 'freed') {
+                return;
+            }
+            this.state = 'loaded';
+            this._w = width;
+            this._h = height;
+            // Update the texture source's width and height so that it can be used
+            // for rendering.
+            this.textureSource.setState('loaded', { width, height });
+            // cleanup source texture data
+            this.textureSource.freeTextureData();
+        })
+            .catch((err) => {
+            // If the texture has been freed while loading, return early.
+            if (this.state === 'freed') {
+                return;
+            }
+            this.state = 'failed';
+            this.textureSource.setState('failed', err);
+            this.textureSource.freeTextureData();
+            console.error(err);
+        });
+    }
+    /**
+     * Called when the texture data needs to be loaded and uploaded to a texture
+     */
+    async onLoadRequest() {
+        const { glw } = this;
+        const textureData = this.textureSource.textureData;
+        if (textureData === null || this._nativeCtxTexture === null) {
+            throw new Error('Texture data or native texture is null ' + this.textureSource.type);
+        }
+        // Set to a 1x1 transparent texture
+        glw.texImage2D(0, glw.RGBA, 1, 1, 0, glw.RGBA, glw.UNSIGNED_BYTE, null);
+        this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
+        let width = 0;
+        let height = 0;
+        glw.activeTexture(0);
+        const tdata = textureData.data;
+        const format = glw.RGBA;
+        const formatBytes = 4;
+        const memoryPadding = 1.1; // Add padding to account for GPU Padding
+        // If textureData is null, the texture is empty (0, 0) and we don't need to
+        // upload any data to the GPU.
+        if ((typeof ImageBitmap !== 'undefined' && tdata instanceof ImageBitmap) ||
+            tdata instanceof ImageData ||
+            // not using typeof HTMLImageElement due to web worker
+            isHTMLImageElement(tdata)) {
+            width = tdata.width;
+            height = tdata.height;
+            glw.bindTexture(this._nativeCtxTexture);
+            glw.pixelStorei(glw.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !!textureData.premultiplyAlpha);
+            glw.texImage2D(0, format, format, glw.UNSIGNED_BYTE, tdata);
+            this.setTextureMemUse(height * width * formatBytes * memoryPadding);
+        }
+        else if (tdata === null) {
+            width = 0;
+            height = 0;
+            // Reset to a 1x1 transparent texture
+            glw.bindTexture(this._nativeCtxTexture);
+            glw.texImage2D(0, format, 1, 1, 0, format, glw.UNSIGNED_BYTE, TRANSPARENT_TEXTURE_DATA);
+            this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
+        }
+        else if ('mipmaps' in tdata && tdata.mipmaps) {
+            const { mipmaps, width = 0, height = 0, type, glInternalFormat } = tdata;
+            const view = type === 'ktx'
+                ? new DataView(mipmaps[0] ?? new ArrayBuffer(0))
+                : mipmaps[0];
+            glw.bindTexture(this._nativeCtxTexture);
+            glw.compressedTexImage2D(0, glInternalFormat, width, height, 0, view);
+            glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
+            glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
+            glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
+            glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
+            this.setTextureMemUse(view.byteLength);
+        }
+        else if (tdata && tdata instanceof Uint8Array) {
+            // Color Texture
+            width = 1;
+            height = 1;
+            glw.bindTexture(this._nativeCtxTexture);
+            glw.pixelStorei(glw.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !!textureData.premultiplyAlpha);
+            glw.texImage2D(0, format, width, height, 0, format, glw.UNSIGNED_BYTE, tdata);
+            this.setTextureMemUse(width * height * formatBytes);
+        }
+        else {
+            console.error(`WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`, textureData);
+        }
+        return {
+            width,
+            height,
+        };
+    }
+    /**
+     * Free the WebGLTexture from the GPU
+     *
+     * @returns
+     */
+    free() {
+        if (this.state === 'freed') {
+            return;
+        }
+        this.state = 'freed';
+        this.textureSource.setState('freed');
+        this._w = 0;
+        this._h = 0;
+        if (this._nativeCtxTexture !== null) {
+            this.glw.deleteTexture(this._nativeCtxTexture);
+            this.setTextureMemUse(0);
+            this._nativeCtxTexture = null;
+        }
+        // if the texture still has source data, free it
+        this.textureSource.freeTextureData();
+    }
+    /**
+     * Create native context texture
+     *
+     * @remarks
+     * When this method returns the returned texture will be bound to the GL context state.
+     *
+     * @param width
+     * @param height
+     * @returns
+     */
+    createNativeCtxTexture() {
+        const { glw } = this;
+        const nativeTexture = glw.createTexture();
+        if (!nativeTexture) {
+            return null;
+        }
+        // On initial load request, create a 1x1 transparent texture to use until
+        // the texture data is finally loaded.
+        glw.activeTexture(0);
+        glw.bindTexture(nativeTexture);
+        // linear texture filtering
+        glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
+        glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
+        // texture wrapping method
+        glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
+        glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
+        return nativeTexture;
+    }
+}
+//# sourceMappingURL=WebGlCtxTexture.js.map

package/dist/src/core/renderers/webgl/WebGlCtxTexture.js.map

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

package/dist/src/core/renderers/webgl/WebGlRenderOp.d.ts

@@ -0,0 +1,44 @@
+import { CoreRenderOp } from '../CoreRenderOp.js';
+import type { WebGlCtxTexture } from './WebGlCtxTexture.js';
+import type { WebGlRenderer } from './WebGlRenderer.js';
+import type { BufferCollection } from './internal/BufferCollection.js';
+import type { WebGlShaderNode } from './WebGlShaderNode.js';
+import type { QuadOptions } from '../CoreRenderer.js';
+import type { CoreTextNode } from '../../CoreTextNode.js';
+import type { RectWithValid } from '../../lib/utils.js';
+import type { Dimensions } from '../../../common/CommonTypes.js';
+type ReqQuad = 'alpha' | 'shader' | 'parentHasRenderTexture' | 'rtt' | 'clippingRect' | 'height' | 'width';
+type RenderOpQuadOptions = Pick<QuadOptions, ReqQuad> & Partial<Omit<QuadOptions, ReqQuad>> & {
+    sdfShaderProps?: Record<string, unknown>;
+    sdfBuffers?: BufferCollection;
+};
+/**
+ * Can render multiple quads with multiple textures (up to vertex shader texture limit)
+ *
+ */
+export declare class WebGlRenderOp extends CoreRenderOp {
+    readonly renderer: WebGlRenderer;
+    readonly bufferIdx: number;
+    numQuads: number;
+    textures: WebGlCtxTexture[];
+    /**
+     * need to improve this when TextRenderers are refactored
+     */
+    readonly sdfShaderProps: Record<string, unknown> | undefined;
+    readonly sdfNode: CoreTextNode | undefined;
+    readonly maxTextures: number;
+    readonly buffers: BufferCollection;
+    readonly shader: WebGlShaderNode;
+    readonly width: number;
+    readonly height: number;
+    readonly clippingRect: RectWithValid;
+    readonly rtt: boolean;
+    readonly parentHasRenderTexture: boolean;
+    readonly framebufferDimensions?: Dimensions | null;
+    readonly alpha: number;
+    readonly pixelRatio: number;
+    constructor(renderer: WebGlRenderer, quad: RenderOpQuadOptions, bufferIdx: number);
+    addTexture(texture: WebGlCtxTexture): number;
+    draw(): void;
+}
+export {};

package/dist/src/core/renderers/webgl/WebGlRenderOp.js

@@ -0,0 +1,125 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { CoreRenderOp } from '../CoreRenderOp.js';
+/**
+ * Can render multiple quads with multiple textures (up to vertex shader texture limit)
+ *
+ */
+export class WebGlRenderOp extends CoreRenderOp {
+    renderer;
+    bufferIdx;
+    numQuads = 0;
+    textures = [];
+    /**
+     * need to improve this when TextRenderers are refactored
+     */
+    sdfShaderProps;
+    sdfNode;
+    maxTextures;
+    buffers;
+    shader;
+    width;
+    height;
+    clippingRect;
+    rtt;
+    parentHasRenderTexture;
+    framebufferDimensions;
+    alpha;
+    pixelRatio;
+    constructor(renderer, quad, bufferIdx) {
+        super();
+        this.renderer = renderer;
+        this.bufferIdx = bufferIdx;
+        this.buffers = quad.sdfBuffers || renderer.quadBufferCollection;
+        this.shader = quad.shader;
+        this.width = quad.width;
+        this.height = quad.height;
+        this.clippingRect = quad.clippingRect;
+        this.parentHasRenderTexture = quad.parentHasRenderTexture;
+        this.framebufferDimensions = quad.framebufferDimensions;
+        this.rtt = quad.rtt;
+        this.alpha = quad.alpha;
+        this.pixelRatio =
+            this.parentHasRenderTexture === true ? 1 : renderer.stage.pixelRatio;
+        /**
+         * related to line 51
+         */
+        this.sdfShaderProps = quad.sdfShaderProps;
+        this.maxTextures = this.shader.program.supportsIndexedTextures
+            ? renderer.glw.getParameter(renderer.glw.MAX_VERTEX_TEXTURE_IMAGE_UNITS)
+            : 1;
+    }
+    addTexture(texture) {
+        const { textures, maxTextures } = this;
+        let existingIdx = -1;
+        const texturesLength = textures.length;
+        for (let i = 0; i < texturesLength; i++) {
+            const t = textures[i];
+            if (t === texture) {
+                existingIdx = i;
+                break;
+            }
+        }
+        if (existingIdx !== -1) {
+            return existingIdx;
+        }
+        if (texturesLength >= maxTextures) {
+            return 0xffffffff;
+        }
+        this.textures.push(texture);
+        return texturesLength;
+    }
+    draw() {
+        const { glw, options, stage } = this.renderer;
+        stage.shManager.useShader(this.shader.program);
+        this.shader.program.bindRenderOp(this);
+        // Clipping
+        if (this.clippingRect.valid === true) {
+            const clipX = Math.round(this.clippingRect.x * this.pixelRatio);
+            const clipWidth = Math.round(this.clippingRect.width * this.pixelRatio);
+            const clipHeight = Math.round(this.clippingRect.height * this.pixelRatio);
+            let clipY = Math.round(options.canvas.height -
+                clipHeight -
+                this.clippingRect.y * this.pixelRatio);
+            // if parent has render texture, we need to adjust the scissor rect
+            // to be relative to the parent's framebuffer
+            if (this.parentHasRenderTexture) {
+                clipY = this.framebufferDimensions
+                    ? this.framebufferDimensions.height - this.height
+                    : 0;
+            }
+            glw.setScissorTest(true);
+            glw.scissor(clipX, clipY, clipWidth, clipHeight);
+        }
+        else {
+            glw.setScissorTest(false);
+        }
+        // Check if this is SDF rendering (has sdfBuffers)
+        if (this.sdfShaderProps !== undefined) {
+            // SDF rendering uses drawArrays with explicit triangle vertices (6 vertices per quad)
+            glw.drawArrays(glw.TRIANGLES, 0, 6 * this.numQuads);
+        }
+        else {
+            // Regular rendering uses drawElements with index buffer (4 vertices per quad)
+            const quadIdx = (this.bufferIdx / 32) * 6 * 2;
+            glw.drawElements(glw.TRIANGLES, 6 * this.numQuads, glw.UNSIGNED_SHORT, quadIdx);
+        }
+    }
+}
+//# sourceMappingURL=WebGlRenderOp.js.map

package/dist/src/core/renderers/webgl/WebGlRenderOp.js.map

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

package/dist/src/core/renderers/webgl/WebGlRenderer.d.ts

@@ -0,0 +1,136 @@
+import { CoreRenderer, type BufferInfo, type CoreRendererOptions, type QuadOptions } from '../CoreRenderer.js';
+import { WebGlRenderOp } from './WebGlRenderOp.js';
+import type { CoreContextTexture } from '../CoreContextTexture.js';
+import { type CoreWebGlParameters, type CoreWebGlExtensions, type WebGlColor } from './internal/RendererUtils.js';
+import { Texture, type TextureCoords } from '../../textures/Texture.js';
+import { BufferCollection } from './internal/BufferCollection.js';
+import { WebGlShaderProgram } from './WebGlShaderProgram.js';
+import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import { type CoreNode } from '../../CoreNode.js';
+import type { WebGlShaderType } from './WebGlShaderNode.js';
+import { WebGlShaderNode } from './WebGlShaderNode.js';
+export type WebGlRendererOptions = CoreRendererOptions;
+interface CoreWebGlSystem {
+    parameters: CoreWebGlParameters;
+    extensions: CoreWebGlExtensions;
+}
+export declare class WebGlRenderer extends CoreRenderer {
+    glw: WebGlContextWrapper;
+    system: CoreWebGlSystem;
+    quadBuffer: ArrayBuffer;
+    fQuadBuffer: Float32Array;
+    uiQuadBuffer: Uint32Array;
+    renderOps: WebGlRenderOp[];
+    curBufferIdx: number;
+    curRenderOp: WebGlRenderOp | null;
+    rttNodes: CoreNode[];
+    activeRttNode: CoreNode | null;
+    defaultTextureCoords: TextureCoords;
+    defaultShaderNode: WebGlShaderNode | null;
+    quadBufferCollection: BufferCollection;
+    clearColor: WebGlColor;
+    /**
+     * White pixel texture used by default when no texture is specified.
+     */
+    quadBufferUsage: number;
+    numQuadsRendered: number;
+    /**
+     * Whether the renderer is currently rendering to a texture.
+     */
+    renderToTextureActive: boolean;
+    constructor(options: WebGlRendererOptions);
+    reset(): void;
+    createShaderProgram(shaderType: WebGlShaderType, props: Record<string, unknown>): WebGlShaderProgram;
+    createShaderNode(shaderKey: string, shaderType: WebGlShaderType, props?: Record<string, unknown>, program?: WebGlShaderProgram): WebGlShaderNode<Record<string, unknown>>;
+    supportsShaderType(shaderType: Readonly<WebGlShaderType>): boolean;
+    createCtxTexture(textureSource: Texture): CoreContextTexture;
+    /**
+     * This function adds a quad (a rectangle composed of two triangles) to the WebGL rendering pipeline.
+     *
+     * It takes a set of options that define the quad's properties, such as its dimensions, colors, texture, shader, and transformation matrix.
+     * The function first updates the shader properties with the current dimensions if necessary, then sets the default texture if none is provided.
+     * It then checks if a new render operation is needed, based on the current shader and clipping rectangle.
+     * If a new render operation is needed, it creates one and updates the current render operation.
+     * The function then adjusts the texture coordinates based on the texture options and adds the texture to the texture manager.
+     *
+     * Finally, it calculates the vertices for the quad, taking into account any transformations, and adds them to the quad buffer.
+     * The function updates the length and number of quads in the current render operation, and updates the current buffer index.
+     */
+    addQuad(params: QuadOptions): void;
+    /**
+     * Replace the existing RenderOp with a new one that uses the specified Shader
+     * and starts at the specified buffer index.
+     *
+     * @param shader
+     * @param bufferIdx
+     */
+    private newRenderOp;
+    /**
+     * Add a texture to the current RenderOp. If the texture cannot be added to the
+     * current RenderOp, a new RenderOp will be created and the texture will be added
+     * to that one.
+     *
+     * If the texture cannot be added to the new RenderOp, an error will be thrown.
+     *
+     * @param texture
+     * @param bufferIdx
+     * @param recursive
+     * @returns Assigned Texture Index of the texture in the render op
+     */
+    private addTexture;
+    /**
+     * Test if the current Render operation can be reused for the specified parameters.
+     * @param params
+     * @returns
+     */
+    reuseRenderOp(params: QuadOptions): boolean;
+    /**
+     * add RenderOp to the render pipeline
+     */
+    addRenderOp(renderable: WebGlRenderOp): void;
+    /**
+     * Render the current set of RenderOps to render to the specified surface.
+     *
+     * TODO: 'screen' is the only supported surface at the moment.
+     *
+     * @param surface
+     */
+    render(surface?: 'screen' | CoreContextTexture): void;
+    getQuadCount(): number;
+    renderToTexture(node: CoreNode): void;
+    /**
+     * Inserts an RTT node into `this.rttNodes` while maintaining the correct rendering order based on hierarchy.
+     *
+     * Rendering order for RTT nodes is critical when nested RTT nodes exist in a parent-child relationship.
+     * Specifically:
+     *  - Child RTT nodes must be rendered before their RTT-enabled parents to ensure proper texture composition.
+     *  - If an RTT node is added and it has existing RTT children, it should be rendered after those children.
+     *
+     * This function addresses both cases by:
+     * 1. **Checking Upwards**: It traverses the node's hierarchy upwards to identify any RTT parent
+     *    already in `rttNodes`. If an RTT parent is found, the new node is placed before this parent.
+     * 2. **Checking Downwards**: It traverses the node’s children recursively to find any RTT-enabled
+     *    children that are already in `rttNodes`. If such children are found, the new node is inserted
+     *    after the last (highest index) RTT child node.
+     *
+     * The final calculated insertion index ensures the new node is positioned in `rttNodes` to respect
+     * both parent-before-child and child-before-parent rendering rules, preserving the correct order
+     * for the WebGL renderer.
+     *
+     * @param node - The RTT-enabled CoreNode to be added to `rttNodes` in the appropriate hierarchical position.
+     */
+    private insertRTTNodeInOrder;
+    private findMaxChildRTTIndex;
+    renderRTTNodes(): void;
+    updateViewport(): void;
+    removeRTTNode(node: CoreNode): void;
+    getBufferInfo(): BufferInfo | null;
+    getDefaultShaderNode(): WebGlShaderNode;
+    getTextureCoords(node: CoreNode): TextureCoords;
+    /**
+     * Sets the glClearColor to the specified color.   *
+     * @param color - The color to set as the clear color, represented as a 32-bit integer.
+     */
+    updateClearColor(color: number): void;
+}
+export {};