@lightningjs/renderer 2.7.2 → 2.9.0-beta1

package/src/core/CoreTextureManager.ts

@@ -25,6 +25,7 @@ import { NoiseTexture } from './textures/NoiseTexture.js';
 import { SubTexture } from './textures/SubTexture.js';
 import { RenderTexture } from './textures/RenderTexture.js';
 import type { Texture } from './textures/Texture.js';
+import { EventEmitter } from '../common/EventEmitter.js';
 
 /**
  * Augmentable map of texture class types
@@ -42,6 +43,12 @@ export interface TextureMap {
   RenderTexture: typeof RenderTexture;
 }
 
+export interface CreateImageBitmapSupport {
+  basic: boolean; // Supports createImageBitmap(image)
+  options: boolean; // Supports createImageBitmap(image, options)
+  full: boolean; // Supports createImageBitmap(image, sx, sy, sw, sh, options)
+}
+
 export type ExtractProps<Type> = Type extends { z$__type__Props: infer Props }
   ? Props
   : never;
@@ -138,7 +145,7 @@ export interface TextureOptions {
   resizeMode?: ResizeModeOptions;
 }
 
-export class CoreTextureManager {
+export class CoreTextureManager extends EventEmitter {
   /**
    * Map of textures by cache key
    */
@@ -156,6 +163,12 @@ export class CoreTextureManager {
 
   imageWorkerManager: ImageWorkerManager | null = null;
   hasCreateImageBitmap = !!self.createImageBitmap;
+  imageBitmapSupported = {
+    basic: false,
+    options: false,
+    full: false,
+  };
+
   hasWorker = !!self.Worker;
   /**
    * Renderer that this texture manager is associated with
@@ -178,16 +191,44 @@ export class CoreTextureManager {
   frameTime = 0;
 
   constructor(numImageWorkers: number) {
-    // Register default known texture types
-    if (this.hasCreateImageBitmap && this.hasWorker && numImageWorkers > 0) {
-      this.imageWorkerManager = new ImageWorkerManager(numImageWorkers);
-    }
+    super();
+    this.validateCreateImageBitmap()
+      .then((result) => {
+        this.hasCreateImageBitmap =
+          result.basic || result.options || result.full;
+        this.imageBitmapSupported = result;
 
-    if (!this.hasCreateImageBitmap) {
-      console.warn(
-        '[Lightning] createImageBitmap is not supported on this browser. ImageTexture will be slower.',
-      );
-    }
+        if (!this.hasCreateImageBitmap) {
+          console.warn(
+            '[Lightning] createImageBitmap is not supported on this browser. ImageTexture will be slower.',
+          );
+        }
+
+        if (
+          this.hasCreateImageBitmap &&
+          this.hasWorker &&
+          numImageWorkers > 0
+        ) {
+          this.imageWorkerManager = new ImageWorkerManager(
+            numImageWorkers,
+            result,
+          );
+        } else {
+          console.warn(
+            '[Lightning] Imageworker is 0 or not supported on this browser. Image loading will be slower.',
+          );
+        }
+
+        this.emit('initialized');
+      })
+      .catch((e) => {
+        console.warn(
+          '[Lightning] createImageBitmap is not supported on this browser. ImageTexture will be slower.',
+        );
+
+        // initialized without image worker manager and createImageBitmap
+        this.emit('initialized');
+      });
 
     this.registerTextureType('ImageTexture', ImageTexture);
     this.registerTextureType('ColorTexture', ColorTexture);
@@ -196,6 +237,143 @@ export class CoreTextureManager {
     this.registerTextureType('RenderTexture', RenderTexture);
   }
 
+  private async validateCreateImageBitmap(): Promise<CreateImageBitmapSupport> {
+    // Test if createImageBitmap is supported using a simple 1x1 PNG image
+    // prettier-ignore (this is a binary PNG image)
+    const pngBinaryData = new Uint8Array([
+      0x89,
+      0x50,
+      0x4e,
+      0x47,
+      0x0d,
+      0x0a,
+      0x1a,
+      0x0a, // PNG signature
+      0x00,
+      0x00,
+      0x00,
+      0x0d, // IHDR chunk length
+      0x49,
+      0x48,
+      0x44,
+      0x52, // "IHDR" chunk type
+      0x00,
+      0x00,
+      0x00,
+      0x01, // Width: 1
+      0x00,
+      0x00,
+      0x00,
+      0x01, // Height: 1
+      0x01, // Bit depth: 1
+      0x03, // Color type: Indexed
+      0x00, // Compression method: Deflate
+      0x00, // Filter method: None
+      0x00, // Interlace method: None
+      0x25,
+      0xdb,
+      0x56,
+      0xca, // CRC for IHDR
+      0x00,
+      0x00,
+      0x00,
+      0x03, // PLTE chunk length
+      0x50,
+      0x4c,
+      0x54,
+      0x45, // "PLTE" chunk type
+      0x00,
+      0x00,
+      0x00, // Palette entry: Black
+      0xa7,
+      0x7a,
+      0x3d,
+      0xda, // CRC for PLTE
+      0x00,
+      0x00,
+      0x00,
+      0x01, // tRNS chunk length
+      0x74,
+      0x52,
+      0x4e,
+      0x53, // "tRNS" chunk type
+      0x00, // Transparency for black: Fully transparent
+      0x40,
+      0xe6,
+      0xd8,
+      0x66, // CRC for tRNS
+      0x00,
+      0x00,
+      0x00,
+      0x0a, // IDAT chunk length
+      0x49,
+      0x44,
+      0x41,
+      0x54, // "IDAT" chunk type
+      0x08,
+      0xd7, // Deflate header
+      0x63,
+      0x60,
+      0x00,
+      0x00,
+      0x00,
+      0x02,
+      0x00,
+      0x01, // Zlib-compressed data
+      0xe2,
+      0x21,
+      0xbc,
+      0x33, // CRC for IDAT
+      0x00,
+      0x00,
+      0x00,
+      0x00, // IEND chunk length
+      0x49,
+      0x45,
+      0x4e,
+      0x44, // "IEND" chunk type
+      0xae,
+      0x42,
+      0x60,
+      0x82, // CRC for IEND
+    ]);
+
+    const support: CreateImageBitmapSupport = {
+      basic: false,
+      options: false,
+      full: false,
+    };
+
+    // Test basic createImageBitmap support
+    const blob = new Blob([pngBinaryData], { type: 'image/png' });
+    const bitmap = await createImageBitmap(blob);
+    bitmap.close?.();
+    support.basic = true;
+
+    // Test createImageBitmap with options support
+    try {
+      const options = { premultiplyAlpha: 'none' as const };
+      const bitmapWithOptions = await createImageBitmap(blob, options);
+      bitmapWithOptions.close?.();
+      support.options = true;
+    } catch (e) {
+      /* ignore */
+    }
+
+    // Test createImageBitmap with full options support
+    try {
+      const bitmapWithFullOptions = await createImageBitmap(blob, 0, 0, 1, 1, {
+        premultiplyAlpha: 'none',
+      });
+      bitmapWithFullOptions.close?.();
+      support.full = true;
+    } catch (e) {
+      /* ignore */
+    }
+
+    return support;
+  }
+
   registerTextureType<Type extends keyof TextureMap>(
     textureType: Type,
     textureClass: TextureMap[Type],

package/src/core/Stage.ts

@@ -266,6 +266,11 @@ export class Stage {
     }
   }
 
