@lightningjs/renderer 3.0.0-beta9 → 3.0.0

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

@@ -0,0 +1,649 @@
+/*
+ * 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 { assertTruthy, createWebGLContext, hasOwn } from '../../../utils.js';
+import { CoreRenderer, } from '../CoreRenderer.js';
+import { WebGlCoreRenderOp } from './WebGlCoreRenderOp.js';
+import { createIndexBuffer, getWebGlParameters, getWebGlExtensions, } from './internal/RendererUtils.js';
+import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
+import { Texture, TextureType } from '../../textures/Texture.js';
+import { SubTexture } from '../../textures/SubTexture.js';
+import { WebGlCoreCtxSubTexture } from './WebGlCoreCtxSubTexture.js';
+import { CoreShaderManager } from '../../CoreShaderManager.js';
+import { BufferCollection } from './internal/BufferCollection.js';
+import { compareRect, getNormalizedRgbaComponents, } from '../../lib/utils.js';
+import { WebGlCoreShader } from './WebGlCoreShader.js';
+import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import { RenderTexture } from '../../textures/RenderTexture.js';
+import { CoreNodeRenderState } from '../../CoreNode.js';
+import { WebGlCoreCtxRenderTexture } from './WebGlCoreCtxRenderTexture.js';
+const WORDS_PER_QUAD = 24;
+export class WebGlCoreRenderer extends CoreRenderer {
+    //// WebGL Native Context and Data
+    glw;
+    system;
+    //// Persistent data
+    quadBuffer;
+    fQuadBuffer;
+    uiQuadBuffer;
+    renderOps = [];
+    //// Render Op / Buffer Filling State
+    curBufferIdx = 0;
+    curRenderOp = null;
+    rttNodes = [];
+    activeRttNode = null;
+    //// Default Shader
+    defShaderCtrl;
+    defaultShader;
+    quadBufferCollection;
+    clearColor = {
+        raw: 0x00000000,
+        normalized: [0, 0, 0, 0],
+    };
+    /**
+     * White pixel texture used by default when no texture is specified.
+     */
+    quadBufferUsage = 0;
+    numQuadsRendered = 0;
+    /**
+     * Whether the renderer is currently rendering to a texture.
+     */
+    renderToTextureActive = false;
+    constructor(options) {
+        super(options);
+        this.quadBuffer = new ArrayBuffer(this.stage.options.quadBufferSize);
+        this.fQuadBuffer = new Float32Array(this.quadBuffer);
+        this.uiQuadBuffer = new Uint32Array(this.quadBuffer);
+        this.mode = 'webgl';
+        const { canvas, clearColor, bufferMemory } = options;
+        const gl = createWebGLContext(canvas, options.forceWebGL2, options.contextSpy);
+        const glw = (this.glw = new WebGlContextWrapper(gl));
+        glw.viewport(0, 0, canvas.width, canvas.height);
+        this.updateClearColor(clearColor);
+        glw.setBlend(true);
+        glw.blendFunc(glw.ONE, glw.ONE_MINUS_SRC_ALPHA);
+        createIndexBuffer(glw, bufferMemory);
+        this.system = {
+            parameters: getWebGlParameters(this.glw),
+            extensions: getWebGlExtensions(this.glw),
+        };
+        this.shManager.renderer = this;
+        this.defShaderCtrl = this.shManager.loadShader('DefaultShader');
+        this.defaultShader = this.defShaderCtrl.shader;
+        const quadBuffer = glw.createBuffer();
+        assertTruthy(quadBuffer);
+        const stride = 8 * Float32Array.BYTES_PER_ELEMENT;
+        this.quadBufferCollection = new BufferCollection([
+            {
+                buffer: quadBuffer,
+                attributes: {
+                    a_position: {
+                        name: 'a_position',
+                        size: 2, // 2 components per iteration
+                        type: glw.FLOAT, // the data is 32bit floats
+                        normalized: false, // don't normalize the data
+                        stride, // 0 = move forward size * sizeof(type) each iteration to get the next position
+                        offset: 0, // start at the beginning of the buffer
+                    },
+                    a_textureCoordinate: {
+                        name: 'a_textureCoordinate',
+                        size: 2,
+                        type: glw.FLOAT,
+                        normalized: false,
+                        stride,
+                        offset: 2 * Float32Array.BYTES_PER_ELEMENT,
+                    },
+                    a_color: {
+                        name: 'a_color',
+                        size: 4,
+                        type: glw.UNSIGNED_BYTE,
+                        normalized: true,
+                        stride,
+                        offset: 4 * Float32Array.BYTES_PER_ELEMENT,
+                    },
+                    a_textureIndex: {
+                        name: 'a_textureIndex',
+                        size: 1,
+                        type: glw.FLOAT,
+                        normalized: false,
+                        stride,
+                        offset: 5 * Float32Array.BYTES_PER_ELEMENT,
+                    },
+                    a_nodeCoordinate: {
+                        name: 'a_nodeCoordinate',
+                        size: 2,
+                        type: glw.FLOAT,
+                        normalized: false,
+                        stride,
+                        offset: 6 * Float32Array.BYTES_PER_ELEMENT,
+                    },
+                },
+            },
+        ]);
+    }
+    reset() {
+        const { glw } = this;
+        this.curBufferIdx = 0;
+        this.curRenderOp = null;
+        this.renderOps.length = 0;
+        glw.setScissorTest(false);
+        glw.clear();
+    }
+    getShaderManager() {
+        return this.shManager;
+    }
+    createCtxTexture(textureSource) {
+        if (textureSource instanceof SubTexture) {
+            return new WebGlCoreCtxSubTexture(this.glw, this.txMemManager, textureSource);
+        }
+        else if (textureSource instanceof RenderTexture) {
+            return new WebGlCoreCtxRenderTexture(this.glw, this.txMemManager, textureSource);
+        }
+        return new WebGlCoreCtxTexture(this.glw, this.txMemManager, textureSource);
+    }
+    /**
+     * 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) {
+        const { fQuadBuffer, uiQuadBuffer } = this;
+        let texture = params.texture;
+        assertTruthy(texture !== null, 'Texture is required');
+        /**
+         * If the shader props contain any automatic properties, update it with the
+         * current dimensions and or alpha that will be used to render the quad.
+         */
+        if (params.shader !== this.defaultShader) {
+            if (hasOwn(params.shaderProps, '$dimensions') == true) {
+                const dimensions = params.shaderProps.$dimensions;
+                dimensions.width = params.width;
+                dimensions.height = params.height;
+            }
+            if (hasOwn(params.shaderProps, '$alpha') === true) {
+                params.shaderProps.$alpha = params.alpha;
+            }
+        }
+        let { curBufferIdx: bufferIdx, curRenderOp } = this;
+        const targetDims = { width: params.width, height: params.height };
+        if (this.reuseRenderOp(params) === false) {
+            this.newRenderOp(params.shader, params.shaderProps, params.alpha, targetDims, params.clippingRect, bufferIdx, params.rtt, params.parentHasRenderTexture, params.framebufferDimensions);
+            curRenderOp = this.curRenderOp;
+            assertTruthy(curRenderOp);
+        }
+        let ctxTexture = undefined;
+        let texCoordX1 = 0;
+        let texCoordY1 = 0;
+        let texCoordX2 = 1;
+        let texCoordY2 = 1;
+        if (texture.type === TextureType.subTexture) {
+            const { x: tx, y: ty, width: tw, height: th, } = texture.props;
+            const { width: parentW = 0, height: parentH = 0 } = texture.parentTexture.dimensions || { width: 0, height: 0 };
+            texCoordX1 = tx / parentW;
+            texCoordX2 = texCoordX1 + tw / parentW;
+            texCoordY1 = ty / parentH;
+            texCoordY2 = texCoordY1 + th / parentH;
+            texture = texture.parentTexture;
+            ctxTexture = texture.ctxTexture;
+        }
+        else {
+            ctxTexture = texture.ctxTexture;
+            if (ctxTexture === undefined) {
+                ctxTexture = this.stage.defaultTexture?.ctxTexture;
+                console.warn('WebGL Renderer: Texture does not have a ctxTexture, using default texture instead');
+            }
+            texCoordX1 = ctxTexture.txCoordX1;
+            texCoordY1 = ctxTexture.txCoordY1;
+            texCoordX2 = ctxTexture.txCoordX2;
+            texCoordY2 = ctxTexture.txCoordY2;
+        }
+        if (texture.type === TextureType.image &&
+            params.textureOptions !== null &&
+            params.textureOptions.resizeMode !== undefined &&
+            texture.dimensions !== null) {
+            const resizeMode = params.textureOptions.resizeMode;
+            const { width: tw, height: th } = texture.dimensions;
+            if (resizeMode.type === 'cover') {
+                const scaleX = params.width / tw;
+                const scaleY = params.height / th;
+                const scale = Math.max(scaleX, scaleY);
+                const precision = 1 / scale;
+                // Determine based on width
+                if (scale && scaleX && scaleX < scale) {
+                    const desiredSize = precision * params.width;
+                    texCoordX1 = (1 - desiredSize / tw) * (resizeMode.clipX ?? 0.5);
+                    texCoordX2 = texCoordX1 + desiredSize / tw;
+                }
+                // Determine based on height
+                if (scale && scaleY && scaleY < scale) {
+                    const desiredSize = precision * params.height;
+                    texCoordY1 = (1 - desiredSize / th) * (resizeMode.clipY ?? 0.5);
+                    texCoordY2 = texCoordY1 + desiredSize / th;
+                }
+            }
+        }
+        // Flip texture coordinates if dictated by texture options
+        let flipY = 0;
+        if (params.textureOptions !== null) {
+            if (params.textureOptions.flipX === true) {
+                [texCoordX1, texCoordX2] = [texCoordX2, texCoordX1];
+            }
+            // convert to integer for bitwise operation below
+            flipY = +(params.textureOptions.flipY || false);
+        }
+        // Eitherone should be true
+        if (flipY ^ +(texture.type === TextureType.renderToTexture)) {
+            [texCoordY1, texCoordY2] = [texCoordY2, texCoordY1];
+        }
+        const textureIdx = this.addTexture(ctxTexture, bufferIdx);
+        assertTruthy(this.curRenderOp !== null);
+        if (params.renderCoords) {
+            // Upper-Left
+            fQuadBuffer[bufferIdx++] = params.renderCoords.x1; // vertexX
+            fQuadBuffer[bufferIdx++] = params.renderCoords.y1; // vertexY
+            fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
+            fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
+            uiQuadBuffer[bufferIdx++] = params.colorTl; // color
+            fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
+            fQuadBuffer[bufferIdx++] = 0;
+            fQuadBuffer[bufferIdx++] = 0;
+            // Upper-Right
+            fQuadBuffer[bufferIdx++] = params.renderCoords.x2;
+            fQuadBuffer[bufferIdx++] = params.renderCoords.y2;
+            fQuadBuffer[bufferIdx++] = texCoordX2;
+            fQuadBuffer[bufferIdx++] = texCoordY1;
+            uiQuadBuffer[bufferIdx++] = params.colorTr;
+            fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 1;
+            fQuadBuffer[bufferIdx++] = 0;
+            // Lower-Left
+            fQuadBuffer[bufferIdx++] = params.renderCoords.x4;
+            fQuadBuffer[bufferIdx++] = params.renderCoords.y4;
+            fQuadBuffer[bufferIdx++] = texCoordX1;
+            fQuadBuffer[bufferIdx++] = texCoordY2;
+            uiQuadBuffer[bufferIdx++] = params.colorBl;
+            fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 0;
+            fQuadBuffer[bufferIdx++] = 1;
+            // Lower-Right
+            fQuadBuffer[bufferIdx++] = params.renderCoords.x3;
+            fQuadBuffer[bufferIdx++] = params.renderCoords.y3;
+            fQuadBuffer[bufferIdx++] = texCoordX2;
+            fQuadBuffer[bufferIdx++] = texCoordY2;
+            uiQuadBuffer[bufferIdx++] = params.colorBr;
+            fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 1;
+            fQuadBuffer[bufferIdx++] = 1;
+        }
+        else if (params.tb !== 0 || params.tc !== 0) {
+            // Upper-Left
+            fQuadBuffer[bufferIdx++] = params.tx; // vertexX
+            fQuadBuffer[bufferIdx++] = params.ty; // vertexY
+            fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
+            fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
+            uiQuadBuffer[bufferIdx++] = params.colorTl; // color
+            fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
+            fQuadBuffer[bufferIdx++] = 0;
+            fQuadBuffer[bufferIdx++] = 0;
+            // Upper-Right
+            fQuadBuffer[bufferIdx++] = params.tx + params.width * params.ta;
+            fQuadBuffer[bufferIdx++] = params.ty + params.width * params.tc;
+            fQuadBuffer[bufferIdx++] = texCoordX2;
+            fQuadBuffer[bufferIdx++] = texCoordY1;
+            uiQuadBuffer[bufferIdx++] = params.colorTr;
+            fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 1;
+            fQuadBuffer[bufferIdx++] = 0;
+            // Lower-Left
+            fQuadBuffer[bufferIdx++] = params.tx + params.height * params.tb;
+            fQuadBuffer[bufferIdx++] = params.ty + params.height * params.td;
+            fQuadBuffer[bufferIdx++] = texCoordX1;
+            fQuadBuffer[bufferIdx++] = texCoordY2;
+            uiQuadBuffer[bufferIdx++] = params.colorBl;
+            fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 0;
+            fQuadBuffer[bufferIdx++] = 1;
+            // Lower-Right
+            fQuadBuffer[bufferIdx++] =
+                params.tx + params.width * params.ta + params.height * params.tb;
+            fQuadBuffer[bufferIdx++] =
+                params.ty + params.width * params.tc + params.height * params.td;
+            fQuadBuffer[bufferIdx++] = texCoordX2;
+            fQuadBuffer[bufferIdx++] = texCoordY2;
+            uiQuadBuffer[bufferIdx++] = params.colorBr;
+            fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 1;
+            fQuadBuffer[bufferIdx++] = 1;
+        }
+        else {
+            // Calculate the right corner of the quad
+            // multiplied by the scale
+            const rightCornerX = params.tx + params.width * params.ta;
+            const rightCornerY = params.ty + params.height * params.td;
+            // Upper-Left
+            fQuadBuffer[bufferIdx++] = params.tx; // vertexX
+            fQuadBuffer[bufferIdx++] = params.ty; // vertexY
+            fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
+            fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
+            uiQuadBuffer[bufferIdx++] = params.colorTl; // color
+            fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
+            fQuadBuffer[bufferIdx++] = 0;
+            fQuadBuffer[bufferIdx++] = 0;
+            // Upper-Right
+            fQuadBuffer[bufferIdx++] = rightCornerX;
+            fQuadBuffer[bufferIdx++] = params.ty;
+            fQuadBuffer[bufferIdx++] = texCoordX2;
+            fQuadBuffer[bufferIdx++] = texCoordY1;
+            uiQuadBuffer[bufferIdx++] = params.colorTr;
+            fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 1;
+            fQuadBuffer[bufferIdx++] = 0;
+            // Lower-Left
+            fQuadBuffer[bufferIdx++] = params.tx;
+            fQuadBuffer[bufferIdx++] = rightCornerY;
+            fQuadBuffer[bufferIdx++] = texCoordX1;
+            fQuadBuffer[bufferIdx++] = texCoordY2;
+            uiQuadBuffer[bufferIdx++] = params.colorBl;
+            fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 0;
+            fQuadBuffer[bufferIdx++] = 1;
+            // Lower-Right
+            fQuadBuffer[bufferIdx++] = rightCornerX;
+            fQuadBuffer[bufferIdx++] = rightCornerY;
+            fQuadBuffer[bufferIdx++] = texCoordX2;
+            fQuadBuffer[bufferIdx++] = texCoordY2;
+            uiQuadBuffer[bufferIdx++] = params.colorBr;
+            fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 1;
+            fQuadBuffer[bufferIdx++] = 1;
+        }
+        // Update the length of the current render op
+        this.curRenderOp.numQuads++;
+        this.curBufferIdx = bufferIdx;
+    }
+    /**
+     * Replace the existing RenderOp with a new one that uses the specified Shader
+     * and starts at the specified buffer index.
+     *
+     * @param shader
+     * @param bufferIdx
+     */
+    newRenderOp(shader, shaderProps, alpha, dimensions, clippingRect, bufferIdx, renderToTexture, parentHasRenderTexture, framebufferDimensions) {
+        const curRenderOp = new WebGlCoreRenderOp(this.glw, this.options, this.quadBufferCollection, shader, shaderProps, alpha, clippingRect, dimensions, bufferIdx, 0, // Z-Index is only used for explictly added Render Ops
+        renderToTexture, parentHasRenderTexture, framebufferDimensions);
+        this.curRenderOp = curRenderOp;
+        this.renderOps.push(curRenderOp);
+    }
+    /**
+     * 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
+     */
+    addTexture(texture, bufferIdx, recursive) {
+        const { curRenderOp } = this;
+        assertTruthy(curRenderOp);
+        const textureIdx = curRenderOp.addTexture(texture);
+        // TODO: Refactor to be more DRY
+        if (textureIdx === 0xffffffff) {
+            if (recursive) {
+                throw new Error('Unable to add texture to render op');
+            }
+            this.newRenderOp(curRenderOp.shader, curRenderOp.shaderProps, curRenderOp.alpha, curRenderOp.dimensions, curRenderOp.clippingRect, bufferIdx);
+            return this.addTexture(texture, bufferIdx, true);
+        }
+        return textureIdx;
+    }
+    /**
+     * Test if the current Render operation can be reused for the specified parameters.
+     * @param params
+     * @returns
+     */
+    reuseRenderOp(params) {
+        const { shader, shaderProps, parentHasRenderTexture, rtt, clippingRect } = params;
+        // Switching shader program will require a new render operation
+        if (this.curRenderOp?.shader !== shader) {
+            return false;
+        }
+        // Switching clipping rect will require a new render operation
+        if (compareRect(this.curRenderOp.clippingRect, clippingRect) === false) {
+            return false;
+        }
+        // Force new render operation if rendering to texture
+        // @todo: This needs to be improved, render operations could also be reused
+        // for rendering to texture
+        if (parentHasRenderTexture === true || rtt === true) {
+            return false;
+        }
+        // Check if the shader can batch the shader properties
+        if (this.curRenderOp.shader !== this.defaultShader &&
+            this.curRenderOp.shader.canBatchShaderProps(this.curRenderOp.shaderProps, shaderProps) === false) {
+            return false;
+        }
+        // Render operation can be reused
+        return true;
+    }
+    /**
+     * add RenderOp to the render pipeline
+     */
+    addRenderOp(renderable) {
+        this.renderOps.push(renderable);
+        this.curRenderOp = null;
+    }
+    /**
+     * 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') {
+        const { glw, quadBuffer } = this;
+        const arr = new Float32Array(quadBuffer, 0, this.curBufferIdx);
+        const buffer = this.quadBufferCollection.getBuffer('a_position') || null;
+        glw.arrayBufferData(buffer, arr, glw.STATIC_DRAW);
+        for (let i = 0, length = this.renderOps.length; i < length; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this.renderOps[i].draw();
+        }
+        this.quadBufferUsage = this.curBufferIdx * arr.BYTES_PER_ELEMENT;
+        // Calculate the size of each quad in bytes (4 vertices per quad) times the size of each vertex in bytes
+        const QUAD_SIZE_IN_BYTES = 4 * (8 * arr.BYTES_PER_ELEMENT); // 8 attributes per vertex
+        this.numQuadsRendered = this.quadBufferUsage / QUAD_SIZE_IN_BYTES;
+    }
+    getQuadCount() {
+        return this.numQuadsRendered;
+    }
+    renderToTexture(node) {
+        for (let i = 0; i < this.rttNodes.length; i++) {
+            if (this.rttNodes[i] === node) {
+                return;
+            }
+        }
+        this.insertRTTNodeInOrder(node);
+    }
+    /**
+     * 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.
+     */
+    insertRTTNodeInOrder(node) {
+        let insertIndex = this.rttNodes.length; // Default to the end of the array
+        // 1. Traverse upwards to ensure the node is placed before its RTT parent (if any).
+        let currentNode = node;
+        while (currentNode) {
+            if (!currentNode.parent) {
+                break;
+            }
+            const parentIndex = this.rttNodes.indexOf(currentNode.parent);
+            if (parentIndex !== -1) {
+                // Found an RTT parent in the list; set insertIndex to place node before the parent
+                insertIndex = parentIndex;
+                break;
+            }
+            currentNode = currentNode.parent;
+        }
+        // 2. Traverse downwards to ensure the node is placed after any RTT children.
+        // Look through each child recursively to see if any are already in rttNodes.
+        const maxChildIndex = this.findMaxChildRTTIndex(node);
+        if (maxChildIndex !== -1) {
+            // Adjust insertIndex to be after the last child RTT node
+            insertIndex = Math.max(insertIndex, maxChildIndex + 1);
+        }
+        // 3. Insert the node at the calculated position
+        this.rttNodes.splice(insertIndex, 0, node);
+    }
+    // Helper function to find the highest index of any RTT children of a node within rttNodes
+    findMaxChildRTTIndex(node) {
+        let maxIndex = -1;
+        const traverseChildren = (currentNode) => {
+            const currentIndex = this.rttNodes.indexOf(currentNode);
+            if (currentIndex !== -1) {
+                maxIndex = Math.max(maxIndex, currentIndex);
+            }
+            // Recursively check all children of the current node
+            for (const child of currentNode.children) {
+                traverseChildren(child);
+            }
+        };
+        // Start traversal directly with the provided node
+        traverseChildren(node);
+        return maxIndex;
+    }
+    renderRTTNodes() {
+        const { glw } = this;
+        const { txManager } = this.stage;
+        // Render all associated RTT nodes to their textures
+        for (let i = 0; i < this.rttNodes.length; i++) {
+            const node = this.rttNodes[i];
+            // Skip nodes that don't have RTT updates
+            if (node === undefined || node.hasRTTupdates === false) {
+                continue;
+            }
+            // Skip nodes that are not visible
+            if (node.worldAlpha === 0 ||
+                (node.strictBounds === true &&
+                    node.renderState === CoreNodeRenderState.OutOfBounds)) {
+                continue;
+            }
+            // Skip nodes that do not have a loaded texture
+            if (node.texture === null || node.texture.state !== 'loaded') {
+                continue;
+            }
+            // Set the active RTT node to the current node
+            // So we can prevent rendering children of nested RTT nodes
+            this.activeRttNode = node;
+            assertTruthy(node.texture, 'RTT node missing texture');
+            const ctxTexture = node.texture.ctxTexture;
+            assertTruthy(ctxTexture instanceof WebGlCoreCtxRenderTexture);
+            this.renderToTextureActive = true;
+            // Bind the the texture's framebuffer
+            glw.bindFramebuffer(ctxTexture.framebuffer);
+            glw.viewport(0, 0, ctxTexture.w, ctxTexture.h);
+            // Set the clear color to transparent
+            glw.clearColor(0, 0, 0, 0);
+            glw.clear();
+            // Render all associated quads to the texture
+            for (let i = 0; i < node.children.length; i++) {
+                const child = node.children[i];
+                if (child === undefined) {
+                    continue;
+                }
+                this.stage.addQuads(child);
+                child.hasRTTupdates = false;
+            }
+            // Render all associated quads to the texture
+            this.render();
+            // Reset render operations
+            this.renderOps.length = 0;
+            node.hasRTTupdates = false;
+        }
+        const clearColor = this.clearColor.normalized;
+        // Restore the default clear color
+        glw.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
+        // Bind the default framebuffer
+        glw.bindFramebuffer(null);
+        glw.viewport(0, 0, this.glw.canvas.width, this.glw.canvas.height);
+        this.renderToTextureActive = false;
+    }
+    removeRTTNode(node) {
+        const index = this.rttNodes.indexOf(node);
+        if (index === -1) {
+            return;
+        }
+        this.rttNodes.splice(index, 1);
+    }
+    getBufferInfo() {
+        const bufferInfo = {
+            totalAvailable: this.stage.options.quadBufferSize,
+            totalUsed: this.quadBufferUsage,
+        };
+        return bufferInfo;
+    }
+    getDefShaderCtr() {
+        return this.defShaderCtrl;
+    }
+    /**
+     * Updates the WebGL context's clear color and clears the color buffer.
+     *
+     * @param color - The color to set as the clear color, represented as a 32-bit integer.
+     */
+    updateClearColor(color) {
+        if (this.clearColor.raw === color) {
+            return;
+        }
+        const glw = this.glw;
+        const normalizedColor = getNormalizedRgbaComponents(color);
+        glw.clearColor(normalizedColor[0], normalizedColor[1], normalizedColor[2], normalizedColor[3]);
+        this.clearColor = {
+            raw: color,
+            normalized: normalizedColor,
+        };
+        glw.clear();
+    }
+}
+//# sourceMappingURL=WebGlCoreRenderer.js.map