@lightningjs/renderer 2.7.2 → 2.9.0-beta1

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

@@ -146,3 +146,8 @@ export function isHTMLImageElement(obj: unknown): obj is HTMLImageElement {
     obj.constructor.name === 'HTMLImageElement'
   );
 }
+
+export interface WebGlColor {
+  raw: number;
+  normalized: [number, number, number, number];
+}

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/textures/ImageTexture.ts

@@ -132,61 +132,94 @@ export class ImageTexture extends Texture {
     return mimeType.indexOf('image/png') !== -1;
   }
 
-  async loadImage(src: string) {
-    const { premultiplyAlpha, sx, sy, sw, sh, width, height } = this.props;
+  async loadImageFallback(src: string, hasAlpha: boolean) {
+    const img = new Image();
 
-    if (this.txManager.imageWorkerManager !== null) {
-      return await this.txManager.imageWorkerManager.getImage(
-        src,
-        premultiplyAlpha,
-        sx,
-        sy,
-        sw,
-        sh,
-      );
-    } else if (this.txManager.hasCreateImageBitmap === true) {
-      const response = await fetch(src);
-      const blob = await response.blob();
-      const hasAlphaChannel =
-        premultiplyAlpha ?? this.hasAlphaChannel(blob.type);
+    return new Promise<{ data: HTMLImageElement; premultiplyAlpha: boolean }>(
+      (resolve) => {
+        img.onload = () => {
+          resolve({ data: img, premultiplyAlpha: hasAlpha });
+        };
 
-      if (sw !== null && sh !== null) {
-        return {
-          data: await createImageBitmap(blob, sx ?? 0, sy ?? 0, sw, sh, {
-            premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
-            colorSpaceConversion: 'none',
-            imageOrientation: 'none',
-          }),
-          premultiplyAlpha: hasAlphaChannel,
+        img.onerror = () => {
+          console.warn('Image loading failed, returning fallback object.');
+          resolve({ data: img, premultiplyAlpha: hasAlpha });
         };
-      }
 
+        img.src = src;
+      },
+    );
+  }
+
+  async createImageBitmap(
+    blob: Blob,
+    premultiplyAlpha: boolean | null,
+    sx: number | null,
+    sy: number | null,
+    sw: number | null,
+    sh: number | null,
+  ): Promise<{
+    data: ImageBitmap | HTMLImageElement;
+    premultiplyAlpha: boolean;
+  }> {
+    const hasAlphaChannel = premultiplyAlpha ?? blob.type.includes('image/png');
+    const imageBitmapSupported = this.txManager.imageBitmapSupported;
+
+    if (
+      imageBitmapSupported.full === true &&
+      sx !== null &&
+      sy !== null &&
+      sw !== null &&
+      sh !== null
+    ) {
+      // createImageBitmap with crop
+      const bitmap = await createImageBitmap(blob, sx, sy, sw, sh, {
+        premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
+        colorSpaceConversion: 'none',
+        imageOrientation: 'none',
+      });
+      return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
+    } else if (imageBitmapSupported.options === true) {
+      // createImageBitmap without crop but with options
+      const bitmap = await createImageBitmap(blob, {
+        premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
+        colorSpaceConversion: 'none',
+        imageOrientation: 'none',
+      });
+      return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
+    } else {
+      // basic createImageBitmap without options or crop
+      // this is supported for Chrome v50 to v52/54 that doesn't support options
       return {
-        data: await createImageBitmap(blob, {
-          premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
-          colorSpaceConversion: 'none',
-          imageOrientation: 'none',
-        }),
+        data: await createImageBitmap(blob),
         premultiplyAlpha: hasAlphaChannel,
       };
-    } else {
-      const img = new Image();
-      if (!src.startsWith('data:')) {
-        img.crossOrigin = 'Anonymous';
+    }
+  }
+
+  async loadImage(src: string) {
+    const { premultiplyAlpha, sx, sy, sw, sh } = this.props;
+
+    if (this.txManager.hasCreateImageBitmap === true) {
+      if (
+        this.txManager.hasWorker === true &&
+        this.txManager.imageWorkerManager !== null
+      ) {
+        return this.txManager.imageWorkerManager.getImage(
+          src,
+          premultiplyAlpha,
+          sx,
+          sy,
+          sw,
+          sh,
+        );
       }
-      img.src = src;
-      await new Promise<void>((resolve, reject) => {
-        img.onload = () => resolve();
-        img.onerror = () => reject(new Error(`Failed to load image`));
-      }).catch((e) => {
-        console.error(e);
-      });
 
-      return {
-        data: img,
-        premultiplyAlpha: premultiplyAlpha ?? true,
-      };
+      const blob = await fetch(src).then((response) => response.blob());
+      return this.createImageBitmap(blob, premultiplyAlpha, sx, sy, sw, sh);
     }
+
+    return this.loadImageFallback(src, premultiplyAlpha ?? true);
   }
 
   override async getTextureData(): Promise<TextureData> {

package/src/main-api/Renderer.ts

@@ -658,4 +658,13 @@ export class RendererMain extends EventEmitter {
   rerender() {
     throw new Error('Not implemented');
   }
+
+  /**
+   * Sets the clear color for the stage.
+   *
+   * @param color - The color to set as the clear color.
+   */
+  setClearColor(color: number) {
+    this.stage.setClearColor(color);
+  }
 }

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

@@ -1 +0,0 @@
-export {};

package/dist/src/core/CoreStuff.js

@@ -1,138 +0,0 @@
-export {};
-/*interface InstanceMap {
-  renderer: CoreRenderer;
-  effect: CoreEffect;
-  program: new () => void;
-}
-
-type WebGlInstanceMap = InstanceMap & {
-  renderer: WebGlCoreRenderer;
-  effect: WebGlEffect;
-};
-
-interface AdvEffectProp {
-  default: any;
-  isColor?: boolean;
-  validator?: (value: any) => any;
-}
-
-interface EffectProps {
-  [key: string]: any | AdvEffectProp;
-}
-
-type EffectDescriptor<Effect, Props> = Effect & {
-  props?: Props;
-};
-
-type InferEffectProps<T> = {
-  [K in keyof T]: T[K] extends AdvEffectProp ? T[K]['default'] : T[K];
-};
-
-interface CoreEffect {
-  props?: EffectProps;
-  update?: (ctx: unknown) => void;
-}
-
-type WebGlEffect = CoreEffect & {
-  fragment: string;
-  update?: (glw: WebGLRenderingContext) => void;
-};
-
-type StageOptions<Renderer extends InstanceMap> = {
-  renderEngine?: new () => Renderer['renderer'];
-};
-
-class Stage<RendererMap extends InstanceMap> {
-  fxManager: CoreFxManager<RendererMap>;
-  constructor(options: StageOptions<RendererMap>) {
-    this.fxManager = new CoreFxManager();
-    const renderer = new options.renderEngine();
-  }
-
-  createShader<Effect extends RendererMap['effect'], Props>(
-    effect: EffectDescriptor<Effect, Props>,
-    props?: InferEffectProps<Props>
-  ): EffectNode<Effect, Props> {
-    return this.fxManager.createShader(effect, props);
-  }
-}
-
-class CoreRenderer {
-  mode = 'core';
-}
-
-class WebGlCoreRenderer extends CoreRenderer {
-  override mode = 'webgl';
-}
-
-class CanvasCoreRenderer extends CoreRenderer {
-  override mode = 'canvas';
-}
-
-class CoreFxManager<RendererMap extends InstanceMap> {
-  fxCache: Map<string, RendererMap['effect']> = new Map();
-
-  resolveProps(defaultProps?: EffectProps, props?: EffectProps) {
-    if(defaultProps !== undefined) {
-      props = props ?? {}
-      const keys = Object.keys(defaultProps);
-      const l = keys.length;
-      for(let i = 0; i < l; i++) {
-        if(props[keys[i]] === undefined) {
-          props[keys[i]] = defaultProps[keys[i]].default || defaultProps[keys[i]]
-        }
-      }
-    }
-  }
-
-  createShader<Effect extends RendererMap['effect'], Props>(
-    effect: EffectDescriptor<Effect, Props>,
-    props?: InferEffectProps<Props>
-  ): EffectNode<Effect, Props> {
-
-    // const f = JSON.stringify(effect);
-    // if (this.fxCache.has(f)) {
-    //   console.log('already has this effect');
-    // } else {
-    //   console.log('create new effect program');
-    //   this.fxCache.set(f, effect);
-    // }
-
-    return new EffectNode<Effect, Props>(effect, WebGlCoreRenderer, props);
-  }
-}
-
-class EffectNode<Effect extends CoreEffect, Props extends EffectProps> {
-  #data: Record<string, any> | undefined = undefined;
-  constructor(
-    readonly type: Effect,
-    readonly program: new () => void,
-    props?: InferEffectProps<Props>
-  ) {
-    this.#data = props;
-  }
-}
-
-const stage = new Stage<WebGlInstanceMap>({
-  renderEngine: CanvasCoreRenderer,
-});
-
-stage.createShader(
-  {
-    props: {
-      radius: 10,
-    },
-    fragment: '',
-  },
-  {
-    radius: 30,
-  }
-);
-
-stage.createShader({
-  props: {
-    radius: 10,
-  },
-  fragment: '',
-});*/
-//# sourceMappingURL=CoreStuff.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CoreStuff.js","sourceRoot":"","sources":["../../../src/core/CoreStuff.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuIK"}