@lightningjs/renderer 3.0.0-beta22 → 3.0.0-beta23

package/README.md

@@ -45,6 +45,99 @@ Any JavaScript language features or browser APIs that cannot be automatically tr
 
 For a more detailed and comprehensive list of browsers and their features please see [browsers](./BROWSERS.md).
 
+## Platform Architecture
+
+The Lightning 3 Renderer uses a modular platform architecture that allows it to adapt to different browser capabilities and environments. This enables optimal performance across a wide range of devices, from modern browsers to legacy embedded systems.
+
+### Available Platforms
+
+The Renderer includes several platform implementations, each tailored for specific browser capabilities:
+
+#### WebPlatform (Default)
+
+The standard platform for modern browsers with full WebGL and createImageBitmap support.
+
+- Uses XMLHttpRequest for loading resources
+- Full createImageBitmap API with options (premultiplyAlpha, colorSpaceConversion, imageOrientation)
+- Supports image cropping
+- Multi-threaded image processing via Web Workers
+- **Use case:** Modern browsers, default choice for most applications
+
+#### WebPlatformNext
+
+Platform using the modern Fetch API instead of XMLHttpRequest.
+
+- Uses Fetch API for loading resources (promise-based, Service Worker compatible)
+- Full createImageBitmap API with options
+- Supports image cropping
+- Multi-threaded image processing via Web Workers
+- **Use case:** Modern browsers where Fetch API is preferred, progressive web apps
+
+#### WebPlatformChrome50
+
+Compatibility platform for browsers with limited createImageBitmap support (Chrome 50-51).
+
+- Uses XMLHttpRequest for loading resources
+- Limited createImageBitmap API (no options or cropping parameters)
+- Multi-threaded image processing via Web Workers (if enabled)
+- **Use case:** Chrome 50-51, browsers with basic createImageBitmap support
+
+#### WebPlatformLegacy
+
+Legacy platform for older browsers without createImageBitmap support.
+
+- Uses direct Image element loading (no blob conversion for URLs)
+- HTMLImageElement instead of createImageBitmap
+- Single-threaded image processing (no Web Workers)
+- No image cropping support
+- No compressed texture support
+- **Use case:** Chrome 38-49, older embedded device browsers
+
+### Using a Platform
+
+Platforms can be specified when initializing the Renderer:
+
+```ts
+import { RendererMain } from '@lightningjs/renderer';
+import { WebGlRenderer } from '@lightningjs/renderer/webgl';
+import {
+  WebPlatform,
+  WebPlatformNext,
+  WebPlatformChrome50,
+  WebPlatformLegacy,
+} from '@lightningjs/renderer/platforms';
+
+const renderer = new RendererMain(
+  {
+    appWidth: 1920,
+    appHeight: 1080,
+    renderEngine: WebGlRenderer,
+    platform: WebPlatformLegacy, // Use legacy platform for older browsers
+    // ...Other Renderer Config
+  },
+  'app',
+);
+```
+
+**Note:** `WebPlatformLegacy` automatically sets `numImageWorkers` to 0 since it doesn't support Web Workers.
+
+### Creating Custom Platforms
+
+You can create your own custom platform tailored to your specific device or environment by extending the `Platform` base class or one of the existing platform implementations.
+
+**Key methods you can override:**
+
+- `fetch(url: string): Promise<Blob>` - Resource loading
+- `createImage(...)` - Image bitmap creation
+- `loadImage(...)` - Complete image loading pipeline
+- `loadSvg(...)` - SVG loading
+- `loadCompressedTexture(...)` - Compressed texture loading
+- `createCanvas()` - Canvas element creation
+- `createContext()` - WebGL context creation
+- `startLoop(stage)` - Animation loop implementation
+
+This allows you to optimize the Renderer for proprietary platforms, embedded systems, or environments with unique capabilities and constraints.
+
 ## Example Tests
 
 The Example Tests sub-project define a set of tests for various Renderer

package/dist/exports/platform.d.ts

