@lightningjs/renderer 0.8.3 → 0.8.4

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

@@ -17,12 +17,12 @@
  * limitations under the License.
  */
 
+import { assertTruthy, createWebGLContext, hasOwn } from '../../../utils.js';
 import {
-  assertTruthy,
-  createWebGLContext,
-  hasOwn,
-} from '../../../utils.js';
-import { CoreRenderer, type CoreRendererOptions, type QuadOptions } from '../CoreRenderer.js';
+  CoreRenderer,
+  type CoreRendererOptions,
+  type QuadOptions,
+} from '../CoreRenderer.js';
 import { WebGlCoreRenderOp } from './WebGlCoreRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
@@ -47,6 +47,9 @@ import {
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import { WebGlCoreShader } from './WebGlCoreShader.js';
 import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import { RenderTexture } from '../../textures/RenderTexture.js';
+import type { CoreNode } from '../../CoreNode.js';
+import { WebGlCoreCtxRenderTexture } from './WebGlCoreCtxRenderTexture.js';
 
 const WORDS_PER_QUAD = 24;
 // const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
@@ -72,7 +75,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
   //// Render Op / Buffer Filling State
   curBufferIdx = 0;
   curRenderOp: WebGlCoreRenderOp | null = null;
-  renderables: Array<QuadOptions | WebGlCoreRenderOp> = [];
+  override rttNodes: CoreNode[] = [];
+  activeRttNode: CoreNode | null = null;
 
   //// Default Shader
   defaultShader: WebGlCoreShader;
@@ -83,6 +87,11 @@ export class WebGlCoreRenderer extends CoreRenderer {
    */
   defaultTexture: Texture;
 
+  /**
+   * Whether the renderer is currently rendering to a texture.
+   */
+  public renderToTextureActive = false;
+
   constructor(options: WebGlCoreRendererOptions) {
     super(options);
     this.mode = 'webgl';
@@ -90,6 +99,12 @@ export class WebGlCoreRenderer extends CoreRenderer {
     const { canvas, clearColor, bufferMemory } = options;
 
     this.defaultTexture = new ColorTexture(this.txManager);
+
+    // Mark the default texture as ALWAYS renderable
+    // This prevents it from ever being garbage collected.
+    // Fixes https://github.com/lightning-js/renderer/issues/262
+    this.defaultTexture.setRenderableOwner(this, true);
+
     // When the default texture is loaded, request a render in case the
     // RAF is paused. Fixes: https://github.com/lightning-js/renderer/issues/123
     this.defaultTexture.once('loaded', () => {
@@ -177,6 +192,12 @@ export class WebGlCoreRenderer extends CoreRenderer {
         this.txMemManager,
         textureSource,
       );
+    } else if (textureSource instanceof RenderTexture) {
+      return new WebGlCoreCtxRenderTexture(
+        this.glw,
+        this.txMemManager,
+        textureSource,
+      );
     }
     return new WebGlCoreCtxTexture(this.glw, this.txMemManager, textureSource);
   }
@@ -213,6 +234,9 @@ export class WebGlCoreRenderer extends CoreRenderer {
       tb,
       tc,
       td,
+      rtt: renderToTexture,
+      parentHasRenderTexture,
+      framebufferDimensions,
     } = params;
     let { texture } = params;
 
@@ -234,39 +258,22 @@ export class WebGlCoreRenderer extends CoreRenderer {
     const targetDims = {
       width,
       height,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     };
     const targetShader = shader || this.defaultShader;
     assertTruthy(targetShader instanceof WebGlCoreShader);
-    if (curRenderOp) {
-      // If the current render op is not the same shader, create a new one
-      // If the current render op's shader props are not compatible with the
-      // the new shader props, create a new one render op.
-      if (
-        curRenderOp.shader !== targetShader ||
-        !compareRect(curRenderOp.clippingRect, clippingRect) ||
-        (curRenderOp.shader !== this.defaultShader &&
-          (!shaderProps ||
-            !curRenderOp.shader.canBatchShaderProps(
-              curRenderOp.shaderProps,
-              shaderProps,
-            )))
-      ) {
-        curRenderOp = null;
-      }
-    }
-    assertTruthy(targetShader instanceof WebGlCoreShader);
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
-    if (!curRenderOp) {
+    if (!this.reuseRenderOp(params)) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       this.newRenderOp(
         targetShader,
-        shaderProps as any,
+        shaderProps as Record<string, unknown>,
         alpha,
         targetDims,
         clippingRect,
         bufferIdx,
+        renderToTexture,
+        parentHasRenderTexture,
+        framebufferDimensions,
       );
       curRenderOp = this.curRenderOp;
       assertTruthy(curRenderOp);
@@ -303,6 +310,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
     const ctxTexture = txManager.getCtxTexture(texture);
     assertTruthy(ctxTexture instanceof WebGlCoreCtxTexture);
     const textureIdx = this.addTexture(ctxTexture, bufferIdx);
+
     curRenderOp = this.curRenderOp;
     assertTruthy(curRenderOp);
 
@@ -398,6 +406,9 @@ export class WebGlCoreRenderer extends CoreRenderer {
     dimensions: Dimensions,
     clippingRect: RectWithValid,
     bufferIdx: number,
+    renderToTexture?: boolean,
+    parentHasRenderTexture?: boolean,
+    framebufferDimensions?: Dimensions,
   ) {
     const curRenderOp = new WebGlCoreRenderOp(
       this.glw,
@@ -410,6 +421,9 @@ export class WebGlCoreRenderer extends CoreRenderer {
       dimensions,
       bufferIdx,
       0, // Z-Index is only used for explictly added Render Ops
+      renderToTexture,
+      parentHasRenderTexture,
+      framebufferDimensions,
     );
     this.curRenderOp = curRenderOp;
     this.renderOps.push(curRenderOp);
@@ -456,6 +470,50 @@ export class WebGlCoreRenderer extends CoreRenderer {
     return textureIdx;
   }
 
+  /**
+   * Test if the current Render operation can be reused for the specified parameters.
+   * @param params
+   * @returns
+   */
+  reuseRenderOp(params: QuadOptions) {
+    const { shader, shaderProps, parentHasRenderTexture, rtt, clippingRect } =
+      params;
+
+    const targetShader = shader || this.defaultShader;
+
+    // Switching shader program will require a new render operation
+    if (this.curRenderOp?.shader !== targetShader) {
+      return false;
+    }
+
+    // Switching clipping rect will require a new render operation
+    if (!compareRect(this.curRenderOp.clippingRect, clippingRect)) {
+      return false;
+    }
+
+    // Force new render operation if rendering to texture
+    // @todo: This needs to be improved, render operations could also be reused
+    // for rendering to texture
+    if (parentHasRenderTexture || rtt) {
+      return false;
+    }
+
+    // Check if the shader can batch the shader properties
+    if (
+      this.curRenderOp.shader !== this.defaultShader &&
+      (!shaderProps ||
+        !this.curRenderOp.shader.canBatchShaderProps(
+          this.curRenderOp.shaderProps,
+          shaderProps,
+        ))
+    ) {
+      return false;
+    }
+
+    // Render operation can be reused
+    return true;
+  }
+
   /**
    * add RenderOp to the render pipeline
    */
@@ -483,16 +541,91 @@ export class WebGlCoreRenderer extends CoreRenderer {
     if (doLog) {
       console.log('renderOps', this.renderOps.length);
     }
+
     this.renderOps.forEach((renderOp, i) => {
       if (doLog) {
-        console.log('renderOp', i, renderOp.numQuads);
+        console.log('Quads per operation', renderOp.numQuads);
       }
       renderOp.draw();
     });
+  }
 
-    // clean up
-    this.renderables = [];
+  renderToTexture(node: CoreNode) {
+    for (let i = 0; i < this.rttNodes.length; i++) {
+      if (this.rttNodes[i] === node) {
+        return;
+      }
+    }
+
+    // @todo: Better bottom up rendering order
+    this.rttNodes.unshift(node);
   }
-}
 
-const idx = 0;
+  renderRTTNodes() {
+    const { glw } = this;
+    const { txManager } = this.stage;
+    // Render all associated RTT nodes to their textures
+    for (let i = 0; i < this.rttNodes.length; i++) {
+      const node = this.rttNodes[i];
+
+      // Skip nodes that don't have RTT updates
+      if (!node || !node.hasRTTupdates) {
+        continue;
+      }
+
+      // Set the active RTT node to the current node
+      // So we can prevent rendering children of nested RTT nodes
+      this.activeRttNode = node;
+
+      assertTruthy(node.texture, 'RTT node missing texture');
+      const ctxTexture = txManager.getCtxTexture(node.texture);
+      assertTruthy(ctxTexture instanceof WebGlCoreCtxRenderTexture);
+      this.renderToTextureActive = true;
+
+      // Bind the the texture's framebuffer
+      glw.bindFramebuffer(ctxTexture.framebuffer);
+
+      glw.viewport(0, 0, ctxTexture.w, ctxTexture.h);
+      glw.clear();
+
+      // Render all associated quads to the texture
+      for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i];
+        if (!child) {
+          continue;
+        }
+        child.update(this.stage.deltaTime, {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0,
+          valid: false,
+        });
+
+        this.stage.addQuads(child);
+        child.hasRTTupdates = false;
+      }
+
+      // Render all associated quads to the texture
+      this.render();
+
+      // Reset render operations
+      this.renderOps.length = 0;
+      node.hasRTTupdates = false;
+    }
+
+    // Bind the default framebuffer
+    glw.bindFramebuffer(null);
+
+    glw.viewport(0, 0, this.glw.canvas.width, this.glw.canvas.height);
+    this.renderToTextureActive = false;
+  }
+
+  removeRTTNode(node: CoreNode) {
+    const index = this.rttNodes.indexOf(node);
+    if (index === -1) {
+      return;
+    }
+    this.rttNodes.splice(index, 1);
+  }
+}

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

@@ -261,10 +261,35 @@ export abstract class WebGlCoreShader extends CoreShader {
     if (renderOp.textures.length > 0) {
       this.bindTextures(renderOp.textures);
     }
-    const { glw } = renderOp;
-    // Bind standard automatic uniforms
-    this.setUniform('u_resolution', [glw.canvas.width, glw.canvas.height]);
-    this.setUniform('u_pixelRatio', renderOp.options.pixelRatio);
+
+    const { glw, parentHasRenderTexture, renderToTexture } = renderOp;
+
+    // Skip if the parent and current operation both have render textures
+    if (renderToTexture && parentHasRenderTexture) {
+      return;
+    }
+
+    // Bind render texture framebuffer dimensions as resolution
+    // if the parent has a render texture
+    if (parentHasRenderTexture) {
+      const { width, height } = renderOp.framebufferDimensions || {};
+      // Force pixel ratio to 1.0 for render textures since they are always 1:1
+      // the final render texture will be rendered to the screen with the correct pixel ratio
+      this.setUniform('u_pixelRatio', 1.0);
+
+      // Set resolution to the framebuffer dimensions
+      this.setUniform(
+        'u_resolution',
+        new Float32Array([width ?? 0, height ?? 0]),
+      );
+    } else {
+      this.setUniform('u_pixelRatio', renderOp.options.pixelRatio);
+      this.setUniform(
+        'u_resolution',
+        new Float32Array([glw.canvas.width, glw.canvas.height]),
+      );
+    }
+
     if (props) {
       // Bind optional automatic uniforms
       // These are only bound if their keys are present in the props.

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

@@ -61,16 +61,14 @@ export class DefaultShader extends WebGlCoreShader {
       varying vec2 v_textureCoordinate;
 
       void main() {
-        vec2 normalized = a_position * u_pixelRatio / u_resolution;
-        vec2 zero_two = normalized * 2.0;
-        vec2 clip_space = zero_two - 1.0;
+        vec2 normalized = a_position * u_pixelRatio;
+        vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
 
-        // pass to fragment
         v_color = a_color;
         v_textureCoordinate = a_textureCoordinate;
 
-        // flip y
-        gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
+        gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
+        gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
       }
     `,
     fragment: `

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

@@ -136,8 +136,13 @@ export class SdfShader extends WebGlCoreShader {
       void main() {
         vec2 scrolledPosition = a_position * u_size - vec2(0, u_scrollY);
         vec2 transformedPosition = (u_transform * vec3(scrolledPosition, 1)).xy;
-        gl_Position = vec4((transformedPosition * u_pixelRatio / u_resolution * 2.0 - 1.0) * vec2(1, -1), 0, 1);
+
+        // Calculate screen space with pixel ratio
+        vec2 screenSpace = (transformedPosition * u_pixelRatio / u_resolution * 2.0 - 1.0) * vec2(1, -1);
+
+        gl_Position = vec4(screenSpace, 0.0, 1.0);
         v_texcoord = a_textureCoordinate;
+
       }
     `,
     fragment: `

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

@@ -56,6 +56,7 @@ import type {
 import type { WebGlCoreCtxTexture } from '../../../renderers/webgl/WebGlCoreCtxTexture.js';
 import { EventEmitter } from '../../../../common/EventEmitter.js';
 import type { Matrix3d } from '../../../lib/Matrix3d.js';
+import type { Dimensions } from '../../../../common/CommonTypes.js';
 import { WebGlCoreRenderer } from '../../../renderers/webgl/WebGlCoreRenderer.js';
 
 declare module '../TextRenderer.js' {
@@ -575,13 +576,16 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     transform: Matrix3d,
     clippingRect: Readonly<RectWithValid>,
     alpha: number,
+    parentHasRenderTexture: boolean,
+    framebufferDimensions: Dimensions,
   ): void {
     if (!state.vertexBuffer) {
       // Nothing to draw
       return;
     }
 
-    const renderer: WebGlCoreRenderer = this.stage.renderer as WebGlCoreRenderer;
+    const renderer: WebGlCoreRenderer = this.stage
+      .renderer as WebGlCoreRenderer;
     assertTruthy(renderer instanceof WebGlCoreRenderer);
 
     const { fontSize, color, contain, scrollable, zIndex, debug } = state.props;
@@ -681,6 +685,9 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       { height: textH, width: textW },
       0,
       zIndex,
+      false,
+      parentHasRenderTexture,
+      framebufferDimensions,
     );
 
     const texture = state.trFontFace?.texture;

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

@@ -17,6 +17,7 @@
  * limitations under the License.
  */
 
+import type { Dimensions } from '../../../common/CommonTypes.js';
 import type { EventEmitter } from '../../../common/EventEmitter.js';
 import type { Stage } from '../../Stage.js';
 import type { Matrix3d } from '../../lib/Matrix3d.js';
@@ -544,5 +545,7 @@ export abstract class TextRenderer<
     transform: Matrix3d,
     clippingRect: RectWithValid,
     alpha: number,
+    parentHasRenderTexture: boolean,
+    framebufferDimensions: Dimensions | undefined,
   ): void;
 }

package/src/core/textures/RenderTexture.ts

@@ -0,0 +1,81 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 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 { CoreTextureManager } from '../CoreTextureManager.js';
+import { Texture, type TextureData } from './Texture.js';
+
+/**
+ * Properties of the {@link RenderTexture}
+ */
+export interface RenderTextureProps {
+  /**
+   * WebGL Texture width
+   * @default 256
+   */
+  width?: number;
+
+  /**
+   * WebGL Texture height
+   * @default 256
+   */
+  height?: number;
+}
+
+export class RenderTexture extends Texture {
+  props: Required<RenderTextureProps>;
+
+  constructor(txManager: CoreTextureManager, props?: RenderTextureProps) {
+    super(txManager);
+    this.props = RenderTexture.resolveDefaults(props || {});
+  }
+
+  get width() {
+    return this.props.width;
+  }
+
+  set width(value: number) {
+    this.props.width = value;
+  }
+
+  get height() {
+    return this.props.height;
+  }
+
+  set height(value: number) {
+    this.props.height = value;
+  }
+
+  override async getTextureData(): Promise<TextureData> {
+    return {
+      data: null,
+      premultiplyAlpha: null,
+    };
+  }
+
+  static override resolveDefaults(
+    props: RenderTextureProps,
+  ): Required<RenderTextureProps> {
+    return {
+      width: props.width || 256,
+      height: props.height || 256,
+    };
+  }
+
+  static z$__type__Props: RenderTextureProps;
+}