@lightningjs/renderer 3.0.0-beta22 → 3.0.0-beta24

package/exports/platform.ts

@@ -0,0 +1,31 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2026 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.
+ */
+
+export {
+  Platform,
+  type PlatformSettings,
+} from '../src/core/platforms/Platform.js';
+export { WebPlatform } from '../src/core/platforms/web/WebPlatform.js';
+export { WebPlatformNext } from '../src/core/platforms/web/WebPlatformNext.js';
+export { WebPlatformChrome50 } from '../src/core/platforms/web/WebPlatformChrome50.js';
+export { WebPlatformLegacy } from '../src/core/platforms/web/WebPlatformLegacy.js';
+
+// GL Context Wrappers
+export { GlContextWrapper } from '../src/core/platforms/GlContextWrapper.js';
+export { WebGlContextWrapper } from '../src/core/platforms/web/WebGlContextWrapper.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/renderer",
-  "version": "3.0.0-beta22",
+  "version": "3.0.0-beta24",
   "description": "Lightning 3 Renderer",
   "type": "module",
   "main": "./dist/exports/index.js",
@@ -11,7 +11,8 @@
     "./canvas/shaders": "./dist/exports/canvas-shaders.js",
     "./webgl": "./dist/exports/webgl.js",
     "./webgl/shaders": "./dist/exports/webgl-shaders.js",
