@lightningtv/renderer 2.16.1 → 3.2.3

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

@@ -1,24 +1,5 @@
-/*
- * 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 { 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';
@@ -29,7 +10,7 @@ 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';
@@ -42,11 +23,19 @@ 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,
@@ -86,8 +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();
-        const stride = 8 * Float32Array.BYTES_PER_ELEMENT;
+        const stride = 5 * Float32Array.BYTES_PER_ELEMENT;
         this.quadBufferCollection = new BufferCollection([
             {
                 buffer: quadBuffer,
@@ -116,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,
                     },
                 },
             },
@@ -138,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);
@@ -175,65 +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) {
+    addQuad(node) {
         const f = this.fQuadBuffer;
         const u = this.uiQuadBuffer;
-        let i = this.curBufferIdx;
-        let ro = this.curRenderOp;
-        const reuse = this.reuseRenderOp(params) === false;
-        if (reuse) {
-            this.newRenderOp(params, i);
-            ro = this.curRenderOp;
-        }
-        let tx = params.texture;
+        if (RENDER_TEXT_BATCHING === true && node.props.zIndex) {
+            this.flushTextRenderOps();
+        }
+        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;
+            }
+        }
+        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 tidx = this.addTexture(tx.ctxTexture, i);
-        const rc = params.renderCoords;
-        const tc = params.textureCoords;
-        const cTl = params.colorTl;
-        const cTr = params.colorTr;
-        const cBl = params.colorBl;
-        const cBr = params.colorBr;
-        // 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;
-        f[i + 5] = tidx;
-        f[i + 6] = 0;
-        f[i + 7] = 0;
-        // Upper-Right
-        f[i + 8] = rc.x2;
-        f[i + 9] = rc.y2;
-        f[i + 10] = tc.x2;
-        f[i + 11] = tc.y1;
-        u[i + 12] = cTr;
-        f[i + 13] = tidx;
-        f[i + 14] = 1;
-        f[i + 15] = 0;
-        // Lower-Left
-        f[i + 16] = rc.x4;
-        f[i + 17] = rc.y4;
-        f[i + 18] = tc.x1;
-        f[i + 19] = tc.y2;
-        u[i + 20] = cBl;
-        f[i + 21] = tidx;
-        f[i + 22] = 0;
-        f[i + 23] = 1;
-        // Lower-Right
-        f[i + 24] = rc.x3;
-        f[i + 25] = rc.y3;
-        f[i + 26] = tc.x2;
-        f[i + 27] = tc.y2;
-        u[i + 28] = cBr;
-        f[i + 29] = tidx;
-        f[i + 30] = 1;
-        f[i + 31] = 1;
-        ro.numQuads++;
-        this.curBufferIdx = i + 32;
+        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++;
     }
     /**
      * Replace the existing RenderOp with a new one that uses the specified Shader
@@ -242,94 +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) {
-        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, 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) {
-        // Switching shader program will require a new render operation
-        if (this.curRenderOp?.shader.shaderKey !==
-            params.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.clippingRect, params.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
-        // @todo: This needs to be improved, render operations could also be reused
-        // for rendering to texture
-        if (params.parentHasRenderTexture !== undefined ||
-            params.rtt !== undefined) {
+        // 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;
         }
-        if (this.curRenderOp.shader.shaderKey === 'default' &&
-            params.shader?.shaderKey === 'default') {
-            return true;
+        // 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) === false) {
+        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() {
@@ -418,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
@@ -443,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;
@@ -488,70 +568,87 @@ export class WebGlRenderer extends CoreRenderer {
     getTextureCoords(node) {
         const texture = node.texture;
         if (texture === null) {
-            return this.defaultTextureCoords;
-        }
-        const textureOptions = node.textureOptions;
-        if (texture.type === TextureType.subTexture ||
-            texture.type === TextureType.image ||
-            texture.type === TextureType.renderToTexture ||
-            textureOptions !== null) {
-            const result = {
-                x1: 0,
-                y1: 0,
-                x2: 1,
-                y2: 1,
-            };
-            if (texture.type === TextureType.subTexture) {
-                const props = texture.props;
-                const { width: parentW = 0, height: parentH = 0 } = texture.parentTexture.dimensions || { width: 0, height: 0 };
-                result.x1 = props.x / parentW;
-                result.x2 = result.x1 + props.width / parentW;
-                result.y1 = props.y / parentH;
-                result.y2 = result.y1 + props.height / parentH;
-            }
-            if (texture.type === TextureType.image &&
-                textureOptions !== null &&
-                textureOptions.resizeMode !== undefined &&
-                texture.dimensions !== null) {
-                const resizeMode = textureOptions.resizeMode;
-                const dimensions = texture.dimensions;
-                if (resizeMode.type === 'cover') {
-                    const scaleX = node.props.width / dimensions.width;
-                    const scaleY = node.props.height / dimensions.height;
-                    const scale = Math.max(scaleX, scaleY);
-                    const precision = 1 / scale;
-                    // Determine based on width
-                    if (scaleX < scale) {
-                        const desiredSize = precision * node.props.width;
-                        result.x1 =
-                            (1 - desiredSize / dimensions.width) * (resizeMode.clipX ?? 0.5);
-                        result.x2 = result.x1 + desiredSize / dimensions.width;
-                    }
-                    // Determine based on height
-                    if (scaleY < scale) {
-                        const desiredSize = precision * node.props.height;
-                        result.y1 =
-                            (1 - desiredSize / dimensions.height) * (resizeMode.clipY ?? 0.5);
-                        result.y2 = result.y1 + desiredSize / dimensions.height;
-                    }
-                }
-            }
-            // Flip texture coordinates if dictated by texture options
-            let flipY = 0;
-            if (textureOptions !== null) {
-                if (textureOptions.flipX === true) {
-                    [result.x1, result.x2] = [result.x2, result.x1];
-                }
-                // convert to integer for bitwise operation below
-                flipY = +(textureOptions.flipY || false);
+            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;
             }
-            // Eitherone should be true
-            if (flipY ^ +(texture.type === TextureType.renderToTexture)) {
-                [result.y1, result.y2] = [result.y2, result.y1];
+            // 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;
             }
-            return result;
         }
-        return this.defaultTextureCoords;
+        if (textureOptions.flipX === true) {
+            [x1, x2] = [x2, x1];
+        }
+        if (textureOptions.flipY === true) {
+            [y1, y2] = [y2, y1];
+        }
+        return {
+            x1,
+            y1,
+            x2,
+            y2,
+        };
+    }
+    /**
+     * 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.   *