@lightningjs/renderer 3.0.0-beta20 → 3.0.0-beta21

package/src/core/CoreNode.ts

@@ -23,6 +23,9 @@ import {
   mergeColorAlphaPremultiplied,
 } 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 {
@@ -57,6 +60,7 @@ 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 {
   bucketSortByZIndex,
   incrementalRepositionByZIndex,
@@ -73,8 +77,8 @@ export enum CoreNodeRenderState {
 const NO_CLIPPING_RECT: RectWithValid = {
   x: 0,
   y: 0,
-  width: 0,
-  height: 0,
+  w: 0,
+  h: 0,
   valid: false,
 };
 
@@ -187,6 +191,10 @@ export enum UpdateType {
    */
   RecalcUniforms = 4096,
 
+  /**
+   * Autosize update
+   */
+  Autosize = 8192,
   /**
    * None
    */
@@ -195,7 +203,7 @@ export enum UpdateType {
   /**
    * All
    */
-  All = 7167,
+  All = 16383,
 }
 
 /**
@@ -259,14 +267,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`
    */
@@ -712,6 +741,12 @@ 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[] = [];
 
   private hasShaderUpdater = false;
   public hasShaderTimeFn = false;
@@ -736,8 +771,8 @@ export class CoreNode extends EventEmitter {
   public clippingRect: RectWithValid = {
     x: 0,
     y: 0,
-    width: 0,
-    height: 0,
+    w: 0,
+    h: 0,
     valid: false,
   };
   public textureCoords?: TextureCoords;
@@ -759,11 +794,19 @@ export class CoreNode extends EventEmitter {
    */
   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();
     const p = (this.props = {} as CoreNodeProps);
+
+    // Initialize the renderOpTextures array with a capacity of 16 (typical max textures)
+    this.renderOpTextures = [];
+
     //inital update type
     let initialUpdateType =
       UpdateType.Local | UpdateType.RenderBounds | UpdateType.RenderState;
@@ -822,6 +865,7 @@ export class CoreNode extends EventEmitter {
     p.srcY = props.srcY;
     p.srcWidth = props.srcWidth;
     p.srcHeight = props.srcHeight;
+    p.autosize = props.autosize;
 
     p.parent = props.parent;
     p.texture = null;
@@ -847,6 +891,11 @@ export class CoreNode extends EventEmitter {
     this.boundsMargin = props.boundsMargin;
     this.interactive = props.interactive;
 
+    // Initialize autosize if enabled
+    if (p.autosize === true) {
+      this.autosizer = new Autosizer(this);
+    }
+
     this.setUpdateType(initialUpdateType);
 
     // if the default texture isn't loaded yet, wait for it to load
@@ -877,7 +926,11 @@ export class CoreNode extends EventEmitter {
    * This method is called in a microtask to release the texture.
    */
   private loadTextureTask = (): void => {
-    const texture = this.texture as Texture;
+    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);
     }
@@ -919,9 +972,8 @@ export class CoreNode extends EventEmitter {
   }
 
   protected onTextureLoaded: TextureLoadedEventHandler = (_, dimensions) => {
-    if (this.autosize === true) {
-      this.w = dimensions.w;
-      this.h = dimensions.h;
+    if (this.autosizer !== null) {
+      this.autosizer.update();
     }
 
     this.setUpdateType(UpdateType.IsRenderable);
@@ -1094,6 +1146,12 @@ export class CoreNode extends EventEmitter {
     let updateType = this.updateType;
     let childUpdateType = this.childUpdateType;
     let updateParent = false;
+
+    //this needs to be handled before setting updateTypes are reset
+    if (updateType & UpdateType.Autosize && this.autosizer !== null) {
+      this.autosizer.update();
+    }
+
     // reset update type
     this.updateType = 0;
     this.childUpdateType = 0;
@@ -1148,12 +1206,14 @@ export class CoreNode extends EventEmitter {
       this.calculateRenderCoords();
       this.updateBoundingRect();
 
-      updateType |=
-        UpdateType.RenderState |
-        UpdateType.Children |
-        UpdateType.RecalcUniforms;
+      updateType |= UpdateType.RenderState | UpdateType.RecalcUniforms;
       updateParent = hasParent;
-      childUpdateType |= UpdateType.Global;
+
+      //only propagate children updates if not autosizing
+      if ((updateType & UpdateType.Autosize) === 0) {
+        updateType |= UpdateType.Children;
+        childUpdateType |= UpdateType.Global;
+      }
 
       if (this.clipping === true) {
         updateType |= UpdateType.Clipping | UpdateType.RenderBounds;
@@ -1198,6 +1258,15 @@ export class CoreNode extends EventEmitter {
       this.updateIsRenderable();
     }
 
+    // Handle autosize updates when children transforms change
+    if (
+      updateType & UpdateType.Global &&
+      this.isRenderable === true &&
+      this.parentAutosizer !== null
+    ) {
+      this.parentAutosizer.patch(this.id);
+    }
+
     if (updateType & UpdateType.Clipping) {
       this.calculateClippingRect(parentClippingRect);
       updateType |= UpdateType.Children;
@@ -1684,8 +1753,8 @@ export class CoreNode extends EventEmitter {
     if (clipping === true && isRotated === false) {
       clippingRect.x = gt!.tx;
       clippingRect.y = gt!.ty;
-      clippingRect.width = this.props.w * gt!.ta;
-      clippingRect.height = this.props.h * gt!.td;
+      clippingRect.w = this.props.w * gt!.ta;
+      clippingRect.h = this.props.h * gt!.td;
       clippingRect.valid = true;
     } else {
       clippingRect.valid = false;
@@ -1744,47 +1813,27 @@ export class CoreNode extends EventEmitter {
         return;
     }
 
-    const p = this.props;
-    const t = this.globalTransform!;
-    const coords = this.renderCoords;
-    const texture = p.texture || this.stage.defaultTexture;
-    const textureCoords =
-      this.textureCoords || this.stage.renderer.defaultTextureCoords;
+    const texture = this.props.texture || this.stage.defaultTexture;
 
     // There is a race condition where the texture can be null
     // with RTT nodes. Adding this defensively to avoid errors.
-    if (texture && texture.state !== 'loaded') {
+    // Also check if we have a valid texture or default texture to render
+    if (!texture || texture.state !== 'loaded') {
       return;
     }
 
-    renderer.addQuad({
-      width: p.w,
-      height: p.h,
-      colorTl: this.premultipliedColorTl,
-      colorTr: this.premultipliedColorTr,
-      colorBl: this.premultipliedColorBl,
-      colorBr: this.premultipliedColorBr,
-      texture,
-      textureOptions: p.textureOptions,
-      textureCoords: textureCoords,
-      shader: p.shader as CoreShaderNode<any>,
-      alpha: this.worldAlpha,
-      clippingRect: this.clippingRect,
-      tx: t.tx,
-      ty: t.ty,
-      ta: t.ta,
-      tb: t.tb,
-      tc: t.tc,
-      td: t.td,
-      renderCoords: coords,
-      rtt: p.rtt,
-      zIndex: this.calcZIndex,
-      parentHasRenderTexture: this.parentHasRenderTexture,
-      framebufferDimensions: this.parentHasRenderTexture
-        ? this.parentFramebufferDimensions
-        : null,
-      time: this.hasShaderTimeFn === true ? this.getTimerValue() : null,
-    });
+    renderer.addQuad(this);
+  }
+
+  get quadBufferCollection(): BufferCollection {
+    return (this.stage.renderer as WebGlRenderer).quadBufferCollection;
+  }
+
+  get time(): number {
+    if (this.hasShaderTimeFn === true) {
+      return this.getTimerValue();
+    }
+    return 0;
   }
 
   getTimerValue(): number {
@@ -1838,12 +1887,14 @@ export class CoreNode extends EventEmitter {
   }
 
   removeChild(node: CoreNode, targetParent: CoreNode | null = null) {
-    if (
-      targetParent === null &&
-      this.props.rtt === true &&
-      this.parentHasRenderTexture === true
-    ) {
-      node.clearRTTInheritance();
+    if (targetParent === null) {
+      if (this.props.rtt === true && this.parentHasRenderTexture === true) {
+        node.clearRTTInheritance();
+      }
+      const autosizeTarget = this.autosizer || this.parentAutosizer;
+      if (autosizeTarget !== null) {
+        autosizeTarget.detach(node);
+      }
     }
     removeChild(node, this.children);
   }
@@ -1855,6 +1906,8 @@ export class CoreNode extends EventEmitter {
     const min = this.zIndexMin;
     const max = this.zIndexMax;
     const zIndex = node.zIndex;
+    const autosizeTarget = this.autosizer || this.parentAutosizer;
+    let attachToAutosizer = autosizeTarget !== null;
 
     node.parentHasRenderTexture = inRttCluster;
     if (previousParent !== null) {
@@ -1865,6 +1918,22 @@ export class CoreNode extends EventEmitter {
         // update child RTT status
         node.clearRTTInheritance();
       }
+      const previousAutosizer = node.autosizer || node.parentAutosizer;
+
+      if (previousAutosizer !== null) {
+        if (
+          autosizeTarget === null ||
+          previousAutosizer.id !== autosizeTarget.id
+        ) {
+          previousAutosizer.detach(node);
+        }
+        attachToAutosizer = false;
+      }
+    }
+
+    if (attachToAutosizer === true) {
+      //if this is true, then the autosizer really exists
+      autosizeTarget!.attach(node);
     }
 
     if (inRttCluster === true) {
@@ -1936,19 +2005,28 @@ export class CoreNode extends EventEmitter {
   }
 
   set w(value: number) {
-    if (this.props.w !== value) {
-      this.props.w = value;
-      this.setUpdateType(UpdateType.Local);
+    const props = this.props;
+    if (props.w !== value) {
+      props.w = value;
+      let updateType = UpdateType.Local;
+
+      if (
+        props.texture !== null &&
+        this.stage.calculateTextureCoord === true &&
+        props.textureOptions !== null
+      ) {
+        this.textureCoords = this.stage.renderer.getTextureCoords!(this);
+      }
 
-      if (this.props.rtt === true) {
+      if (props.rtt === true) {
         this.framebufferDimensions!.w = value;
         this.texture = this.stage.txManager.createTexture(
           'RenderTexture',
           this.framebufferDimensions!,
         );
-
-        this.setUpdateType(UpdateType.RenderTexture);
+        updateType |= UpdateType.RenderTexture;
       }
+      this.setUpdateType(updateType);
     }
   }
 
@@ -1957,19 +2035,28 @@ export class CoreNode extends EventEmitter {
   }
 
   set h(value: number) {
-    if (this.props.h !== value) {
-      this.props.h = value;
-      this.setUpdateType(UpdateType.Local);
+    const props = this.props;
+    if (props.h !== value) {
+      props.h = value;
+      let updateType = UpdateType.Local;
+
+      if (
+        props.texture !== null &&
+        this.stage.calculateTextureCoord === true &&
+        props.textureOptions !== null
+      ) {
+        this.textureCoords = this.stage.renderer.getTextureCoords!(this);
+      }
 
-      if (this.props.rtt === true) {
+      if (props.rtt === true) {
         this.framebufferDimensions!.h = value;
         this.texture = this.stage.txManager.createTexture(
           'RenderTexture',
           this.framebufferDimensions!,
         );
-
-        this.setUpdateType(UpdateType.RenderTexture);
+        updateType |= UpdateType.RenderTexture;
       }
+      this.setUpdateType(updateType);
     }
   }
 
@@ -2109,7 +2196,17 @@ 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 {
@@ -2517,12 +2614,12 @@ export class CoreNode extends EventEmitter {
   /**
    * Returns the framebuffer dimensions of the RTT parent
    */
-  get parentFramebufferDimensions(): Dimensions {
+  get parentFramebufferDimensions(): Dimensions | null {
     if (this.rttParent !== null) {
-      return this.rttParent.framebufferDimensions as Dimensions;
+      return this.rttParent.framebufferDimensions;
     }
-    this.rttParent = this.findParentRTTNode() as CoreNode;
-    return this.rttParent.framebufferDimensions as Dimensions;
+    this.rttParent = this.findParentRTTNode();
+    return this.rttParent ? this.rttParent.framebufferDimensions : null;
   }
 
   /**
@@ -2551,11 +2648,17 @@ export class CoreNode extends EventEmitter {
     const oldTexture = this.props.texture;
     if (oldTexture) {
       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) {
+      if (this.autosizer !== null) {
+        this.autosizer.setMode(AutosizeMode.Texture); // Set to texture size mode
+      }
       value.setRenderableOwner(this._id, this.isRenderable);
       this.loadTexture();
     }
@@ -2609,5 +2712,71 @@ 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 = this.parentHasRenderTexture ? 1 : stage.pixelRatio;
+
+      const clipX = Math.round(this.clippingRect.x * pixelRatio);
+      const clipWidth = Math.round(this.clippingRect.w * pixelRatio);
+      const clipHeight = Math.round(this.clippingRect.h * 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 (this.parentHasRenderTexture) {
+        const parentFramebufferDimensions = this.parentFramebufferDimensions;
+        clipY =
+          parentFramebufferDimensions !== null
+            ? parentFramebufferDimensions.h - this.props.h
+            : 0;
+      }
+
+      glw.setScissorTest(true);
+      glw.scissor(clipX, clipY, clipWidth, clipHeight);
+    } else {
+      glw.setScissorTest(false);
+    }
+
+    const quadIdx = (this.renderOpBufferIdx / 32) * 6 * 2;
+    glw.drawElements(
+      glw.TRIANGLES,
+      6 * this.numQuads,
+      glw.UNSIGNED_SHORT,
+      quadIdx,
+    );
+  }
+
   //#endregion Properties
 }

package/src/core/CoreTextNode.ts

@@ -52,7 +52,7 @@ export enum TextConstraint {
   'none' = 0,
   'width' = 1,
   'height' = 2,
-  'both' = 4,
+  'both' = 3,
 }
 
 export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
@@ -359,8 +359,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   }
 
   override set w(value: number) {
-    // dont allow direct setting of width on text nodes, handled by text layout generation
-    console.warn('Cannot directly set w on CoreTextNode');
+    this.maxWidth = value;
   }
 
   override get w(): number {
@@ -368,8 +367,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   }
 
   override set h(value: number) {
-    // dont allow direct setting of height on text nodes, handled by text layout generation
-    console.warn('Cannot directly set h on CoreTextNode');
+    this.maxHeight = value;
   }
 
   override get h(): number {

package/src/core/CoreTextureManager.ts

@@ -505,7 +505,7 @@ export class CoreTextureManager extends EventEmitter {
   }
 
   public hasUpdates(): boolean {
-    return this.uploadTextureQueue.length > 0;
+    return this.uploadTextureQueue.length > 0 || this.priorityQueue.length > 0;
   }
 
   /**

package/src/core/Stage.ts

@@ -69,6 +69,7 @@ export type StageOptions = Omit<
   platform: Platform | WebPlatform;
   inspector: boolean;
   maxRetryCount: number;
+  enableClear: boolean;
 };
 
 export type StageFpsUpdateHandler = (
@@ -471,11 +472,13 @@ export class Stage {
 
     // Process some textures asynchronously but don't block the frame
     // Use a background task to prevent frame drops
-    this.txManager
-      .processSome(this.options.textureProcessingTimeLimit)
-      .catch((err) => {
-        console.error('Error processing textures:', err);
-      });
+    if (this.txManager.hasUpdates() === true) {
+      this.txManager
+        .processSome(this.options.textureProcessingTimeLimit)
+        .catch((err) => {
+          console.error('Error processing textures:', err);
+        });
+    }
 
     // Reset render operations and clear the canvas
     renderer.reset();
@@ -888,8 +891,8 @@ export class Stage {
    * @remarks
    * This method is used to cleanup orphaned textures that are no longer in use.
    */
-  cleanup() {
-    this.txMemManager.cleanup();
+  cleanup(full: boolean = false) {
+    this.txMemManager.cleanup(full);
   }
 
   set clearColor(value: number) {

package/src/core/TextureMemoryManager.ts

@@ -253,7 +253,7 @@ export class TextureMemoryManager {
     texture.memUsed = 0;
   }
 
-  cleanup() {
+  cleanup(full: boolean = false) {
     const critical = this.criticalCleanupRequested;
     this.lastCleanupTime = this.frameTime;
 
@@ -266,7 +266,7 @@ export class TextureMemoryManager {
 
     if (this.debugLogging === true) {
       console.log(
-        `[TextureMemoryManager] Cleaning up textures. Critical: ${critical}.`,
+        `[TextureMemoryManager] Cleaning up textures. Critical: ${critical}. Full: ${full}`,
       );
     }
 
@@ -279,7 +279,7 @@ export class TextureMemoryManager {
 
     for (let i = 0; i < this.loadedTextures.length; i++) {
       // Early exit: target memory reached
-      if (currentMemUsed < memTarget) {
+      if (full === false && currentMemUsed < memTarget) {
         break;
       }