@lightningjs/renderer 2.8.0 → 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/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/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,

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/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 ')}`,
       );
     }
 

package/src/core/renderers/webgl/internal/ShaderUtils.ts

@@ -100,8 +100,14 @@ export function createShader(
 ) {
   const shader = glw.createShader(type);
   if (!shader) {
-    throw new Error(`Unable to create shader type: ${type}. Source: ${source}`);
+    const glError = glw.getError();
+    throw new Error(
+      `Unable to create the shader: ${
+        type === glw.VERTEX_SHADER ? 'VERTEX_SHADER' : 'FRAGMENT_SHADER'
+      }.${glError ? ` WebGlContext Error: ${glError}` : ''}`,
+    );
   }
+
   glw.shaderSource(shader, source);
   glw.compileShader(shader);
   const success = !!glw.getShaderParameter(shader, glw.COMPILE_STATUS);
@@ -109,7 +115,7 @@ export function createShader(
     return shader;
   }
 
-  console.log(glw.getShaderInfoLog(shader));
+  console.error(glw.getShaderInfoLog(shader));
   glw.deleteShader(shader);
 }
 
@@ -131,7 +137,7 @@ export function createProgram(
     return program;
   }
 
-  console.log(glw.getProgramInfoLog(program));
+  console.warn(glw.getProgramInfoLog(program));
   glw.deleteProgram(program);
   return undefined;
 }

package/src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.ts

@@ -93,7 +93,9 @@ export class SdfTrFontFace<
     });
 
     // Pre-load it
-    this.texture.ctxTexture.load();
+    stage.txManager.once('initialized', () => {
+      this.texture.ctxTexture.load();
+    });
 
     // Set this.data to the fetched data from dataUrl
     fetch(atlasDataUrl)
@@ -102,7 +104,7 @@ export class SdfTrFontFace<
         (this.data as SdfFontData) = await response.json();
         assertTruthy(this.data);
         // Add all the glyphs to the glyph map
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
         let maxCharHeight = 0;
         this.data.chars.forEach((glyph) => {
           this.glyphMap.set(glyph.id, glyph);
@@ -111,10 +113,10 @@ export class SdfTrFontFace<
             maxCharHeight = charHeight;
           }
         });
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+
         (this.maxCharHeight as number) = maxCharHeight;
         // We know `data` is defined here, because we just set it
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
         (this.shaper as FontShaper) = new SdfFontShaper(
           this.data,
           this.glyphMap,