@lightningjs/renderer 2.11.1 → 2.12.1

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

@@ -41,10 +41,12 @@ export class CanvasCoreTexture extends CoreContextTexture {
     this.onLoadRequest()
       .then((size) => {
         this.textureSource.setState('loaded', size);
+        this.textureSource.freeTextureData();
         this.updateMemSize();
       })
       .catch((err) => {
         this.textureSource.setState('failed', err as Error);
+        this.textureSource.freeTextureData();
       });
   }
 
@@ -53,6 +55,7 @@ export class CanvasCoreTexture extends CoreContextTexture {
     this.tintCache = undefined;
     this.textureSource.setState('freed');
     this.setTextureMemUse(0);
+    this.textureSource.freeTextureData();
   }
 
   updateMemSize(): void {

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

@@ -27,7 +27,7 @@ import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
 export class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
   declare textureSource: RenderTexture;
 
-  readonly framebuffer: WebGLFramebuffer;
+  public framebuffer: WebGLFramebuffer | null = null;
 
   constructor(
     glw: WebGlContextWrapper,
@@ -35,10 +35,6 @@ export class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
     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> {
@@ -47,6 +43,9 @@ export class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
       this.createNativeCtxTexture());
     const { width, height } = this.textureSource;
 
+    // Create Framebuffer object
+    this.framebuffer = glw.createFramebuffer();
+
     // Set the dimensions of the render texture
     glw.texImage2D(
       0,
@@ -76,4 +75,12 @@ export class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
       height,
     };
   }
+
+  override free(): void {
+    super.free();
+
+    // Delete the framebuffer
+    this.glw.deleteFramebuffer(this.framebuffer);
+    this.framebuffer = null;
+  }
 }

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

@@ -111,6 +111,9 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         // Update the texture source's width and height so that it can be used
         // for rendering.
         this.textureSource.setState('loaded', { width, height });
+
+        // cleanup source texture data
+        this.textureSource.freeTextureData();
       })
       .catch((err) => {
         // If the texture has been freed while loading, return early.
@@ -119,6 +122,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         }
         this.state = 'failed';
         this.textureSource.setState('failed', err);
+        this.textureSource.freeTextureData();
         console.error(err);
       });
   }
@@ -247,6 +251,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     if (this.state === 'freed') {
       return;
     }
+
     this.state = 'freed';
     this.textureSource.setState('freed');
     this._w = 0;
@@ -259,6 +264,9 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     glw.deleteTexture(this._nativeCtxTexture);
     this.setTextureMemUse(0);
     this._nativeCtxTexture = null;
+
+    // if the texture still has source data, free it
+    this.textureSource.freeTextureData();
   }
 
   /**

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

@@ -49,7 +49,7 @@ 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 { CoreNodeRenderState, type CoreNode } from '../../CoreNode.js';
 import { WebGlCoreCtxRenderTexture } from './WebGlCoreCtxRenderTexture.js';
 import type { BaseShaderController } from '../../../main-api/ShaderController.js';
 
@@ -95,6 +95,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
    */
 
   quadBufferUsage = 0;
+  numQuadsRendered = 0;
   /**
    * Whether the renderer is currently rendering to a texture.
    */
@@ -543,25 +544,25 @@ export class WebGlCoreRenderer extends CoreRenderer {
     }
 
     // Switching clipping rect will require a new render operation
