@lightningjs/renderer 3.0.0-beta11 → 3.0.0-beta13

package/README.md

@@ -131,3 +131,7 @@ await stage.loadFont('sdf', {
 ```
 
 For more information see [Font Loading](./docs/fontLoading.md)
+
+## Migration Guide
+
+Upgrading from Lightning 3 v2.x? See the [Migration Guide](./docs/migration-2x-to-3.0.md) for detailed information about breaking changes and how to update your code.

package/dist/src/common/CommonTypes.d.ts

@@ -10,8 +10,8 @@ import type { CoreNodeRenderState } from '../core/CoreNode.js';
  * Represents a width and height.
  */
 export interface Dimensions {
-    width: number;
-    height: number;
+    w: number;
+    h: number;
 }
 /**
  * Payload for when text is loaded

package/dist/src/core/CoreNode.d.ts

@@ -160,16 +160,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.
      *
@@ -593,21 +595,6 @@ export interface CoreNodeProps {
      * @default false
      */
     interactive?: boolean;
-    /**
-     * 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
-     *
-     * @default true
-     */
-    strictBounds: boolean;
 }
 /**
  * Grab all the number properties of type T
@@ -651,7 +638,8 @@ export declare class CoreNode extends EventEmitter {
     preloadBound?: Bound;
     clippingRect: RectWithValid;
     textureCoords?: TextureCoords;
-    updateTextureCoords?: boolean;
+    updateTextureCoords: boolean;
+    updateShaderUniforms: boolean;
     isRenderable: boolean;
     renderState: CoreNodeRenderState;
     worldAlpha: number;
@@ -671,7 +659,6 @@ export declare class CoreNode extends EventEmitter {
     constructor(stage: Stage, props: CoreNodeProps);
     loadTexture(): void;
     unloadTexture(): void;
-    autosizeNode(dimensions: Dimensions): void;
     protected onTextureLoaded: TextureLoadedEventHandler;
     private onTextureFailed;
     private onTextureFreed;
@@ -736,10 +723,10 @@ export declare class CoreNode extends EventEmitter {
     get absY(): number;
     get y(): number;
     set y(value: number);
-    get width(): number;
-    set width(value: number);
-    get height(): number;
-    set height(value: number);
+    get w(): number;
+    set w(value: number);
+    get h(): number;
+    set h(value: number);
     get scale(): number;
     set scale(value: number);
     get scaleX(): number;
@@ -828,8 +815,6 @@ export declare class CoreNode extends EventEmitter {
     set interactive(value: boolean | undefined);
     get interactive(): boolean | undefined;
     setRTTUpdates(type: number): void;
-    get strictBounds(): boolean;
-    set strictBounds(v: boolean);
     animate(props: Partial<CoreNodeAnimateProps>, settings: Partial<AnimationSettings>): IAnimationController;
     flush(): void;
 }

package/dist/src/core/CoreNode.js

@@ -178,6 +178,7 @@ export class CoreNode extends EventEmitter {
     };
     textureCoords;
     updateTextureCoords = false;
+    updateShaderUniforms = false;
     isRenderable = false;
     renderState = CoreNodeRenderState.Init;
     worldAlpha = 1;
@@ -201,8 +202,8 @@ export class CoreNode extends EventEmitter {
         // Fast-path assign only known keys
         p.x = props.x;
         p.y = props.y;
-        p.width = props.width;
-        p.height = props.height;
+        p.w = props.w;
+        p.h = props.h;
         p.alpha = props.alpha;
         p.autosize = props.autosize;
         p.clipping = props.clipping;
@@ -224,7 +225,6 @@ export class CoreNode extends EventEmitter {
         p.mountY = props.mountY;
         p.mount = props.mount;
         p.pivot = props.pivot;
-        p.strictBounds = props.strictBounds;
         p.zIndex = props.zIndex;
         p.zIndexLocked = props.zIndexLocked;
         p.textureOptions = props.textureOptions;
@@ -305,14 +305,11 @@ export class CoreNode extends EventEmitter {
         texture.off('freed', this.onTextureFreed);
         texture.setRenderableOwner(this, false);
     }
-    autosizeNode(dimensions) {
-        if (this.autosize) {
-            this.width = dimensions.width;
-            this.height = dimensions.height;
-        }
-    }
     onTextureLoaded = (_, dimensions) => {
-        this.autosizeNode(dimensions);
+        if (this.autosize === true) {
+            this.w = dimensions.w;
+            this.h = dimensions.h;
+        }
         this.setUpdateType(UpdateType.IsRenderable);
         // Texture was loaded. In case the RAF loop has already stopped, we request
         // a render to ensure the texture is rendered.
@@ -322,7 +319,7 @@ export class CoreNode extends EventEmitter {
             this.notifyParentRTTOfUpdate();
         }
         // ignore 1x1 pixel textures
-        if (dimensions.width > 1 && dimensions.height > 1) {
+        if (dimensions.w > 1 && dimensions.h > 1) {
             this.emit('loaded', {
                 type: 'texture',
                 dimensions,
@@ -381,15 +378,15 @@ export class CoreNode extends EventEmitter {
     }
     updateLocalTransform() {
         const p = this.props;
-        const { x, y, width, height } = p;
-        const mountTranslateX = p.mountX * width;
-        const mountTranslateY = p.mountY * height;
+        const { x, y, w, h } = p;
+        const mountTranslateX = p.mountX * w;
+        const mountTranslateY = p.mountY * h;
         if (p.rotation !== 0 || p.scaleX !== 1 || p.scaleY !== 1) {
-            const pivotTranslateX = p.pivotX * width;
-            const pivotTranslateY = p.pivotY * height;
+            const scaleRotate = Matrix3d.rotate(p.rotation).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)
-                .rotate(p.rotation)
-                .scale(p.scaleX, p.scaleY)
+                .multiply(scaleRotate)
                 .translate(-pivotTranslateX, -pivotTranslateY);
         }
         else {
@@ -404,26 +401,26 @@ export class CoreNode extends EventEmitter {
             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
             this.localTransform
@@ -510,7 +507,7 @@ export class CoreNode extends EventEmitter {
             }
         }
         if (updateType & UpdateType.WorldAlpha) {
-            this.worldAlpha = ((parent && parent.worldAlpha) || 1) * props.alpha;
+            this.worldAlpha = (parent?.worldAlpha ?? 1) * this.props.alpha;
             updateType |=
                 UpdateType.PremultipliedColors |
                     UpdateType.Children |
@@ -537,7 +534,7 @@ export class CoreNode extends EventEmitter {
             const same = tl === tr && tl === bl && tl === br;
             const merged = mergeColorAlphaPremultiplied(tl, alpha, true);
             this.premultipliedColorTl = merged;
-            if (same) {
+            if (same === true) {
                 this.premultipliedColorTr =
                     this.premultipliedColorBl =
                         this.premultipliedColorBr =
@@ -558,13 +555,16 @@ export class CoreNode extends EventEmitter {
             // Tell parent to re-sort children
             parent.setUpdateType(UpdateType.ZIndexSortedChildren);
         }
-        if (props.strictBounds === true &&
-            this.renderState === CoreNodeRenderState.OutOfBounds) {
+        if (this.renderState === CoreNodeRenderState.OutOfBounds) {
             updateType &= ~UpdateType.RenderBounds; // remove render bounds update
             return;
         }
         if (updateType & UpdateType.RecalcUniforms &&
             this.hasShaderUpdater === true) {
+            this.updateShaderUniforms = true;
+        }
+        if (this.isRenderable === true && this.updateShaderUniforms === true) {
+            this.updateShaderUniforms = false;
             //this exists because the boolean hasShaderUpdater === true
             this.shader.update();
         }
@@ -664,8 +664,7 @@ export class CoreNode extends EventEmitter {
             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;
         }
         return CoreNodeRenderState.OutOfBounds;
@@ -709,13 +708,13 @@ export class CoreNode extends EventEmitter {
             return;
         }
         // 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);
     }
     updateRenderState(renderState) {
@@ -753,7 +752,7 @@ export class CoreNode extends EventEmitter {
         // check shader
         (this.props.shader !== null || this.hasColorProps === true) &&
             // check dimensions
-            (this.props.width !== 0 && this.props.height !== 0) === true) {
+            (this.props.w !== 0 && this.props.h !== 0) === 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') {
@@ -782,14 +781,14 @@ export class CoreNode extends EventEmitter {
         this.texture?.setRenderableOwner(this, isRenderable);
     }
     calculateRenderCoords() {
-        const { width, height } = this;
+        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, minY, 
@@ -805,11 +804,11 @@ export class CoreNode extends EventEmitter {
             //top-left
             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, this.renderCoords);
+            tx + h * tb, ty + h * td, this.renderCoords);
         }
         if (this.sceneGlobalTransform === undefined) {
             return;
@@ -817,9 +816,9 @@ export class CoreNode extends EventEmitter {
         const { tx: stx, ty: sty, ta: sta, tb: stb, tc: stc, td: std, } = 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, minY, 
@@ -835,11 +834,11 @@ export class CoreNode extends EventEmitter {
             //top-left
             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, this.sceneRenderCoords);
+            stx + h * stb, sty + h * std, this.sceneRenderCoords);
         }
     }
     /**
@@ -857,8 +856,8 @@ export class CoreNode extends EventEmitter {
         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.width = this.props.w * gt.ta;
+            clippingRect.height = this.props.h * gt.td;
             clippingRect.valid = true;
         }
         else {
@@ -921,9 +920,14 @@ export class CoreNode extends EventEmitter {
         const t = this.globalTransform;
         const coords = this.renderCoords;
         const texture = p.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') {
+            return;
+        }
         renderer.addQuad({
-            width: p.width,
-            height: p.height,
+            width: p.w,
+            height: p.h,
             colorTl: this.premultipliedColorTl,
             colorTr: this.premultipliedColorTr,
             colorBl: this.premultipliedColorBl,
@@ -970,12 +974,12 @@ export class CoreNode extends EventEmitter {
     }
     get absX() {
         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));
     }
     get absY() {
         return (this.props.y +
-            -this.props.height * this.props.mountY +
+            -this.props.h * this.props.mountY +
             (this.props.parent?.absY ?? 0));
     }
     get y() {
@@ -987,31 +991,31 @@ export class CoreNode extends EventEmitter {
             this.setUpdateType(UpdateType.Local);
         }
     }
-    get width() {
-        return this.props.width;
+    get w() {
+        return this.props.w;
     }
-    set width(value) {
-        if (this.props.width !== value) {
-            this.textureCoords = undefined;
-            this.props.width = value;
+    set w(value) {
+        if (this.props.w !== value) {
+            this.updateTextureCoords = true;
+            this.props.w = value;
             this.setUpdateType(UpdateType.Local);
             if (this.props.rtt === true) {
-                this.framebufferDimensions.width = value;
+                this.framebufferDimensions.w = value;
                 this.texture = this.stage.txManager.createTexture('RenderTexture', this.framebufferDimensions);
                 this.setUpdateType(UpdateType.RenderTexture);
             }
         }
     }
-    get height() {
-        return this.props.height;
+    get h() {
+        return this.props.h;
     }
-    set height(value) {
-        if (this.props.height !== value) {
-            this.textureCoords = undefined;
-            this.props.height = value;
+    set h(value) {
+        if (this.props.h !== value) {
+            this.updateTextureCoords = true;
+            this.props.h = value;
             this.setUpdateType(UpdateType.Local);
             if (this.props.rtt === true) {
-                this.framebufferDimensions.height = value;
+                this.framebufferDimensions.h = value;
                 this.texture = this.stage.txManager.createTexture('RenderTexture', this.framebufferDimensions);
                 this.setUpdateType(UpdateType.RenderTexture);
             }
@@ -1283,6 +1287,9 @@ export class CoreNode extends EventEmitter {
         return this.props.zIndex;
     }
     set zIndex(value) {
+        if (this.props.zIndex === value) {
+            return;
+        }
         this.props.zIndex = value;
         this.setUpdateType(UpdateType.CalculatedZIndex | UpdateType.Children);
         for (let i = 0, length = this.children.length; i < length; i++) {
@@ -1339,8 +1346,8 @@ export class CoreNode extends EventEmitter {
     }
     initRenderTexture() {
         this.framebufferDimensions = {
-            width: this.width,
-            height: this.height,
+            w: this.props.w,
+            h: this.props.h,
         };
         this.texture = this.stage.txManager.createTexture('RenderTexture', this.framebufferDimensions);
         this.stage.renderer.renderToTexture(this);
@@ -1418,8 +1425,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,
@@ -1522,17 +1529,6 @@ export class CoreNode extends EventEmitter {
         this.hasRTTupdates = true;
         this.parent?.setRTTUpdates(type);
     }
-    get strictBounds() {
-        return this.props.strictBounds;
-    }
-    set strictBounds(v) {
-        if (v === this.props.strictBounds) {
-            return;
-        }
-        this.props.strictBounds = v;
-        this.setUpdateType(UpdateType.RenderBounds | UpdateType.Children);
-        this.childUpdateType |= UpdateType.RenderBounds | UpdateType.Children;
-    }
     animate(props, settings) {
         const animation = new CoreAnimation(this, props, settings);
         const controller = new CoreAnimationController(this.stage.animationManager, animation);