@lightningjs/renderer 3.0.0-beta22 → 3.0.0-beta24

package/src/core/platforms/web/WebPlatform.ts

@@ -1,5 +1,37 @@
-import { Platform } from '../Platform.js';
+/*
+ * 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.
+ */
+
+import { Platform, type PlatformSettings } from '../Platform.js';
+import { ImageWorkerManager } from './lib/ImageWorker.js';
 import type { Stage } from '../../Stage.js';
+import {
+  dataURIToBlob,
+  isBase64Image,
+  convertUrlToAbsolute,
+  createWebGLContext,
+} from './lib/utils.js';
+
+import type { ImageResponse } from '../../textures/ImageTexture.js';
+import { loadSvg } from './lib/textureSvg.js';
+import { loadCompressedTexture } from './lib/textureCompression.js';
+import { WebGlContextWrapper } from './WebGlContextWrapper.js';
+import type { GlContextWrapper } from '../GlContextWrapper.js';
 
 /**
  * make fontface add not show errors
@@ -9,13 +41,33 @@ interface FontFaceSetWithAdd extends FontFaceSet {
 }
 
 export class WebPlatform extends Platform {
+  private useImageWorker: boolean;
+  private imageWorkerManager: ImageWorkerManager | null = null;
+  private hasWorker = !!self.Worker;
+
+  constructor(settings: PlatformSettings = {}) {
+    super(settings);
+
+    const numImageWorkers = settings.numImageWorkers ?? 0;
+    this.useImageWorker = numImageWorkers > 0 && this.hasWorker;
+
+    if (this.useImageWorker === true) {
+      this.imageWorkerManager = new ImageWorkerManager(numImageWorkers);
+    }
+  }
+
   ////////////////////////
   // Platform-specific methods
   ////////////////////////
 
   override createCanvas(): HTMLCanvasElement {
-    const canvas = document.createElement('canvas');
-    return canvas;
+    return document.createElement('canvas');
+  }
+
+  override createContext(): GlContextWrapper {
+    const gl = createWebGLContext(this.canvas!, this.settings.forceWebGL2);
+    this.glw = new WebGlContextWrapper(gl);
+    return this.glw;
   }
 
   override getElementById(id: string): HTMLElement | null {
@@ -76,7 +128,11 @@ export class WebPlatform extends Platform {
         return;
       }
 
-      isIdle = false;
+      if (isIdle === true) {
+        stage.eventBus.emit('active');
+        isIdle = false;
+      }
+
       stage.drawFrame();
       stage.flushFrameEvents();
 
@@ -97,31 +153,124 @@ export class WebPlatform extends Platform {
   }
 
   ////////////////////////
-  // ImageBitmap
+  // Image handling
   ////////////////////////
 
-  override createImageBitmap(
-    blob: ImageBitmapSource,
-    sxOrOptions?: number | ImageBitmapOptions,
-    sy?: number,
-    sw?: number,
-    sh?: number,
-    options?: ImageBitmapOptions,
-  ): Promise<ImageBitmap> {
-    if (typeof sxOrOptions === 'number') {
-      return createImageBitmap(
-        blob,
-        sxOrOptions,
-        sy ?? 0,
-        sw ?? 0,
-        sh ?? 0,
-        options,
+  override fetch(url: string): Promise<Blob> {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.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);
+    });
+  }
+
+  override async createImage(
+    blob: Blob,
+    premultiplyAlpha: boolean | null,
+    sx: number | null,
+    sy: number | null,
+    sw: number | null,
+    sh: number | null,
+  ): Promise<ImageResponse> {
+    const hasAlphaChannel = premultiplyAlpha ?? blob.type.includes('image/png');
+
+    if (sw !== null && sh !== null) {
+      // createImageBitmap with crop
+      const bitmap = await createImageBitmap(blob, sx || 0, sy || 0, sw, sh, {
+        premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
+        colorSpaceConversion: 'none',
+        imageOrientation: 'none',
+      });
+      return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
+    }
+
+    // default createImageBitmap without crop but with options
+    const bitmap = await createImageBitmap(blob, {
+      premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
+      colorSpaceConversion: 'none',
+      imageOrientation: 'none',
+    });
+
+    return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
+  }
+
+  override async loadImage(
+    src: string,
+    premultiplyAlpha: boolean | null,
+    sx?: number | null,
+    sy?: number | null,
+    sw?: number | null,
+    sh?: number | null,
+  ): Promise<ImageResponse> {
+    const isBase64 = isBase64Image(src);
+    const absoluteSrc = convertUrlToAbsolute(src);
+    const x = sx ?? null;
+    const y = sy ?? null;
+    const width = sw ?? null;
+    const height = sh ?? null;
+
+    // check if image worker is enabled
+    if (this.imageWorkerManager !== null && isBase64 === false) {
+      return this.imageWorkerManager.getImage(
+        absoluteSrc,
+        premultiplyAlpha,
+        x,
+        y,
+        width,
+        height,
       );
+    }
+
+    // fallback to main thread loading
+    let blob: Blob;
+    if (isBase64Image(src) === true) {
+      blob = dataURIToBlob(src);
     } else {
-      return createImageBitmap(blob, sxOrOptions);
+      blob = await this.fetch(absoluteSrc);
     }
+
+    return this.createImage(blob, premultiplyAlpha, x, y, width, height);
+  }
+
+  override async loadSvg(
+    src: string,
+    width: number | null,
+    height: number | null,
+    sx?: number | null,
+    sy?: number | null,
+    sw?: number | null,
+    sh?: number | null,
+  ): Promise<ImageResponse> {
+    return loadSvg(
+      convertUrlToAbsolute(src),
+      width,
+      height,
+      sx ?? null,
+      sy ?? null,
+      sw ?? null,
+      sh ?? null,
+    );
+  }
+
+  override async loadCompressedTexture(src: string): Promise<ImageResponse> {
+    return loadCompressedTexture(convertUrlToAbsolute(src));
   }
 
+  ////////////////////////
+  // Utilities
+  ////////////////////////
+
   getTimeStamp(): number {
     return performance ? performance.now() : Date.now();
   }

package/src/core/platforms/web/WebPlatformChrome50.ts

@@ -0,0 +1,57 @@
+/*
+ * 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.
+ */
+
+import { WebPlatform } from './WebPlatform.js';
+import type { ImageResponse } from '../../textures/ImageTexture.js';
+
+/**
+ * Chrome 50 Web Platform implementation with limited createImageBitmap support
+ *
+ * @remarks
+ * This platform is designed for Chrome 50 and similar browsers that support
+ * createImageBitmap but with a limited signature (no options or cropping parameters).
+ *
+ * Limitations:
+ * - createImageBitmap is called without options (premultiplyAlpha, colorSpaceConversion, imageOrientation)
+ * - Image cropping (sx, sy, sw, sh parameters) is not supported
+ * - Image workers can still be used if enabled via settings
+ */
+export class WebPlatformChrome50 extends WebPlatform {
+  override async createImage(
+    blob: Blob,
+    premultiplyAlpha: boolean | null,
+    // Cropping parameters are not supported in Chrome 50
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    sx: number | null,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    sy: number | null,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    sw: number | null,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    sh: number | null,
+  ): Promise<ImageResponse> {
+    const hasAlphaChannel = premultiplyAlpha ?? blob.type.includes('image/png');
+
+    // Chrome 50 createImageBitmap signature: createImageBitmap(blob)
+    // No options or cropping parameters supported
+    const bitmap = await createImageBitmap(blob);
+
+    return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
+  }
+}