@@ -0,0 +1,7 @@
+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';
+export { GlContextWrapper } from '../src/core/platforms/GlContextWrapper.js';
+export { WebGlContextWrapper } from '../src/core/platforms/web/WebGlContextWrapper.js';

package/dist/exports/platform.js

@@ -0,0 +1,27 @@
+/*
+ * 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, } 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';
+//# sourceMappingURL=platform.js.map

package/dist/exports/platform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.js","sourceRoot":"","sources":["../../exports/platform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EACL,QAAQ,GAET,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,kDAAkD,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAEnF,sBAAsB;AACtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,kDAAkD,CAAC"}

package/dist/src/core/AutosizeManager.d.ts

@@ -0,0 +1,29 @@
+import type { CoreNode } from './CoreNode.js';
+/**
+ * Result of autosize calculation containing the new dimensions
+ */
+interface AutosizeResult {
+    width: number;
+    height: number;
+    hasChanged: boolean;
+}
+/**
+ * Creates an autosize manager for efficient child bounds calculation
+ *
+ * @remarks
+ * This function creates a closure-based manager that tracks child transform
+ * changes and calculates parent dimensions based on children's bounding boxes.
+ * It's optimized for performance with minimal allocations and fast lookups.
+ *
+ * @param parentNode - The autosize parent node
+ * @returns Object with autosize management methods
+ */
+export declare function createAutosizeManager(parentNode: CoreNode): {
+    addOrUpdateChild: (child: CoreNode) => void;
+    removeChild: (child: CoreNode) => void;
+    calculateAutosize: () => AutosizeResult;
+    deactivate: () => void;
+    readonly active: boolean;
+    readonly childCount: number;
+};
+export {};

package/dist/src/core/AutosizeManager.js

@@ -0,0 +1,169 @@
+/*
+ * 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 { Matrix3d } from './lib/Matrix3d.js';
+/**
+ * Creates an autosize manager for efficient child bounds calculation
+ *
+ * @remarks
+ * This function creates a closure-based manager that tracks child transform
+ * changes and calculates parent dimensions based on children's bounding boxes.
+ * It's optimized for performance with minimal allocations and fast lookups.
+ *
+ * @param parentNode - The autosize parent node
+ * @returns Object with autosize management methods
+ */
+export function createAutosizeManager(parentNode) {
+    const childDataMap = new Map();
+    let isActive = true;
+    let lastWidth = 0;
+    let lastHeight = 0;
+    let lastHasChanged = false;
+    const corners = [
+        { x: 0, y: 0 },
+        { x: 0, y: 0 },
+        { x: 0, y: 0 },
+        { x: 0, y: 0 },
+    ];
+    /**
+     * Add or update a child node in the autosize calculation chain
+     * @param child - Child node to add or update
+     */
+    const addOrUpdateChild = (child) => {
+        if (isActive === false)
+            return;
+        if (child === parentNode)
+            return; // Avoid circular references
+        const currentTransform = child.localTransform || Matrix3d.identity();
+        const existingData = childDataMap.get(child);
+        if (existingData !== undefined) {
+            // Update existing child
+            Matrix3d.copy(currentTransform, existingData.localTransform);
+            existingData.width = child.w;
+            existingData.height = child.h;
+            existingData.hasChanged = true;
+        }
+        else {
+            // Add new child
+            childDataMap.set(child, {
+                localTransform: Matrix3d.copy(currentTransform),
+                hasChanged: true,
+                width: child.w,
+                height: child.h,
+            });
+        }
+        // Mark parent for recalculation
+        parentNode.autosizeNeedsUpdate = true;
+    };
+    /**
+     * Remove a child node from the autosize calculation chain
+     * @param child - Child node to remove
+     */
+    const removeChild = (child) => {
+        if (childDataMap.delete(child) === true) {
+            parentNode.autosizeNeedsUpdate = true;
+        }
+    };
+    /**
+     * Calculate the autosize dimensions based on all child bounds
+     * @returns Autosize calculation result
+     */
+    const calculateAutosize = () => {
+        if (isActive === false || childDataMap.size === 0) {
+            return { width: 0, height: 0, hasChanged: false };
+        }
+        let hasAnyChildChanged = false;
+        for (const childData of childDataMap.values()) {
+            if (childData.hasChanged) {
+                hasAnyChildChanged = true;
+                break;
+            }
+        }
+        if (hasAnyChildChanged === false) {
+            return {
+                width: lastWidth,
+                height: lastHeight,
+                hasChanged: lastHasChanged,
+            };
+        }
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (const [child, childData] of childDataMap) {
+            if (!child.isRenderable)
+                continue;
+            const transform = child.localTransform || Matrix3d.identity();
+            const width = childData.width;
+            const height = childData.height;
+            corners[0].x = 0;
+            corners[0].y = 0;
+            corners[1].x = width;
+            corners[1].y = 0;
+            corners[2].x = width;
+            corners[2].y = height;
+            corners[3].x = 0;
+            corners[3].y = height;
+            for (let i = 0; i < 4; i++) {
+                const corner = corners[i];
+                const localX = transform.ta * corner.x + transform.tb * corner.y + transform.tx;
+                const localY = transform.tc * corner.x + transform.td * corner.y + transform.ty;
+                if (localX < minX)
+                    minX = localX;
+                if (localY < minY)
+                    minY = localY;
+                if (localX > maxX)
+                    maxX = localX;
+                if (localY > maxY)
+                    maxY = localY;
+            }
+            childData.hasChanged = false;
+        }
+        const newWidth = maxX > minX ? maxX - minX : 0;
+        const newHeight = maxY > minY ? maxY - minY : 0;
+        const dimensionsChanged = lastWidth !== newWidth || lastHeight !== newHeight;
+        lastWidth = newWidth;
+        lastHeight = newHeight;
+        lastHasChanged = dimensionsChanged;
+        return {
+            width: newWidth,
+            height: newHeight,
+            hasChanged: dimensionsChanged,
+        };
+    };
+    /**
+     * Deactivate this autosize manager and clean up resources
+     */
+    const deactivate = () => {
+        isActive = false;
+        childDataMap.clear();
+    };
+    return {
+        addOrUpdateChild,
+        removeChild,
+        calculateAutosize,
+        deactivate,
+        get active() {
+            return isActive;
+        },
+        get childCount() {
+            return childDataMap.size;
+        },
+    };
+}
+//# sourceMappingURL=AutosizeManager.js.map

