@lightningjs/renderer 3.0.0-beta20 → 3.0.0-beta22

package/src/main-api/Inspector.ts

@@ -11,6 +11,8 @@ import type {
 } from '../common/IAnimationController.js';
 import { isProductionEnvironment } from '../utils.js';
 import { CoreTextNode, type CoreTextNodeProps } from '../core/CoreTextNode.js';
+import type { Texture } from '../core/textures/Texture.js';
+import { TextureType } from '../core/textures/Texture.js';
 
 /**
  * Inspector Options
@@ -204,6 +206,22 @@ const gradientColorPropertyMap = [
   'colorBr',
 ];
 
+const textureTypeNames: Record<number, string> = {
+  [TextureType.generic]: 'generic',
+  [TextureType.color]: 'color',
+  [TextureType.image]: 'image',
+  [TextureType.noise]: 'noise',
+  [TextureType.renderToTexture]: 'renderToTexture',
+  [TextureType.subTexture]: 'subTexture',
+};
+
+interface TextureMetrics {
+  previousState: string;
+  loadedCount: number;
+  failedCount: number;
+  freedCount: number;
+}
+
 const knownProperties = new Set<string>([
   ...Object.keys(stylePropertyMap),
   ...Object.keys(domPropertyMap),
@@ -223,6 +241,7 @@ export class Inspector {
   private width = 1920;
   private scaleX = 1;
   private scaleY = 1;
+  private textureMetrics = new Map<Texture, TextureMetrics>();
 
   // Performance monitoring for frequent setter calls
   private static setterCallCount = new Map<
@@ -773,10 +792,13 @@ export class Inspector {
     return this.createProxy(node, div);
   }
 
-  createTextNode(node: CoreNode): CoreTextNode {
-    const div = this.createDiv(node.id, node.props);
+  createTextNode(node: CoreTextNode): CoreTextNode {
+    // eslint-disable-next-line
+    // @ts-ignore - textProps is a private property and keeping it that way
+    // but we need it from the inspector to set the initial properties on the div element
+    const div = this.createDiv(node.id, node.textProps);
     (div as HTMLElement & { node: CoreNode }).node = node;
-    (node as CoreNode & { div: HTMLElement }).div = div;
+    (node as CoreTextNode & { div: HTMLElement }).div = div;
 
     return this.createProxy(node, div) as CoreTextNode;
   }
@@ -785,6 +807,94 @@ export class Inspector {
     node: CoreNode | CoreTextNode,
     div: HTMLElement,
   ): CoreNode | CoreTextNode {
+    // Store texture event listeners for cleanup
+    const textureListeners = new Map<
+      Texture,
+      {
+        onLoaded: () => void;
+        onFailed: () => void;
+        onFreed: () => void;
+      }
+    >();
+
+    const coreNodeListeners = new Map<
+      CoreNode,
+      {
+        onLoaded: () => void;
+      }
+    >();
+
+    const setupCoreNodeListeners = (coreNode: CoreNode) => {
+      const onLoaded = () => {
+        this.updateTextNodeDimensions(div, coreNode as CoreTextNode);
+      };
+      coreNode.on('loaded', onLoaded);
+      coreNodeListeners.set(coreNode, { onLoaded });
+    };
+
+    // Helper function to setup texture event listeners
+    const setupTextureListeners = (texture: Texture | null) => {
+      // Clean up existing listeners first
+      textureListeners.forEach((listeners, oldTexture) => {
+        oldTexture.off('loaded', listeners.onLoaded);
+        oldTexture.off('failed', listeners.onFailed);
+        oldTexture.off('freed', listeners.onFreed);
+      });
+      textureListeners.clear();
+
+      // Setup new listeners if texture exists
+      if (texture) {
+        // Initialize metrics if not exists
+        if (!this.textureMetrics.has(texture)) {
+          this.textureMetrics.set(texture, {
+            previousState: texture.state,
+            loadedCount: 0,
+            failedCount: 0,
+            freedCount: 0,
+          });
+        }
+
+        const onLoaded = () => {
+          const metrics = this.textureMetrics.get(texture);
+          if (metrics) {
+            metrics.previousState =
+              metrics.previousState !== texture.state
+                ? metrics.previousState
+                : 'loading';
+            metrics.loadedCount++;
+          }
+          this.updateTextureAttributes(div, texture);
+        };
+        const onFailed = () => {
+          const metrics = this.textureMetrics.get(texture);
+          if (metrics) {
+            metrics.previousState =
+              metrics.previousState !== texture.state
+                ? metrics.previousState
+                : 'loading';
+            metrics.failedCount++;
+          }
+          this.updateTextureAttributes(div, texture);
+        };
+        const onFreed = () => {
+          const metrics = this.textureMetrics.get(texture);
+          if (metrics) {
+            metrics.previousState =
+              metrics.previousState !== texture.state
+                ? metrics.previousState
+                : texture.state;
+            metrics.freedCount++;
+          }
+          this.updateTextureAttributes(div, texture);
+        };
+
+        texture.on('loaded', onLoaded);
+        texture.on('failed', onFailed);
+        texture.on('freed', onFreed);
+
+        textureListeners.set(texture, { onLoaded, onFailed, onFreed });
+      }
+    };
     // Define traps for each property in knownProperties
     knownProperties.forEach((property) => {
       let originalProp = Object.getOwnPropertyDescriptor(node, property);
@@ -799,6 +909,10 @@ export class Inspector {
         return;
       }
 
+      if (property === 'text') {
+        setupCoreNodeListeners(node);
+      }
+
       Object.defineProperty(node, property, {
         get() {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -815,6 +929,15 @@ export class Inspector {
             value,
             node.props,
           );
+
+          // Setup texture event listeners if this is a texture property
+          if (property === 'texture') {
+            const textureValue =
+              value && typeof value === 'object' && 'state' in value
+                ? (value as Texture)
+                : null;
+            setupTextureListeners(textureValue);
+          }
         },
         configurable: true,
         enumerable: true,
@@ -824,6 +947,21 @@ export class Inspector {
     const originalDestroy = node.destroy;
     Object.defineProperty(node, 'destroy', {
       value: () => {
+        // Clean up texture event listeners and metrics
+        textureListeners.forEach((listeners, texture) => {
+          texture.off('loaded', listeners.onLoaded);
+          texture.off('failed', listeners.onFailed);
+          texture.off('freed', listeners.onFreed);
+          // Clean up metrics for this texture
+          this.textureMetrics.delete(texture);
+        });
+        textureListeners.clear();
+
+        coreNodeListeners.forEach((listeners, coreNode) => {
+          coreNode.off('loaded', listeners.onLoaded);
+        });
+        coreNodeListeners.clear();
+
         this.destroyNode(node.id);
         originalDestroy.call(node);
       },
@@ -853,6 +991,86 @@ export class Inspector {
     return node;
   }
 
+  updateTextNodeDimensions(div: HTMLElement, node: CoreTextNode) {
+    const textMetrics = node.renderInfo;
+    if (textMetrics) {
+      div.style.width = `${textMetrics.width}px`;
+      div.style.height = `${textMetrics.height}px`;
+    } else {
+      div.style.removeProperty('width');
+      div.style.removeProperty('height');
+    }
+  }
+
+  updateTextureAttributes(div: HTMLElement, texture: Texture) {
+    // Update texture state
+    div.setAttribute('data-texture-state', texture.state);
+
+    // Update texture type
+    div.setAttribute(
+      'data-texture-type',
+      textureTypeNames[texture.type] || 'unknown',
+    );
+
+    // Update texture dimensions if available
+    if (texture.dimensions) {
+      div.setAttribute('data-texture-width', String(texture.dimensions.w));
+      div.setAttribute('data-texture-height', String(texture.dimensions.h));
+    } else {
+      div.removeAttribute('data-texture-width');
+      div.removeAttribute('data-texture-height');
+    }
+
+    // Update renderable owners count
+    div.setAttribute(
+      'data-texture-owners',
+      String(texture.renderableOwners.length),
+    );
+
+    // Update retry count
+    div.setAttribute('data-texture-retry-count', String(texture.retryCount));
+
+    // Update max retry count if available
+    if (texture.maxRetryCount !== null) {
+      div.setAttribute(
+        'data-texture-max-retry-count',
+        String(texture.maxRetryCount),
+      );
+    } else {
+      div.removeAttribute('data-texture-max-retry-count');
+    }
+
+    // Update metrics if available
+    const metrics = this.textureMetrics.get(texture);
+    if (metrics) {
+      div.setAttribute('data-texture-previous-state', metrics.previousState);
+      div.setAttribute(
+        'data-texture-loaded-count',
+        String(metrics.loadedCount),
+      );
+      div.setAttribute(
+        'data-texture-failed-count',
+        String(metrics.failedCount),
+      );
+      div.setAttribute('data-texture-freed-count', String(metrics.freedCount));
+    } else {
+      div.removeAttribute('data-texture-previous-state');
+      div.removeAttribute('data-texture-loaded-count');
+      div.removeAttribute('data-texture-failed-count');
+      div.removeAttribute('data-texture-freed-count');
+    }
+
+    // Update error information if present
+    if (texture.error) {
+      div.setAttribute(
+        'data-texture-error',
+        texture.error.code || texture.error.message,
+      );
+    } else {
+      div.removeAttribute('data-texture-error');
+    }
+  }
+
   public destroy() {
     // Stop animation stats timer
     this.stopAnimationStatsTimer();

package/src/main-api/Renderer.ts

@@ -238,6 +238,17 @@ export interface RendererRuntimeSettings {
    */
   fpsUpdateInterval: number;
 