-    "./inspector": "./dist/exports/inspector.js"
+    "./inspector": "./dist/exports/inspector.js",
+    "./platforms": "./dist/exports/platform.js"
   },
   "repository": {
     "type": "git",

package/src/core/CoreNode.ts

@@ -61,11 +61,7 @@ import { CoreAnimation } from './animations/CoreAnimation.js';
 import { CoreAnimationController } from './animations/CoreAnimationController.js';
 import type { CoreShaderNode } from './renderers/CoreShaderNode.js';
 import { AutosizeMode, Autosizer } from './Autosizer.js';
-import {
-  bucketSortByZIndex,
-  incrementalRepositionByZIndex,
-  removeChild,
-} from './lib/collectionUtils.js';
+import { bucketSortByZIndex, removeChild } from './lib/collectionUtils.js';
 
 export enum CoreNodeRenderState {
   Init = 0,
@@ -755,7 +751,6 @@ export class CoreNode extends EventEmitter {
   private zIndexMax = 0;
 
   public previousZIndex = -1;
-  public zIndexSortList: CoreNode[] = [];
 
   public updateType = UpdateType.All;
   public childUpdateType = UpdateType.None;
@@ -900,7 +895,7 @@ export class CoreNode extends EventEmitter {
 
     // if the default texture isn't loaded yet, wait for it to load
     // this only happens when the node is created before the stage is ready
-    const dt = this.stage.defaultTexture;
+    const dt = stage.defaultTexture;
     if (dt !== null && dt.state !== 'loaded') {
       dt.once('loaded', () => this.setUpdateType(UpdateType.IsRenderable));
     }
@@ -940,16 +935,6 @@ export class CoreNode extends EventEmitter {
     texture.on('failed', this.onTextureFailed);
     texture.on('freed', this.onTextureFreed);
 
-    // If the parent is a render texture, the initial texture status
-    // will be set to freed until the texture is processed by the
-    // Render RTT nodes. So we only need to listen fo changes and
-    // no need to check the texture.state until we restructure how
-    // textures are being processed.
-    if (this.parentHasRenderTexture) {
-      this.notifyParentRTTOfUpdate();
-      return;
-    }
-
     if (texture.state === 'loaded') {
       this.onTextureLoaded(texture, texture.dimensions!);
     } else if (texture.state === 'failed') {
@@ -1844,22 +1829,32 @@ export class CoreNode extends EventEmitter {
   }
 
   sortChildren() {
-    const changedCount = this.zIndexSortList.length;
-    if (changedCount === 0) {
+    const children = this.children;
+    const n = children.length;
+
+    if (n === 0) {
+      this.zIndexMin = 0;
+      this.zIndexMax = 0;
       return;
     }
-    const children = this.children;
-    let min = Infinity;
-    let max = -Infinity;
-    // find min and max zIndex
-    for (let i = 0; i < children.length; i++) {
+
+    let firstZIndex = children[0]!.props.zIndex;
+    let min = firstZIndex;
+    let max = firstZIndex;
+    let prevZIndex = firstZIndex;
+    let isSorted = true;
+
+    for (let i = 1; i < n; i++) {
       const zIndex = children[i]!.props.zIndex;
       if (zIndex < min) {
         min = zIndex;
-      }
-      if (zIndex > max) {
+      } else if (zIndex > max) {
         max = zIndex;
       }
+      if (prevZIndex > zIndex) {
+        isSorted = false;
+      }
+      prevZIndex = zIndex;
     }
 
     // update min and max zIndex
@@ -1867,23 +1862,10 @@ export class CoreNode extends EventEmitter {
     this.zIndexMax = max;
 
     // if min and max are the same, no need to sort
-    if (min === max) {
+    if (min === max || isSorted === true) {
       return;
     }
-
-    const n = children.length;
-    // decide whether to use incremental sort or bucket sort
-    const useIncremental = changedCount <= 2 || changedCount < n * 0.05;
-
-    // when changed count is less than 2 or 5% of total children, use incremental sort
-    if (useIncremental === true) {
-      incrementalRepositionByZIndex(this.zIndexSortList, children);
-    } else {
-      bucketSortByZIndex(children, min);
-    }
-
-    this.zIndexSortList.length = 0;
-    this.zIndexSortList = [];
+    bucketSortByZIndex(children, min);
   }
 
   removeChild(node: CoreNode, targetParent: CoreNode | null = null) {
@@ -1896,15 +1878,25 @@ export class CoreNode extends EventEmitter {
         autosizeTarget.detach(node);
       }
     }
-    removeChild(node, this.children);
+    const children = this.children;
+    removeChild(node, children);
+
+    if (children.length === 0) {
+      this.zIndexMin = 0;
+      this.zIndexMax = 0;
+      return;
+    }
+
+    const removedZIndex = node.zIndex;
+    if (removedZIndex === this.zIndexMin || removedZIndex === this.zIndexMax) {
+      this.setUpdateType(UpdateType.SortZIndexChildren);
+    }
   }
 
   addChild(node: CoreNode, previousParent: CoreNode | null = null) {
     const inRttCluster =
       this.props.rtt === true || this.parentHasRenderTexture === true;
     const children = this.children;
-    const min = this.zIndexMin;
-    const max = this.zIndexMax;
     const zIndex = node.zIndex;
     const autosizeTarget = this.autosizer || this.parentAutosizer;
     let attachToAutosizer = autosizeTarget !== null;
@@ -1942,8 +1934,19 @@ export class CoreNode extends EventEmitter {
 
     children.push(node);
 
-    if (min !== max || (zIndex !== min && zIndex !== max)) {
-      this.zIndexSortList.push(node);
+    if (children.length === 1) {
+      this.zIndexMin = zIndex;
+      this.zIndexMax = zIndex;
+    } else {
+      if (zIndex < this.zIndexMin) {
+        this.zIndexMin = zIndex;
+      }
+      if (zIndex > this.zIndexMax) {
+        this.zIndexMax = zIndex;
+      }
+    }
+
+    if (this.zIndexMax !== this.zIndexMin) {
       this.setUpdateType(UpdateType.SortZIndexChildren);
     }
     this.setUpdateType(UpdateType.Children);
@@ -2402,7 +2405,6 @@ export class CoreNode extends EventEmitter {
       const min = parent.zIndexMin;
       const max = parent.zIndexMax;
       if (min !== max || sanitizedValue < min || sanitizedValue > max) {
-        parent.zIndexSortList.push(this);
         parent.setUpdateType(UpdateType.SortZIndexChildren);
       }
     }
@@ -2737,7 +2739,8 @@ export class CoreNode extends EventEmitter {
   }
 
   draw(renderer: WebGlRenderer) {
-    const { glw, options, stage } = renderer;
+    const { glw, stage } = renderer;
+    const canvas = stage.platform!.canvas!;
     const shader = this.props.shader as any;
 
     stage.shManager.useShader(shader.program);
@@ -2751,7 +2754,7 @@ export class CoreNode extends EventEmitter {
       const clipWidth = Math.round(this.clippingRect.w * pixelRatio);
       const clipHeight = Math.round(this.clippingRect.h * pixelRatio);
       let clipY = Math.round(
-        options.canvas.height - clipHeight - this.clippingRect.y * pixelRatio,
+        canvas.height - clipHeight - this.clippingRect.y * pixelRatio,
       );
       // if parent has render texture, we need to adjust the scissor rect
       // to be relative to the parent's framebuffer

package/src/core/CoreTextureManager.ts

@@ -17,7 +17,6 @@
  * limitations under the License.
  */
 
-import { ImageWorkerManager } from './lib/ImageWorker.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import { ColorTexture } from './textures/ColorTexture.js';
 import { ImageTexture } from './textures/ImageTexture.js';
@@ -27,10 +26,6 @@ import { RenderTexture } from './textures/RenderTexture.js';
 import { Texture, TextureType } from './textures/Texture.js';
 import { EventEmitter } from '../common/EventEmitter.js';
 import type { Stage } from './Stage.js';
-import {
-  validateCreateImageBitmap,
-  type CreateImageBitmapSupport,
-} from './lib/validateImageBitmap.js';
 import type { Platform } from './platforms/Platform.js';
 import { TextureError, TextureErrorCode } from './TextureError.js';
 
@@ -195,23 +190,11 @@ export class CoreTextureManager extends EventEmitter {
   txConstructors: Partial<TextureMap> = {};
 
   public maxRetryCount: number;
-  private priorityQueue: Array<Texture> = [];
   private uploadTextureQueue: Array<Texture> = [];
-  private initialized = false;
   private stage: Stage;
-  private numImageWorkers: number;
 
   public platform: Platform;
 
-  imageWorkerManager: ImageWorkerManager | null = null;
-  hasCreateImageBitmap = false;
-  imageBitmapSupported = {
-    basic: false,
-    options: false,
-    full: false,
-  };
-
-  hasWorker = !!self.Worker;
   /**
    * Renderer that this texture manager is associated with
    *
@@ -235,35 +218,9 @@ export class CoreTextureManager extends EventEmitter {
   constructor(stage: Stage, settings: TextureManagerSettings) {
     super();
 
-    const { numImageWorkers, createImageBitmapSupport, maxRetryCount } =
-      settings;
-
     this.stage = stage;
     this.platform = stage.platform;
-    this.numImageWorkers = numImageWorkers;
-    this.maxRetryCount = maxRetryCount;
-
-    if (createImageBitmapSupport === 'auto') {
-      validateCreateImageBitmap(this.platform)
-        .then((result) => {
-          this.initialize(result);
-        })
-        .catch(() => {
-          console.warn(
-            '[Lightning] createImageBitmap is not supported on this browser. ImageTexture will be slower.',
-          );
-
-          // initialized without image worker manager and createImageBitmap
-          this.initialized = true;
-          this.emit('initialized');
-        });
-    } else {
-      this.initialize({
-        basic: createImageBitmapSupport === 'basic',
-        options: createImageBitmapSupport === 'options',
-        full: createImageBitmapSupport === 'full',
-      });
-    }
+    this.maxRetryCount = settings.maxRetryCount;
 
     this.registerTextureType('ImageTexture', ImageTexture);
     this.registerTextureType('ColorTexture', ColorTexture);
@@ -279,36 +236,6 @@ export class CoreTextureManager extends EventEmitter {
     this.txConstructors[textureType] = textureClass;
   }
 
-  private initialize(support: CreateImageBitmapSupport) {
-    this.hasCreateImageBitmap =
-      support.basic || support.options || support.full;
-    this.imageBitmapSupported = support;
-
-    if (this.hasCreateImageBitmap === false) {
-      console.warn(
-        '[Lightning] createImageBitmap is not supported on this browser. ImageTexture will be slower.',
-      );
-    }
-
-    if (
-      this.hasCreateImageBitmap === true &&
-      this.hasWorker === true &&
-      this.numImageWorkers > 0
-    ) {
-      this.imageWorkerManager = new ImageWorkerManager(
-        this.numImageWorkers,
-        support,
-      );
-    } else {
-      console.warn(
-        '[Lightning] Imageworker is 0 or not supported on this browser. Image loading will be slower.',
-      );
-    }
-
-    this.initialized = true;
-    this.emit('initialized');
-  }
-
   /**
    * Enqueue a texture for uploading to the GPU.
    *
@@ -333,7 +260,10 @@ export class CoreTextureManager extends EventEmitter {
     let texture: Texture | undefined;
     const TextureClass = this.txConstructors[textureType];
     if (!TextureClass) {
-      throw new Error(`Texture type "${textureType}" is not registered`);
+      throw new TextureError(
+        TextureErrorCode.TEXTURE_TYPE_NOT_REGISTERED,
+        `Texture type "${textureType}" is not registered`,
+      );
     }
     const resolvedProps = TextureClass.resolveDefaults(props as any);
     const cacheKey = TextureClass.makeCacheKey(resolvedProps as any);
@@ -371,12 +301,6 @@ export class CoreTextureManager extends EventEmitter {
       return;
     }
 
-    // if we're not initialized, just queue the texture into the priority queue
-    if (this.initialized === false) {
-      this.priorityQueue.push(texture);
-      return;
-    }
-
     texture.setState('loading');
 
     // Get texture data - early return on failure
@@ -418,7 +342,10 @@ export class CoreTextureManager extends EventEmitter {
       this.stage.txMemManager.criticalCleanupRequested === true
     ) {
       // we're at a critical memory threshold, don't upload textures
-      texture.setState('failed');
+      texture.setState(
+        'failed',
+        new TextureError(TextureErrorCode.MEMORY_THRESHOLD_EXCEEDED),
+      );
       return;
     }
 
@@ -465,29 +392,9 @@ export class CoreTextureManager extends EventEmitter {
    * @param maxProcessingTime - The maximum processing time in milliseconds
    */
   async processSome(maxProcessingTime: number): Promise<void> {
-    if (this.initialized === false) {
-      return;
-    }
-
     const platform = this.platform;
     const startTime = platform.getTimeStamp();
 
-    // Process priority queue
-    while (
-      this.priorityQueue.length > 0 &&
-      platform.getTimeStamp() - startTime < maxProcessingTime
-    ) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const texture = this.priorityQueue.pop()!;
-      try {
-        await texture.getTextureData();
-        await this.uploadTexture(texture);
-      } catch (error) {
-        console.error('Failed to process priority texture:', error);
-        // Continue with next texture instead of stopping entire queue
-      }
-    }
-
     // Process uploads - await each upload to prevent GPU overload
     while (
       this.uploadTextureQueue.length > 0 &&
@@ -505,7 +412,7 @@ export class CoreTextureManager extends EventEmitter {
   }
 
   public hasUpdates(): boolean {
-    return this.uploadTextureQueue.length > 0 || this.priorityQueue.length > 0;
+    return this.uploadTextureQueue.length > 0;
   }
 
   /**

package/src/core/Stage.ts

@@ -159,13 +159,11 @@ export class Stage {
    */
   constructor(public options: StageOptions) {
     const {
-      canvas,
       clearColor,
       appWidth,
       appHeight,
       boundsMargin,
       enableContextSpy,
-      forceWebGL2,
       numImageWorkers,
       textureMemory,
       renderEngine,
@@ -195,12 +193,6 @@ export class Stage {
       maxRetryCount,
     });
 
-    // Wait for the Texture Manager to initialize
-    // once it does, request a render
-    this.txManager.on('initialized', () => {
-      this.requestRender();
-    });
-
     this.txMemManager = new TextureMemoryManager(this, textureMemory);
 
     this.animationManager = new AnimationManager();
@@ -223,12 +215,7 @@ export class Stage {
     this.pixelRatio =
       options.devicePhysicalPixelRatio * options.deviceLogicalPixelRatio;
 
-    this.renderer = new renderEngine({
-      stage: this,
-      canvas,
-      contextSpy: this.contextSpy,
-      forceWebGL2,
-    });
+    this.renderer = new renderEngine(this);
 
     this.shManager = new CoreShaderManager(this);
 

package/src/core/animations/CoreAnimationController.ts

@@ -63,14 +63,17 @@ export class CoreAnimationController
     return this;
   }
 
-  stop(): IAnimationController {
+  stop(reset = true): IAnimationController {
     this.unregisterAnimation();
     if (this.stoppedResolve !== null) {
       this.stoppedResolve();
       this.stoppedResolve = null;
       this.emit('stopped', this);
     }
-    this.animation.reset();
+    if (reset === true) {
+      this.animation.reset();
+    }
+
     this.state = 'stopped';
     return this;
   }

package/src/core/lib/collectionUtils.ts

@@ -60,41 +60,6 @@ export const bucketSortByZIndex = (nodes: CoreNode[], min: number): void => {
   bucketIndices.length = 0;
 };
 
-export const incrementalRepositionByZIndex = (
-  changedNodes: CoreNode[],
-  nodes: CoreNode[],
-): void => {
-  for (let i = 0; i < changedNodes.length; i++) {
-    const node = changedNodes[i]!;
-    const currentIndex = findChildIndexById(node, nodes);
-    if (currentIndex === -1) continue;
-
-    const targetZIndex = node.props.zIndex;
-
-    //binary search for correct insertion position
-    let left = 0;
-    let right = nodes.length;
-
-    while (left < right) {
-      const mid = (left + right) >>> 1;
-      if (nodes[mid]!.props.zIndex <= targetZIndex) {
-        left = mid + 1;
-      } else {
-        right = mid;
-      }
-    }
-
-    //adjust target position if it's after the current position
-    const targetIndex = left > currentIndex ? left - 1 : left;
-
-    //only reposition if target is different from current
-    if (targetIndex !== currentIndex) {
-      nodes.splice(currentIndex, 1);
-      nodes.splice(targetIndex, 0, node);
-    }
-  }
-};
-
 export const findChildIndexById = (
   node: CoreNode,
   children: CoreNode[],

package/src/core/lib/utils.ts

@@ -19,8 +19,6 @@
 
 import type { Vec4 } from '../renderers/webgl/internal/ShaderUtils.js';
 
-export const PROTOCOL_REGEX = /^(data|ftps?|https?):/;
-
 export type RGBA = [r: number, g: number, b: number, a: number];
 
 export const getNormalizedRgbaComponents = (rgba: number): RGBA => {
@@ -289,35 +287,6 @@ export function createPreloadBounds(
   );
 }
 
-export function convertUrlToAbsolute(url: string): string {
-  // handle local file imports if the url isn't remote resource or data blob
-  if (self.location.protocol === 'file:' && !PROTOCOL_REGEX.test(url)) {
-    const path = self.location.pathname.split('/');
-    path.pop();
-    const basePath = path.join('/');
-    const baseUrl = self.location.protocol + '//' + basePath;
-
-    // check if url has a leading dot
-    if (url.charAt(0) === '.') {
-      url = url.slice(1);
-    }
-
-    // check if url has a leading slash
-    if (url.charAt(0) === '/') {
-      url = url.slice(1);
-    }
-
-    return baseUrl + '/' + url;
-  }
-
-  const absoluteUrl = new URL(url, self.location.href);
-  return absoluteUrl.href;
-}
-
-export function isBase64Image(src: string) {
-  return src.startsWith('data:') === true;
-}
-
 export function calcFactoredRadius(
   radius: number,
   width: number,
@@ -366,50 +335,3 @@ export function calcFactoredRadiusArray(
   result[3] *= factor;
   return result;
 }
-
-export function dataURIToBlob(dataURI: string): Blob {
-  dataURI = dataURI.replace(/^data:/, '');
-
-  const type = dataURI.match(/image\/[^;]+/)?.[0] || '';
-  const base64 = dataURI.replace(/^[^,]+,/, '');
-
-  const sliceSize = 1024;
-  const byteCharacters = atob(base64);
-  const bytesLength = byteCharacters.length;
-  const slicesCount = Math.ceil(bytesLength / sliceSize);
-  const byteArrays = new Array(slicesCount);
-
-  for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
-    const begin = sliceIndex * sliceSize;
-    const end = Math.min(begin + sliceSize, bytesLength);
-
-    const bytes = new Array(end - begin);
-    for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
-      bytes[i] = byteCharacters[offset]?.charCodeAt(0);
-    }
-    byteArrays[sliceIndex] = new Uint8Array(bytes);
-  }
-  return new Blob(byteArrays, { type });
-}
-
-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);
-  });
-}