@lightningtv/renderer 3.0.0-beta1 → 3.2.4

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

@@ -1,27 +1,8 @@
-/*
- * 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 } from '../../../utils.js';
+import { createWebGLContext, USE_RTT, RENDER_TEXT_BATCHING, DIRTY_QUAD_BUFFER, } from '../../../utils.js';
 import { CoreRenderer, } from '../CoreRenderer.js';
-import { WebGlRenderOp } from './WebGlRenderOp.js';
 import { createIndexBuffer, getWebGlParameters, getWebGlExtensions, } from './internal/RendererUtils.js';
 import { WebGlCtxTexture } from './WebGlCtxTexture.js';
-import { Texture, TextureType } from '../../textures/Texture.js';
+import { Texture, TextureType, } from '../../textures/Texture.js';
 import { SubTexture } from '../../textures/SubTexture.js';
 import { WebGlCtxSubTexture } from './WebGlCtxSubTexture.js';
 import { BufferCollection } from './internal/BufferCollection.js';
@@ -29,11 +10,10 @@ import { compareRect, getNormalizedRgbaComponents } from '../../lib/utils.js';
 import { WebGlShaderProgram } from './WebGlShaderProgram.js';
 import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import { RenderTexture } from '../../textures/RenderTexture.js';
-import { CoreNodeRenderState } from '../../CoreNode.js';
+import { CoreNodeRenderState, CoreNode } from '../../CoreNode.js';
 import { WebGlCtxRenderTexture } from './WebGlCtxRenderTexture.js';
 import { Default } from '../../shaders/webgl/Default.js';
 import { WebGlShaderNode } from './WebGlShaderNode.js';
-const WORDS_PER_QUAD = 24;
 export class WebGlRenderer extends CoreRenderer {
     //// WebGL Native Context and Data
     glw;
@@ -43,11 +23,25 @@ export class WebGlRenderer extends CoreRenderer {
     fQuadBuffer;
     uiQuadBuffer;
     renderOps = [];
+    coreTextRenderOps = [];
     //// Render Op / Buffer Filling State
     curBufferIdx = 0;
     curRenderOp = null;
     rttNodes = [];
     activeRttNode = null;
+    /**
+     * When true, the entire quad buffer is re-uploaded to the GPU via bufferData
+     * (DYNAMIC_DRAW) rather than the surgical per-node bufferSubData path.
+     * Set to true on first frame and whenever the renderList changes structurally
+     * (node added / removed / reordered).
+     */
+    needsFullUpload = true;
+    defaultTextureCoords = {
+        x1: 0,
+        y1: 0,
+        x2: 1,
+        y2: 1,
+    };
     //// Default Shader
     defaultShaderNode = null;
     quadBufferCollection;
@@ -81,9 +75,25 @@ export class WebGlRenderer extends CoreRenderer {
             parameters: getWebGlParameters(this.glw),
             extensions: getWebGlExtensions(this.glw),
         };
+        // Create the static node coords buffer
+        // 80 is the magic number used in createIndexBuffer
+        // @see RendererUtils.ts
+        const maxQuads = ~~(this.stage.bufferMemory / 80);
+        const nodeCoords = new Float32Array(maxQuads * 8);
+        for (let i = 0; i < maxQuads * 8; i += 8) {
+            nodeCoords[i] = 0;
+            nodeCoords[i + 1] = 0;
+            nodeCoords[i + 2] = 1;
+            nodeCoords[i + 3] = 0;
+            nodeCoords[i + 4] = 0;
+            nodeCoords[i + 5] = 1;
+            nodeCoords[i + 6] = 1;
+            nodeCoords[i + 7] = 1;
+        }
+        const nodeCoordsBuffer = glw.createBuffer();
+        glw.arrayBufferData(nodeCoordsBuffer, nodeCoords, glw.STATIC_DRAW);
         const quadBuffer = glw.createBuffer();