-    if (!compareRect(this.curRenderOp.clippingRect, clippingRect)) {
+    if (compareRect(this.curRenderOp.clippingRect, clippingRect) === false) {
       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) {
+    if (parentHasRenderTexture !== undefined || rtt !== undefined) {
       return false;
     }
 
     // Check if the shader can batch the shader properties
     if (
       this.curRenderOp.shader !== this.defaultShader &&
-      (!shaderProps ||
-        !this.curRenderOp.shader.canBatchShaderProps(
+      (shaderProps === null ||
+        this.curRenderOp.shader.canBatchShaderProps(
           this.curRenderOp.shaderProps,
           shaderProps,
-        ))
+        ) === false)
     ) {
       return false;
     }
@@ -590,22 +591,22 @@ export class WebGlCoreRenderer extends CoreRenderer {
 
     const arr = new Float32Array(quadBuffer, 0, this.curBufferIdx);
 
-    const buffer = this.quadBufferCollection.getBuffer('a_position') ?? null;
+    const buffer = this.quadBufferCollection.getBuffer('a_position') || null;
     glw.arrayBufferData(buffer, arr, glw.STATIC_DRAW);
 
-    const doLog = false; // idx++ % 100 === 0;
-    if (doLog) {
-      console.log('renderOps', this.renderOps.length);
-    }
-
     for (let i = 0, length = this.renderOps.length; i < length; i++) {
-      const renderOp = this.renderOps[i] as WebGlCoreRenderOp;
-      if (doLog) {
-        console.log('Quads per operation', renderOp.numQuads);
-      }
-      renderOp.draw();
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      this.renderOps[i]!.draw();
     }
     this.quadBufferUsage = this.curBufferIdx * arr.BYTES_PER_ELEMENT;
+
+    // Calculate the size of each quad in bytes (4 vertices per quad) times the size of each vertex in bytes
+    const QUAD_SIZE_IN_BYTES = 4 * (6 * arr.BYTES_PER_ELEMENT); // 6 attributes per vertex
+    this.numQuadsRendered = this.quadBufferUsage / QUAD_SIZE_IN_BYTES;
+  }
+
+  getQuadCount(): number {
+    return this.numQuadsRendered;
   }
 
   renderToTexture(node: CoreNode) {
@@ -702,12 +703,21 @@ export class WebGlCoreRenderer extends CoreRenderer {
       const node = this.rttNodes[i];
 
       // Skip nodes that don't have RTT updates
-      if (!node || !node.hasRTTupdates) {
+      if (node === undefined || node.hasRTTupdates === false) {
+        continue;
+      }
+
+      // Skip nodes that are not visible
+      if (
+        node.worldAlpha === 0 ||
+        (node.strictBounds === true &&
+          node.renderState === CoreNodeRenderState.OutOfBounds)
+      ) {
         continue;
       }
 
-      if (!node.texture || !node.texture.ctxTexture) {
-        console.warn('Texture not loaded for RTT node', node);
+      // Skip nodes that do not have a loaded texture
+      if (node.texture === null || node.texture.state !== 'loaded') {
         continue;
       }
 
@@ -732,7 +742,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       for (let i = 0; i < node.children.length; i++) {
         const child = node.children[i];
 
-        if (!child) {
+        if (child === undefined) {
           continue;
         }
 

package/src/core/renderers/webgl/shaders/effects/EffectUtils.ts

@@ -66,8 +66,8 @@ export const updateFloat32ArrayLength4 = (values: ShaderEffectValueMap) => {
     const floatArray = values.programValue;
     floatArray[0] = validatedValue[0]!;
     floatArray[1] = validatedValue[1]!;
-    floatArray[2] = validatedValue[1]!;
-    floatArray[3] = validatedValue[1]!;
+    floatArray[2] = validatedValue[2]!;
+    floatArray[3] = validatedValue[3]!;
   } else {
     values.programValue = new Float32Array(validatedValue);
   }

package/src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.ts

@@ -27,6 +27,7 @@ import {
   type NormalizedFontMetrics,
   type TrFontFaceOptions,
 } from '../TrFontFace.js';
+import { fetchJson } from '../utils.js';
 import type { FontShaper } from './internal/FontShaper.js';
 import { SdfFontShaper, type SdfFontData } from './internal/SdfFontShaper.js';
 
@@ -62,9 +63,9 @@ export class SdfTrFontFace<
    * in SDF/vertex units.
    */
   public readonly maxCharHeight: number = 0;
-  public readonly data: SdfFontData | undefined;
   public readonly shaper: FontShaper | undefined;
   public readonly glyphMap: Map<number, SdfFontData['chars'][0]> = new Map();
+  public data: SdfFontData | undefined;
 
   constructor(type: FontTypeT, options: SdfTrFontFaceOptions) {
     super(options);
@@ -103,10 +104,9 @@ export class SdfTrFontFace<
     });
 
     // Set this.data to the fetched data from dataUrl
-    fetch(atlasDataUrl)
-      .then(async (response) => {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        (this.data as SdfFontData) = await response.json();
+    fetchJson(atlasDataUrl)
+      .then((response) => {
+        this.data = JSON.parse(response as unknown as string) as SdfFontData;
         assertTruthy(this.data);
         // Add all the glyphs to the glyph map
 

package/src/core/text-rendering/font-face-types/utils.ts

@@ -0,0 +1,39 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2020 Metrological
+ *
+ * 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.
+ */
+export function fetchJson(
+  url: string,
+  responseType: XMLHttpRequestResponseType = '',
+): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = responseType;
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState == XMLHttpRequest.DONE) {
+        // On most devices like WebOS and Tizen, the file protocol returns 0 while http(s) protocol returns 200
+        if (xhr.status === 0 || xhr.status === 200) {
+          resolve(xhr.response);
+        } else {
+          reject(xhr.statusText);
+        }
+      }
+    };
+    xhr.open('GET', url, true);
+    xhr.send(null);
+  });
+}

package/src/core/textures/ImageTexture.ts

@@ -25,6 +25,7 @@ import {
 } from '../lib/textureCompression.js';
 import { convertUrlToAbsolute, isBase64Image } from '../lib/utils.js';
 import { isSvgImage, loadSvg } from '../lib/textureSvg.js';
+import { fetchJson } from '../text-rendering/font-face-types/utils.js';
 
 /**
  * Properties of the {@link ImageTexture}
@@ -220,7 +221,9 @@ export class ImageTexture extends Texture {
         );
       }
 
-      const blob = await fetch(src).then((response) => response.blob());
+      const blob = await fetchJson(src, 'blob').then(
+        (response) => response as Blob,
+      );
       return this.createImageBitmap(blob, premultiplyAlpha, sx, sy, sw, sh);
     }
 

package/src/core/textures/SubTexture.ts

@@ -137,14 +137,10 @@ export class SubTexture extends Texture {
       width: this.props.width,
       height: this.props.height,
     });
-
-    // free our source, if any
-    this.freeTextureData();
   };
 
   private onParentTxFailed: TextureFailedEventHandler = (target, error) => {
     this.forwardParentTxState('failed', error);
-    this.free();
   };
 
   private onParentTxFetched = () => {
@@ -164,7 +160,6 @@ export class SubTexture extends Texture {
 
   private onParentTxFreed = () => {
     this.forwardParentTxState('freed');
-    this.free();
   };
 
   private forwardParentTxState(
@@ -182,24 +177,9 @@ export class SubTexture extends Texture {
   override async getTextureSource(): Promise<TextureData> {
     // Check if parent texture is loaded
     return new Promise((resolve, reject) => {
-      if (this.parentTexture.state === 'loaded') {
-        resolve({
-          data: this.props,
-        });
-      }
-
-      this.parentTexture.once('loaded', (target, data) => {
-        resolve({
-          data: this.props,
-        });
-      });
-
-      this.parentTexture.once('failed', (target, error) => {
-        reject(error);
-      });
-
-      this.parentTexture.once('freed', () => {
-        reject(new Error('Parent texture was freed'));
+      this.setState('fetched');
+      resolve({
+        data: this.props,
       });
     });
   }

package/src/core/textures/Texture.ts

@@ -200,15 +200,6 @@ export abstract class Texture extends EventEmitter {
   }
 
   load(): void {
-    if (
-      this.state === 'fetching' ||
-      this.state === 'loading' ||
-      this.state === 'loaded' ||
-      this.state === 'failed'
-    ) {
-      return;
-    }
-
     this.txManager.loadTexture(this);
   }
 
@@ -245,7 +236,6 @@ export abstract class Texture extends EventEmitter {
    */
   free(): void {
     this.ctxTexture?.free();
-    this.textureData = null;
   }
 
   /**

package/src/main-api/Renderer.ts

@@ -319,6 +319,8 @@ export interface RendererMainSettings {
  *   - Emitted every `fpsUpdateInterval` milliseconds with the current FPS
  * - `frameTick`
  *   - Emitted every frame tick
+ * - `quadsUpdate`
+ *  - Emitted when number of quads rendered is updated
  * - `idle`
  *   - Emitted when the renderer is idle (no changes to the scene
  *     graph/animations running)
@@ -687,6 +689,26 @@ export class RendererMain extends EventEmitter {
     this.stage.requestRender();
   }
 
+  /**
+   * Cleanup textures that are not being used
+   *
+   * @remarks
+   * This can be used to free up GFX memory used by textures that are no longer
+   * being displayed.
+   *
+   * This routine is also called automatically when the memory used by textures
+   * exceeds the critical threshold on frame generation **OR** when the renderer
+   * is idle and the memory used by textures exceeds the target threshold.
+   *
+   * **NOTE**: This is a heavy operation and should be used sparingly.
+   * **NOTE2**: This will not cleanup textures that are currently being displayed.
+   * **NOTE3**: This will not cleanup textures that are marked as `preventCleanup`.
+   * **NOTE4**: This has nothing to do with the garbage collection of JavaScript.
+   */
+  cleanup() {
+    this.stage.cleanup();
+  }
+
   /**
    * Sets the clear color for the stage.
    *