@lightningjs/renderer 2.8.0 → 2.9.0-beta2

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,
@@ -73,7 +78,6 @@ export class CanvasCoreRenderer extends CoreRenderer {
   }
 
   reset(): void {
-    // eslint-disable-next-line no-self-assign
     this.canvas.width = this.canvas.width; // quick reset canvas
 
     const ctx = this.context;
@@ -166,7 +170,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);
     }
 
@@ -186,7 +190,12 @@ export class CanvasCoreRenderer extends CoreRenderer {
           height,
         );
       } else {
-        ctx.drawImage(image, tx, ty, width, height);
+        try {
+          ctx.drawImage(image, tx, ty, width, height);
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (error) {
+          // noop
+        }
       }
       ctx.globalAlpha = 1;
     } else if (hasGradient) {
@@ -224,7 +233,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/CanvasCoreTexture.ts

@@ -23,7 +23,11 @@ import { CoreContextTexture } from '../CoreContextTexture.js';
 import { formatRgba, type IParsedColor } from './internal/ColorUtils.js';
 
 export class CanvasCoreTexture extends CoreContextTexture {
-  protected image: ImageBitmap | HTMLCanvasElement | undefined;
+  protected image:
+    | ImageBitmap
+    | HTMLCanvasElement
+    | HTMLImageElement
+    | undefined;
   protected tintCache:
     | {
         key: string;
@@ -68,7 +72,9 @@ export class CanvasCoreTexture extends CoreContextTexture {
     return this.image !== undefined;
   }
 
-  getImage(color: IParsedColor): ImageBitmap | HTMLCanvasElement {
+  getImage(
+    color: IParsedColor,
+  ): ImageBitmap | HTMLCanvasElement | HTMLImageElement {
     const image = this.image;
     assertTruthy(image, 'Attempt to get unloaded image texture');
 
@@ -94,7 +100,7 @@ export class CanvasCoreTexture extends CoreContextTexture {
   }
 
   protected tintTexture(
-    source: ImageBitmap | HTMLCanvasElement,
+    source: ImageBitmap | HTMLCanvasElement | HTMLImageElement,
     color: string,
   ) {
     const { width, height } = source;
@@ -132,8 +138,8 @@ export class CanvasCoreTexture extends CoreContextTexture {
       this.image = canvas;
       return { width: data.width, height: data.height };
     } else if (
-      typeof ImageBitmap !== 'undefined' &&
-      data instanceof ImageBitmap
+      (typeof ImageBitmap !== 'undefined' && data instanceof ImageBitmap) ||
+      data instanceof HTMLImageElement
     ) {
       this.image = data;
       return { width: data.width, height: data.height };

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/WebGlCoreCtxTexture.ts

@@ -140,32 +140,31 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
 
     assertTruthy(this._nativeCtxTexture);
     glw.activeTexture(0);
+    const tdata = textureData.data;
     // If textureData is null, the texture is empty (0, 0) and we don't need to
     // upload any data to the GPU.
     if (
-      (typeof ImageBitmap !== 'undefined' &&
-        textureData.data instanceof ImageBitmap) ||
-      textureData.data instanceof ImageData ||
+      (typeof ImageBitmap !== 'undefined' && tdata instanceof ImageBitmap) ||
+      tdata instanceof ImageData ||
       // not using typeof HTMLImageElement due to web worker
-      isHTMLImageElement(textureData.data)
+      isHTMLImageElement(tdata)
     ) {
-      const data = textureData.data;
-      width = data.width;
-      height = data.height;
+      width = tdata.width;
+      height = tdata.height;
       glw.bindTexture(this._nativeCtxTexture);
       glw.pixelStorei(
         glw.UNPACK_PREMULTIPLY_ALPHA_WEBGL,
         !!textureData.premultiplyAlpha,
       );
 
-      glw.texImage2D(0, glw.RGBA, glw.RGBA, glw.UNSIGNED_BYTE, data);
+      glw.texImage2D(0, glw.RGBA, glw.RGBA, glw.UNSIGNED_BYTE, tdata);
       this.setTextureMemUse(width * height * 4);
 
       // generate mipmaps for power-of-2 textures or in WebGL2RenderingContext
       if (glw.isWebGl2() || (isPowerOfTwo(width) && isPowerOfTwo(height))) {
         glw.generateMipmap();
       }
-    } else if (textureData.data === null) {
+    } else if (tdata === null) {
       width = 0;
       height = 0;
       // Reset to a 1x1 transparent texture
@@ -182,14 +181,8 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         TRANSPARENT_TEXTURE_DATA,
       );
       this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
-    } else if ('mipmaps' in textureData.data && textureData.data.mipmaps) {
-      const {
-        mipmaps,
-        width = 0,
-        height = 0,
-        type,
-        glInternalFormat,
-      } = textureData.data;
+    } else if ('mipmaps' in tdata && tdata.mipmaps) {
+      const { mipmaps, width = 0, height = 0, type, glInternalFormat } = tdata;
       const view =
         type === 'ktx'
           ? new DataView(mipmaps[0] ?? new ArrayBuffer(0))
@@ -204,7 +197,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
 
       this.setTextureMemUse(view.byteLength);
-    } else if (textureData.data && textureData.data instanceof Uint8Array) {
+    } else if (tdata && tdata instanceof Uint8Array) {
       // Color Texture
       width = 1;
       height = 1;
@@ -223,7 +216,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         0,
         glw.RGBA,
         glw.UNSIGNED_BYTE,
-        textureData.data,
+        tdata,
       );
 
       this.setTextureMemUse(width * height * 4);

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/RendererUtils.ts

@@ -141,9 +141,11 @@ export function createIndexBuffer(glw: WebGlContextWrapper, size: number) {
 export function isHTMLImageElement(obj: unknown): obj is HTMLImageElement {
   return (
     obj !== null &&
-    typeof obj === 'object' &&
-    obj.constructor &&
-    obj.constructor.name === 'HTMLImageElement'
+    ((typeof obj === 'object' &&
+      obj.constructor &&
+      obj.constructor.name === 'HTMLImageElement') ||
+      (typeof HTMLImageElement !== 'undefined' &&
+        obj instanceof HTMLImageElement))
   );
 }
 

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,

package/src/core/text-rendering/renderers/CanvasTextRenderer.ts

@@ -26,8 +26,7 @@ import {
   getNormalizedRgbaComponents,
   getNormalizedAlphaComponent,
 } from '../../lib/utils.js';
-import type { ImageTexture } from '../../textures/ImageTexture.js';
-import { TrFontManager, type FontFamilyMap } from '../TrFontManager.js';
+import { type FontFamilyMap } from '../TrFontManager.js';
 import type { TrFontFace } from '../font-face-types/TrFontFace.js';
 import { WebTrFontFace } from '../font-face-types/WebTrFontFace.js';
 import {
@@ -47,7 +46,7 @@ const resolvedGlobal = typeof self === 'undefined' ? globalThis : self;
 /**
  * Global font set regardless of if run in the main thread or a web worker
  */
-const globalFontSet = ((resolvedGlobal.document as any)?.fonts ||
+const globalFontSet: FontFaceSet = (resolvedGlobal.document?.fonts ||
   (resolvedGlobal as any).fonts) as FontFaceSet;
 
 declare module './TextRenderer.js' {
@@ -99,7 +98,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
     } else {
       this.canvas = document.createElement('canvas');
     }
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+
     let context = this.canvas.getContext('2d', {
       willReadFrequently: true,
     }) as OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D | null;