@lightningtv/renderer 3.0.0-beta1 → 3.2.4

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

@@ -1,30 +1,15 @@
-/*
- * 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,
   type BufferInfo,
   type CoreRendererOptions,
-  type QuadOptions,
 } from '../CoreRenderer.js';
-import { WebGlRenderOp } from './WebGlRenderOp.js';
+import type { SdfRenderOp } from './SdfRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
   createIndexBuffer,
@@ -35,7 +20,11 @@ import {
   type WebGlColor,
 } from './internal/RendererUtils.js';
 import { WebGlCtxTexture } from './WebGlCtxTexture.js';
-import { Texture, TextureType } from '../../textures/Texture.js';
+import {
+  Texture,
+  TextureType,
+  type TextureCoords,
+} from '../../textures/Texture.js';
 import { SubTexture } from '../../textures/SubTexture.js';
 import { WebGlCtxSubTexture } from './WebGlCtxSubTexture.js';
 import { BufferCollection } from './internal/BufferCollection.js';
@@ -43,15 +32,12 @@ 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, type CoreNode } from '../../CoreNode.js';
+import { CoreNodeRenderState, CoreNode } from '../../CoreNode.js';
 import { WebGlCtxRenderTexture } from './WebGlCtxRenderTexture.js';
 import { Default } from '../../shaders/webgl/Default.js';
 import type { WebGlShaderType } from './WebGlShaderNode.js';
 import { WebGlShaderNode } from './WebGlShaderNode.js';
-import type { CoreShaderType } from '../CoreShaderNode.js';
-
-const WORDS_PER_QUAD = 24;
-// const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
+import type { Dimensions } from '../../../common/CommonTypes.js';
 
 export type WebGlRendererOptions = CoreRendererOptions;
 
@@ -60,6 +46,8 @@ interface CoreWebGlSystem {
   extensions: CoreWebGlExtensions;
 }
 
+export type WebGlRenderOp = CoreNode | SdfRenderOp;
+
 export class WebGlRenderer extends CoreRenderer {
   //// WebGL Native Context and Data
   glw: WebGlContextWrapper;
@@ -70,6 +58,7 @@ export class WebGlRenderer extends CoreRenderer {
   fQuadBuffer: Float32Array;
   uiQuadBuffer: Uint32Array;
   renderOps: WebGlRenderOp[] = [];
+  coreTextRenderOps: WebGlRenderOp[] = [];
 
   //// Render Op / Buffer Filling State
   curBufferIdx = 0;
@@ -77,6 +66,21 @@ export class WebGlRenderer extends CoreRenderer {
   override rttNodes: CoreNode[] = [];
   activeRttNode: CoreNode | null = 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: boolean = true;
+
+  override defaultTextureCoords: TextureCoords = {
+    x1: 0,
+    y1: 0,
+    x2: 1,
+    y2: 1,
+  };
+
   //// Default Shader
   defaultShaderNode: WebGlShaderNode | null = null;
   quadBufferCollection: BufferCollection;
@@ -125,12 +129,30 @@ 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,
+        buffer: quadBuffer!,
         attributes: {
           a_position: {
             name: 'a_position',
@@ -156,21 +178,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,
           },
         },
       },
@@ -179,11 +198,21 @@ 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(
@@ -246,137 +275,92 @@ 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: QuadOptions) {
-    const { fQuadBuffer, uiQuadBuffer } = this;
-    let texture = params.texture;
+  addQuad(node: CoreNode) {
+    const f = this.fQuadBuffer;
+    const u = this.uiQuadBuffer;
 
-    assertTruthy(texture !== null, 'Texture is required');
+    if (RENDER_TEXT_BATCHING === true && node.props.zIndex) {
+      this.flushTextRenderOps();
+    }
 
-    let { curBufferIdx: bufferIdx, curRenderOp } = this;
+    const reuse = this.reuseRenderOp(node);
 
-    if (this.reuseRenderOp(params) === false) {
-      this.newRenderOp(params, bufferIdx);
-      curRenderOp = this.curRenderOp;
-      assertTruthy(curRenderOp);
+    // 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;
     }
 
-    let texCoordX1 = 0;
-    let texCoordY1 = 0;
-    let texCoordX2 = 1;
-    let texCoordY2 = 1;
+    const i = node.quadBufferIndex;
 
-    if (texture.type === TextureType.subTexture) {
-      const {
-        x: tx,
-        y: ty,
-        width: tw,
-        height: th,
-      } = (texture as SubTexture).props;
-      const { width: parentW = 0, height: parentH = 0 } = (
-        texture as SubTexture
-      ).parentTexture.dimensions || { width: 0, height: 0 };
-      texCoordX1 = tx / parentW;
-      texCoordX2 = texCoordX1 + tw / parentW;
-      texCoordY1 = ty / parentH;
-      texCoordY2 = texCoordY1 + th / parentH;
-      texture = (texture as SubTexture).parentTexture;
+    if (reuse === false) {
+      this.newRenderOp(node, i);
     }
 
-    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;
-        }
-      }
+    const props = node.props;
+    let tx = props.texture || this.stage.defaultTexture!;
+
+    if (tx.type === TextureType.subTexture) {
+      tx = (tx as SubTexture).parentTexture;
     }
 
-    // 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 texture = tx.ctxTexture as WebGlCtxTexture;
+    let tidx = this.curRenderOp!.addTexture(texture);
+
+    if (tidx === 0xffffffff) {
+      this.newRenderOp(node, i);
+      tidx = this.curRenderOp!.addTexture(texture);
+    }
 
-      // 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 as WebGlCtxTexture;
-    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;
-    this.curRenderOp.numQuads++;
-    this.curBufferIdx = bufferIdx;
+    // 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++;
   }
 
   /**
@@ -386,83 +370,77 @@ export class WebGlRenderer extends CoreRenderer {
    * @param shader
    * @param bufferIdx
    */