package/src/core/platforms/web/WebPlatformLegacy.ts

@@ -0,0 +1,140 @@
+/*
+ * 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.
+ */
+
+import { WebPlatform } from './WebPlatform.js';
+import type { PlatformSettings } from '../Platform.js';
+import type { ImageResponse } from '../../textures/ImageTexture.js';
+import {
+  isBase64Image,
+  dataURIToBlob,
+  convertUrlToAbsolute,
+} from './lib/utils.js';
+
+/**
+ * Legacy Web Platform implementation that uses Image() instead of createImageBitmap
+ *
+ * @remarks
+ * This platform is designed for environments that don't support createImageBitmap API,
+ * or for compatibility with older browsers. It uses the traditional HTMLImageElement
+ * approach for image loading.
+ *
+ */
+export class WebPlatformLegacy extends WebPlatform {
+  constructor(settings: PlatformSettings = {}) {
+    // Force image workers to be disabled in legacy mode
+    super({ ...settings, numImageWorkers: 0 });
+  }
+
+  override async loadImage(
+    src: string,
+    premultiplyAlpha: boolean | null,
+    sx?: number | null,
+    sy?: number | null,
+    sw?: number | null,
+    sh?: number | null,
+  ): Promise<ImageResponse> {
+    const isBase64 = isBase64Image(src);
+    const absoluteSrc = convertUrlToAbsolute(src);
+
+    // For base64 images, use blob conversion
+    if (isBase64 === true) {
+      const blob = dataURIToBlob(src);
+      return this.createImage(
+        blob,
+        premultiplyAlpha,
+        sx ?? null,
+        sy ?? null,
+        sw ?? null,
+        sh ?? null,
+      );
+    }
+
+    // For regular URLs, load directly without blob conversion
+    const hasAlpha =
+      premultiplyAlpha ?? absoluteSrc.toLowerCase().endsWith('.png');
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+
+    return new Promise<ImageResponse>((resolve, reject) => {
+      img.onload = () => {
+        resolve({ data: img, premultiplyAlpha: hasAlpha });
+      };
+
+      img.onerror = (err) => {
+        const errorMessage =
+          err instanceof Error
+            ? err.message
+            : err instanceof Event
+            ? `Image loading failed for ${img.src}`
+            : 'Unknown image loading error';
+        reject(new Error(`Image loading failed: ${errorMessage}`));
+      };
+
+      img.src = absoluteSrc;
+    });
+  }
+
+  override async createImage(
+    blob: Blob,
+    premultiplyAlpha: boolean | null,
+    // Cropping parameters are not supported in legacy mode
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    sx: number | null,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    sy: number | null,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    sw: number | null,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    sh: number | null,
+  ): Promise<ImageResponse> {
+    const hasAlpha = premultiplyAlpha ?? blob.type.includes('image/png');
+    const src = URL.createObjectURL(blob);
+    const img = new Image();
+
+    if (typeof src === 'string' && isBase64Image(src) === false) {
+      img.crossOrigin = 'anonymous';
+    }
+
+    return new Promise<ImageResponse>((resolve, reject) => {
+      img.onload = () => {
+        URL.revokeObjectURL(src);
+        resolve({ data: img, premultiplyAlpha: hasAlpha });
+      };
+
+      img.onerror = (err) => {
+        URL.revokeObjectURL(src);
+        const errorMessage =
+          err instanceof Error
+            ? err.message
+            : err instanceof Event
+            ? `Image loading failed for ${img.src}`
+            : 'Unknown image loading error';
+        reject(new Error(`Image loading failed: ${errorMessage}`));
+      };
+
+      img.src = src;
+    });
+  }
+
+  override async loadCompressedTexture(src: string): Promise<ImageResponse> {
+    throw new Error(
+      `Compressed textures are not supported in legacy mode. Attempted to load: ${src}`,
+    );
+  }
+}