+  /**
+   * Clears the render buffer on reset
+   *
+   * @remarks
+   * If false, the renderer will not clear the buffer before rendering a new frame.
+   * This is useful if you want to preserve the previous frame.
+   *
+   * @defaultValue `true`
+   */
+  enableClear: boolean;
+
   /**
    * DOM Inspector
    *
@@ -525,6 +536,7 @@ export class RendererMain extends EventEmitter {
         settings.devicePhysicalPixelRatio || window.devicePixelRatio || 1,
       clearColor: settings.clearColor ?? 0x00000000,
       fpsUpdateInterval: settings.fpsUpdateInterval || 0,
+      enableClear: settings.enableClear ?? true,
       targetFPS: settings.targetFPS || 0,
       numImageWorkers:
         settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2,
@@ -586,6 +598,7 @@ export class RendererMain extends EventEmitter {
       enableContextSpy: settings.enableContextSpy!,
       forceWebGL2: settings.forceWebGL2!,
       fpsUpdateInterval: settings.fpsUpdateInterval!,
+      enableClear: settings.enableClear!,
       numImageWorkers: settings.numImageWorkers!,
       renderEngine: settings.renderEngine!,
       textureMemory: resolvedTxSettings,

package/dist/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"fileNames":[],"fileInfos":[],"root":[],"options":{"allowJs":true,"allowSyntheticDefaultImports":true,"composite":true,"declaration":true,"experimentalDecorators":true,"module":100,"noImplicitAny":false,"noImplicitOverride":true,"noUncheckedIndexedAccess":true,"outDir":"./","rootDir":"..","sourceMap":true,"strict":true,"target":9,"verbatimModuleSyntax":true},"version":"5.9.2"}

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

@@ -1,170 +0,0 @@
-/*
- * 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 { CoreRenderOp } from '../CoreRenderOp.js';
-import type { WebGlCtxTexture } from './WebGlCtxTexture.js';
-import type { WebGlRenderer } from './WebGlRenderer.js';
-import type { BufferCollection } from './internal/BufferCollection.js';
-import type { WebGlShaderNode } from './WebGlShaderNode.js';
-import type { QuadOptions } from '../CoreRenderer.js';
-import type { CoreTextNode } from '../../CoreTextNode.js';
-import type { RectWithValid } from '../../lib/utils.js';
-import type { Dimensions } from '../../../common/CommonTypes.js';
-
-type ReqQuad =
-  | 'alpha'
-  | 'shader'
-  | 'parentHasRenderTexture'
-  | 'rtt'
-  | 'clippingRect'
-  | 'height'
-  | 'width'
-  | 'time';
-type RenderOpQuadOptions = Pick<QuadOptions, ReqQuad> &
-  Partial<Omit<QuadOptions, ReqQuad>> & {
-    sdfShaderProps?: Record<string, unknown>;
-    sdfBuffers?: BufferCollection;
-  };
-
-/**
- * Can render multiple quads with multiple textures (up to vertex shader texture limit)
- *
- */
-export class WebGlRenderOp extends CoreRenderOp {
-  numQuads = 0;
-  textures: WebGlCtxTexture[] = [];
-
-  /**
-   * need to improve this when TextRenderers are refactored
-   */
-  readonly sdfShaderProps: Record<string, unknown> | undefined;
-  readonly sdfNode: CoreTextNode | undefined;
-  readonly maxTextures: number;
-  readonly buffers: BufferCollection;
-  readonly shader: WebGlShaderNode;
-  readonly width: number;
-  readonly height: number;
-  readonly clippingRect: RectWithValid;
-  readonly rtt: boolean;
-  readonly parentHasRenderTexture: boolean;
-  readonly framebufferDimensions: Dimensions | null;
-  readonly alpha: number;
-  readonly pixelRatio: number;
-  readonly time?: number | null;
-
-  constructor(
-    readonly renderer: WebGlRenderer,
-    quad: RenderOpQuadOptions,
-    readonly bufferIdx: number,
-  ) {
-    super();
-    this.buffers = quad.sdfBuffers || renderer.quadBufferCollection;
-    this.shader = quad.shader as WebGlShaderNode;
-    this.width = quad.width;
-    this.height = quad.height;
-    this.clippingRect = quad.clippingRect;
-    this.parentHasRenderTexture = quad.parentHasRenderTexture;
-    this.framebufferDimensions = quad.framebufferDimensions || null;
-    this.rtt = quad.rtt;
-    this.alpha = quad.alpha;
-    this.pixelRatio =
-      this.parentHasRenderTexture === true ? 1 : renderer.stage.pixelRatio;
-    this.time = quad.time;
-
-    /**
-     * related to line 51
-     */
-    this.sdfShaderProps = quad.sdfShaderProps;
-
-    this.maxTextures = this.shader.program.supportsIndexedTextures
-      ? (renderer.glw.getParameter(
-          renderer.glw.MAX_VERTEX_TEXTURE_IMAGE_UNITS,
-        ) as number)
-      : 1;
-  }
-
-  addTexture(texture: WebGlCtxTexture): number {
-    const { textures, maxTextures } = this;
-    let existingIdx = -1;
-    const texturesLength = textures.length;
-    for (let i = 0; i < texturesLength; i++) {
-      const t = textures[i];
-      if (t === texture) {
-        existingIdx = i;
-        break;
-      }
-    }
-
-    if (existingIdx !== -1) {
-      return existingIdx;
-    }
-
-    if (texturesLength >= maxTextures) {
-      return 0xffffffff;
-    }
-    this.textures.push(texture);
-    return texturesLength;
-  }
-
-  draw() {
-    const { glw, options, stage } = this.renderer;
-
-    stage.shManager.useShader(this.shader.program);
-    this.shader.program.bindRenderOp(this);
-
-    // Clipping
-    if (this.clippingRect.valid === true) {
-      const clipX = Math.round(this.clippingRect.x * this.pixelRatio);
-      const clipWidth = Math.round(this.clippingRect.width * this.pixelRatio);
-      const clipHeight = Math.round(this.clippingRect.height * this.pixelRatio);
-      let clipY = Math.round(
-        options.canvas.height -
-          clipHeight -
-          this.clippingRect.y * this.pixelRatio,
-      );
-      // if parent has render texture, we need to adjust the scissor rect
-      // to be relative to the parent's framebuffer
-      if (this.parentHasRenderTexture) {
-        clipY = this.framebufferDimensions
-          ? this.framebufferDimensions.h - this.height
-          : 0;
-      }
-
-      glw.setScissorTest(true);
-      glw.scissor(clipX, clipY, clipWidth, clipHeight);
-    } else {
-      glw.setScissorTest(false);
-    }
-
-    // Check if this is SDF rendering (has sdfBuffers)
-    if (this.sdfShaderProps !== undefined) {
-      // SDF rendering uses drawArrays with explicit triangle vertices (6 vertices per quad)
-      glw.drawArrays(glw.TRIANGLES, 0, 6 * this.numQuads);
-    } else {
-      // Regular rendering uses drawElements with index buffer (4 vertices per quad)
-      const quadIdx = (this.bufferIdx / 32) * 6 * 2;
-      glw.drawElements(
-        glw.TRIANGLES,
-        6 * this.numQuads,
-        glw.UNSIGNED_SHORT,
-        quadIdx,
-      );
-    }
-  }
-}