@lightningjs/renderer 2.7.1 → 2.8.0

package/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();
     }

package/src/core/CoreShaderManager.ts

@@ -198,7 +198,7 @@ export class CoreShaderManager {
 
     if (shType === 'DynamicShader') {
       return this.loadDynamicShader(
-        props!,
+        props as DynamicShaderProps,
       ) as unknown as ShaderController<Type>;
     }
 

package/src/core/Stage.ts

@@ -266,6 +266,11 @@ export class Stage {
     }
   }
 
+  setClearColor(color: number) {
+    this.renderer.updateClearColor(color);
+    this.renderRequested = true;
+  }
+
   updateFrameTime() {
     const newFrameTime = getTimeStamp();
     this.lastFrameTime = this.currentFrameTime;

package/src/core/renderers/CoreRenderer.ts

@@ -110,4 +110,5 @@ export abstract class CoreRenderer {
   abstract renderToTexture(node: CoreNode): void;
   abstract getBufferInfo(): BufferInfo | null;
   abstract getDefShaderCtr(): BaseShaderController;
+  abstract updateClearColor(color: number): void;
 }

package/src/core/renderers/canvas/CanvasCoreRenderer.ts

@@ -331,4 +331,13 @@ export class CanvasCoreRenderer extends CoreRenderer {
   getBufferInfo(): null {
     return null;
   }
+
+  /**
+   * Updates the clear color of the canvas renderer.
+   *
+   * @param color - The color to set as the clear color.
+   */
+  updateClearColor(color: number) {
+    this.clearColor = color ? getRgbaComponents(color) : undefined;
+  }
 }

package/src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -32,6 +32,7 @@ import {
   type CoreWebGlExtensions,
   getWebGlParameters,
   getWebGlExtensions,
+  type WebGlColor,
 } from './internal/RendererUtils.js';
 import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
 import { Texture, TextureType } from '../../textures/Texture.js';
@@ -86,6 +87,11 @@ export class WebGlCoreRenderer extends CoreRenderer {
   defaultShader: WebGlCoreShader;
   quadBufferCollection: BufferCollection;
 
+  clearColor: WebGlColor = {
+    raw: 0x00000000,
+    normalized: [0, 0, 0, 0],
+  };
+
   /**
    * White pixel texture used by default when no texture is specified.
    */
@@ -127,10 +133,10 @@ export class WebGlCoreRenderer extends CoreRenderer {
       options.contextSpy,
     );
     const glw = (this.glw = new WebGlContextWrapper(gl));
-
-    const color = getNormalizedRgbaComponents(clearColor);
     glw.viewport(0, 0, canvas.width, canvas.height);
-    glw.clearColor(color[0]!, color[1]!, color[2]!, color[3]!);
+
+    this.updateClearColor(clearColor);
+
     glw.setBlend(true);
     glw.blendFunc(glw.ONE, glw.ONE_MINUS_SRC_ALPHA);
 
@@ -754,9 +760,9 @@ export class WebGlCoreRenderer extends CoreRenderer {
       node.hasRTTupdates = false;
     }
 
-    const color = getNormalizedRgbaComponents(this.stage.options.clearColor);
+    const clearColor = this.clearColor.normalized;
     // Restore the default clear color
-    glw.clearColor(color[0]!, color[1]!, color[2]!, color[3]!);
+    glw.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
 
     // Bind the default framebuffer
     glw.bindFramebuffer(null);
@@ -784,4 +790,28 @@ export class WebGlCoreRenderer extends CoreRenderer {
   override getDefShaderCtr(): BaseShaderController {
     return this.defShaderCtrl;
   }
+
+  /**
+   * Updates the WebGL context's clear color and clears the color buffer.
+   *
+   * @param color - The color to set as the clear color, represented as a 32-bit integer.
+   */
+  updateClearColor(color: number) {
+    if (this.clearColor.raw === color) {
+      return;
+    }
+    const glw = this.glw;
+    const normalizedColor = getNormalizedRgbaComponents(color);
+    glw.clearColor(
+      normalizedColor[0],
+      normalizedColor[1],
+      normalizedColor[2],
+      normalizedColor[3],
+    );
+    this.clearColor = {
+      raw: color,
+      normalized: normalizedColor,
+    };
+    glw.clear();
+  }
 }

package/src/core/renderers/webgl/internal/RendererUtils.ts

@@ -146,3 +146,8 @@ export function isHTMLImageElement(obj: unknown): obj is HTMLImageElement {
     obj.constructor.name === 'HTMLImageElement'
   );
 }
+
+export interface WebGlColor {
+  raw: number;
+  normalized: [number, number, number, number];
+}

package/src/core/renderers/webgl/shaders/SdfShader.ts

@@ -79,6 +79,8 @@ export class SdfShader extends WebGlCoreShader {
     });
   }
 
+  static z$__type__Props: SdfShaderProps;
+
   override bindTextures(textures: WebGlCoreCtxTexture[]) {
     const { glw } = this;
     glw.activeTexture(0);

package/src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.ts

@@ -146,7 +146,14 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
 
   constructor(stage: Stage) {
     super(stage);
-    this.sdfShader = this.stage.shManager.loadShader('SdfShader').shader;
+    this.sdfShader = this.stage.shManager.loadShader('SdfShader', {
+      transform: new Float32Array(),
+      color: 0,
+      size: 0,
+      scrollY: 0,
+      distanceRange: 0,
+      debug: false,
+    }).shader;
     this.rendererBounds = {
       x1: 0,
       y1: 0,

package/src/main-api/Renderer.ts

@@ -658,4 +658,13 @@ export class RendererMain extends EventEmitter {
   rerender() {
     throw new Error('Not implemented');
   }
+
+  /**
+   * Sets the clear color for the stage.
+   *
+   * @param color - The color to set as the clear color.
+   */
+  setClearColor(color: number) {
+    this.stage.setClearColor(color);
+  }
 }

package/src/main-api/ShaderController.ts

@@ -55,7 +55,6 @@ export class ShaderController<S extends keyof ShaderMap>
     stage: Stage,
   ) {
     this.resolvedProps = props;
-
     const keys = Object.keys(props);
     const l = keys.length;