+  setClearColor(color: number) {
+    this.renderer.updateClearColor(color);
+    this.renderRequested = true;
+  }
+
   updateFrameTime() {
     const newFrameTime = getTimeStamp();
     this.lastFrameTime = this.currentFrameTime;

package/src/core/lib/ImageWorker.ts

@@ -17,6 +17,7 @@
  * limitations under the License.
  */
 
+import type { CreateImageBitmapSupport } from '../CoreTextureManager.js';
 import { type TextureData } from '../textures/Texture.js';
 
 type MessageCallback = [(value: any) => void, (reason: any) => void];
@@ -47,6 +48,9 @@ interface ImageWorkerMessage {
 
 /* eslint-disable */
 function createImageWorker() {
+  var supportsOptionsCreateImageBitmap = false;
+  var supportsFullCreateImageBitmap = false;
+
   function hasAlphaChannel(mimeType: string) {
     return mimeType.indexOf('image/png') !== -1;
   }
@@ -75,7 +79,12 @@ function createImageWorker() {
             ? premultiplyAlpha
             : hasAlphaChannel(blob.type);
 
-        if (width !== null && height !== null) {
+        // createImageBitmap with crop and options
+        if (
+          supportsFullCreateImageBitmap === true &&
+          width !== null &&
+          height !== null
+        ) {
           createImageBitmap(blob, x || 0, y || 0, width, height, {
             premultiplyAlpha: withAlphaChannel ? 'premultiply' : 'none',
             colorSpaceConversion: 'none',
@@ -90,11 +99,25 @@ function createImageWorker() {
           return;
         }
 
-        createImageBitmap(blob, {
-          premultiplyAlpha: withAlphaChannel ? 'premultiply' : 'none',
-          colorSpaceConversion: 'none',
-          imageOrientation: 'none',
-        })
+        // createImageBitmap without crop but with options
+        if (supportsOptionsCreateImageBitmap === true) {
+          createImageBitmap(blob, {
+            premultiplyAlpha: withAlphaChannel ? 'premultiply' : 'none',
+            colorSpaceConversion: 'none',
+            imageOrientation: 'none',
+          })
+            .then(function (data) {
+              resolve({ data, premultiplyAlpha: premultiplyAlpha });
+            })
+            .catch(function (error) {
+              reject(error);
+            });
+          return;
+        }
+
+        // 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 });
           })
@@ -140,8 +163,14 @@ export class ImageWorkerManager {
   workerIndex = 0;
   nextId = 0;
 
-  constructor(numImageWorkers: number) {
-    this.workers = this.createWorkers(numImageWorkers);
+  constructor(
+    numImageWorkers: number,
+    createImageBitmapSupport: CreateImageBitmapSupport,
+  ) {
+    this.workers = this.createWorkers(
+      numImageWorkers,
+      createImageBitmapSupport,
+    );
     this.workers.forEach((worker) => {
       worker.onmessage = this.handleMessage.bind(this);
     });
@@ -161,8 +190,23 @@ export class ImageWorkerManager {
     }
   }
 
-  private createWorkers(numWorkers = 1): Worker[] {
-    const workerCode = `(${createImageWorker.toString()})()`;
+  private createWorkers(
+    numWorkers = 1,
+    createImageBitmapSupport: CreateImageBitmapSupport,
+  ): Worker[] {
+    let workerCode = `(${createImageWorker.toString()})()`;
+
+    // Replace placeholders with actual initialization values
+    const supportsOptions = createImageBitmapSupport.options ? 'true' : 'false';
+    const supportsFull = createImageBitmapSupport.full ? 'true' : 'false';
+    workerCode = workerCode.replace(
+      'var supportsOptionsCreateImageBitmap = false;',
+      `var supportsOptionsCreateImageBitmap = ${supportsOptions};`,
+    );
+    workerCode = workerCode.replace(
+      'var supportsFullCreateImageBitmap = false;',
+      `var supportsFullCreateImageBitmap = ${supportsFull};`,
+    );
 
     const blob: Blob = new Blob([workerCode.replace('"use strict";', '')], {
       type: 'application/javascript',
@@ -170,7 +214,15 @@ export class ImageWorkerManager {
     const blobURL: string = (self.URL ? URL : webkitURL).createObjectURL(blob);
     const workers: Worker[] = [];
     for (let i = 0; i < numWorkers; i++) {
-      workers.push(new Worker(blobURL));
+      const worker = new Worker(blobURL);
+
+      // Pass `createImageBitmap` support level during worker initialization
+      worker.postMessage({
+        type: 'init',
+        support: createImageBitmapSupport,
+      });
+
+      workers.push(worker);
     }
     return workers;
   }

package/src/core/lib/WebGlContextWrapper.ts

@@ -84,6 +84,8 @@ export class WebGlContextWrapper {
   public readonly LINK_STATUS;
   public readonly DYNAMIC_DRAW;
   public readonly COLOR_ATTACHMENT0;
+  public readonly INVALID_ENUM: number;
+  public readonly INVALID_OPERATION: number;
   //#endregion WebGL Enums
 
   constructor(private gl: WebGLRenderingContext | WebGL2RenderingContext) {
@@ -175,6 +177,8 @@ export class WebGlContextWrapper {
     this.LINK_STATUS = gl.LINK_STATUS;
     this.DYNAMIC_DRAW = gl.DYNAMIC_DRAW;
     this.COLOR_ATTACHMENT0 = gl.COLOR_ATTACHMENT0;
+    this.INVALID_ENUM = gl.INVALID_ENUM;
+    this.INVALID_OPERATION = gl.INVALID_OPERATION;
   }
   /**
    * Returns true if the WebGL context is WebGL2
@@ -1020,6 +1024,18 @@ export class WebGlContextWrapper {
     return gl.getExtension(name);
   }
 
+  /**
+   * ```
+   * gl.getError(type);
+   * ```
+   *
+   * @returns
+   */
+  getError() {
+    const { gl } = this;
+    return gl.getError();
+  }
+
   /**
    * ```
    * gl.createVertexArray();

package/src/core/renderers/CoreRenderer.ts

@@ -110,4 +110,5 @@ export abstract class CoreRenderer {
   abstract renderToTexture(node: CoreNode): void;
   abstract getBufferInfo(): BufferInfo | null;
   abstract getDefShaderCtr(): BaseShaderController;
+  abstract updateClearColor(color: number): void;
 }

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

@@ -30,7 +30,12 @@ import {
   type QuadOptions,
 } from '../CoreRenderer.js';
 import { CanvasCoreTexture } from './CanvasCoreTexture.js';
-import { getBorder, getRadius, strokeLine } from './internal/C2DShaderUtils.js';
+import {
+  getBorder,
+  getRadius,
+  roundRect,
+  strokeLine,
+} from './internal/C2DShaderUtils.js';
 import {
   formatRgba,
   parseColorRgba,
@@ -166,7 +171,7 @@ export class CanvasCoreRenderer extends CoreRenderer {
 
     if (radius) {
       const path = new Path2D();
-      path.roundRect(tx, ty, width, height, radius);
+      roundRect.call(path, tx, ty, width, height, radius);
       ctx.clip(path);
     }
 
@@ -224,7 +229,8 @@ export class CanvasCoreRenderer extends CoreRenderer {
       ctx.strokeStyle = borderColor;
       ctx.globalAlpha = alpha;
       if (radius) {
-        ctx.roundRect(
+        roundRect.call(
+          ctx,
           tx + borderInnerWidth,
           ty + borderInnerWidth,
           width - borderWidth,
@@ -331,4 +337,13 @@ export class CanvasCoreRenderer extends CoreRenderer {
   getBufferInfo(): null {
     return null;
   }
+
+  /**
+   * Updates the clear color of the canvas renderer.
+   *
+   * @param color - The color to set as the clear color.
+   */
+  updateClearColor(color: number) {
+    this.clearColor = color ? getRgbaComponents(color) : undefined;
+  }
 }

package/src/core/renderers/canvas/internal/C2DShaderUtils.ts

@@ -84,6 +84,99 @@ export function getBorder(
   return undefined;
 }
 
+export function roundRect(
+  this: CanvasRenderingContext2D | Path2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number | DOMPointInit | (number | DOMPointInit)[],
+) {
+  const context = Object.getPrototypeOf(this) as Path2D;
+  if (!context.roundRect) {
+    const fixOverlappingCorners = (radii: {
+      topLeft: number;
+      topRight: number;
+      bottomRight: number;
+      bottomLeft: number;
+    }) => {
+      const maxRadius = Math.min(width / 2, height / 2);
+      const totalHorizontal =
+        radii.topLeft + radii.topRight + radii.bottomRight + radii.bottomLeft;
+
+      if (totalHorizontal > width || totalHorizontal > height) {
+        const scale =
+          maxRadius /
+          Math.max(
+            radii.topLeft,
+            radii.topRight,
+            radii.bottomRight,
+            radii.bottomLeft,
+          );
+        radii.topLeft *= scale;
+        radii.topRight *= scale;
+        radii.bottomRight *= scale;
+        radii.bottomLeft *= scale;
+      }
+    };
+    const radii =
+      typeof radius === 'number'
+        ? {
+            topLeft: radius,
+            topRight: radius,
+            bottomRight: radius,
+            bottomLeft: radius,
+          }
+        : { topLeft: 0, topRight: 0, bottomRight: 0, bottomLeft: 0, ...radius };
+
+    fixOverlappingCorners(radii);
+
+    this.moveTo(x + radii.topLeft, y);
+    this.lineTo(x + width - radii.topRight, y);
+    this.ellipse(
+      x + width - radii.topRight,
+      y + radii.topRight,
+      radii.topRight,
+      radii.topRight,
+      0,
+      1.5 * Math.PI,
+      2 * Math.PI,
+    );
+    this.lineTo(x + width, y + height - radii.bottomRight);
+    this.ellipse(
+      x + width - radii.bottomRight,
+      y + height - radii.bottomRight,
+      radii.bottomRight,
+      radii.bottomRight,
+      0,
+      0,
+      0.5 * Math.PI,
+    );
+    this.lineTo(x + radii.bottomLeft, y + height);
+    this.ellipse(
+      x + radii.bottomLeft,
+      y + height - radii.bottomLeft,
+      radii.bottomLeft,
+      radii.bottomLeft,
+      0,
+      0.5 * Math.PI,
+      Math.PI,
+    );
+    this.lineTo(x, y + radii.topLeft);
+    this.ellipse(
+      x + radii.topLeft,
+      y + radii.topLeft,
+      radii.topLeft,
+      radii.topLeft,
+      0,
+      Math.PI,
+      1.5 * Math.PI,
+    );
+  } else {
+    this.roundRect(x, y, width, height, radius);
+  }
+}
+
 export function strokeLine(
   ctx: CanvasRenderingContext2D,
   x: number,

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

@@ -23,11 +23,9 @@ import type { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
 import type { WebGlCoreRendererOptions } from './WebGlCoreRenderer.js';
 import type { BufferCollection } from './internal/BufferCollection.js';
 import type { Dimensions } from '../../../common/CommonTypes.js';
-import type { Rect, RectWithValid } from '../../lib/utils.js';
+import type { RectWithValid } from '../../lib/utils.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 
-const MAX_TEXTURES = 8; // TODO: get from gl
-
 /**
  * Can render multiple quads with multiple textures (up to vertex shader texture limit)
  *
@@ -95,13 +93,22 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
     // Clipping
     if (this.clippingRect.valid) {
       const { x, y, width, height } = this.clippingRect;
-      const pixelRatio = options.pixelRatio;
+      const pixelRatio = this.parentHasRenderTexture ? 1 : options.pixelRatio;
       const canvasHeight = options.canvas.height;
 
       const clipX = Math.round(x * pixelRatio);
       const clipWidth = Math.round(width * pixelRatio);
       const clipHeight = Math.round(height * pixelRatio);
-      const clipY = Math.round(canvasHeight - clipHeight - y * pixelRatio);
+      let clipY = Math.round(canvasHeight - clipHeight - 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) {
+        clipY = this.framebufferDimensions
+          ? this.framebufferDimensions.height - this.dimensions.height
+          : 0;
+      }
+
       glw.setScissorTest(true);
       glw.scissor(clipX, clipY, clipWidth, clipHeight);
     } else {

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

@@ -32,6 +32,7 @@ import {
   type CoreWebGlExtensions,
   getWebGlParameters,
   getWebGlExtensions,
+  type WebGlColor,
 } from './internal/RendererUtils.js';
 import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
 import { Texture, TextureType } from '../../textures/Texture.js';
@@ -86,6 +87,11 @@ export class WebGlCoreRenderer extends CoreRenderer {
   defaultShader: WebGlCoreShader;
   quadBufferCollection: BufferCollection;
 
+  clearColor: WebGlColor = {
+    raw: 0x00000000,
+    normalized: [0, 0, 0, 0],
+  };
+
   /**
    * White pixel texture used by default when no texture is specified.
    */
@@ -127,10 +133,10 @@ export class WebGlCoreRenderer extends CoreRenderer {
       options.contextSpy,
     );
     const glw = (this.glw = new WebGlContextWrapper(gl));
-
-    const color = getNormalizedRgbaComponents(clearColor);
     glw.viewport(0, 0, canvas.width, canvas.height);
-    glw.clearColor(color[0]!, color[1]!, color[2]!, color[3]!);
+
+    this.updateClearColor(clearColor);
+
     glw.setBlend(true);
     glw.blendFunc(glw.ONE, glw.ONE_MINUS_SRC_ALPHA);
 
@@ -754,9 +760,9 @@ export class WebGlCoreRenderer extends CoreRenderer {
       node.hasRTTupdates = false;
     }
 
-    const color = getNormalizedRgbaComponents(this.stage.options.clearColor);
+    const clearColor = this.clearColor.normalized;
     // Restore the default clear color
-    glw.clearColor(color[0]!, color[1]!, color[2]!, color[3]!);
+    glw.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
 
     // Bind the default framebuffer
     glw.bindFramebuffer(null);
@@ -784,4 +790,28 @@ export class WebGlCoreRenderer extends CoreRenderer {
   override getDefShaderCtr(): BaseShaderController {
     return this.defShaderCtrl;
   }
+
+  /**
+   * Updates the WebGL context's clear color and clears the color buffer.
+   *
+   * @param color - The color to set as the clear color, represented as a 32-bit integer.
+   */
+  updateClearColor(color: number) {
+    if (this.clearColor.raw === color) {
+      return;
+    }
+    const glw = this.glw;
+    const normalizedColor = getNormalizedRgbaComponents(color);
+    glw.clearColor(
+      normalizedColor[0],
+      normalizedColor[1],
+      normalizedColor[2],
+      normalizedColor[3],
+    );
+    this.clearColor = {
+      raw: color,
+      normalized: normalizedColor,
+    };
+    glw.clear();
+  }
 }

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

@@ -142,9 +142,15 @@ export abstract class WebGlCoreShader extends CoreShader {
       glw.FRAGMENT_SHADER,
       fragmentSource,
     );
+
     if (!vertexShader || !fragmentShader) {
       throw new Error(
-        `Unable to create shader type: ${glw.FRAGMENT_SHADER}. Source: ${fragmentSource}`,
+        `Unable to create the following shader(s): ${[
+          !vertexShader && 'VERTEX_SHADER',
+          !fragmentShader && 'FRAGMENT_SHADER',
+        ]
+          .filter(Boolean)
+          .join(' and ')}`,
       );
     }