package/dist/src/core/AutosizeManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutosizeManager.js","sourceRoot":"","sources":["../../../src/core/AutosizeManager.ts"],"names":[],"mappings":"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"}

package/dist/src/core/CoreNode.js

@@ -330,15 +330,6 @@ export class CoreNode extends EventEmitter {
         texture.on('loaded', this.onTextureLoaded);
         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);
         }
@@ -1072,8 +1063,6 @@ export class CoreNode extends EventEmitter {
     addChild(node, previousParent = 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;
@@ -1102,7 +1091,13 @@ export class CoreNode extends EventEmitter {
             node.markChildrenWithRTT(this);
         }
         children.push(node);
-        if (min !== max || (zIndex !== min && zIndex !== max)) {
+        if (zIndex < this.zIndexMin) {
+            this.zIndexMin = zIndex;
+        }
+        if (zIndex > this.zIndexMax) {
+            this.zIndexMax = zIndex;
+        }
+        if (this.zIndexMax !== this.zIndexMin) {
             this.zIndexSortList.push(node);
             this.setUpdateType(UpdateType.SortZIndexChildren);
         }
@@ -1746,7 +1741,8 @@ export class CoreNode extends EventEmitter {
         return length;
     }
     draw(renderer) {
-        const { glw, options, stage } = renderer;
+        const { glw, stage } = renderer;
+        const canvas = stage.platform.canvas;
         const shader = this.props.shader;
         stage.shManager.useShader(shader.program);
         shader.program.bindRenderOp(this);
@@ -1756,7 +1752,7 @@ export class CoreNode extends EventEmitter {
             const clipX = Math.round(this.clippingRect.x * pixelRatio);
             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);
+            let clipY = Math.round(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
             if (this.parentHasRenderTexture) {