-        assertTruthy(quadBuffer);
-        const stride = 8 * Float32Array.BYTES_PER_ELEMENT;
+        const stride = 5 * Float32Array.BYTES_PER_ELEMENT;
         this.quadBufferCollection = new BufferCollection([
             {
                 buffer: quadBuffer,
@@ -112,21 +122,18 @@ export class WebGlRenderer extends CoreRenderer {
                         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,
-                    },
+                },
+            },
+            {
+                buffer: nodeCoordsBuffer,
+                attributes: {
                     a_nodeCoords: {
                         name: 'a_nodeCoords',
                         size: 2,
                         type: glw.FLOAT,
                         normalized: false,
-                        stride,
-                        offset: 6 * Float32Array.BYTES_PER_ELEMENT,
+                        stride: 2 * Float32Array.BYTES_PER_ELEMENT,
+                        offset: 0,
                     },
                 },
             },
@@ -134,11 +141,22 @@ export class WebGlRenderer extends CoreRenderer {
     }
     reset() {
         const { glw } = this;
-        this.curBufferIdx = 0;
+        if (DIRTY_QUAD_BUFFER) {
+            // NOTE: curBufferIdx is intentionally NOT reset here.
+            // Each node owns a permanent slot in the quad buffer (assigned in addQuad
+            // on first use). Resetting the index is only done when the renderList
+            // changes structurally (see Stage.requestRenderListUpdate).
+        }
+        else {
+            this.curBufferIdx = 0;
+        }
         this.curRenderOp = null;
         this.renderOps.length = 0;
+        this.coreTextRenderOps.length = 0;
         glw.setScissorTest(false);
-        glw.clear();
+        if (this.stage.options.enableClear !== false) {
+            glw.clear();
+        }
     }
     createShaderProgram(shaderType, props) {
         return new WebGlShaderProgram(this, shaderType, props);
@@ -171,112 +189,77 @@ export class WebGlRenderer extends CoreRenderer {
      * 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');
-        let { curBufferIdx: bufferIdx, curRenderOp } = this;
-        if (this.reuseRenderOp(params) === false) {
-            this.newRenderOp(params, bufferIdx);
-            curRenderOp = this.curRenderOp;
-            assertTruthy(curRenderOp);
-        }
-        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;
-        }
-        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;
-                }
-            }
+    addQuad(node) {
+        const f = this.fQuadBuffer;
+        const u = this.uiQuadBuffer;
+        if (RENDER_TEXT_BATCHING === true && node.props.zIndex) {
+            this.flushTextRenderOps();
         }
-        // Flip texture coordinates if dictated by texture options
-        let flipY = 0;
-        if (params.textureOptions !== null) {
-            if (params.textureOptions.flipX === true) {
-                [texCoordX1, texCoordX2] = [texCoordX2, texCoordX1];
+        const reuse = this.reuseRenderOp(node);
+        // Assign a permanent buffer slot if this node hasn't been registered yet.
+        // Once assigned, the slot index never changes unless the renderList is
+        // rebuilt (which resets quadBufferIndex to -1 for all nodes).
+        if (DIRTY_QUAD_BUFFER) {
+            if (node.quadBufferIndex === -1) {
+                node.quadBufferIndex = this.curBufferIdx;
+                this.curBufferIdx += 20;
             }
-            // 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 ctxTexture = texture.ctxTexture;
-        assertTruthy(ctxTexture instanceof WebGlCtxTexture);
-        const textureIdx = this.addTexture(ctxTexture, bufferIdx);
-        assertTruthy(this.curRenderOp !== null);
-        assertTruthy(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; //node X coord
-        fQuadBuffer[bufferIdx++] = 0; //node y coord
-        // 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; //node X coord
-        fQuadBuffer[bufferIdx++] = 0; //node y coord
-        // 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; //node X coord
-        fQuadBuffer[bufferIdx++] = 1; //node y coord
-        // 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; //node X coord
-        fQuadBuffer[bufferIdx++] = 1; //node y coord
-        // Update the length of the current render op
-        this.curRenderOp.length += WORDS_PER_QUAD;
+        }
+        else {
+            // Legacy path: always advance from curBufferIdx sequentially.
+            node.quadBufferIndex = this.curBufferIdx;
+            this.curBufferIdx += 20;
+        }
+        const i = node.quadBufferIndex;
+        if (reuse === false) {
+            this.newRenderOp(node, i);
+        }
+        const props = node.props;
+        let tx = props.texture || this.stage.defaultTexture;
+        if (tx.type === TextureType.subTexture) {
+            tx = tx.parentTexture;
+        }
+        const texture = tx.ctxTexture;
+        let tidx = this.curRenderOp.addTexture(texture);
+        if (tidx === 0xffffffff) {
+            this.newRenderOp(node, i);
+            tidx = this.curRenderOp.addTexture(texture);
+        }
+        // Only rewrite the CPU-side buffer when the node is dirty.
+        // The GPU upload is deferred to render().
+        if (!DIRTY_QUAD_BUFFER || node.isQuadDirty) {
+            const rc = node.renderCoords;
+            const tc = node.textureCoords || this.defaultTextureCoords;
+            const cTl = node.premultipliedColorTl;
+            const cTr = node.premultipliedColorTr;
+            const cBl = node.premultipliedColorBl;
+            const cBr = node.premultipliedColorBr;
+            // Upper-Left
+            f[i] = rc.x1;
+            f[i + 1] = rc.y1;
+            f[i + 2] = tc.x1;
+            f[i + 3] = tc.y1;
+            u[i + 4] = cTl;
+            // Upper-Right
+            f[i + 5] = rc.x2;
+            f[i + 6] = rc.y2;
+            f[i + 7] = tc.x2;
+            f[i + 8] = tc.y1;
+            u[i + 9] = cTr;
+            // Lower-Left
+            f[i + 10] = rc.x4;
+            f[i + 11] = rc.y4;
+            f[i + 12] = tc.x1;
+            f[i + 13] = tc.y2;
+            u[i + 14] = cBl;
+            // Lower-Right
+            f[i + 15] = rc.x3;
+            f[i + 16] = rc.y3;
+            f[i + 17] = tc.x2;
+            f[i + 18] = tc.y2;
+            u[i + 19] = cBr;
+        }
         this.curRenderOp.numQuads++;
-        this.curBufferIdx = bufferIdx;
     }
     /**
      * Replace the existing RenderOp with a new one that uses the specified Shader
@@ -285,91 +268,148 @@ export class WebGlRenderer extends CoreRenderer {
      * @param shader
      * @param bufferIdx
      */
-    newRenderOp(quad, bufferIdx) {
-        const curRenderOp = new WebGlRenderOp(this, quad, bufferIdx);
+    newRenderOp(node, bufferIdx) {
+        const curRenderOp = node;
+        curRenderOp.renderOpBufferIdx = bufferIdx;
+        curRenderOp.numQuads = 0;
+        curRenderOp.renderOpTextures.length = 0;
         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) {
-        assertTruthy(this.curRenderOp);
-        const textureIdx = this.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(this.curRenderOp.quad, 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, parentHasRenderTexture, rtt, clippingRect } = params;
-        // Switching shader program will require a new render operation
-        if (this.curRenderOp?.shader.shaderKey !==
-            shader.shaderKey) {
+    reuseRenderOp(node) {
+        const curRenderOp = this.curRenderOp;
+        if (curRenderOp === null) {
             return false;
         }
-        // Switching clipping rect will require a new render operation
-        if (compareRect(this.curRenderOp.quad.clippingRect, clippingRect) === false) {
+        const shader = node.props.shader;
+        const curShader = curRenderOp.shader;
+        if (curShader.shaderKey === 'default' && shader.shaderKey === 'default') {
+            return true;
+        }
+        // Check if the shader is the same
+        if (curShader !== shader) {
+            return false;
+        }
+        // Force new render operation if rendering to texture is different
+        // This is the cheap check, so do it first
+        if (USE_RTT &&
+            (curRenderOp.parentHasRenderTexture !== node.parentHasRenderTexture ||
+                (curRenderOp.rtt === true) !== (node.props.rtt === true))) {
             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 !== undefined || rtt !== undefined) {
+        // Switching clipping rect will require a new render operation
+        // This involves object accessing so do it after integer/boolean checks
+        if (compareRect(curRenderOp.clippingRect, node.clippingRect) === false) {
             return false;
         }
+        if (USE_RTT &&
+            node.parentHasRenderTexture === true &&
+            node.parentFramebufferDimensions !== null) {
+            const curFbDims = curRenderOp.isCoreNode
+                ? curRenderOp.parentFramebufferDimensions
+                : curRenderOp.framebufferDimensions;
+            if (curFbDims === null ||
+                curFbDims.w !== node.parentFramebufferDimensions.w ||
+                curFbDims.h !== node.parentFramebufferDimensions.h) {
+                return false;
+            }
+        }
         // Check if the shader can batch the shader properties
-        if (!this.curRenderOp.shader.program.reuseRenderOp(params, this.curRenderOp.quad)) {
+        if (curShader.program.reuseRenderOp(node, curRenderOp) === false) {
             return false;
         }
-        // Render operation can be reused
         return true;
     }
     /**
      * add RenderOp to the render pipeline
      */
     addRenderOp(renderable) {
+        if (RENDER_TEXT_BATCHING === true) {
+            // We are batching text nodes to be added later
+            this.coreTextRenderOps.push(renderable);
+            return;
+        }
         this.renderOps.push(renderable);
         this.curRenderOp = null;
     }
+    flushTextRenderOps() {
+        const len = this.coreTextRenderOps.length;
+        if (len === 0) {
+            return;
+        }
+        for (let i = 0; i < len; i++) {
+            this.renderOps.push(this.coreTextRenderOps[i]);
+        }
+        this.coreTextRenderOps.length = 0;
+        this.curRenderOp = null;
+    }
     /**
      * Render the current set of RenderOps to render to the specified surface.
      *
+     * On the first frame after a renderList structural change (`needsFullUpload`
+     * is true) the entire quad buffer is re-allocated on the GPU with
+     * `bufferData(DYNAMIC_DRAW)`. On every subsequent frame only the slots of
+     * nodes flagged `isQuadDirty` are surgically updated via `bufferSubData`,
+     * leaving the rest of the GPU's buffer unchanged.
+     *
      * TODO: 'screen' is the only supported surface at the moment.
      *
      * @param surface
      */
     render(surface = 'screen') {
+        if (RENDER_TEXT_BATCHING === true) {
+            this.flushTextRenderOps();
+        }
         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);
+        const BYTES = Float32Array.BYTES_PER_ELEMENT;
+        if (DIRTY_QUAD_BUFFER) {
+            if (this.needsFullUpload) {
+                // Full GPU re-allocation: covers new nodes and structural reorders.
+                // Uses DYNAMIC_DRAW to signal to the driver that the buffer will be
+                // updated frequently in smaller pieces going forward.
+                const arr = new Float32Array(quadBuffer, 0, this.curBufferIdx);
+                glw.arrayBufferData(buffer, arr, glw.DYNAMIC_DRAW);
+                this.needsFullUpload = false;
+                // Clear dirty flags since we just uploaded everything.
+                const renderList = this.stage.renderList;
+                for (let i = 0, len = renderList.length; i < len; i++) {
+                    renderList[i].isQuadDirty = false;
+                }
+            }
+            else {
+                // Surgical per-node uploads: only write the 20 float32s for nodes
+                // whose quad data changed since the last frame.
+                const renderList = this.stage.renderList;
+                for (let i = 0, len = renderList.length; i < len; i++) {
+                    const node = renderList[i];
+                    if (node.isQuadDirty && node.quadBufferIndex !== -1) {
+                        const byteOffset = node.quadBufferIndex * BYTES;
+                        // Create a view directly into the existing CPU buffer — no allocation.
+                        const view = new Float32Array(quadBuffer, byteOffset, 20);
+                        glw.arrayBufferSubData(buffer, byteOffset, view);
+                        node.isQuadDirty = false;
+                    }
+                }
+            }
+        }
+        else {
+            // Legacy path: full buffer upload every frame.
+            const arr = new Float32Array(quadBuffer, 0, this.curBufferIdx);
+            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.renderOps[i].draw(this);
         }
-        this.quadBufferUsage = this.curBufferIdx * arr.BYTES_PER_ELEMENT;
+        const BYTES_PER_ELEMENT = Float32Array.BYTES_PER_ELEMENT;
+        this.quadBufferUsage = this.curBufferIdx * 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
+        const QUAD_SIZE_IN_BYTES = 4 * (5 * BYTES_PER_ELEMENT); // 5 attributes per vertex
         this.numQuadsRendered = this.quadBufferUsage / QUAD_SIZE_IN_BYTES;
     }
     getQuadCount() {
@@ -458,8 +498,7 @@ export class WebGlRenderer extends CoreRenderer {
             }
             // Skip nodes that are not visible
             if (node.worldAlpha === 0 ||
-                (node.strictBounds === true &&
-                    node.renderState === CoreNodeRenderState.OutOfBounds)) {
+                node.renderState === CoreNodeRenderState.OutOfBounds) {
                 continue;
             }
             // Skip nodes that do not have a loaded texture
@@ -469,9 +508,7 @@ export class WebGlRenderer extends CoreRenderer {
             // 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 !== null, 'RTT node missing texture');
             const ctxTexture = node.texture.ctxTexture;
-            assertTruthy(ctxTexture instanceof WebGlCtxRenderTexture);
             this.renderToTextureActive = true;
             // Bind the the texture's framebuffer
             glw.bindFramebuffer(ctxTexture.framebuffer);
@@ -485,13 +522,14 @@ export class WebGlRenderer extends CoreRenderer {
                 if (child === undefined) {
                     continue;
                 }
-                this.stage.addQuads(child);
+                child.renderQuads(this);
                 child.hasRTTupdates = false;
             }
             // Render all associated quads to the texture
             this.render();
             // Reset render operations
             this.renderOps.length = 0;
+            this.coreTextRenderOps.length = 0;
             node.hasRTTupdates = false;
         }
         const clearColor = this.clearColor.normalized;
@@ -502,6 +540,9 @@ export class WebGlRenderer extends CoreRenderer {
         glw.viewport(0, 0, this.glw.canvas.width, this.glw.canvas.height);
         this.renderToTextureActive = false;
     }
+    updateViewport() {
+        this.glw.viewport(0, 0, this.glw.canvas.width, this.glw.canvas.height);
+    }
     removeRTTNode(node) {
         const index = this.rttNodes.indexOf(node);
         if (index === -1) {
@@ -520,13 +561,97 @@ export class WebGlRenderer extends CoreRenderer {
         if (this.defaultShaderNode !== null) {
             return this.defaultShaderNode;
         }
-        this.stage.shManager.registerShaderType('Default', Default);
-        this.defaultShaderNode = this.stage.shManager.createShader('Default');
+        this.stage.shManager.registerShaderType('default', Default);
+        this.defaultShaderNode = this.stage.shManager.createShader('default');
         return this.defaultShaderNode;
     }
+    getTextureCoords(node) {
+        const texture = node.texture;
+        if (texture === null) {
+            return undefined;
+        }
+        //this stuff needs to be properly moved to CtxSubTexture at some point in the future.
+        const ctxTexture = texture.parentTexture !== undefined
+            ? texture.parentTexture.ctxTexture
+            : texture.ctxTexture;
+        if (ctxTexture === undefined) {
+            return undefined;
+        }
+        const textureOptions = node.props.textureOptions;
+        //early exit for textures with no options unless its a subtexture
+        if (texture.type !== TextureType.subTexture &&
+            textureOptions === undefined) {
+            return ctxTexture.txCoords;
+        }
+        let { x1, x2, y1, y2 } = ctxTexture.txCoords;
+        if (texture.type === TextureType.subTexture) {
+            const { w: parentW, h: parentH } = texture.parentTexture
+                .dimensions;
+            const { x, y, w, h } = texture.props;
+            x1 = x / parentW;
+            y1 = y / parentH;
+            x2 = x1 + w / parentW;
+            y2 = y1 + h / parentH;
+        }
+        const resizeMode = textureOptions.resizeMode;
+        if (resizeMode !== undefined &&
+            resizeMode.type === 'cover' &&
+            texture.dimensions !== null) {
+            const dimensions = texture.dimensions;
+            const w = node.props.w;
+            const h = node.props.h;
+            const scaleX = w / dimensions.w;
+            const scaleY = h / dimensions.h;
+            const scale = Math.max(scaleX, scaleY);
+            const precision = 1 / scale;
+            // Determine based on width
+            if (scaleX < scale) {
+                const desiredSize = precision * node.props.w;
+                x1 = (1 - desiredSize / dimensions.w) * (resizeMode.clipX ?? 0.5);
+                x2 = x1 + desiredSize / dimensions.w;
+            }
+            // Determine based on height
+            if (scaleY < scale) {
+                const desiredSize = precision * node.props.h;
+                y1 = (1 - desiredSize / dimensions.h) * (resizeMode.clipY ?? 0.5);
+                y2 = y1 + desiredSize / dimensions.h;
+            }
+        }
+        if (textureOptions.flipX === true) {
+            [x1, x2] = [x2, x1];
+        }
+        if (textureOptions.flipY === true) {
+            [y1, y2] = [y2, y1];
+        }
+        return {
+            x1,
+            y1,
+            x2,
+            y2,
+        };
+    }
     /**
-     * Updates the WebGL context's clear color and clears the color buffer.
+     * Resets all per-node quad buffer slot assignments and schedules a full GPU
+     * buffer re-upload on the next render call.
      *
+     * Called by Stage.requestRenderListUpdate() whenever the render list changes
+     * structurally (node added, removed, or reordered). After this call, the
+     * next addQuad() pass will reassign compact, contiguous slots starting from 0.
+     */
+    invalidateQuadBuffer() {
+        if (!DIRTY_QUAD_BUFFER) {
+            return;
+        }
+        const renderList = this.stage.renderList;
+        for (let i = 0, len = renderList.length; i < len; i++) {
+            renderList[i].quadBufferIndex = -1;
+            renderList[i].isQuadDirty = true;
+        }
+        this.curBufferIdx = 0;
+        this.needsFullUpload = true;
+    }
+    /**
+     * 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) {
@@ -540,7 +665,6 @@ export class WebGlRenderer extends CoreRenderer {
             raw: color,
             normalized: normalizedColor,
         };
-        glw.clear();
     }
 }
 //# sourceMappingURL=WebGlRenderer.js.map