@lightningtv/renderer 3.0.0-beta1 → 3.2.3

package/src/core/CoreNode.ts

@@ -1,33 +1,20 @@
-/*
- * 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,
   getNewId,
-  isProductionEnvironment,
-  mergeColorAlphaPremultiplied,
+  premultiplyColorABGR,
+  USE_RTT,
+  ENABLE_AUTOSIZE,
+  EMIT_BOUNDS_EVENTS,
 } from '../utils.js';
 import type { TextureOptions } from './CoreTextureManager.js';
+import type { WebGlRenderer } from './renderers/webgl/WebGlRenderer.js';
+import type { WebGlCtxTexture } from './renderers/webgl/WebGlCtxTexture.js';
+import type { BufferCollection } from './renderers/webgl/internal/BufferCollection.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type { Stage } from './Stage.js';
 import {
   type Texture,
+  type TextureCoords,
   type TextureFailedEventHandler,
   type TextureFreedEventHandler,
   type TextureLoadedEventHandler,
@@ -37,6 +24,7 @@ import type {
   NodeTextureFailedPayload,
   NodeTextureFreedPayload,
   NodeTextureLoadedPayload,
+  NodeRenderablePayload,
 } from '../common/CommonTypes.js';
 import { EventEmitter } from '../common/EventEmitter.js';
 import {
@@ -56,6 +44,8 @@ import type { IAnimationController } from '../common/IAnimationController.js';
 import { CoreAnimation } from './animations/CoreAnimation.js';
 import { CoreAnimationController } from './animations/CoreAnimationController.js';
 import type { CoreShaderNode } from './renderers/CoreShaderNode.js';
+import { AutosizeMode, Autosizer } from './Autosizer.js';
+import { removeChild } from './lib/collectionUtils.js';
 
 export enum CoreNodeRenderState {
   Init = 0,
@@ -64,6 +54,14 @@ export enum CoreNodeRenderState {
   InViewport = 8,
 }
 
+const NO_CLIPPING_RECT: RectWithValid = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  valid: false,
+};
+
 const CoreNodeRenderStateMap: Map<CoreNodeRenderState, string> = new Map();
 CoreNodeRenderStateMap.set(CoreNodeRenderState.Init, 'init');
 CoreNodeRenderStateMap.set(CoreNodeRenderState.OutOfBounds, 'outOfBounds');
@@ -77,33 +75,24 @@ export enum UpdateType {
   Children = 1,
 
   /**
-   * Scale/Rotate transform update
-   *
-   * @remarks
-   * CoreNode Properties Updated:
-   * - `scaleRotateTransform`
-   */
-  ScaleRotate = 2,
-
-  /**
-   * Translate transform update (x/y/width/height/pivot/mount)
+   * localTransform
    *
    * @remarks
    * CoreNode Properties Updated:
    * - `localTransform`
    */
-  Local = 4,
+  Local = 2,
 
   /**
-   * Global Transform update
+   * globalTransform
    *
-   * @remarks
+   * * @remarks
    * CoreNode Properties Updated:
    * - `globalTransform`
+   * - `renderBounds`
    * - `renderCoords`
-   * - `renderBound`
    */
-  Global = 8,
+  Global = 4,
 
   /**
    * Clipping rect update
@@ -112,25 +101,16 @@ export enum UpdateType {
    * CoreNode Properties Updated:
    * - `clippingRect`
    */
-  Clipping = 16,
-
-  /**
-   * Calculated ZIndex update
-   *
-   * @remarks
-   * CoreNode Properties Updated:
-   * - `calcZIndex`
-   */
-  CalculatedZIndex = 32,
+  Clipping = 8,
 
   /**
-   * Z-Index Sorted Children update
+   * Sort Z-Index Children update
    *
    * @remarks
    * CoreNode Properties Updated:
    * - `children` (sorts children by their `calcZIndex`)
    */
-  ZIndexSortedChildren = 64,
+  SortZIndexChildren = 16,
 
   /**
    * Premultiplied Colors update
@@ -142,7 +122,7 @@ export enum UpdateType {
    * - `premultipliedColorBl`
    * - `premultipliedColorBr`
    */
-  PremultipliedColors = 128,
+  PremultipliedColors = 32,
 
   /**
    * World Alpha update
@@ -151,7 +131,7 @@ export enum UpdateType {
    * CoreNode Properties Updated:
    * - `worldAlpha` = `parent.worldAlpha` * `alpha`
    */
-  WorldAlpha = 256,
+  WorldAlpha = 64,
 
   /**
    * Render State update
@@ -160,7 +140,7 @@ export enum UpdateType {
    * CoreNode Properties Updated:
    * - `renderState`
    */
-  RenderState = 512,
+  RenderState = 128,
 
   /**
    * Is Renderable update
@@ -169,37 +149,41 @@ export enum UpdateType {
    * CoreNode Properties Updated:
    * - `isRenderable`
    */
-  IsRenderable = 1024,
+  IsRenderable = 256,
 
   /**
    * Render Texture update
    */
-  RenderTexture = 2048,
+  RenderTexture = 512,
 
   /**
    * Track if parent has render texture
    */
-  ParentRenderTexture = 4096,
+  ParentRenderTexture = 1024,
 
   /**
    * Render Bounds update
    */
-  RenderBounds = 8192,
+  RenderBounds = 2048,
 
   /**
-   * None
+   * RecalcUniforms
    */
-  None = 0,
+  RecalcUniforms = 4096,
 
   /**
-   * All
+   * Autosize update
+   */
+  Autosize = 8192,
+  /**
+   * None
    */
-  All = 14335,
+  None = 0,
 
   /**
-   * RecalcUniforms
+   * All
    */
-  RecalcUniforms = 16384,
+  All = 16383,
 }
 
 /**
@@ -240,16 +224,18 @@ export interface CoreNodeProps {
   y: number;
   /**
    * The width of the Node.
+   * @warning This will be deprecated in favor of `w` and `h` properties in the future.
    *
    * @default `0`
    */
-  width: number;
+  w: number;
   /**
    * The height of the Node.
+   * @warning This will be deprecated in favor of `w` and `h` properties in the future.
    *
    * @default `0`
    */
-  height: number;
+  h: number;
   /**
    * The alpha opacity of the Node.
    *
@@ -261,14 +247,35 @@ export interface CoreNodeProps {
    */
   alpha: number;
   /**
-   * Autosize mode
+   * Autosize
    *
    * @remarks
-   * When enabled, when a texture is loaded into the Node, the Node will
-   * automatically resize to the dimensions of the texture.
+   * When enabled, the Node automatically resizes based on its content
+   *
+   * **Texture Autosize Mode:**
+   * - When the Node has a texture, it automatically resizes to match the
+   *   texture's dimensions when the texture loads
+   * - This ensures images display at their natural size without manual sizing
+   * - Text Nodes always use this mode regardless of this setting
+   *
+   * **Children Autosize Mode:**
+   * - When the Node has no texture but contains children, it automatically
+   *   resizes to encompass all children's bounds
+   * - Calculates the bounding box that contains all child positions, dimensions,
+   *   and transforms (scale, rotation, mount/pivot points)
+   * - Creates container behavior where the parent grows to fit its content
+   * - Updates dynamically as children are added, removed, or transformed
+   *
+   * **Mode Selection Logic:**
+   * - Texture mode takes precedence over children mode
+   * - Mode switches automatically when texture is added/removed
+   * - If no texture and no children, autosize has no effect
+   *
+   * **Performance:**
+   * - Children mode uses efficient transform caching and differential updates
+   * - Only recalculates when child transforms actually change
+   * - Minimal memory allocation with factory function patterns
    *
-   * Text Nodes are always autosized based on their text content regardless
-   * of this mode setting.
    *
    * @default `false`
    */
@@ -396,7 +403,11 @@ export interface CoreNodeProps {
    * The Node's z-index.
    *
    * @remarks
-   * TBD
+   * Max z-index of children under the same parent determines which child
+   * is rendered on top. Higher z-index means the Node is rendered on top of
+   * children with lower z-index.
+   *
+   * Max value is 1000 and min value is -1000. Values outside of this range will be clamped.
    */
   zIndex: number;
   /**
@@ -424,15 +435,6 @@ export interface CoreNodeProps {
    */
   texture: Texture | null;
 
-  /**
-   * [Deprecated]: Prevents the texture from being cleaned up when the Node is removed
-   *
-   * @remarks
-   * Please use the `preventCleanup` property on {@link TextureOptions} instead.
-   *
-   * @default false
-   */
-  preventCleanup: boolean;
   /**
    * Options to associate with the Node's Texture
    */
@@ -462,7 +464,6 @@ export interface CoreNodeProps {
    * settings being defaults)
    */
   src: string | null;
-  zIndexLocked: number;
   /**
    * Scale to render the Node at
    *
@@ -683,20 +684,11 @@ export interface CoreNodeProps {
    */
   srcY?: number;
   /**
-   * By enabling Strict bounds the renderer will not process & render child nodes of a node that is out of the visible area
-   *
-   * @remarks
-   * When enabled out of bound nodes, i.e. nodes that are out of the visible area, will
-   * **NOT** have their children processed and renderer anymore. This means the children of a out of bound
-   * node will not receive update processing such as positioning updates and will not be drawn on screen.
-   * As such the rest of the branch of the update tree that sits below this node will not be processed anymore
-   *
-   * This is a big performance gain but may be disabled in cases where the width of the parent node is
-   * unknown and the render must process the child nodes regardless of the viewport status of the parent node
-   *
+   * Mark the node as interactive so we can perform hit tests on it
+   * when pointer events are registered.
    * @default false
    */
-  strictBounds: boolean;
+  interactive?: boolean;
 }
 
 /**
@@ -729,12 +721,34 @@ export class CoreNode extends EventEmitter {
   readonly children: CoreNode[] = [];
   protected _id: number = getNewId();
   readonly props: CoreNodeProps;
+  public readonly isCoreNode = true as const;
+
+  // WebGL Render Op State
+  public renderOpBufferIdx: number = 0;
+  public numQuads: number = 0;
+  public renderOpTextures: WebGlCtxTexture[] = [];
+
+  /**
+   * Permanent index (in float32 units) into the renderer's quad buffer.
+   * -1 means this node has not yet been assigned a slot.
+   */
+  public quadBufferIndex: number = -1;
+
+  /**
+   * True when renderCoords, premultiplied colors, or textureCoords changed
+   * since the node's quad was last written to the GPU.
+   */
+  public isQuadDirty: boolean = true;
+
+  private hasShaderUpdater = false;
+  public hasShaderTimeFn = false;
+  private hasColorProps = false;
+  public textureLoaded = false;
 
   public updateType = UpdateType.All;
   public childUpdateType = UpdateType.None;
 
   public globalTransform?: Matrix3d;
