fix: Fix RTT Clipping and improve RTT parent lookup (#453)

Fixes #452
Fixes #443

Author: jfboeve

examples/tests/rtt-dimension.ts

@@ -29,6 +29,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     height: 300,
     parent: node,
     rtt: true,
+    clipping: true,
     zIndex: 5,
     colorTop: 0xfff00fff,
     colorBottom: 0x00ffffff,
@@ -262,6 +263,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     switch (i) {
       case 1:
         rttNode.rtt = false;
+        rttNode.clipping = false;
         rttNode2.rtt = false;
         rttNode3.rtt = false;
         break;
@@ -288,6 +290,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
       default:
         // Reset to initial state
         rttNode.rtt = true;
+        rttNode.clipping = true;
         rttNode2.rtt = true;
         rttNode3.rtt = true;
         nestedRTTNode1.rtt = true;

src/core/CoreNode.ts

@@ -742,6 +742,7 @@ export class CoreNode extends EventEmitter {
   public calcZIndex = 0;
   public hasRTTupdates = false;
   public parentHasRenderTexture = false;
+  public rttParent: CoreNode | null = null;
 
   constructor(readonly stage: Stage, props: CoreNodeProps) {
     super();
@@ -1134,7 +1135,18 @@ export class CoreNode extends EventEmitter {
           continue;
         }
 
-        child.update(delta, this.clippingRect);
+        let childClippingRect = this.clippingRect;
+        if (this.rtt === true) {
+          childClippingRect = {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            valid: false,
+          };
+        }
+
+        child.update(delta, childClippingRect);
       }
     }
 
@@ -1165,17 +1177,20 @@ export class CoreNode extends EventEmitter {
     this.childUpdateType = 0;
   }
 
-  private notifyParentRTTOfUpdate() {
-    if (this.parent === null) {
-      return;
-    }
-
+  private findParentRTTNode(): CoreNode | null {
     let rttNode: CoreNode | null = this.parent;
-    // Traverse up to find the RTT root node
     while (rttNode && !rttNode.rtt) {
       rttNode = rttNode.parent;
     }
+    return rttNode;
+  }
+
+  private notifyParentRTTOfUpdate() {
+    if (this.parent === null) {
+      return;
+    }
 
+    const rttNode = this.rttParent || this.findParentRTTNode();
     if (!rttNode) {
       return;
     }
@@ -1266,6 +1281,11 @@ export class CoreNode extends EventEmitter {
       return CoreNodeRenderState.InViewport;
     }
 
+    // if we are part of a parent render texture, we're always in bounds
+    if (this.parentHasRenderTexture === true) {
+      return CoreNodeRenderState.InBounds;
+    }
+
     // check if we dont have dimensions, take our parent's render state
     if (
       this.parent !== null &&
@@ -1991,7 +2011,7 @@ export class CoreNode extends EventEmitter {
     }
     this.props.rtt = value;
 
-    if (value) {
+    if (value === true) {
       this.initRenderTexture();
       this.markChildrenWithRTT();
     } else {
@@ -2000,7 +2020,7 @@ export class CoreNode extends EventEmitter {
 
     this.setUpdateType(UpdateType.RenderTexture);
 
-    if (this.parentHasRenderTexture) {
+    if (this.parentHasRenderTexture === true) {
       this.notifyParentRTTOfUpdate();
     }
   }
@@ -2054,6 +2074,7 @@ export class CoreNode extends EventEmitter {
     for (const child of this.children) {
       // force child to update everything as the RTT inheritance has changed
       child.parentHasRenderTexture = false;
+      child.rttParent = null;
       child.setUpdateType(UpdateType.All);
       child.clearRTTInheritance();
     }