package/src/core/platforms/web/WebPlatformNext.ts

@@ -0,0 +1,57 @@
+/*
+ * 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.
+ */
+
+import { WebPlatform } from './WebPlatform.js';
+
+/**
+ * Next-generation Web Platform implementation that uses Fetch API
+ *
+ * @remarks
+ * This platform uses the modern Fetch API instead of XMLHttpRequest for
+ * loading image resources. The Fetch API provides a more modern, promise-based
+ * interface for network requests and better streaming capabilities.
+ *
+ * Benefits over XMLHttpRequest:
+ * - Promise-based (no callback-based API)
+ * - Better error handling
+ * - More consistent across browsers
+ * - Better streaming support
+ * - Service Worker compatible
+ *
+ * All other platform features remain the same as WebPlatform.
+ */
+export class WebPlatformNext extends WebPlatform {
+  override async fetch(url: string): Promise<Blob> {
+    try {
+      const response = await fetch(url);
+
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch resource: ${response.status} ${response.statusText}`,
+        );
+      }
+
+      return await response.blob();
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown fetch error';
+      throw new Error(`Fetch failed for ${url}: ${errorMessage}`);
+    }
+  }
+}

package/src/core/{lib → platforms/web/lib}/ImageWorker.ts

@@ -17,19 +17,14 @@
  * limitations under the License.
  */
 
-import type { CreateImageBitmapSupport } from '../lib/validateImageBitmap.js';
-import { type TextureData } from '../textures/Texture.js';
+import type { ImageResponse } from '../../../textures/ImageTexture.js';
 
 type MessageCallback = [(value: any) => void, (reason: any) => void];
-interface getImageReturn {
-  data: ImageBitmap;
-  premultiplyAlpha: boolean | null;
-}
 
 interface ImageWorkerMessage {
   id: number;
   src: string;
-  data: getImageReturn;
+  data: ImageResponse;
   error: string;
   sx: number | null;
   sy: number | null;
@@ -59,15 +54,8 @@ function createImageWorker() {
     y: number | null,
     width: number | null,
     height: number | null,
-    options: {
-      supportsOptionsCreateImageBitmap: boolean;
-      supportsFullCreateImageBitmap: boolean;
-    },
-  ): Promise<getImageReturn> {
+  ): Promise<ImageResponse> {
     return new Promise(function (resolve, reject) {
-      var supportsOptionsCreateImageBitmap =
-        options.supportsOptionsCreateImageBitmap;
-      var supportsFullCreateImageBitmap = options.supportsFullCreateImageBitmap;
       var xhr = new XMLHttpRequest();
       xhr.open('GET', src, true);
       xhr.responseType = 'blob';
@@ -91,11 +79,7 @@ function createImageWorker() {
             : hasAlphaChannel(blob.type);
 
         // createImageBitmap with crop and options
-        if (
-          supportsFullCreateImageBitmap === true &&
-          width !== null &&
-          height !== null
-        ) {
+        if (width !== null && height !== null) {
           createImageBitmap(blob, x || 0, y || 0, width, height, {
             premultiplyAlpha: withAlphaChannel ? 'premultiply' : 'none',
             colorSpaceConversion: 'none',
@@ -108,19 +92,6 @@ function createImageWorker() {
               reject(error);
             });
           return;
-        } else if (
-          supportsOptionsCreateImageBitmap === false &&
-          supportsOptionsCreateImageBitmap === false
-        ) {
-          // Fallback for browsers that do not support createImageBitmap with options
-          // this is supported for Chrome v50 to v52/54 that doesn't support options
-          createImageBitmap(blob)
-            .then(function (data) {
-              resolve({ data, premultiplyAlpha: premultiplyAlpha });
-            })
-            .catch(function (error) {
-              reject(error);
-            });
         } else {
           createImageBitmap(blob, {
             premultiplyAlpha: withAlphaChannel ? 'premultiply' : 'none',
@@ -155,14 +126,7 @@ function createImageWorker() {
     var width = event.data.sw;
     var height = event.data.sh;
 
-    // these will be set to true if the browser supports the createImageBitmap options or full
-    var supportsOptionsCreateImageBitmap = false;
-    var supportsFullCreateImageBitmap = false;
-
-    getImage(src, premultiplyAlpha, x, y, width, height, {
-      supportsOptionsCreateImageBitmap,
-      supportsFullCreateImageBitmap,
-    })
+    getImage(src, premultiplyAlpha, x, y, width, height)
       .then(function (data) {
         // @ts-ignore ts has wrong postMessage signature
         self.postMessage({ id: id, src: src, data: data }, [data.data]);
@@ -181,14 +145,8 @@ export class ImageWorkerManager {
   workerLoad: number[] = [];
   nextId = 0;
 
-  constructor(
-    numImageWorkers: number,
-    createImageBitmapSupport: CreateImageBitmapSupport,
-  ) {
-    this.workers = this.createWorkers(
-      numImageWorkers,
-      createImageBitmapSupport,
-    );
+  constructor(numImageWorkers: number) {
+    this.workers = this.createWorkers(numImageWorkers);
     this.workers.forEach((worker, index) => {
       worker.onmessage = (event) => this.handleMessage(event, index);
     });
@@ -213,36 +171,14 @@ export class ImageWorkerManager {
     }
   }
 
-  private createWorkers(
-    numWorkers = 1,
-    createImageBitmapSupport: CreateImageBitmapSupport,
-  ): Worker[] {
+  private createWorkers(numWorkers = 1): Worker[] {
     let workerCode = `(${createImageWorker.toString()})()`;
 
-    // Replace placeholders with actual initialization values
-    if (createImageBitmapSupport.options === true) {
-      workerCode = workerCode.replace(
-        'var supportsOptionsCreateImageBitmap = false;',
-        'var supportsOptionsCreateImageBitmap = true;',
-      );
-    }
-
-    if (createImageBitmapSupport.full === true) {
-      workerCode = workerCode.replace(
-        'var supportsOptionsCreateImageBitmap = false;',
-        'var supportsOptionsCreateImageBitmap = true;',
-      );
-
-      workerCode = workerCode.replace(
-        'var supportsFullCreateImageBitmap = false;',
-        'var supportsFullCreateImageBitmap = true;',
-      );
-    }
-
     workerCode = workerCode.replace('"use strict";', '');
     const blob: Blob = new Blob([workerCode], {
       type: 'application/javascript',
     });
+
     const blobURL: string = (self.URL ? URL : webkitURL).createObjectURL(blob);
     const workers: Worker[] = [];
     for (let i = 0; i < numWorkers; i++) {
@@ -280,7 +216,7 @@ export class ImageWorkerManager {
     sy: number | null,
     sw: number | null,
     sh: number | null,
-  ): Promise<TextureData> {
+  ): Promise<ImageResponse> {
     return new Promise((resolve, reject) => {
       try {
         if (this.workers) {

package/src/core/platforms/web/lib/createImageBitmap.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 const createImageBitmap = (
+  blob: ImageBitmapSource,
+  sxOrOptions?: number | ImageBitmapOptions,
+  sy?: number,
+  sw?: number,
+  sh?: number,
+  options?: ImageBitmapOptions,
+): Promise<ImageBitmap> => {
+  if (typeof sxOrOptions === 'number') {
+    return createImageBitmap(
+      blob,
+      sxOrOptions,
+      sy ?? 0,
+      sw ?? 0,
+      sh ?? 0,
+      options,
+    );
+  } else {
+    return createImageBitmap(blob, sxOrOptions);
+  }
+};