-  public scaleRotateTransform?: Matrix3d;
   public localTransform?: Matrix3d;
   public sceneGlobalTransform?: Matrix3d;
   public renderCoords?: RenderCoords;
@@ -749,8 +763,11 @@ export class CoreNode extends EventEmitter {
     height: 0,
     valid: false,
   };
+  public textureCoords?: TextureCoords;
+  public updateShaderUniforms: boolean = false;
   public isRenderable = false;
   public renderState: CoreNodeRenderState = CoreNodeRenderState.Init;
+  public isSimple = true;
 
   public worldAlpha = 1;
   public premultipliedColorTl = 0;
@@ -761,121 +778,189 @@ export class CoreNode extends EventEmitter {
   public hasRTTupdates = false;
   public parentHasRenderTexture = false;
   public rttParent: CoreNode | null = null;
+  /**
+   * only used when rtt = true
+   */
+  public framebufferDimensions: Dimensions | null = null;
+
+  /**Autosize properties */
+  autosizer: Autosizer | null = null;
+  parentAutosizer: Autosizer | null = null;
+
+  public destroyed = false;
 
   constructor(readonly stage: Stage, props: CoreNodeProps) {
     super();
 
-    this.props = Object.assign({}, props, {
-      parent: null,
+    //inital update type
+    let initialUpdateType =
+      UpdateType.Local | UpdateType.RenderBounds | UpdateType.RenderState;
+
+    // Fast-path assign only known keys
+    const p = (this.props = {
+      x: props.x,
+      y: props.y,
+      w: props.w,
+      h: props.h,
+      alpha: props.alpha,
+      autosize: props.autosize,
+      clipping: props.clipping,
+      color: props.color,
+      colorTop: props.colorTop,
+      colorBottom: props.colorBottom,
+      colorLeft: props.colorLeft,
+      colorRight: props.colorRight,
+      colorTl: props.colorTl,
+      colorTr: props.colorTr,
+      colorBl: props.colorBl,
+      colorBr: props.colorBr,
+      scaleX: props.scaleX,
+      scaleY: props.scaleY,
+      rotation: props.rotation,
+      pivotX: props.pivotX,
+      pivotY: props.pivotY,
+      mountX: props.mountX,
+      mountY: props.mountY,
+      mount: props.mount,
+      pivot: props.pivot,
+      zIndex: props.zIndex,
+      textureOptions: props.textureOptions,
+      data: props.data,
+      imageType: props.imageType,
+      srcX: props.srcX,
+      srcY: props.srcY,
+      srcWidth: props.srcWidth,
+      srcHeight: props.srcHeight,
+      parent: props.parent,
       texture: null,
       shader: null,
       src: null,
       rtt: false,
+      boundsMargin: null,
+      scale: null,
+      interactive: props.interactive,
     });
 
-    // Assign props to instance
-    this.parent = props.parent;
+    //check if any color props are set for premultiplied color updates
+    if (
+      p.color > 0 ||
+      p.colorTop > 0 ||
+      p.colorBottom > 0 ||
+      p.colorLeft > 0 ||
+      p.colorRight > 0 ||
+      p.colorTl > 0 ||
+      p.colorTr > 0 ||
+      p.colorBl > 0 ||
+      p.colorBr > 0
+    ) {
+      this.hasColorProps = true;
+      initialUpdateType |= UpdateType.PremultipliedColors;
+    }
+
+    // Only set non-default values
+    if (p.zIndex !== 0) {
+      this.zIndex = p.zIndex;
+    }
+
+    if (props.parent !== null) {
+      props.parent.addChild(this);
+    }
+
+    // Assign props to instances
     this.texture = props.texture;
     this.shader = props.shader;
     this.src = props.src;
     this.rtt = props.rtt;
+    this.boundsMargin = props.boundsMargin;
+    this.interactive = props.interactive;
 
-    if (props.boundsMargin) {
-      this.boundsMargin = Array.isArray(props.boundsMargin)
-        ? props.boundsMargin
-        : [
-            props.boundsMargin,
-            props.boundsMargin,
-            props.boundsMargin,
-            props.boundsMargin,
-          ];
+    // Initialize autosize if enabled
+    if (p.autosize === true) {
+      this.autosizer = new Autosizer(this);
     }
 
-    this.setUpdateType(
-      UpdateType.ScaleRotate |
-        UpdateType.Local |
-        UpdateType.RenderBounds |
-        UpdateType.RenderState,
-    );
-
-    if (isProductionEnvironment() === false && props.preventCleanup === true) {
-      console.warn(
-        'CoreNode.preventCleanup: Is deprecated and will be removed in upcoming release, please use textureOptions.preventCleanup instead',
-      );
-    }
+    this.setUpdateType(initialUpdateType);
 
     // if the default texture isn't loaded yet, wait for it to load
     // this only happens when the node is created before the stage is ready
-    if (
-      this.stage.defaultTexture &&
-      this.stage.defaultTexture.state !== 'loaded'
-    ) {
-      this.stage.defaultTexture.once('loaded', () => {
-        this.setUpdateType(UpdateType.IsRenderable);
-      });
+    const dt = this.stage.defaultTexture;
+    if (dt !== null && dt.state !== 'loaded') {
+      dt.once('loaded', () => this.setUpdateType(UpdateType.IsRenderable));
     }
+    this.updateIsSimple();
   }
 
   //#region Textures
   loadTexture(): void {
-    const { texture } = this.props;
-    assertTruthy(texture);
+    if (this.props.texture === null) {
+      return;
+    }
 
     // If texture is already loaded / failed, trigger loaded event manually
     // so that users get a consistent event experience.
     // We do this in a microtask to allow listeners to be attached in the same
     // synchronous task after calling loadTexture()
-    queueMicrotask(() => {
-      if (this.textureOptions.preload === true) {
-        this.stage.txManager.loadTexture(texture);
-      }
+    queueMicrotask(this.loadTextureTask);
+  }
 
-      texture.preventCleanup =
-        this.props.textureOptions?.preventCleanup ?? false;
-      texture.on('loaded', this.onTextureLoaded);
-      texture.on('failed', this.onTextureFailed);
-      texture.on('freed', this.onTextureFreed);
-
-      // If the parent is a render texture, the initial texture status
-      // will be set to freed until the texture is processed by the
-      // Render RTT nodes. So we only need to listen fo changes and
-      // no need to check the texture.state until we restructure how
-      // textures are being processed.
-      if (this.parentHasRenderTexture) {
-        this.notifyParentRTTOfUpdate();
-        return;
-      }
+  /**
+   * Task for queueMicrotask to loadTexture
+   *
+   * @remarks
+   * This method is called in a microtask to release the texture.
+   */
+  private loadTextureTask = (): void => {
+    const texture = this.props.texture as Texture;
+    //it is possible that texture is null here if user sets the texture to null right after loadTexture call
+    if (texture === null) {
+      return;
+    }
+    if (this.textureOptions.preload === true) {
+      this.stage.txManager.loadTexture(texture);
+    }
 
-      if (texture.state === 'loaded') {
-        assertTruthy(texture.dimensions);
-        this.onTextureLoaded(texture, texture.dimensions);
-      } else if (texture.state === 'failed') {
-        assertTruthy(texture.error);
-        this.onTextureFailed(texture, texture.error);
-      } else if (texture.state === 'freed') {
-        this.onTextureFreed(texture);
-      }
-    });
-  }
+    texture.preventCleanup = this.props.textureOptions?.preventCleanup ?? false;
+    texture.on('loaded', this.onTextureLoaded);
+    texture.on('failed', this.onTextureFailed);
+    texture.on('freed', this.onTextureFreed);
+
+    // If the parent is a render texture, the initial texture status
+    // will be set to freed until the texture is processed by the
+    // Render RTT nodes. So we only need to listen fo changes and
+    // no need to check the texture.state until we restructure how
+    // textures are being processed.
+    if (this.parentHasRenderTexture) {
+      this.notifyParentRTTOfUpdate();
+      return;
+    }
+
+    if (texture.state === 'loaded') {
+      this.onTextureLoaded(texture, texture.dimensions!);
+    } else if (texture.state === 'failed') {
+      this.onTextureFailed(texture, texture.error!);
+    } else if (texture.state === 'freed') {
+      this.onTextureFreed(texture);
+    }
+  };
 
   unloadTexture(): void {
-    if (this.texture !== null) {
-      this.texture.off('loaded', this.onTextureLoaded);
-      this.texture.off('failed', this.onTextureFailed);
-      this.texture.off('freed', this.onTextureFreed);
-      this.texture.setRenderableOwner(this, false);
+    if (this.texture === null) {
+      return;
     }
+
+    const texture = this.texture;
+    texture.off('loaded', this.onTextureLoaded);
+    texture.off('failed', this.onTextureFailed);
+    texture.off('freed', this.onTextureFreed);
+    texture.setRenderableOwner(this._id, false);
   }
 
-  autosizeNode(dimensions: Dimensions) {
-    if (this.autosize) {
-      this.width = dimensions.width;
-      this.height = dimensions.height;
+  protected onTextureLoaded: TextureLoadedEventHandler = (_, dimensions) => {
+    if (this.autosizer !== null) {
+      this.autosizer.update();
     }
-  }
 
-  private onTextureLoaded: TextureLoadedEventHandler = (_, dimensions) => {
-    this.autosizeNode(dimensions);
+    this.textureLoaded = true;
     this.setUpdateType(UpdateType.IsRenderable);
 
     // Texture was loaded. In case the RAF loop has already stopped, we request
@@ -888,13 +973,20 @@ export class CoreNode extends EventEmitter {
     }
 
     // ignore 1x1 pixel textures
-    if (dimensions.width > 1 && dimensions.height > 1) {
+    if (dimensions.w > 1 && dimensions.h > 1) {
       this.emit('loaded', {
         type: 'texture',
         dimensions,
       } satisfies NodeTextureLoadedPayload);
     }
 
+    if (
+      this.stage.calculateTextureCoord === true &&
+      this.props.textureOptions !== null
+    ) {
+      this.textureCoords = this.stage.renderer.getTextureCoords!(this);
+    }
+
     // Trigger a local update if the texture is loaded and the resizeMode is 'contain'
     if (this.props.textureOptions?.resizeMode?.type === 'contain') {
       this.setUpdateType(UpdateType.Local);
@@ -902,6 +994,11 @@ export class CoreNode extends EventEmitter {
   };
 
   private onTextureFailed: TextureFailedEventHandler = (_, error) => {
+    // immediately set isRenderable to false, so that we handle the error
+    // without waiting for the next frame loop
+    this.textureLoaded = false;
+    this.isRenderable = false;
+    this.updateTextureOwnership(false);
     this.setUpdateType(UpdateType.IsRenderable);
 
     // If parent has a render texture, flag that we need to update
@@ -909,13 +1006,23 @@ export class CoreNode extends EventEmitter {
       this.notifyParentRTTOfUpdate();
     }
 
-    this.emit('failed', {
-      type: 'texture',
-      error,
-    } satisfies NodeTextureFailedPayload);
+    if (
+      this.texture !== null &&
+      this.texture.retryCount > this.texture.maxRetryCount
+    ) {
+      this.emit('failed', {
+        type: 'texture',
+        error,
+      } satisfies NodeTextureFailedPayload);
+    }
   };
 
   private onTextureFreed: TextureFreedEventHandler = () => {
+    // immediately set isRenderable to false, so that we handle the error
+    // without waiting for the next frame loop
+    this.textureLoaded = false;
+    this.isRenderable = false;
+    this.updateTextureOwnership(false);
     this.setUpdateType(UpdateType.IsRenderable);
 
     // If parent has a render texture, flag that we need to update
@@ -941,48 +1048,38 @@ export class CoreNode extends EventEmitter {
     this.updateType |= type;
 
     const parent = this.props.parent;
-    if (!parent) return;
-
-    if ((parent.updateType & UpdateType.Children) === 0) {
-      // Inform the parent if it doesn’t already have a child update
-      parent.setUpdateType(UpdateType.Children);
-    }
-  }
+    if (!parent || parent.updateType & UpdateType.Children) return;
 
-  sortChildren() {
-    this.children.sort((a, b) => a.calcZIndex - b.calcZIndex);
+    parent.setUpdateType(UpdateType.Children);
   }
 
-  updateScaleRotateTransform() {
-    const { rotation, scaleX, scaleY } = this.props;
+  updateLocalTransform() {
+    const p = this.props;
+    const { x, y } = p;
 
-    // optimize simple translation cases
-    if (rotation === 0 && scaleX === 1 && scaleY === 1) {
-      this.scaleRotateTransform = undefined;
+    if (this.isSimple) {
+      this.localTransform = Matrix3d.translate(x, y, this.localTransform);
       return;
     }
 
-    this.scaleRotateTransform = Matrix3d.rotate(
-      rotation,
-      this.scaleRotateTransform,
-    ).scale(scaleX, scaleY);
-  }
+    const { w, h } = p;
+    const mountTranslateX = p.mountX * w;
+    const mountTranslateY = p.mountY * h;
 
-  updateLocalTransform() {
-    const { x, y, width, height } = this.props;
-    const mountTranslateX = this.props.mountX * width;
-    const mountTranslateY = this.props.mountY * height;
-
-    if (this.scaleRotateTransform) {
-      const pivotTranslateX = this.props.pivotX * width;
-      const pivotTranslateY = this.props.pivotY * height;
+    if (p.rotation !== 0 || p.scaleX !== 1 || p.scaleY !== 1) {
+      const scaleRotate = Matrix3d.rotate(p.rotation, Matrix3d.temp).scale(
+        p.scaleX,
+        p.scaleY,
+      );
+      const pivotTranslateX = p.pivotX * w;
+      const pivotTranslateY = p.pivotY * h;
 
       this.localTransform = Matrix3d.translate(
         x - mountTranslateX + pivotTranslateX,
         y - mountTranslateY + pivotTranslateY,
         this.localTransform,
       )
-        .multiply(this.scaleRotateTransform)
+        .multiply(scaleRotate)
         .translate(-pivotTranslateX, -pivotTranslateY);
     } else {
       this.localTransform = Matrix3d.translate(
@@ -993,35 +1090,35 @@ export class CoreNode extends EventEmitter {
     }
 
     // Handle 'contain' resize mode
-    const texture = this.props.texture;
+    const texture = p.texture;
     if (
       texture &&
       texture.dimensions &&
-      this.props.textureOptions?.resizeMode?.type === 'contain'
+      p.textureOptions.resizeMode?.type === 'contain'
     ) {
       let resizeModeScaleX = 1;
       let resizeModeScaleY = 1;
       let extraX = 0;
       let extraY = 0;
-      const { width: tw, height: th } = texture.dimensions;
+      const { w: tw, h: th } = texture.dimensions;
       const txAspectRatio = tw / th;
-      const nodeAspectRatio = width / height;
+      const nodeAspectRatio = w / h;
       if (txAspectRatio > nodeAspectRatio) {
         // Texture is wider than node
         // Center the node vertically (shift down by extraY)
         // Scale the node vertically to maintain original aspect ratio
-        const scaleX = width / tw;
+        const scaleX = w / tw;
         const scaledTxHeight = th * scaleX;
-        extraY = (height - scaledTxHeight) / 2;
-        resizeModeScaleY = scaledTxHeight / height;
+        extraY = (h - scaledTxHeight) / 2;
+        resizeModeScaleY = scaledTxHeight / h;
       } else {
         // Texture is taller than node (or equal)
         // Center the node horizontally (shift right by extraX)
         // Scale the node horizontally to maintain original aspect ratio
-        const scaleY = height / th;
+        const scaleY = h / th;
         const scaledTxWidth = tw * scaleY;
-        extraX = (width - scaledTxWidth) / 2;
-        resizeModeScaleX = scaledTxWidth / width;
+        extraX = (w - scaledTxWidth) / 2;
+        resizeModeScaleX = scaledTxWidth / w;
       }
 
       // Apply the extra translation and scale to the local transform
@@ -1029,8 +1126,17 @@ export class CoreNode extends EventEmitter {
         .translate(extraX, extraY)
         .scale(resizeModeScaleX, resizeModeScaleY);
     }
+  }
 
-    this.setUpdateType(UpdateType.Global);
+  updateIsSimple() {
+    const p = this.props;
+    this.isSimple =
+      p.rotation === 0 &&
+      p.scaleX === 1 &&
+      p.scaleY === 1 &&
+      p.mountX === 0 &&
+      p.mountY === 0 &&
+      !(p.texture && p.textureOptions.resizeMode?.type === 'contain');
   }
 
   /**
@@ -1038,217 +1144,235 @@ export class CoreNode extends EventEmitter {
    * @param delta
    */
   update(delta: number, parentClippingRect: RectWithValid): void {
-    if (this.updateType & UpdateType.ScaleRotate) {
-      this.updateScaleRotateTransform();
-      this.setUpdateType(UpdateType.Local);
+    const props = this.props;
+    //parent can be forced to ! because the root node update loop uses updateRoot which implies that
+    //all other loops using this update method have a parent
+    const parent = props.parent!;
+    const parentHasRenderTexture = this.parentHasRenderTexture;
+    let newRenderState: CoreNodeRenderState | null = null;
+    let updateType = this.updateType;
+    let childUpdateType = this.childUpdateType;
+
+    //this needs to be handled before setting updateTypes are reset
+    if (
+      ENABLE_AUTOSIZE &&
+      updateType & UpdateType.Autosize &&
+      this.autosizer !== null
+    ) {
+      this.autosizer.update();
     }
 
-    if (this.updateType & UpdateType.Local) {
+    // reset update type
+    this.updateType = 0;
+    this.childUpdateType = 0;
+
+    if (updateType & UpdateType.Local) {
       this.updateLocalTransform();
-      this.setUpdateType(UpdateType.Global);
-    }
 
-    const parent = this.props.parent;
-    let renderState: CoreNodeRenderState | null = null;
+      updateType |= UpdateType.Global;
+    }
 
     // Handle specific RTT updates at this node level
-    if (this.updateType & UpdateType.RenderTexture && this.rtt) {
+    if (USE_RTT && updateType & UpdateType.RenderTexture && this.rtt === true) {
       this.hasRTTupdates = true;
     }
 
-    if (this.updateType & UpdateType.Global) {
-      assertTruthy(this.localTransform);
-
-      if (this.parentHasRenderTexture === true && parent?.rtt === true) {
+    if (updateType & UpdateType.Global) {
+      if (
+        USE_RTT &&
+        this.parentHasRenderTexture === true &&
+        parent.rtt === true
+      ) {
         // we are at the start of the RTT chain, so we need to reset the globalTransform
         // for correct RTT rendering
-        this.globalTransform = Matrix3d.identity();
+        this.globalTransform = Matrix3d.identity(this.globalTransform);
 
         // Maintain a full scene global transform for bounds detection
+        const parentTransform =
+          parent.globalTransform || Matrix3d.identity(Matrix3d.temp);
+
         this.sceneGlobalTransform = Matrix3d.copy(
-          parent?.globalTransform || Matrix3d.identity(),
-        ).multiply(this.localTransform);
+          parentTransform,
+          this.sceneGlobalTransform,
+        ).translateOrMultiply(this.localTransform!);
       } else if (
+        USE_RTT &&
         this.parentHasRenderTexture === true &&
-        parent?.rtt === false
+        parent.rtt === false
       ) {
         // we're part of an RTT chain but our parent is not the main RTT node
         // so we need to propogate the sceneGlobalTransform of the parent
         // to maintain a full scene global transform for bounds detection
+        const parentSceneTransform =
+          parent.sceneGlobalTransform || this.localTransform!;
+
         this.sceneGlobalTransform = Matrix3d.copy(
-          parent?.sceneGlobalTransform || this.localTransform,
-        ).multiply(this.localTransform);
+          parentSceneTransform,
+          this.sceneGlobalTransform,
+        ).translateOrMultiply(this.localTransform!);
 
         this.globalTransform = Matrix3d.copy(
-          parent?.globalTransform || this.localTransform,
+          parent.globalTransform || this.localTransform!,
           this.globalTransform,
         );
       } else {
         this.globalTransform = Matrix3d.copy(
-          parent?.globalTransform || this.localTransform,
+          parent.globalTransform || this.localTransform!,
           this.globalTransform,
         );
       }
 
-      if (parent !== null) {
-        this.globalTransform.multiply(this.localTransform);
+      if (this.isSimple) {
+        this.globalTransform.translate(
+          this.localTransform!.tx,
+          this.localTransform!.ty,
+        );
+      } else {
+        this.globalTransform.translateOrMultiply(this.localTransform!);
       }
       this.calculateRenderCoords();
       this.updateBoundingRect();
 
-      this.setUpdateType(
-        UpdateType.RenderState |
-          UpdateType.Children |
-          UpdateType.RecalcUniforms,
-      );
-      this.childUpdateType |= UpdateType.Global;
+      updateType |= UpdateType.RenderState | UpdateType.RecalcUniforms;
+
+      //only propagate children updates if not autosizing
+      if ((updateType & UpdateType.Autosize) === 0) {
+        updateType |= UpdateType.Children;
+        childUpdateType |= UpdateType.Global;
+      }
 
       if (this.clipping === true) {
-        this.setUpdateType(UpdateType.Clipping | UpdateType.RenderBounds);
-        this.childUpdateType |= UpdateType.RenderBounds;
+        updateType |= UpdateType.Clipping | UpdateType.RenderBounds;
+        childUpdateType |= UpdateType.RenderBounds;
       }
     }
 
-    if (this.updateType & UpdateType.RenderBounds) {
+    if (updateType & UpdateType.RenderBounds) {
       this.createRenderBounds();
-      this.setUpdateType(UpdateType.RenderState);
-      this.setUpdateType(UpdateType.Children);
 
-      this.childUpdateType |= UpdateType.RenderBounds;
+      updateType |= UpdateType.RenderState | UpdateType.Children;
+      childUpdateType |= UpdateType.RenderBounds;
     }
 
-    if (this.updateType & UpdateType.RenderState) {
-      renderState = this.checkRenderBounds();
-      this.setUpdateType(UpdateType.IsRenderable);
+    if (updateType & UpdateType.RenderState) {
+      newRenderState = this.checkRenderBounds();
+      updateType |= UpdateType.IsRenderable;
 
       // if we're not going out of bounds, update the render state
       // this is done so the update loop can finish before we mark a node
       // as out of bounds
-      if (renderState !== CoreNodeRenderState.OutOfBounds) {
-        this.updateRenderState(renderState);
+      if (newRenderState !== CoreNodeRenderState.OutOfBounds) {
+        this.updateRenderState(newRenderState);
       }
     }
 
-    if (this.updateType & UpdateType.WorldAlpha) {
-      if (parent) {
-        this.worldAlpha = parent.worldAlpha * this.props.alpha;
-      } else {
-        this.worldAlpha = this.props.alpha;
-      }
-      this.setUpdateType(
+    if (updateType & UpdateType.WorldAlpha) {
+      this.worldAlpha = parent.worldAlpha * this.props.alpha;
+      updateType |=
+        UpdateType.PremultipliedColors |
         UpdateType.Children |
-          UpdateType.PremultipliedColors |
-          UpdateType.IsRenderable,
-      );
-      this.childUpdateType |= UpdateType.WorldAlpha;
+        UpdateType.IsRenderable;
+      childUpdateType |= UpdateType.WorldAlpha;
     }
 
-    if (this.updateType & UpdateType.IsRenderable) {
+    if (updateType & UpdateType.IsRenderable) {
       this.updateIsRenderable();
     }
 
-    if (this.updateType & UpdateType.Clipping) {
-      this.calculateClippingRect(parentClippingRect);
-      this.setUpdateType(UpdateType.Children);
+    // Handle autosize updates when children transforms change
+    if (
+      ENABLE_AUTOSIZE &&
+      updateType & UpdateType.Global &&
+      this.isRenderable === true &&
+      this.parentAutosizer !== null
+    ) {
+      this.parentAutosizer.patch(this.id);
+    }
 
-      this.childUpdateType |= UpdateType.Clipping;
-      this.childUpdateType |= UpdateType.RenderBounds;
+    if (updateType & UpdateType.Clipping) {
+      this.calculateClippingRect(parentClippingRect);
+      updateType |= UpdateType.Children;
+      childUpdateType |= UpdateType.Clipping | UpdateType.RenderBounds;
     }
 
-    if (this.updateType & UpdateType.PremultipliedColors) {
-      this.premultipliedColorTl = mergeColorAlphaPremultiplied(
-        this.props.colorTl,
-        this.worldAlpha,
-        true,
-      );
+    if (updateType & UpdateType.PremultipliedColors) {
+      const alpha = this.worldAlpha;
 
-      // If all the colors are the same just sent them all to the same value
-      if (
-        this.props.colorTl === this.props.colorTr &&
-        this.props.colorBl === this.props.colorBr &&
-        this.props.colorTl === this.props.colorBl
-      ) {
+      const tl = props.colorTl;
+      const tr = props.colorTr;
+      const bl = props.colorBl;
+      const br = props.colorBr;
+
+      // Fast equality check (covers all 4 corners)
+      const same = tl === tr && tl === bl && tl === br;
+
+      const merged = premultiplyColorABGR(tl, alpha);
+
+      this.premultipliedColorTl = merged;
+
+      if (same === true) {
         this.premultipliedColorTr =
           this.premultipliedColorBl =
           this.premultipliedColorBr =
-            this.premultipliedColorTl;
+            merged;
       } else {
-        this.premultipliedColorTr = mergeColorAlphaPremultiplied(
-          this.props.colorTr,
-          this.worldAlpha,
-          true,
-        );
-        this.premultipliedColorBl = mergeColorAlphaPremultiplied(
-          this.props.colorBl,
-          this.worldAlpha,
-          true,
-        );
-        this.premultipliedColorBr = mergeColorAlphaPremultiplied(
-          this.props.colorBr,
-          this.worldAlpha,
-          true,
-        );
+        this.premultipliedColorTr = premultiplyColorABGR(tr, alpha);
+        this.premultipliedColorBl = premultiplyColorABGR(bl, alpha);
+        this.premultipliedColorBr = premultiplyColorABGR(br, alpha);
       }
     }
 
-    // No need to update zIndex if there is no parent
-    if (parent !== null && this.updateType & UpdateType.CalculatedZIndex) {
-      this.calculateZIndex();
-      // Tell parent to re-sort children
-      parent.setUpdateType(UpdateType.ZIndexSortedChildren);
+    if (this.renderState === CoreNodeRenderState.OutOfBounds) {
+      // Delay updating children until the node is in bounds
+      this.updateType = updateType;
+      this.childUpdateType = childUpdateType;
+      return;
     }
 
     if (
-      this.props.strictBounds === true &&
-      this.renderState === CoreNodeRenderState.OutOfBounds
+      updateType & UpdateType.RecalcUniforms &&
+      this.hasShaderUpdater === true
     ) {
-      this.updateType &= ~UpdateType.RenderBounds; // remove render bounds update
-      return;
+      this.updateShaderUniforms = true;
     }
 
-    if (
-      this.shader?.update !== undefined &&
-      (this.updateType & UpdateType.Local ||
-        this.updateType & UpdateType.RecalcUniforms)
-    ) {
-      this.shader.update();
+    if (this.isRenderable === true && this.updateShaderUniforms === true) {
+      this.updateShaderUniforms = false;
+      //this exists because the boolean hasShaderUpdater === true
+      this.shader!.update!();
     }
 
-    if (this.updateType & UpdateType.Children && this.children.length > 0) {
+    if (updateType & UpdateType.Children && this.children.length > 0) {
+      let childClippingRect = this.clippingRect;
+
+      if (USE_RTT && this.rtt === true) {
+        childClippingRect = NO_CLIPPING_RECT;
+      }
+
       for (let i = 0, length = this.children.length; i < length; i++) {
         const child = this.children[i] as CoreNode;
 
-        child.setUpdateType(this.childUpdateType);
+        if (childUpdateType !== 0) {
+          child.setUpdateType(childUpdateType);
+        }
 
         if (child.updateType === 0) {
           continue;
         }
 
-        let childClippingRect = this.clippingRect;
-        if (this.rtt === true) {
-          childClippingRect = {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-            valid: false,
-          };
-        }
-
         child.update(delta, childClippingRect);
       }
     }
 
     // If the node has an RTT parent and requires a texture re-render, inform the RTT parent
-    // if (this.parentHasRenderTexture && this.updateType & UpdateType.RenderTexture) {
+    // if (this.parentHasRenderTexture && updateType & UpdateType.RenderTexture) {
     // @TODO have a more scoped down updateType for RTT updates
-    if (this.parentHasRenderTexture && this.updateType > 0) {
+    if (USE_RTT === true && parentHasRenderTexture === true) {
       this.notifyParentRTTOfUpdate();
     }
 
-    // Sorting children MUST happen after children have been updated so
-    // that they have the oppotunity to update their calculated zIndex.
-    if (this.updateType & UpdateType.ZIndexSortedChildren) {
+    //Resort children if needed
+    if (updateType & UpdateType.SortZIndexChildren) {
       // reorder z-index
       this.sortChildren();
     }
@@ -1256,24 +1380,31 @@ export class CoreNode extends EventEmitter {
     // If we're out of bounds, apply the render state now
     // this is done so nodes can finish their entire update loop before
     // being marked as out of bounds
-    if (renderState === CoreNodeRenderState.OutOfBounds) {
-      this.updateRenderState(renderState);
+    if (newRenderState === CoreNodeRenderState.OutOfBounds) {
+      this.updateRenderState(newRenderState);
       this.updateIsRenderable();
 
       if (
+        USE_RTT === true &&
         this.rtt === true &&
-        renderState === CoreNodeRenderState.OutOfBounds
+        newRenderState === CoreNodeRenderState.OutOfBounds
       ) {
         // notify children that we are going out of bounds
         // we have to do this now before we stop processing the render tree
-        this.notifyChildrenRTTOfUpdate(renderState);
-        // this.childUpdateType |= UpdateType.RenderState;
+        this.notifyChildrenRTTOfUpdate(newRenderState);
       }
     }
 
-    // reset update type
-    this.updateType = 0;
-    this.childUpdateType = 0;
+    // Mark quad dirty only when visual data (transforms, colors) actually
+    // changed, so the WebGL renderer only re-uploads modified slots.
+    if (
+      updateType &
+      (UpdateType.Global |
+        UpdateType.PremultipliedColors |
+        UpdateType.WorldAlpha)
+    ) {
+      this.isQuadDirty = true;
+    }
   }
 
   private findParentRTTNode(): CoreNode | null {
@@ -1284,15 +1415,6 @@ export class CoreNode extends EventEmitter {
     return rttNode;
   }
 
-  private getRTTParentRenderState(): CoreNodeRenderState | null {
-    const rttNode = this.rttParent || this.findParentRTTNode();
-    if (!rttNode) {
-      return null;
-    }
-
-    return rttNode.renderState;
-  }
-
   private notifyChildrenRTTOfUpdate(renderState: CoreNodeRenderState) {
     for (const child of this.children) {
       // force child to update render state
@@ -1302,7 +1424,7 @@ export class CoreNode extends EventEmitter {
     }
   }
 
-  private notifyParentRTTOfUpdate() {
+  protected notifyParentRTTOfUpdate() {
     if (this.parent === null) {
       return;
     }
@@ -1323,28 +1445,21 @@ export class CoreNode extends EventEmitter {
   }
 
   checkRenderBounds(): CoreNodeRenderState {
-    assertTruthy(this.renderBound);
-    assertTruthy(this.strictBound);
-    assertTruthy(this.preloadBound);
-
-    if (boundInsideBound(this.renderBound, this.strictBound)) {
+    if (boundInsideBound(this.renderBound!, this.strictBound!)) {
       return CoreNodeRenderState.InViewport;
     }
 
-    if (boundInsideBound(this.renderBound, this.preloadBound)) {
+    if (boundInsideBound(this.renderBound!, this.preloadBound!)) {
       return CoreNodeRenderState.InBounds;
     }
 
     // check if we're larger then our parent, we're definitely in the viewport
-    if (boundLargeThanBound(this.renderBound, this.strictBound)) {
+    if (boundLargeThanBound(this.renderBound!, this.strictBound!)) {
       return CoreNodeRenderState.InViewport;
     }
 
     // check if we dont have dimensions, take our parent's render state
-    if (
-      this.parent !== null &&
-      (this.props.width === 0 || this.props.height === 0)
-    ) {
+    if (this.parent !== null && (this.props.w === 0 || this.props.h === 0)) {
       return this.parent.renderState;
     }
 
@@ -1352,18 +1467,21 @@ export class CoreNode extends EventEmitter {
   }
 
   updateBoundingRect() {
-    const transform = this.sceneGlobalTransform || this.globalTransform;
-    const renderCoords = this.sceneRenderCoords || this.renderCoords;
+    const transform = (this.sceneGlobalTransform ||
+      this.globalTransform) as Matrix3d;
+    const renderCoords = (this.sceneRenderCoords ||
+      this.renderCoords) as RenderCoords;
 
-    assertTruthy(transform);
-    assertTruthy(renderCoords);
-
-    const { tb, tc } = transform;
-    const { x1, y1, x3, y3 } = renderCoords;
-    if (tb === 0 || tc === 0) {
-      this.renderBound = createBound(x1, y1, x3, y3, this.renderBound);
+    if (transform.tb === 0 || transform.tc === 0) {
+      this.renderBound = createBound(
+        renderCoords.x1,
+        renderCoords.y1,
+        renderCoords.x3,
+        renderCoords.y3,
+        this.renderBound,
+      );
     } else {
-      const { x2, x4, y2, y4 } = renderCoords;
+      const { x1, y1, x2, y2, x3, y3, x4, y4 } = renderCoords;
       this.renderBound = createBound(
         Math.min(x1, x2, x3, x4),
         Math.min(y1, y2, y3, y4),
@@ -1375,8 +1493,6 @@ export class CoreNode extends EventEmitter {
   }
 
   createRenderBounds(): void {
-    assertTruthy(this.stage);
-
     if (this.parent !== null && this.parent.strictBound !== undefined) {
       // we have a parent with a valid bound, copy it
       const parentBound = this.parent.strictBound;
@@ -1385,11 +1501,13 @@ export class CoreNode extends EventEmitter {
         parentBound.y1,
         parentBound.x2,
         parentBound.y2,
+        this.strictBound,
       );
 
       this.preloadBound = createPreloadBounds(
         this.strictBound,
         this.boundsMargin as [number, number, number, number],
+        this.preloadBound,
       );
     } else {
       // no parent or parent does not have a bound, take the stage boundaries
@@ -1414,24 +1532,19 @@ export class CoreNode extends EventEmitter {
     }
 
     // clipping is enabled and we are in bounds create our own bounds
-    const { x, y, width, height } = this.props;
+    const { x, y, w, h } = this.props;
 
     // Pick the global transform if available, otherwise use the local transform
     // global transform is only available if the node in an RTT chain
     const { tx, ty } = this.sceneGlobalTransform || this.globalTransform || {};
     const _x = tx ?? x;
     const _y = ty ?? y;
-    this.strictBound = createBound(
-      _x,
-      _y,
-      _x + width,
-      _y + height,
-      this.strictBound,
-    );
+    this.strictBound = createBound(_x, _y, _x + w, _y + h, this.strictBound);
 
     this.preloadBound = createPreloadBounds(
       this.strictBound,
       this.boundsMargin as [number, number, number, number],
+      this.preloadBound,
     );
   }
 
@@ -1442,12 +1555,34 @@ export class CoreNode extends EventEmitter {
 
     const previous = this.renderState;
     this.renderState = renderState;
-    const event = CoreNodeRenderStateMap.get(renderState);
-    assertTruthy(event);
-    this.emit(event, {
-      previous,
-      current: renderState,
-    });
+
+    // If node visibility changes, dirty the render list cache
+    if (
+      renderState === CoreNodeRenderState.OutOfBounds ||
+      previous === CoreNodeRenderState.OutOfBounds
+    ) {
+      this.stage.requestRenderListUpdate();
+    }
+
+    if (EMIT_BOUNDS_EVENTS) {
+      const event = CoreNodeRenderStateMap.get(renderState);
+      assertTruthy(event);
+      this.emit(event, {
+        previous,
+        current: renderState,
+      });
+    }
+  }
+
+  /**
+   * Checks if the node is renderable based on world alpha, dimensions and out of bounds status.
+   */
+  checkBasicRenderability(): boolean {
+    if (this.worldAlpha === 0 || this.isOutOfBounds() === true) {
+      return false;
+    } else {
+      return true;
+    }
   }
 
   /**
@@ -1465,51 +1600,58 @@ export class CoreNode extends EventEmitter {
     }
 
     if (this.texture !== null) {
-      needsTextureOwnership = true;
+      // preemptive check for failed textures this will mark the current node as non-renderable
+      // and will prevent further checks until the texture is reloaded or retry is reset on the texture
+      if (this.texture.retryCount > this.texture.maxRetryCount) {
+        // texture has failed to load, we cannot render
+        this.updateTextureOwnership(false);
+        this.setRenderable(false);
+        return;
+      }
 
-      // we're only renderable if the texture state is loaded
-      newIsRenderable = this.texture.state === 'loaded';
+      needsTextureOwnership = true;
+      // Use cached boolean instead of string comparison
+      newIsRenderable = this.textureLoaded;
     } else if (
-      (this.hasShader() || this.hasColorProperties() === true) &&
+      // check shader
+      (this.props.shader !== this.stage.renderer.getDefaultShaderNode() ||
+        this.hasColorProps === true) &&
+      // check dimensions
       this.hasDimensions() === true
     ) {
       // This mean we have dimensions and a color set, so we can render a ColorTexture
-      if (
-        this.stage.defaultTexture &&
-        this.stage.defaultTexture.state === 'loaded'
-      ) {
-        newIsRenderable = true;
-      }
+      newIsRenderable = true;
     }
 
     this.updateTextureOwnership(needsTextureOwnership);
     this.setRenderable(newIsRenderable);
   }
 
-  /**
-   * Checks if the node is renderable based on world alpha, dimensions and out of bounds status.
-   */
-  checkBasicRenderability(): boolean {
-    if (this.worldAlpha === 0 || this.isOutOfBounds() === true) {
-      return false;
-    } else {
-      return true;
-    }
-  }
-
   /**
    * Sets the renderable state and triggers changes if necessary.
    * @param isRenderable - The new renderable state
    */
   setRenderable(isRenderable: boolean) {
+    const previousIsRenderable = this.isRenderable;
     this.isRenderable = isRenderable;
+
+    // Emit event if renderable status has changed
+    if (previousIsRenderable !== isRenderable) {
+      this.stage.requestRenderListUpdate();
+      if (EMIT_BOUNDS_EVENTS) {
+        this.emit('renderable', {
+          type: 'renderable',
+          isRenderable,
+        } satisfies NodeRenderablePayload);
+      }
+    }
   }
 
   /**
    * Changes the renderable state of the node.
    */
   updateTextureOwnership(isRenderable: boolean) {
-    this.texture?.setRenderableOwner(this, isRenderable);
+    this.texture?.setRenderableOwner(this._id, isRenderable);
   }
 
   /**
@@ -1523,38 +1665,24 @@ export class CoreNode extends EventEmitter {
    * Checks if the node has dimensions (width/height)
    */
   hasDimensions(): boolean {
-    return this.props.width !== 0 && this.props.height !== 0;
-  }
-
-  /**
-   * Checks if the node has any color properties set.
-   */
-  hasColorProperties(): boolean {
-    return (
-      this.props.color !== 0 ||
-      this.props.colorTop !== 0 ||
-      this.props.colorBottom !== 0 ||
-      this.props.colorLeft !== 0 ||
-      this.props.colorRight !== 0 ||
-      this.props.colorTl !== 0 ||
-      this.props.colorTr !== 0 ||
-      this.props.colorBl !== 0 ||
-      this.props.colorBr !== 0
-    );
-  }
-
-  hasShader(): boolean {
-    return this.props.shader !== null;
+    return this.props.w !== 0 && this.props.h !== 0;
   }
 
   calculateRenderCoords() {
-    const { width, height } = this;
-    const { tx, ty, ta, tb, tc, td } = this.globalTransform!;
+    const { w, h } = this.props;
+
+    const g = this.globalTransform!;
+    const tx = g.tx,
+      ty = g.ty,
+      ta = g.ta,
+      tb = g.tb,
+      tc = g.tc,
+      td = g.td;
     if (tb === 0 && tc === 0) {
       const minX = tx;
-      const maxX = tx + width * ta;
+      const maxX = tx + w * ta;
       const minY = ty;
-      const maxY = ty + height * td;
+      const maxY = ty + h * td;
       this.renderCoords = RenderCoords.translate(
         //top-left
         minX,
@@ -1576,18 +1704,18 @@ export class CoreNode extends EventEmitter {
         tx,
         ty,
         //top-right
-        tx + width * ta,
-        ty + width * tc,
+        tx + w * ta,
+        ty + w * tc,
         //bottom-right
-        tx + width * ta + height * tb,
-        ty + width * tc + height * td,
+        tx + w * ta + h * tb,
+        ty + w * tc + h * td,
         //bottom-left
-        tx + height * tb,
-        ty + height * td,
+        tx + h * tb,
+        ty + h * td,
         this.renderCoords,
       );
     }
-    if (this.sceneGlobalTransform === undefined) {
+    if (!USE_RTT || this.sceneGlobalTransform === undefined) {
       return;
     }
 
@@ -1601,9 +1729,9 @@ export class CoreNode extends EventEmitter {
     } = this.sceneGlobalTransform;
     if (stb === 0 && stc === 0) {
       const minX = stx;
-      const maxX = stx + width * sta;
+      const maxX = stx + w * sta;
       const minY = sty;
-      const maxY = sty + height * std;
+      const maxY = sty + h * std;
       this.sceneRenderCoords = RenderCoords.translate(
         //top-left
         minX,
@@ -1625,14 +1753,14 @@ export class CoreNode extends EventEmitter {
         stx,
         sty,
         //top-right
-        stx + width * sta,
-        sty + width * stc,
+        stx + w * sta,
+        sty + w * stc,
         //bottom-right
-        stx + width * sta + height * stb,
-        sty + width * stc + height * std,
+        stx + w * sta + h * stb,
+        sty + w * stc + h * std,
         //bottom-left
-        stx + height * stb,
-        sty + height * std,
+        stx + h * stb,
+        sty + h * std,
         this.sceneRenderCoords,
       );
     }
@@ -1647,16 +1775,15 @@ export class CoreNode extends EventEmitter {
    * Finally, the node's parentClippingRect and clippingRect properties are updated.
    */
   calculateClippingRect(parentClippingRect: RectWithValid) {
-    assertTruthy(this.globalTransform);
     const { clippingRect, props, globalTransform: gt } = this;
     const { clipping } = props;
-    const isRotated = gt.tb !== 0 || gt.tc !== 0;
+    const isRotated = gt!.tb !== 0 || gt!.tc !== 0;
 
     if (clipping === true && isRotated === false) {
-      clippingRect.x = gt.tx;
-      clippingRect.y = gt.ty;
-      clippingRect.width = this.width * gt.ta;
-      clippingRect.height = this.height * gt.td;
+      clippingRect.x = gt!.tx;
+      clippingRect.y = gt!.ty;
+      clippingRect.width = this.props.w * gt!.ta;
+      clippingRect.height = this.props.h * gt!.td;
       clippingRect.valid = true;
     } else {
       clippingRect.valid = false;
@@ -1672,95 +1799,185 @@ export class CoreNode extends EventEmitter {
     }
   }
 
-  calculateZIndex(): void {
-    const props = this.props;
-    const z = props.zIndex || 0;
-    const p = props.parent?.zIndex || 0;
-
-    let zIndex = z;
-    if (props.parent?.zIndexLocked) {
-      zIndex = z < p ? z : p;
-    }
-    this.calcZIndex = zIndex;
-  }
-
   /**
    * Destroy the node and cleanup all resources
    */
-  destroy(): void {
-    this.unloadTexture();
+  destroy(isChild: boolean = false): void {
+    if (this.destroyed === true) {
+      return;
+    }
+    this.destroyed = true;
+
+    // Detach from parent first to stop propagation of updates
+    if (isChild === false) {
+      const parent = this.parent;
+      if (parent !== null) {
+        parent.removeChild(this);
+      }
+      this.props.parent = null;
+      this.stage.requestRender();
+    }
 
-    this.clippingRect.valid = false;
+    this.removeAllListeners();
+    this.unloadTexture();
     this.isRenderable = false;
 
-    this.renderCoords = undefined;
-    this.renderBound = undefined;
-    this.strictBound = undefined;
-    this.preloadBound = undefined;
-    this.globalTransform = undefined;
-    this.scaleRotateTransform = undefined;
-    this.localTransform = undefined;
+    if (this.hasShaderTimeFn === true) {
+      this.stage.untrackTimedNode(this);
+    }
+
+    if (USE_RTT && this.rtt === true) {
+      this.stage.renderer.removeRTTNode(this);
+    }
+
+    // Kill children
+    for (let i = 0, n = this.children.length; i < n; i++) {
+      this.children[i]!.destroy(true);
+    }
+    this.children.length = 0;
 
     this.props.texture = null;
-    this.props.shader = this.stage.defShaderNode;
+  }
 
-    while (this.children.length > 0) {
-      this.children[0]?.destroy();
+  renderQuads(renderer: CoreRenderer): void {
+    if (USE_RTT && this.parentHasRenderTexture === true) {
+      const rtt = renderer.renderToTextureActive;
+      if (rtt === false || this.parentRenderTexture !== renderer.activeRttNode)
+        return;
+    }
+    // There is a race condition where the texture can be null
+    // with RTT nodes. Adding this defensively to avoid errors.
+    // Also check if we have a valid texture or default texture to render
+    if (USE_RTT && this.renderTexture!.state !== 'loaded') {
+      return;
     }
 
-    // This very action will also remove the node from the parent's children array
-    this.parent = null;
+    renderer.addQuad(this);
+  }
 
-    if (this.rtt) {
-      this.stage.renderer.removeRTTNode(this);
+  get renderTexture(): Texture | null {
+    return this.props.texture || this.stage.defaultTexture;
+  }
+
+  get renderTextureCoords(): TextureCoords | undefined {
+    return this.textureCoords || this.stage.renderer.defaultTextureCoords;
+  }
+
+  get quadBufferCollection(): BufferCollection {
+    return (this.stage.renderer as WebGlRenderer).quadBufferCollection;
+  }
+
+  get width(): number {
+    return this.props.w;
+  }
+
+  get height(): number {
+    return this.props.h;
+  }
+
+  get time(): number {
+    if (this.hasShaderTimeFn === true) {
+      return this.getTimerValue();
     }
+    return 0;
+  }
 
-    this.removeAllListeners();
+  getTimerValue(): number {
+    if (typeof this.shader!.time === 'function') {
+      return this.shader!.time(this.stage);
+    }
+    return this.stage.elapsedTime;
   }
 
-  renderQuads(renderer: CoreRenderer): void {
-    // Prevent quad rendering if parent has a render texture
-    // and renderer is not currently rendering to a texture
-    if (this.parentHasRenderTexture) {
-      if (!renderer.renderToTextureActive) {
-        return;
+  sortChildren() {
+    this.children.sort((a, b) => a.props.zIndex - b.props.zIndex);
+    this.stage.requestRenderListUpdate();
+  }
+
+  removeChild(node: CoreNode, targetParent: CoreNode | null = null) {
+    if (targetParent === null) {
+      if (
+        USE_RTT &&
+        this.props.rtt === true &&
+        this.parentHasRenderTexture === true
+      ) {
+        node.clearRTTInheritance();
       }
-      // Prevent quad rendering if parent render texture is not the active render texture
-      if (this.parentRenderTexture !== renderer.activeRttNode) {
-        return;
+
+      if (ENABLE_AUTOSIZE) {
+        const autosizeTarget = this.autosizer || this.parentAutosizer;
+        if (autosizeTarget !== null) {
+          autosizeTarget.detach(node);
+        }
       }
     }
+    removeChild(node, this.children);
+    this.stage.requestRenderListUpdate();
+  }
+
+  addChild(node: CoreNode, previousParent: CoreNode | null = null) {
+    const inRttCluster =
+      USE_RTT &&
+      (this.props.rtt === true || this.parentHasRenderTexture === true);
+    const children = this.children;
+    let attachToAutosizer = false;
+    let autosizeTarget: Autosizer | null = null;
+    if (ENABLE_AUTOSIZE) {
+      autosizeTarget = this.autosizer || this.parentAutosizer;
+      attachToAutosizer = autosizeTarget !== null;
+    }
+
+    node.parentHasRenderTexture = inRttCluster;
+    if (previousParent !== null) {
+      const previousParentInRttCluster =
+        USE_RTT &&
+        (previousParent.props.rtt === true ||
+          previousParent.parentHasRenderTexture === true);
+      if (inRttCluster === false && previousParentInRttCluster === true) {
+        // update child RTT status
+        node.clearRTTInheritance();
+      }
 
-    assertTruthy(this.globalTransform);
-    assertTruthy(this.renderCoords);
-
-    // add to list of renderables to be sorted before rendering
-    renderer.addQuad({
-      width: this.props.width,
-      height: this.props.height,
-      colorTl: this.premultipliedColorTl,
-      colorTr: this.premultipliedColorTr,
-      colorBl: this.premultipliedColorBl,
-      colorBr: this.premultipliedColorBr,
-      // if we do not have a texture, use the default texture
-      // this assumes any renderable node is either a distinct texture or a ColorTexture
-      texture: this.texture || this.stage.defaultTexture,
-      textureOptions: this.textureOptions,
-      zIndex: this.zIndex,
-      shader: this.props.shader as CoreShaderNode<any>,
-      alpha: this.worldAlpha,
-      clippingRect: this.clippingRect,
-      tx: this.globalTransform.tx,
-      ty: this.globalTransform.ty,
-      ta: this.globalTransform.ta,
-      tb: this.globalTransform.tb,
-      tc: this.globalTransform.tc,
-      td: this.globalTransform.td,
-      renderCoords: this.renderCoords,
-      rtt: this.rtt,
-      parentHasRenderTexture: this.parentHasRenderTexture,
-      framebufferDimensions: this.framebufferDimensions,
-    });
+      if (ENABLE_AUTOSIZE) {
+        const previousAutosizer = node.autosizer || node.parentAutosizer;
+        if (previousAutosizer !== null) {
+          if (!autosizeTarget || previousAutosizer.id !== autosizeTarget.id) {
+            previousAutosizer.detach(node);
+          }
+          attachToAutosizer = false;
+        }
+      }
+    }
+
+    if (ENABLE_AUTOSIZE && attachToAutosizer === true && autosizeTarget) {
+      //if this is true, then the autosizer really exists
+      autosizeTarget.attach(node);
+    }
+
+    if (inRttCluster === true) {
+      node.markChildrenWithRTT(this);
+    }
+
+    children.push(node);
+
+    // check if we need to sort
+    const lastIndex = children.length - 1;
+    let shouldSort = node.zIndex !== 0;
+
+    if (shouldSort === false && lastIndex > 0) {
+      // If the new node has zIndex 0, we check if any existing children have (had) non-zero zIndex.
+      // Since children are sorted, we only need to check the first and the last (before the new one).
+      // The new node is at `lastIndex`. The previous last node is at `lastIndex - 1`.
+      const first = children[0]!;
+      const last = children[lastIndex - 1]!;
+      shouldSort = first.zIndex !== 0 || last.zIndex !== 0;
+    }
+
+    if (shouldSort) {
+      this.setUpdateType(UpdateType.SortZIndexChildren);
+    }
+    this.setUpdateType(UpdateType.Children);
+    this.stage.requestRenderListUpdate();
   }
 
   //#region Properties
@@ -1790,7 +2007,7 @@ export class CoreNode extends EventEmitter {
   get absX(): number {
     return (
       this.props.x +
-      -this.props.width * this.props.mountX +
+      -this.props.w * this.props.mountX +
       (this.props.parent?.absX || this.props.parent?.globalTransform?.tx || 0)
     );
   }
@@ -1798,7 +2015,7 @@ export class CoreNode extends EventEmitter {
   get absY(): number {
     return (
       this.props.y +
-      -this.props.height * this.props.mountY +
+      -this.props.h * this.props.mountY +
       (this.props.parent?.absY ?? 0)
     );
   }
@@ -1814,43 +2031,63 @@ export class CoreNode extends EventEmitter {
     }
   }
 
-  get width(): number {
-    return this.props.width;
+  get w(): number {
+    return this.props.w;
   }
 
-  set width(value: number) {
-    if (this.props.width !== value) {
-      this.props.width = value;
-      this.setUpdateType(UpdateType.Local);
+  set w(value: number) {
+    const props = this.props;
+    if (props.w !== value) {
+      props.w = value;
+      let updateType = UpdateType.Local;
 
-      if (this.props.rtt) {
-        this.texture = this.stage.txManager.createTexture('RenderTexture', {
-          width: this.width,
-          height: this.height,
-        });
+      if (
+        props.texture !== null &&
+        this.stage.calculateTextureCoord === true &&
+        props.textureOptions !== null
+      ) {
+        this.textureCoords = this.stage.renderer.getTextureCoords!(this);
+      }
 
-        this.setUpdateType(UpdateType.RenderTexture);
+      if (props.rtt === true) {
+        this.framebufferDimensions!.w = value;
+        this.texture = this.stage.txManager.createTexture(
+          'RenderTexture',
+          this.framebufferDimensions!,
+        );
+        updateType |= UpdateType.RenderTexture;
       }
+      this.setUpdateType(updateType);
     }
   }
 
-  get height(): number {
-    return this.props.height;
+  get h(): number {
+    return this.props.h;
   }
 
-  set height(value: number) {
-    if (this.props.height !== value) {
-      this.props.height = value;
-      this.setUpdateType(UpdateType.Local);
+  set h(value: number) {
+    const props = this.props;
+    if (props.h !== value) {
+      props.h = value;
+      let updateType = UpdateType.Local;
 
-      if (this.props.rtt) {
-        this.texture = this.stage.txManager.createTexture('RenderTexture', {
-          width: this.width,
-          height: this.height,
-        });
+      if (
+        props.texture !== null &&
+        this.stage.calculateTextureCoord === true &&
+        props.textureOptions !== null
+      ) {
+        this.textureCoords = this.stage.renderer.getTextureCoords!(this);
+      }
 
-        this.setUpdateType(UpdateType.RenderTexture);
+      if (props.rtt === true) {
+        this.framebufferDimensions!.h = value;
+        this.texture = this.stage.txManager.createTexture(
+          'RenderTexture',
+          this.framebufferDimensions!,
+        );
+        updateType |= UpdateType.RenderTexture;
       }
+      this.setUpdateType(updateType);
     }
   }
 
@@ -1865,6 +2102,7 @@ export class CoreNode extends EventEmitter {
     // Unlike INode, `null` should never be possibility for Animations.
     this.scaleX = value;
     this.scaleY = value;
+    this.updateIsSimple();
   }
 
   get scaleX(): number {
@@ -1874,7 +2112,8 @@ export class CoreNode extends EventEmitter {
   set scaleX(value: number) {
     if (this.props.scaleX !== value) {
       this.props.scaleX = value;
-      this.setUpdateType(UpdateType.ScaleRotate);
+      this.setUpdateType(UpdateType.Local);
+      this.updateIsSimple();
     }
   }
 
@@ -1885,7 +2124,8 @@ export class CoreNode extends EventEmitter {
   set scaleY(value: number) {
     if (this.props.scaleY !== value) {
       this.props.scaleY = value;
-      this.setUpdateType(UpdateType.ScaleRotate);
+      this.setUpdateType(UpdateType.Local);
+      this.updateIsSimple();
     }
   }
 
@@ -1899,6 +2139,7 @@ export class CoreNode extends EventEmitter {
       this.props.mountY = value;
       this.props.mount = value;
       this.setUpdateType(UpdateType.Local);
+      this.updateIsSimple();
     }
   }
 
@@ -1910,6 +2151,7 @@ export class CoreNode extends EventEmitter {
     if (this.props.mountX !== value) {
       this.props.mountX = value;
       this.setUpdateType(UpdateType.Local);
+      this.updateIsSimple();
     }
   }
 
@@ -1921,6 +2163,7 @@ export class CoreNode extends EventEmitter {
     if (this.props.mountY !== value) {
       this.props.mountY = value;
       this.setUpdateType(UpdateType.Local);
+      this.updateIsSimple();
     }
   }
 
@@ -1966,7 +2209,8 @@ export class CoreNode extends EventEmitter {
   set rotation(value: number) {
     if (this.props.rotation !== value) {
       this.props.rotation = value;
-      this.setUpdateType(UpdateType.ScaleRotate);
+      this.setUpdateType(UpdateType.Local);
+      this.updateIsSimple();
     }
   }
 
@@ -1990,15 +2234,34 @@ export class CoreNode extends EventEmitter {
   }
 
   set autosize(value: boolean) {
+    if (this.props.autosize === value) {
+      return;
+    }
+
     this.props.autosize = value;
+
+    if (value === true && this.autosizer === null) {
+      this.autosizer = new Autosizer(this);
+    } else {
+      this.autosizer = null;
+    }
   }
 
   get boundsMargin(): number | [number, number, number, number] | null {
-    return (
-      this.props.boundsMargin ??
-      this.parent?.boundsMargin ??
-      this.stage.boundsMargin
-    );
+    const props = this.props;
+    if (props.boundsMargin !== null) {
+      return props.boundsMargin;
+    }
+
+    const parent = this.parent;
+    if (parent !== null) {
+      const margin = parent.boundsMargin;
+      if (margin !== undefined) {
+        return margin;
+      }
+    }
+
+    return this.stage.boundsMargin;
   }
 
   set boundsMargin(value: number | [number, number, number, number] | null) {
@@ -2035,11 +2298,22 @@ export class CoreNode extends EventEmitter {
   }
 
   set color(value: number) {
-    this.colorTop = value;
-    this.colorBottom = value;
-    this.colorLeft = value;
-    this.colorRight = value;
-    this.props.color = value;
+    const p = this.props;
+    if (p.color === value) return;
+
+    p.color = value;
+
+    const has = value > 0;
+
+    if (has !== this.hasColorProps) {
+      this.setUpdateType(UpdateType.IsRenderable);
+    }
+    this.hasColorProps = has;
+
+    if (p.colorTop !== value) this.colorTop = value;
+    if (p.colorBottom !== value) this.colorBottom = value;
+    if (p.colorLeft !== value) this.colorLeft = value;
+    if (p.colorRight !== value) this.colorRight = value;
 
     this.setUpdateType(UpdateType.PremultipliedColors);
   }
@@ -2054,7 +2328,10 @@ export class CoreNode extends EventEmitter {
       this.colorTr = value;
     }
     this.props.colorTop = value;
-    this.setUpdateType(UpdateType.PremultipliedColors);
+    this.hasColorProps = value > 0;
+    this.setUpdateType(
+      UpdateType.PremultipliedColors | UpdateType.IsRenderable,
+    );
   }
 
   get colorBottom(): number {
@@ -2067,7 +2344,10 @@ export class CoreNode extends EventEmitter {
       this.colorBr = value;
     }
     this.props.colorBottom = value;
-    this.setUpdateType(UpdateType.PremultipliedColors);
+    this.hasColorProps = value > 0;
+    this.setUpdateType(
+      UpdateType.PremultipliedColors | UpdateType.IsRenderable,
+    );
   }
 
   get colorLeft(): number {
@@ -2080,7 +2360,10 @@ export class CoreNode extends EventEmitter {
       this.colorBl = value;
     }
     this.props.colorLeft = value;
-    this.setUpdateType(UpdateType.PremultipliedColors);
+    this.hasColorProps = value > 0;
+    this.setUpdateType(
+      UpdateType.PremultipliedColors | UpdateType.IsRenderable,
+    );
   }
 
   get colorRight(): number {
@@ -2093,7 +2376,10 @@ export class CoreNode extends EventEmitter {
       this.colorBr = value;
     }
     this.props.colorRight = value;
-    this.setUpdateType(UpdateType.PremultipliedColors);
+    this.hasColorProps = value > 0;
+    this.setUpdateType(
+      UpdateType.PremultipliedColors | UpdateType.IsRenderable,
+    );
   }
 
   get colorTl(): number {
@@ -2102,7 +2388,10 @@ export class CoreNode extends EventEmitter {
 
   set colorTl(value: number) {
     this.props.colorTl = value;
-    this.setUpdateType(UpdateType.PremultipliedColors);
+    this.hasColorProps = value > 0;
+    this.setUpdateType(
+      UpdateType.PremultipliedColors | UpdateType.IsRenderable,
+    );
   }
 
   get colorTr(): number {
@@ -2111,7 +2400,10 @@ export class CoreNode extends EventEmitter {
 
   set colorTr(value: number) {
     this.props.colorTr = value;
-    this.setUpdateType(UpdateType.PremultipliedColors);
+    this.hasColorProps = value > 0;
+    this.setUpdateType(
+      UpdateType.PremultipliedColors | UpdateType.IsRenderable,
+    );
   }
 
   get colorBl(): number {
@@ -2120,7 +2412,10 @@ export class CoreNode extends EventEmitter {
 
   set colorBl(value: number) {
     this.props.colorBl = value;
-    this.setUpdateType(UpdateType.PremultipliedColors);
+    this.hasColorProps = value > 0;
+    this.setUpdateType(
+      UpdateType.PremultipliedColors | UpdateType.IsRenderable,
+    );
   }
 
   get colorBr(): number {
@@ -2129,21 +2424,10 @@ export class CoreNode extends EventEmitter {
 
   set colorBr(value: number) {
     this.props.colorBr = value;
-    this.setUpdateType(UpdateType.PremultipliedColors);
-  }
-
-  // we're only interested in parent zIndex to test
-  // if we should use node zIndex is higher then parent zIndex
-  get zIndexLocked(): number {
-    return this.props.zIndexLocked || 0;
-  }
-
-  set zIndexLocked(value: number) {
-    this.props.zIndexLocked = value;
-    this.setUpdateType(UpdateType.CalculatedZIndex | UpdateType.Children);
-    for (let i = 0, length = this.children.length; i < length; i++) {
-      this.children[i]!.setUpdateType(UpdateType.CalculatedZIndex);
-    }
+    this.hasColorProps = value > 0;
+    this.setUpdateType(
+      UpdateType.PremultipliedColors | UpdateType.IsRenderable,
+    );
   }
 
   get zIndex(): number {
@@ -2151,10 +2435,28 @@ export class CoreNode extends EventEmitter {
   }
 
   set zIndex(value: number) {
-    this.props.zIndex = value;
-    this.setUpdateType(UpdateType.CalculatedZIndex | UpdateType.Children);
-    for (let i = 0, length = this.children.length; i < length; i++) {
-      this.children[i]!.setUpdateType(UpdateType.CalculatedZIndex);
+    let sanitizedValue = value;
+    if (isNaN(sanitizedValue) || Number.isFinite(sanitizedValue) === false) {
+      console.warn(
+        `zIndex was set to an invalid value: ${value}, defaulting to 0`,
+      );
+      sanitizedValue = 0;
+    }
+
+    //Clamp to safe integer range
+    if (sanitizedValue > Number.MAX_SAFE_INTEGER) {
+      sanitizedValue = 1000;
+    } else if (sanitizedValue < Number.MIN_SAFE_INTEGER) {
+      sanitizedValue = -1000;
+    }
+
+    if (this.props.zIndex === sanitizedValue) {
+      return;
+    }
+    this.props.zIndex = sanitizedValue;
+    const parent = this.parent;
+    if (parent !== null) {
+      parent.setUpdateType(UpdateType.SortZIndexChildren);
     }
   }
 
@@ -2169,48 +2471,13 @@ export class CoreNode extends EventEmitter {
     }
     this.props.parent = newParent;
     if (oldParent) {
-      const index = oldParent.children.indexOf(this);
-      assertTruthy(
-        index !== -1,
-        "CoreNode.parent: Node not found in old parent's children!",
-      );
-      oldParent.children.splice(index, 1);
-      oldParent.setUpdateType(
-        UpdateType.Children | UpdateType.ZIndexSortedChildren,
-      );
-    }
-    if (newParent) {
-      newParent.children.push(this);
-      // Since this node has a new parent, to be safe, have it do a full update.
-      this.setUpdateType(UpdateType.All);
-      // Tell parent that it's children need to be updated and sorted.
-      newParent.setUpdateType(
-        UpdateType.Children | UpdateType.ZIndexSortedChildren,
-      );
-
-      // If the new parent has an RTT enabled, apply RTT inheritance
-      if (newParent.rtt || newParent.parentHasRenderTexture) {
-        this.applyRTTInheritance(newParent);
-      }
+      oldParent.removeChild(this, newParent);
     }
-    this.updateScaleRotateTransform();
-
-    // fetch render bounds from parent
-    this.setUpdateType(UpdateType.RenderBounds | UpdateType.Children);
-  }
-
-  get preventCleanup(): boolean {
-    return this.props.textureOptions.preventCleanup || false;
-  }
-
-  set preventCleanup(value: boolean) {
-    if (isProductionEnvironment() === false) {
-      console.warn(
-        'CoreNode.preventCleanup: Is deprecated and will be removed in upcoming release, please use textureOptions.preventCleanup instead',
-      );
+    if (newParent !== null) {
+      newParent.addChild(this, oldParent);
     }
-
-    this.props.textureOptions.preventCleanup = value;
+    //since this node has a new parent, recalc global and render bounds
+    this.setUpdateType(UpdateType.Global | UpdateType.RenderBounds);
   }
 
   get rtt(): boolean {
@@ -2237,11 +2504,14 @@ export class CoreNode extends EventEmitter {
     }
   }
   private initRenderTexture() {
-    this.texture = this.stage.txManager.createTexture('RenderTexture', {
-      width: this.width,
-      height: this.height,
-    });
-
+    this.framebufferDimensions = {
+      w: this.props.w,
+      h: this.props.h,
+    };
+    this.texture = this.stage.txManager.createTexture(
+      'RenderTexture',
+      this.framebufferDimensions,
+    );
     this.stage.renderer.renderToTexture(this);
   }
 
@@ -2251,6 +2521,7 @@ export class CoreNode extends EventEmitter {
 
     this.hasRTTupdates = false;
     this.texture = null;
+    this.framebufferDimensions = null;
   }
 
   private markChildrenWithRTT(node: CoreNode | null = null) {
@@ -2300,13 +2571,24 @@ export class CoreNode extends EventEmitter {
       return;
     }
     if (shader === null) {
+      this.hasShaderUpdater = false;
       this.props.shader = this.stage.defShaderNode;
       this.setUpdateType(UpdateType.IsRenderable);
       return;
     }
-    shader.attachNode(this);
+    if (shader.shaderKey !== 'default') {
+      this.hasShaderUpdater = shader.update !== undefined;
+      this.hasShaderTimeFn = shader.time !== undefined;
+      shader.attachNode(this);
+    }
+
+    if (this.hasShaderTimeFn === true) {
+      this.stage.trackTimedNode(this);
+    } else {
+      this.stage.untrackTimedNode(this);
+    }
     this.props.shader = shader;
-    this.setUpdateType(UpdateType.IsRenderable);
+    this.setUpdateType(UpdateType.IsRenderable | UpdateType.RecalcUniforms);
   }
 
   get src(): string | null {
@@ -2327,8 +2609,8 @@ export class CoreNode extends EventEmitter {
 
     this.texture = this.stage.txManager.createTexture('ImageTexture', {
       src: imageUrl,
-      width: this.props.width,
-      height: this.props.height,
+      w: this.props.w,
+      h: this.props.h,
       type: this.props.imageType,
       sx: this.props.srcX,
       sy: this.props.srcY,
@@ -2382,16 +2664,14 @@ export class CoreNode extends EventEmitter {
   }
 
   /**
-   * Returns the framebuffer dimensions of the node.
-   * If the node has a render texture, the dimensions are the same as the node's dimensions.
-   * If the node does not have a render texture, the dimensions are inherited from the parent.
-   * If the node parent has a render texture and the node is a render texture, the nodes dimensions are used.
+   * Returns the framebuffer dimensions of the RTT parent
    */
-  get framebufferDimensions(): Dimensions {
-    if (this.parentHasRenderTexture && !this.rtt && this.parent) {
-      return this.parent.framebufferDimensions;
+  get parentFramebufferDimensions(): Dimensions | null {
+    if (this.rttParent !== null) {
+      return this.rttParent.framebufferDimensions;
     }
-    return { width: this.width, height: this.height };
+    this.rttParent = this.findParentRTTNode();
+    return this.rttParent ? this.rttParent.framebufferDimensions : null;
   }
 
   /**
@@ -2419,39 +2699,53 @@ export class CoreNode extends EventEmitter {
 
     const oldTexture = this.props.texture;
     if (oldTexture) {
-      oldTexture.setRenderableOwner(this, false);
       this.unloadTexture();
+      if (this.autosizer !== null && value === null) {
+        this.autosizer.setMode(AutosizeMode.Children); // Set to children size mode
+      }
     }
 
+    this.textureCoords = undefined;
     this.props.texture = value;
     if (value !== null) {
-      value.setRenderableOwner(this, this.isRenderable);
+      if (this.autosizer !== null) {
+        this.autosizer.setMode(AutosizeMode.Texture); // Set to texture size mode
+      }
+      value.setRenderableOwner(this._id, this.isRenderable);
       this.loadTexture();
     }
 
     this.setUpdateType(UpdateType.IsRenderable);
+    this.updateIsSimple();
   }
 
   set textureOptions(value: TextureOptions) {
     this.props.textureOptions = value;
+    if (this.stage.calculateTextureCoord === true && value !== null) {
+      this.textureCoords = this.stage.renderer.getTextureCoords!(this);
+    }
+    this.updateIsSimple();
   }
 
   get textureOptions(): TextureOptions {
     return this.props.textureOptions;
   }
 
-  get strictBounds(): boolean {
-    return this.props.strictBounds;
+  set interactive(value: boolean | undefined) {
+    this.props.interactive = value;
+    // Update Stage's interactive Set
+    if (value === true) {
+      this.stage.interactiveNodes.add(this);
+    }
   }
 
-  set strictBounds(v) {
-    if (v === this.props.strictBounds) {
-      return;
-    }
+  get interactive(): boolean | undefined {
+    return this.props.interactive;
+  }
 
-    this.props.strictBounds = v;
-    this.setUpdateType(UpdateType.RenderBounds | UpdateType.Children);
-    this.childUpdateType |= UpdateType.RenderBounds | UpdateType.Children;
+  setRTTUpdates(type: number) {
+    this.hasRTTupdates = true;
+    this.parent?.setRTTUpdates(type);
   }
 
   animate(
@@ -2472,5 +2766,70 @@ export class CoreNode extends EventEmitter {
     // no-op
   }
 
+  /**
+   * Add a texture to the current RenderOp.
+   *
+   * @param texture
+   * @returns Assigned Texture Index of the texture in the render op
+   */
+  addTexture(texture: WebGlCtxTexture): number {
+    const textures = this.renderOpTextures;
+    const length = textures.length;
+
+    for (let i = 0; i < length; i++) {
+      if (textures[i] === texture) {
+        return i;
+      }
+    }
+
+    if (length >= 1) {
+      return 0xffffffff;
+    }
+
+    textures.push(texture);
+    return length;
+  }
+
+  draw(renderer: WebGlRenderer) {
+    const { glw, options, stage } = renderer;
+    const shader = this.props.shader as any;
+
+    stage.shManager.useShader(shader.program);
+    shader.program.bindRenderOp(this);
+
+    // Clipping
+    if (this.clippingRect.valid === true) {
+      const pixelRatio =
+        USE_RTT && this.parentHasRenderTexture ? 1 : stage.pixelRatio;
+
+      const clipX = Math.round(this.clippingRect.x * pixelRatio);
+      const clipWidth = Math.round(this.clippingRect.width * pixelRatio);
+      const clipHeight = Math.round(this.clippingRect.height * pixelRatio);
+      let clipY = Math.round(
+        options.canvas.height - clipHeight - this.clippingRect.y * pixelRatio,
+      );
+      // if parent has render texture, we need to adjust the scissor rect
+      // to be relative to the parent's framebuffer
+      if (USE_RTT && this.parentHasRenderTexture) {
+        clipY = this.parentFramebufferDimensions
+          ? this.parentFramebufferDimensions.h - this.props.h
+          : 0;
+      }
+
+      glw.setScissorTest(true);
+      glw.scissor(clipX, clipY, clipWidth, clipHeight);
+    } else {
+      glw.setScissorTest(false);
+    }
+
+    const quadIdx = (this.renderOpBufferIdx / 20) * 6 * 2;
+    glw.drawElements(
+      glw.TRIANGLES,
+      6 * this.numQuads,
+      glw.UNSIGNED_SHORT,
+      quadIdx,
+    );
+  }
+
   //#endregion Properties
 }