@lightningjs/renderer 2.12.1 → 3.0.0-beta1

package/src/core/CoreNode.ts

@@ -55,7 +55,7 @@ import type { AnimationSettings } from './animations/CoreAnimation.js';
 import type { IAnimationController } from '../common/IAnimationController.js';
 import { CoreAnimation } from './animations/CoreAnimation.js';
 import { CoreAnimationController } from './animations/CoreAnimationController.js';
-import type { BaseShaderController } from '../main-api/ShaderController.js';
+import type { CoreShaderNode } from './renderers/CoreShaderNode.js';
 
 export enum CoreNodeRenderState {
   Init = 0,
@@ -195,6 +195,11 @@ export enum UpdateType {
    * All
    */
   All = 14335,
+
+  /**
+   * RecalcUniforms
+   */
+  RecalcUniforms = 16384,
 }
 
 /**
@@ -268,6 +273,12 @@ export interface CoreNodeProps {
    * @default `false`
    */
   autosize: boolean;
+  /**
+   * Margin around the Node's bounds for preloading
+   *
+   * @default `null`
+   */
+  boundsMargin: number | [number, number, number, number] | null;
   /**
    * Clipping Mode
    *
@@ -441,7 +452,7 @@ export interface CoreNodeProps {
    * Note: If this is a Text Node, the Shader will be managed by the Node's
    * {@link TextRenderer} and should not be set explicitly.
    */
-  shader: BaseShaderController;
+  shader: CoreShaderNode<any> | null;
   /**
    * Image URL
    *
@@ -725,7 +736,9 @@ export class CoreNode extends EventEmitter {
   public globalTransform?: Matrix3d;
   public scaleRotateTransform?: Matrix3d;
   public localTransform?: Matrix3d;
+  public sceneGlobalTransform?: Matrix3d;
   public renderCoords?: RenderCoords;
+  public sceneRenderCoords?: RenderCoords;
   public renderBound?: Bound;
   public strictBound?: Bound;
   public preloadBound?: Bound;
@@ -752,20 +765,32 @@ export class CoreNode extends EventEmitter {
   constructor(readonly stage: Stage, props: CoreNodeProps) {
     super();
 
-    this.props = {
-      ...props,
+    this.props = Object.assign({}, props, {
       parent: null,
       texture: null,
+      shader: null,
       src: null,
       rtt: false,
-    };
+    });
 
     // Assign props to instance
     this.parent = props.parent;
     this.texture = props.texture;
+    this.shader = props.shader;
     this.src = props.src;
     this.rtt = props.rtt;
 
+    if (props.boundsMargin) {
+      this.boundsMargin = Array.isArray(props.boundsMargin)
+        ? props.boundsMargin
+        : [
+            props.boundsMargin,
+            props.boundsMargin,
+            props.boundsMargin,
+            props.boundsMargin,
+          ];
+    }
+
     this.setUpdateType(
       UpdateType.ScaleRotate |
         UpdateType.Local |
@@ -1024,7 +1049,7 @@ export class CoreNode extends EventEmitter {
     }
 
     const parent = this.props.parent;
-    let renderState = null;
+    let renderState: CoreNodeRenderState | null = null;
 
     // Handle specific RTT updates at this node level
     if (this.updateType & UpdateType.RenderTexture && this.rtt) {
@@ -1034,23 +1059,48 @@ export class CoreNode extends EventEmitter {
     if (this.updateType & UpdateType.Global) {
       assertTruthy(this.localTransform);
 
-      this.globalTransform = Matrix3d.copy(
-        parent?.globalTransform || this.localTransform,
-        this.globalTransform,
-      );
-
-      if (this.parentHasRenderTexture && this.props.parent?.rtt) {
+      if (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();
+
+        // Maintain a full scene global transform for bounds detection
+        this.sceneGlobalTransform = Matrix3d.copy(
+          parent?.globalTransform || Matrix3d.identity(),
+        ).multiply(this.localTransform);
+      } else if (
+        this.parentHasRenderTexture === true &&
+        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
+        this.sceneGlobalTransform = Matrix3d.copy(
+          parent?.sceneGlobalTransform || this.localTransform,
+        ).multiply(this.localTransform);
+
+        this.globalTransform = Matrix3d.copy(
+          parent?.globalTransform || this.localTransform,
+          this.globalTransform,
+        );
+      } else {
+        this.globalTransform = Matrix3d.copy(
+          parent?.globalTransform || this.localTransform,
+          this.globalTransform,
+        );
       }
 
-      if (parent) {
+      if (parent !== null) {
         this.globalTransform.multiply(this.localTransform);
       }
-
       this.calculateRenderCoords();
       this.updateBoundingRect();
 
-      this.setUpdateType(UpdateType.RenderState | UpdateType.Children);
+      this.setUpdateType(
+        UpdateType.RenderState |
+          UpdateType.Children |
+          UpdateType.RecalcUniforms,
+      );
       this.childUpdateType |= UpdateType.Global;
 
       if (this.clipping === true) {
@@ -1063,6 +1113,8 @@ export class CoreNode extends EventEmitter {
       this.createRenderBounds();
       this.setUpdateType(UpdateType.RenderState);
       this.setUpdateType(UpdateType.Children);
+
+      this.childUpdateType |= UpdateType.RenderBounds;
     }
 
     if (this.updateType & UpdateType.RenderState) {
@@ -1150,9 +1202,18 @@ export class CoreNode extends EventEmitter {
       this.props.strictBounds === true &&
       this.renderState === CoreNodeRenderState.OutOfBounds
     ) {
+      this.updateType &= ~UpdateType.RenderBounds; // remove render bounds update
       return;
     }
 
+    if (
+      this.shader?.update !== undefined &&
+      (this.updateType & UpdateType.Local ||
+        this.updateType & UpdateType.RecalcUniforms)
+    ) {
+      this.shader.update();
+    }
+
     if (this.updateType & UpdateType.Children && this.children.length > 0) {
       for (let i = 0, length = this.children.length; i < length; i++) {
         const child = this.children[i] as CoreNode;
@@ -1266,11 +1327,6 @@ export class CoreNode extends EventEmitter {
     assertTruthy(this.strictBound);
     assertTruthy(this.preloadBound);
 
-    // if we are part of a parent render texture, we're always in bounds
-    if (this.parentHasRenderTexture === true) {
-      return this.getRTTParentRenderState() || CoreNodeRenderState.OutOfBounds;
-    }
-
     if (boundInsideBound(this.renderBound, this.strictBound)) {
       return CoreNodeRenderState.InViewport;
     }
@@ -1296,7 +1352,9 @@ export class CoreNode extends EventEmitter {
   }
 
   updateBoundingRect() {
-    const { renderCoords, globalTransform: transform } = this;
+    const transform = this.sceneGlobalTransform || this.globalTransform;
+    const renderCoords = this.sceneRenderCoords || this.renderCoords;
+
     assertTruthy(transform);
     assertTruthy(renderCoords);
 
@@ -1331,7 +1389,7 @@ export class CoreNode extends EventEmitter {
 
       this.preloadBound = createPreloadBounds(
         this.strictBound,
-        this.stage.boundsMargin,
+        this.boundsMargin as [number, number, number, number],
       );
     } else {
       // no parent or parent does not have a bound, take the stage boundaries
@@ -1357,7 +1415,10 @@ 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 { tx, ty } = this.globalTransform || {};
+
+    // 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(
@@ -1370,7 +1431,7 @@ export class CoreNode extends EventEmitter {
 
     this.preloadBound = createPreloadBounds(
       this.strictBound,
-      this.stage.boundsMargin,
+      this.boundsMargin as [number, number, number, number],
     );
   }
 
@@ -1487,13 +1548,11 @@ export class CoreNode extends EventEmitter {
   }
 
   calculateRenderCoords() {
-    const { width, height, globalTransform: transform } = this;
-    assertTruthy(transform);
-    const { tx, ty, ta, tb, tc, td } = transform;
+    const { width, height } = this;
+    const { tx, ty, ta, tb, tc, td } = this.globalTransform!;
     if (tb === 0 && tc === 0) {
       const minX = tx;
       const maxX = tx + width * ta;
-
       const minY = ty;
       const maxY = ty + height * td;
       this.renderCoords = RenderCoords.translate(
@@ -1528,6 +1587,55 @@ export class CoreNode extends EventEmitter {
         this.renderCoords,
       );
     }
+    if (this.sceneGlobalTransform === undefined) {
+      return;
+    }
+
+    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 minY = sty;
+      const maxY = sty + height * std;
+      this.sceneRenderCoords = RenderCoords.translate(
+        //top-left
+        minX,
+        minY,
+        //top-right
+        maxX,
+        minY,
+        //bottom-right
+        maxX,
+        maxY,
+        //bottom-left
+        minX,
+        maxY,
+        this.sceneRenderCoords,
+      );
+    } else {
+      this.sceneRenderCoords = RenderCoords.translate(
+        //top-left
+        stx,
+        sty,
+        //top-right
+        stx + width * sta,
+        sty + width * stc,
+        //bottom-right
+        stx + width * sta + height * stb,
+        sty + width * stc + height * std,
+        //bottom-left
+        stx + height * stb,
+        sty + height * std,
+        this.sceneRenderCoords,
+      );
+    }
   }
 
   /**
@@ -1542,7 +1650,6 @@ export class CoreNode extends EventEmitter {
     assertTruthy(this.globalTransform);
     const { clippingRect, props, globalTransform: gt } = this;
     const { clipping } = props;
-
     const isRotated = gt.tb !== 0 || gt.tc !== 0;
 
     if (clipping === true && isRotated === false) {
@@ -1595,7 +1702,7 @@ export class CoreNode extends EventEmitter {
     this.localTransform = undefined;
 
     this.props.texture = null;
-    this.props.shader = this.stage.defShaderCtr;
+    this.props.shader = this.stage.defShaderNode;
 
     while (this.children.length > 0) {
       this.children[0]?.destroy();
@@ -1640,8 +1747,7 @@ export class CoreNode extends EventEmitter {
       texture: this.texture || this.stage.defaultTexture,
       textureOptions: this.textureOptions,
       zIndex: this.zIndex,
-      shader: this.shader.shader,
-      shaderProps: this.shader.getResolvedProps(),
+      shader: this.props.shader as CoreShaderNode<any>,
       alpha: this.worldAlpha,
       clippingRect: this.clippingRect,
       tx: this.globalTransform.tx,
@@ -1887,6 +1993,31 @@ export class CoreNode extends EventEmitter {
     this.props.autosize = value;
   }
 
+  get boundsMargin(): number | [number, number, number, number] | null {
+    return (
+      this.props.boundsMargin ??
+      this.parent?.boundsMargin ??
+      this.stage.boundsMargin
+    );
+  }
+
+  set boundsMargin(value: number | [number, number, number, number] | null) {
+    if (value === this.props.boundsMargin) {
+      return;
+    }
+
+    if (value === null) {
+      this.props.boundsMargin = value;
+    } else {
+      const bm: [number, number, number, number] = Array.isArray(value)
+        ? value
+        : [value, value, value, value];
+
+      this.props.boundsMargin = bm;
+    }
+    this.setUpdateType(UpdateType.RenderBounds);
+  }
+
   get clipping(): boolean {
     return this.props.clipping;
   }
@@ -2160,17 +2291,21 @@ export class CoreNode extends EventEmitter {
     }
   }
 
-  get shader(): BaseShaderController {
+  get shader(): CoreShaderNode<any> | null {
     return this.props.shader;
   }
 
-  set shader(value: BaseShaderController) {
-    if (this.props.shader === value) {
+  set shader(shader: CoreShaderNode<any> | null) {
+    if (this.props.shader === shader) {
       return;
     }
-
-    this.props.shader = value;
-
+    if (shader === null) {
+      this.props.shader = this.stage.defShaderNode;
+      this.setUpdateType(UpdateType.IsRenderable);
+      return;
+    }
+    shader.attachNode(this);
+    this.props.shader = shader;
     this.setUpdateType(UpdateType.IsRenderable);
   }