@lightningjs/renderer 0.8.3 → 0.9.0

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);

package/src/core/renderers/CoreRenderer.ts

@@ -17,8 +17,13 @@
  * limitations under the License.
  */
 
+import type { Dimensions } from '../../common/CommonTypes.js';
+import type { CoreNode } from '../CoreNode.js';
 import type { CoreShaderManager } from '../CoreShaderManager.js';
-import type { CoreTextureManager, TextureOptions } from '../CoreTextureManager.js';
+import type {
+  CoreTextureManager,
+  TextureOptions,
+} from '../CoreTextureManager.js';
 import type { Stage } from '../Stage.js';
 import type { TextureMemoryManager } from '../TextureMemoryManager.js';
 import type { ContextSpy } from '../lib/ContextSpy.js';
@@ -48,6 +53,9 @@ export interface QuadOptions {
   tb: number;
   tc: number;
   td: number;
+  rtt?: boolean;
+  parentHasRenderTexture?: boolean;
+  framebufferDimensions?: Dimensions;
 }
 
 export interface CoreRendererOptions {
@@ -72,6 +80,7 @@ export abstract class CoreRenderer {
   txManager: CoreTextureManager;
   txMemManager: TextureMemoryManager;
   shManager: CoreShaderManager;
+  rttNodes: CoreNode[] = [];
 
   constructor(options: CoreRendererOptions) {
     this.options = options;
@@ -86,4 +95,9 @@ export abstract class CoreRenderer {
   abstract addQuad(quad: QuadOptions): void;
   abstract createCtxTexture(textureSource: Texture): CoreContextTexture;
   abstract getShaderManager(): CoreShaderManager;
+  abstract get renderToTextureActive(): boolean;
+  abstract get activeRttNode(): CoreNode | null;
+  abstract renderRTTNodes(): void;
+  abstract removeRTTNode(node: CoreNode): void;
+  abstract renderToTexture(node: CoreNode): void;
 }

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

@@ -17,23 +17,32 @@
  * limitations under the License.
  */
 
-import type { CoreShaderManager } from "../../CoreShaderManager.js";
-import { getRgbaComponents, type RGBA } from "../../lib/utils.js";
-import { SubTexture } from "../../textures/SubTexture.js";
-import type { Texture } from "../../textures/Texture.js";
-import type { CoreContextTexture } from "../CoreContextTexture.js";
-import { CoreRenderer, type CoreRendererOptions, type QuadOptions } from "../CoreRenderer.js";
-import { CanvasCoreTexture } from "./CanvasCoreTexture.js";
-import { getRadius } from "./internal/C2DShaderUtils.js";
-import { formatRgba, parseColor, type IParsedColor } from "./internal/ColorUtils.js";
+import type { CoreNode } from '../../CoreNode.js';
+import type { CoreShaderManager } from '../../CoreShaderManager.js';
+import { getRgbaComponents, type RGBA } from '../../lib/utils.js';
+import { SubTexture } from '../../textures/SubTexture.js';
+import type { Texture } from '../../textures/Texture.js';
+import type { CoreContextTexture } from '../CoreContextTexture.js';
+import {
+  CoreRenderer,
+  type CoreRendererOptions,
+  type QuadOptions,
+} from '../CoreRenderer.js';
+import { CanvasCoreTexture } from './CanvasCoreTexture.js';
+import { getRadius } from './internal/C2DShaderUtils.js';
+import {
+  formatRgba,
+  parseColor,
+  type IParsedColor,
+} from './internal/ColorUtils.js';
 
 export class CanvasCoreRenderer extends CoreRenderer {
-
   private context: CanvasRenderingContext2D;
   private canvas: HTMLCanvasElement;
   private pixelRatio: number;
   private clearColor: RGBA | undefined;
-
+  public renderToTextureActive = false;
+  activeRttNode: CoreNode | null = null;
   constructor(options: CoreRendererOptions) {
     super(options);
 
@@ -69,11 +78,25 @@ export class CanvasCoreRenderer extends CoreRenderer {
   addQuad(quad: QuadOptions): void {
     const ctx = this.context;
     const {
-      tx, ty, width, height, alpha, colorTl, colorTr, colorBr, ta, tb, tc, td, clippingRect
+      tx,
+      ty,
+      width,
+      height,
+      alpha,
+      colorTl,
+      colorTr,
+      colorBr,
+      ta,
+      tb,
+      tc,
+      td,
+      clippingRect,
     } = quad;
     let texture = quad.texture;
     let ctxTexture: CanvasCoreTexture | undefined = undefined;
-    let frame: { x: number, y: number, width: number, height: number } | undefined;
+    let frame:
+      | { x: number; y: number; width: number; height: number }
+      | undefined;
 
     if (texture) {
       if (texture instanceof SubTexture) {
@@ -133,7 +156,17 @@ export class CanvasCoreRenderer extends CoreRenderer {
       const image = ctxTexture.getImage(color);
       ctx.globalAlpha = alpha;
       if (frame) {
-        ctx.drawImage(image, frame.x, frame.y, frame.width, frame.height, tx, ty, width, height);
+        ctx.drawImage(
+          image,
+          frame.x,
+          frame.y,
+          frame.width,
+          frame.height,
+          tx,
+          ty,
+          width,
+          height,
+        );
       } else {
         ctx.drawImage(image, tx, ty, width, height);
       }
@@ -175,4 +208,16 @@ export class CanvasCoreRenderer extends CoreRenderer {
   getShaderManager(): CoreShaderManager {
     return this.shManager;
   }
+
+  renderRTTNodes(): void {
+    // noop
+  }
+
+  removeRTTNode(node: CoreNode): void {
+    // noop
+  }
+
+  renderToTexture(node: CoreNode): void {
+    // noop
+  }
 }

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

@@ -17,30 +17,33 @@
  * limitations under the License.
  */
 
-import type { Dimensions } from "../../../common/CommonTypes.js";
-import { assertTruthy } from "../../../utils.js";
-import { CoreContextTexture } from "../CoreContextTexture.js";
-import { formatRgba, type IParsedColor } from "./internal/ColorUtils.js";
+import type { Dimensions } from '../../../common/CommonTypes.js';
+import { assertTruthy } from '../../../utils.js';
+import { CoreContextTexture } from '../CoreContextTexture.js';
+import { formatRgba, type IParsedColor } from './internal/ColorUtils.js';
 
 export class CanvasCoreTexture extends CoreContextTexture {
-
   protected image: ImageBitmap | HTMLCanvasElement | undefined;
-  protected tintCache: {
-    key: string;
-    image: HTMLCanvasElement
-  } | undefined;
+  protected tintCache:
+    | {
+        key: string;
+        image: HTMLCanvasElement;
+      }
+    | undefined;
 
   load(): void {
     if (this.textureSource.state !== 'freed') {
       return;
     }
     this.textureSource.setState('loading');
-    this.onLoadRequest().then((size) => {
-      this.textureSource.setState('loaded', size);
-      this.updateMemSize();
-    }).catch((err) => {
-      this.textureSource.setState('failed', err as Error);
-    });
+    this.onLoadRequest()
+      .then((size) => {
+        this.textureSource.setState('loaded', size);
+        this.updateMemSize();
+      })
+      .catch((err) => {
+        this.textureSource.setState('failed', err as Error);
+      });
   }
 
   free(): void {
@@ -84,13 +87,16 @@ export class CanvasCoreTexture extends CoreContextTexture {
     const tintedImage = this.tintTexture(image, key);
     this.tintCache = {
       key,
-      image: tintedImage
-    }
+      image: tintedImage,
+    };
     this.updateMemSize();
     return tintedImage;
   }
 
-  protected tintTexture(source: ImageBitmap | HTMLCanvasElement, color: string) {
+  protected tintTexture(
+    source: ImageBitmap | HTMLCanvasElement,
+    color: string,
+  ) {
     const { width, height } = source;
     const canvas = document.createElement('canvas');
     canvas.width = width;

package/src/core/renderers/canvas/internal/C2DShaderUtils.ts

@@ -17,8 +17,11 @@
  * limitations under the License.
  */
 
-import type { QuadOptions } from "../../CoreRenderer.js";
-import { ROUNDED_RECTANGLE_SHADER_TYPE, UnsupportedShader } from "../shaders/UnsupportedShader.js";
+import type { QuadOptions } from '../../CoreRenderer.js';
+import {
+  ROUNDED_RECTANGLE_SHADER_TYPE,
+  UnsupportedShader,
+} from '../shaders/UnsupportedShader.js';
 
 /**
  * Extract `RoundedRectangle` shader radius to apply as a clipping
@@ -27,7 +30,7 @@ export function getRadius(quad: QuadOptions): number {
   if (quad.shader instanceof UnsupportedShader) {
     const shType = quad.shader.shType;
     if (shType === ROUNDED_RECTANGLE_SHADER_TYPE) {
-      return quad.shaderProps?.radius as number ?? 0;
+      return (quad.shaderProps?.radius as number) ?? 0;
     }
   }
   return 0;

package/src/core/renderers/canvas/internal/ColorUtils.ts

@@ -30,8 +30,8 @@ const WHITE: IParsedColor = {
   a: 1,
   r: 0xff,
   g: 0xff,
-  b: 0xff
-}
+  b: 0xff,
+};
 
 /**
  * Extract color components
@@ -41,10 +41,10 @@ export function parseColor(abgr: number): IParsedColor {
     return WHITE;
   }
   const a = ((abgr >>> 24) & 0xff) / 255;
-  const b = ((abgr >>> 16) & 0xff) & 0xff;
-  const g = ((abgr >>> 8) & 0xff) & 0xff;
-  const r = (abgr & 0xff) & 0xff;
-  return { isWhite: false, a, r, g, b }
+  const b = (abgr >>> 16) & 0xff & 0xff;
+  const g = (abgr >>> 8) & 0xff & 0xff;
+  const r = abgr & 0xff & 0xff;
+  return { isWhite: false, a, r, g, b };
 }
 
 /**

package/src/core/renderers/canvas/shaders/UnsupportedShader.ts

@@ -17,12 +17,11 @@
  * limitations under the License.
  */
 
-import { CoreShader } from "../../CoreShader.js";
+import { CoreShader } from '../../CoreShader.js';
 
-export const ROUNDED_RECTANGLE_SHADER_TYPE = "RoundedRectangle"
+export const ROUNDED_RECTANGLE_SHADER_TYPE = 'RoundedRectangle';
 
 export class UnsupportedShader extends CoreShader {
-
   public shType: string;
 
   constructor(shType: string) {

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

@@ -0,0 +1,79 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2024 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Dimensions } from '../../../common/CommonTypes.js';
+import { assertTruthy } from '../../../utils.js';
+import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
+import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { RenderTexture } from '../../textures/RenderTexture.js';
+import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
+
+export class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
+  declare textureSource: RenderTexture;
+
+  readonly framebuffer: WebGLFramebuffer;
+
+  constructor(
+    glw: WebGlContextWrapper,
+    memManager: TextureMemoryManager,
+    textureSource: RenderTexture,
+  ) {
+    super(glw, memManager, textureSource);
+    // Create Framebuffer object
+    const framebuffer = glw.createFramebuffer();
+    assertTruthy(framebuffer, 'Unable to create framebuffer');
+    this.framebuffer = framebuffer;
+  }
+
+  override async onLoadRequest(): Promise<Dimensions> {
+    const { glw, memManager } = this;
+    const nativeTexture = (this._nativeCtxTexture =
+      this.createNativeCtxTexture());
+    const { width, height } = this.textureSource;
+
+    // Set the dimensions of the render texture
+    glw.texImage2D(
+      0,
+      glw.RGBA,
+      width,
+      height,
+      0,
+      glw.RGBA,
+      glw.UNSIGNED_BYTE,
+      null,
+    );
+
+    // Update the texture memory manager
+    memManager.setTextureMemUse(this, width * height * 4);
+
+    // Bind the framebuffer
+    glw.bindFramebuffer(this.framebuffer);
+
+    // Attach the texture to the framebuffer
+    glw.framebufferTexture2D(glw.COLOR_ATTACHMENT0, nativeTexture, 0);
+
+    // Unbind the framebuffer
+    glw.bindFramebuffer(null);
+
+    return {
+      width,
+      height,
+    };
+  }
+}

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

@@ -115,29 +115,8 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
   async onLoadRequest(): Promise<Dimensions> {
     const { glw, memManager } = this;
 
-    // On initial load request, create a 1x1 transparent texture to use until
-    // the texture data is finally loaded.
-    glw.activeTexture(0);
-    glw.bindTexture(this._nativeCtxTexture);
-
-    // linear texture filtering
-    glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
-    glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
-
-    // texture wrapping method
-    glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
-    glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
-
-    glw.texImage2D(
-      0,
-      glw.RGBA,
-      1,
-      1,
-      0,
-      glw.RGBA,
-      glw.UNSIGNED_BYTE,
-      TRANSPARENT_TEXTURE_DATA,
-    );
+    // Set to a 1x1 transparent texture
+    glw.texImage2D(0, glw.RGBA, 1, 1, 0, glw.RGBA, glw.UNSIGNED_BYTE, null);
     memManager.setTextureMemUse(this, TRANSPARENT_TEXTURE_DATA.byteLength);
 
     const textureData = await this.textureSource?.getTextureData();
@@ -250,12 +229,35 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     this._nativeCtxTexture = null;
   }
 
-  private createNativeCtxTexture() {
+  /**
+   * Create native context texture
+   *
+   * @remarks
+   * When this method returns the returned texture will be bound to the GL context state.
+   *
+   * @param width
+   * @param height
+   * @returns
+   */
+  protected createNativeCtxTexture() {
     const { glw } = this;
     const nativeTexture = glw.createTexture();
     if (!nativeTexture) {
       throw new Error('Could not create WebGL Texture');
     }
+
+    // On initial load request, create a 1x1 transparent texture to use until
+    // the texture data is finally loaded.
+    glw.activeTexture(0);
+    glw.bindTexture(nativeTexture);
+
+    // linear texture filtering
+    glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
+    glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
+
+    // texture wrapping method
+    glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
+    glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
     return nativeTexture;
   }
 }

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

@@ -49,6 +49,9 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
     readonly dimensions: Dimensions,
     readonly bufferIdx: number,
     readonly zIndex: number,
+    readonly renderToTexture: boolean | undefined,
+    readonly parentHasRenderTexture: boolean | undefined,
+    readonly framebufferDimensions: Dimensions | undefined,
   ) {
     super();
     this.maxTextures = shader.supportsIndexedTextures
@@ -72,9 +75,8 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
 
   draw() {
     const { glw, shader, shaderProps, options } = this;
-    // shaderOp.draw(this);
-
     const { shManager } = options;
+
     shManager.useShader(shader);
     shader.bindRenderOp(this, shaderProps);