-  private newRenderOp(quad: QuadOptions, bufferIdx: number) {
-    const curRenderOp = new WebGlRenderOp(this, quad, bufferIdx);
+  private newRenderOp(node: CoreNode, bufferIdx: number) {
+    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
-   */
-  private addTexture(
-    texture: WebGlCtxTexture,
-    bufferIdx: number,
-    recursive?: boolean,
-  ): number {
-    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 as QuadOptions, 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: QuadOptions): boolean {
-    const { shader, parentHasRenderTexture, rtt, clippingRect } = params;
+  reuseRenderOp(node: CoreNode): boolean {
+    const curRenderOp = this.curRenderOp;
+    if (curRenderOp === null) {
+      return false;
+    }
 
-    // Switching shader program will require a new render operation
-    if (
-      this.curRenderOp?.shader.shaderKey !==
-      (shader as WebGlShaderNode).shaderKey
-    ) {
+    const shader = node.props.shader as WebGlShaderNode;
+    const curShader = curRenderOp.shader as WebGlShaderNode;
+
+    if (curShader.shaderKey === 'default' && shader.shaderKey === 'default') {
+      return true;
+    }
+
+    // Check if the shader is the same
+    if (curShader !== shader) {
       return false;
     }
 
-    // Switching clipping rect will require a new render operation
+    // Force new render operation if rendering to texture is different
+    // This is the cheap check, so do it first
     if (
-      compareRect(this.curRenderOp.quad.clippingRect, clippingRect) === false
+      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;
     }
 
-    // Check if the shader can batch the shader properties
     if (
-      !this.curRenderOp.shader.program.reuseRenderOp(
-        params,
-        this.curRenderOp.quad as QuadOptions,
-      )
+      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 (curShader.program.reuseRenderOp(node, curRenderOp) === false) {
       return false;
     }
 
-    // Render operation can be reused
     return true;
   }
 
@@ -470,33 +448,92 @@ export class WebGlRenderer extends CoreRenderer {
    * add RenderOp to the render pipeline
    */
   addRenderOp(renderable: WebGlRenderOp) {
+    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' | CoreContextTexture = 'screen'): void {
+    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;
   }
 
@@ -603,8 +640,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;
       }
@@ -617,10 +653,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);
+      const ctxTexture = node.texture.ctxTexture as WebGlCtxRenderTexture;
       this.renderToTextureActive = true;
 
       // Bind the the texture's framebuffer
@@ -639,7 +672,7 @@ export class WebGlRenderer extends CoreRenderer {
           continue;
         }
 
-        this.stage.addQuads(child);
+        child.renderQuads(this);
         child.hasRTTupdates = false;
       }
 
@@ -648,6 +681,7 @@ export class WebGlRenderer extends CoreRenderer {
 
       // Reset render operations
       this.renderOps.length = 0;
+      this.coreTextRenderOps.length = 0;
       node.hasRTTupdates = false;
     }
 
@@ -662,6 +696,10 @@ export class WebGlRenderer extends CoreRenderer {
     this.renderToTextureActive = false;
   }
 
+  updateViewport(): void {
+    this.glw.viewport(0, 0, this.glw.canvas.width, this.glw.canvas.height);
+  }
+
   removeRTTNode(node: CoreNode) {
     const index = this.rttNodes.indexOf(node);
     if (index === -1) {
@@ -682,16 +720,114 @@ export class WebGlRenderer extends CoreRenderer {
     if (this.defaultShaderNode !== null) {
       return this.defaultShaderNode as WebGlShaderNode;
     }
-    this.stage.shManager.registerShaderType('Default', Default);
+    this.stage.shManager.registerShaderType('default', Default);
     this.defaultShaderNode = this.stage.shManager.createShader(
-      'Default',
+      'default',
     ) as WebGlShaderNode;
     return this.defaultShaderNode;
   }
 
+  override getTextureCoords(node: CoreNode): TextureCoords | undefined {
+    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 as SubTexture).parentTexture !== undefined
+        ? (texture as SubTexture).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 as WebGlCtxTexture).txCoords;
+    }
+
+    let { x1, x2, y1, y2 } = (ctxTexture as WebGlCtxTexture).txCoords;
+    if (texture.type === TextureType.subTexture) {
+      const { w: parentW, h: parentH } = (texture as SubTexture).parentTexture
+        .dimensions!;
+      const { x, y, w, h } = (texture as SubTexture).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 as 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.
+   */
+  override invalidateQuadBuffer(): void {
+    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: number) {
@@ -710,6 +846,5 @@ export class WebGlRenderer extends CoreRenderer {
       raw: color,
       normalized: normalizedColor,
     };
-    glw.clear();
   }
 }