@lightningjs/renderer 0.8.2 → 0.8.4

package/src/core/CoreNode.ts

@@ -37,6 +37,7 @@ import type {
   TextureFreedEventHandler,
   TextureLoadedEventHandler,
 } from './textures/Texture.js';
+import { RenderTexture } from './textures/RenderTexture.js';
 import type {
   Dimensions,
   NodeTextureFailedPayload,
@@ -104,6 +105,7 @@ export interface CoreNodeProps {
   pivotX: number;
   pivotY: number;
   rotation: number;
+  rtt: boolean;
 }
 
 type ICoreNode = Omit<
@@ -212,6 +214,16 @@ export enum UpdateType {
    */
   IsRenderable = 1024,
 
+  /**
+   * Render Texture update
+   */
+  RenderTexture = 2048,
+
+  /**
+   * Track if parent has render texture
+   */
+  ParentRenderTexture = 4096,
+
   /**
    * None
    */
@@ -220,7 +232,7 @@ export enum UpdateType {
   /**
    * All
    */
-  All = 2047,
+  All = 8191,
 }
 
 export class CoreNode extends EventEmitter implements ICoreNode {
@@ -252,6 +264,8 @@ export class CoreNode extends EventEmitter implements ICoreNode {
   public premultipliedColorBl = 0;
   public premultipliedColorBr = 0;
   public calcZIndex = 0;
+  public hasRTTupdates = false;
+  public parentHasRenderTexture = false;
 
   constructor(protected stage: Stage, props: CoreNodeProps) {
     super();
@@ -261,6 +275,10 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     };
     // Allow for parent to be processed appropriately
     this.parent = props.parent;
+
+    // Allow for Render Texture to be processed appropriately
+    this.rtt = props.rtt;
+
     this.updateScaleRotateTransform();
   }
 
@@ -324,6 +342,13 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     // Texture was loaded. In case the RAF loop has already stopped, we request
     // a render to ensure the texture is rendered.
     this.stage.requestRender();
+
+    // If parent has a render texture, flag that we need to update
+    // @todo: Reserve type for RTT updates
+    if (this.parentHasRenderTexture) {
+      this.setRTTUpdates(1);
+    }
+
     this.emit('loaded', {
       type: 'texture',
       dimensions,
@@ -373,6 +398,11 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     if (parent && !(parent.updateType & UpdateType.Children)) {
       parent.setUpdateType(UpdateType.Children);
     }
+    // If node is part of RTT texture
+    // Flag that we need to update
+    if (this.parentHasRenderTexture) {
+      this.setRTTUpdates(type);
+    }
   }
 
   sortChildren() {
@@ -421,16 +451,43 @@ export class CoreNode extends EventEmitter implements ICoreNode {
 
     const parent = this.props.parent;
     let childUpdateType = UpdateType.None;
+
+    if (this.updateType & UpdateType.ParentRenderTexture) {
+      let p = this.parent;
+      while (p) {
+        if (p.rtt) {
+          this.parentHasRenderTexture = true;
+        }
+        p = p.parent;
+      }
+    }
+
+    // If we have render texture updates and not already running a full update
+    if (
+      this.updateType ^ UpdateType.All &&
+      this.updateType & UpdateType.RenderTexture
+    ) {
+      this.children.forEach((child) => {
+        child.setUpdateType(UpdateType.All);
+      });
+    }
+
     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) {
+        this.globalTransform = Matrix3d.identity();
+      }
+
       if (parent) {
         this.globalTransform.multiply(this.localTransform);
       }
+
       this.calculateRenderCoords();
       this.updateBoundingRect();
       this.setUpdateType(
@@ -511,7 +568,11 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       parent.setUpdateType(UpdateType.ZIndexSortedChildren);
     }
 
-    if (this.updateType & UpdateType.Children && this.children.length) {
+    if (
+      this.updateType & UpdateType.Children &&
+      this.children.length &&
+      !this.rtt
+    ) {
       this.children.forEach((child) => {
         // Trigger the depenedent update types on the child
         child.setUpdateType(childUpdateType);
@@ -755,7 +816,6 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       );
     }
   }
-
   /**
    * This function calculates the clipping rectangle for a node.
    *
@@ -824,13 +884,30 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     this.props.texture = null;
     this.props.shader = null;
 
+    if (this.rtt) {
+      this.stage.renderer.removeRTTNode(this);
+    }
+
     this.removeAllListeners();
     this.parent = null;
   }
 
   renderQuads(renderer: CoreRenderer): void {
-    const { width, height, texture, textureOptions, shader, shaderProps } =
+    const { width, height, texture, textureOptions, shader, shaderProps, rtt } =
       this.props;
+
+    // Prevent quad rendering if parent has a render texture
+    // and renderer is not currently rendering to a texture
+    if (this.parentHasRenderTexture) {
+      if (!renderer.renderToTextureActive) {
+        return;
+      }
+      // Prevent quad rendering if parent render texture is not the active render texture
+      if (this.parentRenderTexture !== renderer.activeRttNode) {
+        return;
+      }
+    }
+
     const {
       premultipliedColorTl,
       premultipliedColorTr,
@@ -863,10 +940,10 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       tb: gt.tb,
       tc: gt.tc,
       td: gt.td,
+      rtt,
+      parentHasRenderTexture: this.parentHasRenderTexture,
+      framebufferDimensions: this.framebufferDimensions,
     });
-
-    // Calculate absolute X and Y based on all ancestors
-    // renderer.addQuad(absX, absY, w, h, color, texture, textureOptions, zIndex);
   }
 
   //#region Properties
@@ -915,6 +992,10 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     if (this.props.width !== value) {
       this.props.width = value;
       this.setUpdateType(UpdateType.Local);
+
+      if (this.props.rtt) {
+        this.setUpdateType(UpdateType.RenderTexture);
+      }
     }
   }
 
@@ -926,6 +1007,10 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     if (this.props.height !== value) {
       this.props.height = value;
       this.setUpdateType(UpdateType.Local);
+
+      if (this.props.rtt) {
+        this.setUpdateType(UpdateType.RenderTexture);
+      }
     }
   }
 
@@ -1235,9 +1320,80 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       newParent.setUpdateType(
         UpdateType.Children | UpdateType.ZIndexSortedChildren,
       );
-    }
 
+      if (newParent.rtt || newParent.parentHasRenderTexture) {
+        this.setRTTUpdates(UpdateType.All);
+      }
+    }
     this.updateScaleRotateTransform();
   }
+
+  get rtt(): boolean {
+    return this.props.rtt;
+  }
+
+  set rtt(value: boolean) {
+    if (!value) {
+      if (this.props.rtt) {
+        this.props.rtt = false;
+        this.unloadTexture();
+        this.setUpdateType(UpdateType.All);
+
+        this.children.forEach((child) => {
+          child.parentHasRenderTexture = false;
+        });
+
+        this.stage.renderer?.removeRTTNode(this);
+      }
+      return;
+    }
+
+    this.props.rtt = true;
+    this.hasRTTupdates = true;
+    this.setUpdateType(UpdateType.All);
+
+    this.children.forEach((child) => {
+      child.setUpdateType(UpdateType.All);
+    });
+
+    // Store RTT nodes in a separate list
+    this.stage.renderer?.renderToTexture(this);
+  }
+
+  /**
+   * Returns the framebuffer dimensions of the node.
+   * If the node has a render texture, the dimensions are the same as the node's dimensions.
+   * If the node does not have a render texture, the dimensions are inherited from the parent.
+   * If the node parent has a render texture and the node is a render texture, the nodes dimensions are used.
+   */
+  get framebufferDimensions(): Dimensions {
+    if (this.parentHasRenderTexture && !this.rtt && this.parent) {
+      return this.parent.framebufferDimensions;
+    }
+    return { width: this.width, height: this.height };
+  }
+
+  /**
+   * Returns the parent render texture node if it exists.
+   */
+  get parentRenderTexture(): CoreNode | null {
+    let parent = this.parent;
+    while (parent) {
+      if (parent.rtt) {
+        return parent;
+      }
+      parent = parent.parent;
+    }
+    return null;
+  }
+
+  get texture(): Texture | null {
+    return this.props.texture;
+  }
+
+  setRTTUpdates(type: number) {
+    this.hasRTTupdates = true;
+    this.parent?.setRTTUpdates(type);
+  }
   //#endregion Properties
 }

package/src/core/CoreShaderManager.ts

@@ -61,6 +61,8 @@ import {
   type RadialProgressEffectProps,
 } from './renderers/webgl/shaders/effects/RadialProgressEffect.js';
 import { HolePunchEffect } from './renderers/webgl/shaders/effects/HolePunchEffect.js';
+import { WebGlCoreShader } from './renderers/webgl/WebGlCoreShader.js';
+import { UnsupportedShader } from './renderers/canvas/shaders/UnsupportedShader.js';
 
 export type { FadeOutEffectProps };
 export type { LinearGradientEffectProps };
@@ -75,6 +77,7 @@ export interface ShaderMap {
   RoundedRectangle: typeof RoundedRectangle;
   DynamicShader: typeof DynamicShader;
   SdfShader: typeof SdfShader;
+  UnsupportedShader: typeof UnsupportedShader;
 }
 
 export type ShaderNode<Type extends keyof ShaderMap> = {
@@ -170,6 +173,16 @@ export class CoreShaderManager {
       throw new Error(`Shader type "${shType as string}" is not registered`);
     }
 
+    if (
+      this.renderer.mode === 'canvas' &&
+      ShaderClass.prototype instanceof WebGlCoreShader
+    ) {
+      return {
+        shader: new UnsupportedShader(shType) as InstanceType<ShaderMap[Type]>,
+        props: props as Record<string, unknown>,
+      };
+    }
+
     if (shType === 'DynamicShader') {
       return this.loadDynamicShader(props!);
     }

package/src/core/CoreTextNode.ts

@@ -34,6 +34,7 @@ import type {
 } from '../common/CommonTypes.js';
 import type { Rect, RectWithValid } from './lib/utils.js';
 import { assertTruthy } from '../utils.js';
+import { Matrix3d } from './lib/Matrix3d.js';
 
 export interface CoreTextNodeProps extends CoreNodeProps, TrProps {
   text: string;
@@ -354,11 +355,35 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   override renderQuads(renderer: CoreRenderer) {
     assertTruthy(this.globalTransform);
+
+    // Prevent quad rendering if parent has a render texture
+    // and this node is not the render texture
+    if (this.parentHasRenderTexture) {
+      if (!renderer.renderToTextureActive) {
+        return;
+      }
+      // Prevent quad rendering if parent render texture is not the active render texture
+      if (this.parentRenderTexture !== renderer.activeRttNode) {
+        return;
+      }
+    }
+
+    if (this.parentHasRenderTexture && this.props.parent?.rtt) {
+      this.globalTransform = Matrix3d.identity();
+      if (this.localTransform) {
+        this.globalTransform.multiply(this.localTransform);
+      }
+    }
+
+    assertTruthy(this.globalTransform);
+
     this.textRenderer.renderQuads(
       this.trState,
       this.globalTransform,
       this.clippingRect,
       this.worldAlpha,
+      this.parentHasRenderTexture,
+      this.framebufferDimensions,
     );
   }
 

package/src/core/CoreTextureManager.ts

@@ -25,6 +25,7 @@ import { ColorTexture } from './textures/ColorTexture.js';
 import { ImageTexture } from './textures/ImageTexture.js';
 import { NoiseTexture } from './textures/NoiseTexture.js';
 import { SubTexture } from './textures/SubTexture.js';
+import { RenderTexture } from './textures/RenderTexture.js';
 import type { Texture } from './textures/Texture.js';
 
 /**
@@ -40,6 +41,7 @@ export interface TextureMap {
   ImageTexture: typeof ImageTexture;
   NoiseTexture: typeof NoiseTexture;
   SubTexture: typeof SubTexture;
+  RenderTexture: typeof RenderTexture;
 }
 
 export type ExtractProps<Type> = Type extends { z$__type__Props: infer Props }
@@ -173,6 +175,7 @@ export class CoreTextureManager {
     this.registerTextureType('ColorTexture', ColorTexture);
     this.registerTextureType('NoiseTexture', NoiseTexture);
     this.registerTextureType('SubTexture', SubTexture);
+    this.registerTextureType('RenderTexture', RenderTexture);
   }
 
   registerTextureType<Type extends keyof TextureMap>(

package/src/core/Stage.ts

@@ -18,7 +18,7 @@
  */
 import { startLoop, getTimeStamp } from './platform.js';
 import { WebGlCoreRenderer } from './renderers/webgl/WebGlCoreRenderer.js';
-import { assertTruthy } from '../utils.js';
+import { assertTruthy, setPremultiplyMode } from '../utils.js';
 import { AnimationManager } from './animations/AnimationManager.js';
 import { CoreNode } from './CoreNode.js';
 import { CoreTextureManager } from './CoreTextureManager.js';
@@ -38,6 +38,11 @@ import type {
   FrameTickPayload,
 } from '../common/CommonTypes.js';
 import { TextureMemoryManager } from './TextureMemoryManager.js';
+import type {
+  CoreRenderer,
+  CoreRendererOptions,
+} from './renderers/CoreRenderer.js';
+import { CanvasCoreRenderer } from './renderers/canvas/CanvasCoreRenderer.js';
 
 export interface StageOptions {
   rootId: number;
@@ -52,6 +57,7 @@ export interface StageOptions {
   fpsUpdateInterval: number;
   enableContextSpy: boolean;
   numImageWorkers: number;
+  renderMode: 'webgl' | 'canvas';
 
   debug?: {
     monitorTextureCache?: boolean;
@@ -79,7 +85,7 @@ export class Stage extends EventEmitter {
   public readonly fontManager: TrFontManager;
   public readonly textRenderers: Partial<TextRendererMap>;
   public readonly shManager: CoreShaderManager;
-  public readonly renderer: WebGlCoreRenderer;
+  public readonly renderer: CoreRenderer;
   public readonly root: CoreNode;
   public readonly boundsMargin: [number, number, number, number];
 
@@ -110,6 +116,7 @@ export class Stage extends EventEmitter {
       enableContextSpy,
       numImageWorkers,
       txMemByteThreshold,
+      renderMode,
     } = options;
 
     this.txManager = new CoreTextureManager(numImageWorkers);
@@ -135,7 +142,7 @@ export class Stage extends EventEmitter {
       }, 1000);
     }
 
-    this.renderer = new WebGlCoreRenderer({
+    const rendererOptions: CoreRendererOptions = {
       stage: this,
       canvas,
       pixelRatio:
@@ -146,15 +153,27 @@ export class Stage extends EventEmitter {
       txMemManager: this.txMemManager,
       shManager: this.shManager,
       contextSpy: this.contextSpy,
-    });
+    };
+
+    if (renderMode === 'canvas') {
+      this.renderer = new CanvasCoreRenderer(rendererOptions);
+    } else {
+      this.renderer = new WebGlCoreRenderer(rendererOptions);
+    }
+    setPremultiplyMode(renderMode);
 
     // Must do this after renderer is created
     this.txManager.renderer = this.renderer;
 
-    this.textRenderers = {
-      canvas: new CanvasTextRenderer(this),
-      sdf: new SdfTextRenderer(this),
-    };
+    this.textRenderers =
+      renderMode === 'webgl'
+        ? {
+            canvas: new CanvasTextRenderer(this),
+            sdf: new SdfTextRenderer(this),
+          }
+        : {
+            canvas: new CanvasTextRenderer(this),
+          };
     this.fontManager = new TrFontManager(this.textRenderers);
 
     // create root node
@@ -192,6 +211,7 @@ export class Stage extends EventEmitter {
       textureOptions: null,
       shader: null,
       shaderProps: null,
+      rtt: false,
     });
 
     this.root = rootNode;
@@ -237,17 +257,31 @@ export class Stage extends EventEmitter {
    */
   drawFrame() {
     const { renderer, renderRequested } = this;
+    assertTruthy(renderer);
 
     // Update tree if needed
     if (this.root.updateType !== 0) {
       this.root.update(this.deltaTime, this.root.clippingRect);
     }
 
-    // test if we need to update the scene
-    renderer?.reset();
+    // Reset render operations and clear the canvas
+    renderer.reset();
+
+    // Check if we need to garbage collect
+    if (renderer.txMemManager.gcRequested) {
+      renderer.txMemManager.gc();
+    }
+
+    // If we have RTT nodes draw them first
+    // So we can use them as textures in the main scene
+    if (renderer.rttNodes.length > 0) {
+      renderer.renderRTTNodes();
+    }
 
+    // Fill quads buffer
     this.addQuads(this.root);
 
+    // Perform render pass
     renderer?.render();
 
     this.calculateFps();

package/src/core/TextureMemoryManager.ts

@@ -22,6 +22,7 @@ export class TextureMemoryManager {
   private memUsed = 0;
   private textures: Map<CoreContextTexture, number> = new Map();
   private threshold: number;
+  public gcRequested = false;
 
   /**
    * @param byteThreshold Number of texture bytes to trigger garbage collection
@@ -52,11 +53,12 @@ export class TextureMemoryManager {
     }
 
     if (this.memUsed > this.threshold) {
-      this.gc();
+      this.gcRequested = true;
     }
   }
 
   gc() {
+    this.gcRequested = false;
     this.textures.forEach((byteSize, ctxTexture) => {
       if (!ctxTexture.renderable) {
         ctxTexture.free();

package/src/core/lib/ImageWorker.ts

@@ -23,9 +23,10 @@ type MessageCallback = [(value: any) => void, (reason: any) => void];
 
 export class ImageWorkerManager {
   imageWorkersEnabled = true;
-  messageManager: Record<string, MessageCallback> = {};
+  messageManager: Record<number, MessageCallback> = {};
   workers: Worker[] = [];
   workerIndex = 0;
+  nextId = 0;
 
   constructor(numImageWorkers: number) {
     this.workers = this.createWorkers(numImageWorkers);
@@ -35,15 +36,16 @@ export class ImageWorkerManager {
   }
 
   private handleMessage(event: MessageEvent) {
-    const { src, data, error } = event.data as {
+    const { id, data, error } = event.data as {
+      id: number;
       src: string;
       data?: any;
       error?: string;
     };
-    const msg = this.messageManager[src];
+    const msg = this.messageManager[id];
     if (msg) {
       const [resolve, reject] = msg;
-      delete this.messageManager[src];
+      delete this.messageManager[id];
       if (error) {
         reject(new Error(error));
       } else {
@@ -91,16 +93,17 @@ export class ImageWorkerManager {
         });
       }
 
-      self.onmessage = async (event) => {
+      self.onmessage = (event) => {
+        var id = event.data.id;
         var src = event.data.src;
         var premultiplyAlpha = event.data.premultiplyAlpha;
 
         getImage(src, premultiplyAlpha)
           .then(function(data) {
-              self.postMessage({ src: src, data: data }, [data.data]);
+              self.postMessage({ id: id, data: data }, [data.data]);
           })
           .catch(function(error) {
-              self.postMessage({ src: src, error: error.message });
+              self.postMessage({ id: id, error: error.message });
           });
       };
     `;
@@ -135,8 +138,10 @@ export class ImageWorkerManager {
       try {
         if (this.workers) {
           const absoluteSrcUrl = this.convertUrlToAbsolute(src);
-          this.messageManager[absoluteSrcUrl] = [resolve, reject];
+          const id = this.nextId++;
+          this.messageManager[id] = [resolve, reject];
           this.getNextWorker().postMessage({
+            id,
             src: absoluteSrcUrl,
             premultiplyAlpha,
           });

package/src/core/lib/WebGlContextWrapper.ts

@@ -75,6 +75,7 @@ export class WebGlContextWrapper {
   public readonly RGBA;
   public readonly UNSIGNED_BYTE;
   public readonly UNPACK_PREMULTIPLY_ALPHA_WEBGL;
+  public readonly UNPACK_FLIP_Y_WEBGL;
   public readonly FLOAT;
   public readonly TRIANGLES;
   public readonly UNSIGNED_SHORT;
@@ -86,6 +87,7 @@ export class WebGlContextWrapper {
   public readonly COMPILE_STATUS;
   public readonly LINK_STATUS;
   public readonly DYNAMIC_DRAW;
+  public readonly COLOR_ATTACHMENT0;
   //#endregion WebGL Enums
 
   constructor(private gl: WebGLRenderingContext | WebGL2RenderingContext) {
@@ -161,6 +163,7 @@ export class WebGlContextWrapper {
     this.RGBA = gl.RGBA;
     this.UNSIGNED_BYTE = gl.UNSIGNED_BYTE;
     this.UNPACK_PREMULTIPLY_ALPHA_WEBGL = gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL;
+    this.UNPACK_FLIP_Y_WEBGL = gl.UNPACK_FLIP_Y_WEBGL;
     this.FLOAT = gl.FLOAT;
     this.TRIANGLES = gl.TRIANGLES;
     this.UNSIGNED_SHORT = gl.UNSIGNED_SHORT;
@@ -175,6 +178,7 @@ export class WebGlContextWrapper {
     this.COMPILE_STATUS = gl.COMPILE_STATUS;
     this.LINK_STATUS = gl.LINK_STATUS;
     this.DYNAMIC_DRAW = gl.DYNAMIC_DRAW;
+    this.COLOR_ATTACHMENT0 = gl.COLOR_ATTACHMENT0;
   }
   /**
    * Returns true if the WebGL context is WebGL2
@@ -533,7 +537,7 @@ export class WebGlContextWrapper {
 
   /**
    * ```
-   * createBuffer();
+   * gl.createBuffer();
    * ```
    *
    * @returns
@@ -543,6 +547,52 @@ export class WebGlContextWrapper {
     return gl.createBuffer();
   }
 
+  /**
+   * ```
+   * gl.createFramebuffer();
+   * ```
+   * @returns
+   */
+  createFramebuffer() {
+    const { gl } = this;
+    return gl.createFramebuffer();
+  }
+
+  /**
+   * ```
+   * gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+   * ```
+   *
+   * @param framebuffer
+   */
+  bindFramebuffer(framebuffer: WebGLFramebuffer | null) {
+    const { gl } = this;
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+  }
+
+  /**
+   * ```
+   * gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+   * ```
+   * @remarks
+   * **WebGL Difference**: Bind target is always `gl.FRAMEBUFFER` and textarget is always `gl.TEXTURE_2D`
+   */
+
+  framebufferTexture2D(
+    attachment: GLenum,
+    texture: WebGLTexture | null,
+    level: GLint,
+  ) {
+    const { gl } = this;
+    gl.framebufferTexture2D(
+      gl.FRAMEBUFFER,
+      attachment,
+      gl.TEXTURE_2D,
+      texture,
+      level,
+    );
+  }
+
   /**
    * ```
    * gl.clear(gl.COLOR_BUFFER_BIT);