@lightningjs/renderer 2.12.1 → 3.0.0-beta1

package/src/core/lib/textureCompression.ts

@@ -57,7 +57,7 @@ export const loadCompressedTexture = async (
 const loadKTXData = async (buffer: ArrayBuffer): Promise<TextureData> => {
   const view = new DataView(buffer);
   const littleEndian = view.getUint32(12) === 16909060 ? true : false;
-  const mipmaps = [];
+  const mipmaps: ArrayBuffer[] = [];
 
   const data = {
     glInternalFormat: view.getUint32(28, littleEndian),
@@ -111,10 +111,10 @@ const loadPVRData = async (buffer: ArrayBuffer): Promise<TextureData> => {
   const header = new Int32Array(arrayBuffer, 0, pvrHeaderLength);
 
   // @ts-expect-error Object possibly undefined
-  // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+
   const dataOffset = header[pvrMetadata] + 52;
   const pvrtcData = new Uint8Array(arrayBuffer, dataOffset);
-  const mipmaps = [];
+  const mipmaps: Uint8Array[] = [];
   const data = {
     pixelWidth: header[pvrWidth],
     pixelHeight: header[pvrHeight],

package/src/core/lib/utils.ts

@@ -17,6 +17,8 @@
  * limitations under the License.
  */
 
+import type { Vec4 } from '../renderers/webgl/internal/ShaderUtils.js';
+
 export const PROTOCOL_REGEX = /^(data|ftps?|https?):/;
 
 export type RGBA = [r: number, g: number, b: number, a: number];
@@ -308,3 +310,52 @@ export function convertUrlToAbsolute(url: string): string {
 export function isBase64Image(src: string) {
   return src.startsWith('data:') === true;
 }
+
+export function calcFactoredRadius(
+  radius: number,
+  width: number,
+  height: number,
+): number {
+  return radius * Math.min(Math.min(width, height) / (2.0 * radius), 1);
+}
+
+export function valuesAreEqual(values: number[]) {
+  let prevValue = values[0];
+  for (let i = 1; i < values.length; i++) {
+    if (prevValue !== values[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function calcFactoredRadiusArray(
+  radius: Vec4,
+  width: number,
+  height: number,
+): [number, number, number, number] {
+  const result: [number, number, number, number] = [
+    radius[0],
+    radius[1],
+    radius[2],
+    radius[3],
+  ];
+  const factor = Math.min(
+    Math.min(
+      Math.min(
+        width / Math.max(width, radius[0] + radius[1]),
+        width / Math.max(width, radius[2] + radius[3]),
+      ),
+      Math.min(
+        height / Math.max(height, radius[0] + radius[3]),
+        height / Math.max(height, radius[1] + radius[2]),
+      ),
+    ),
+    1,
+  );
+  result[0] *= factor;
+  result[1] *= factor;
+  result[2] *= factor;
+  result[3] *= factor;
+  return result;
+}

package/src/core/lib/validateImageBitmap.ts

@@ -0,0 +1,76 @@
+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 async function validateCreateImageBitmap(): Promise<CreateImageBitmapSupport> {
+  // Test if createImageBitmap is supported using a simple 1x1 PNG image
+  // prettier-ignore
+  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;
+}

package/src/core/platform.ts

@@ -34,12 +34,15 @@ export const startLoop = (stage: Stage) => {
       setTimeout(runLoop, 16.666666666666668);
 
       if (!isIdle) {
-        if (stage.txMemManager.checkCleanup()) {
-          stage.txMemManager.cleanup();
-        }
+        stage.shManager.cleanup();
         stage.eventBus.emit('idle');
         isIdle = true;
       }
+
+      if (stage.txMemManager.checkCleanup() === true) {
+        stage.txMemManager.cleanup(false);
+      }
+
       stage.flushFrameEvents();
       return;
     }

package/src/core/renderers/CoreRenderer.ts

@@ -18,21 +18,16 @@
  */
 
 import type { Dimensions } from '../../common/CommonTypes.js';
-import type { BaseShaderController } from '../../main-api/ShaderController.js';
 import type { CoreNode } from '../CoreNode.js';
-import type { CoreShaderManager } from '../CoreShaderManager.js';
-import type {
-  CoreTextureManager,
-  TextureOptions,
-} from '../CoreTextureManager.js';
+import type { TextureOptions } from '../CoreTextureManager.js';
 import type { Stage } from '../Stage.js';
-import type { TextureMemoryManager } from '../TextureMemoryManager.js';
 import type { ContextSpy } from '../lib/ContextSpy.js';
 import type { RenderCoords } from '../lib/RenderCoords.js';
 import type { RectWithValid } from '../lib/utils.js';
+import type { CoreShaderProgram } from './CoreShaderProgram.js';
 import type { Texture } from '../textures/Texture.js';
 import { CoreContextTexture } from './CoreContextTexture.js';
-import type { CoreShader } from './CoreShader.js';
+import type { CoreShaderType, CoreShaderNode } from './CoreShaderNode.js';
 
 export interface QuadOptions {
   width: number;
@@ -44,8 +39,7 @@ export interface QuadOptions {
   texture: Texture | null;
   textureOptions: TextureOptions | null;
   zIndex: number;
-  shader: CoreShader | null;
-  shaderProps: Record<string, unknown> | null;
+  shader: CoreShaderNode | null;
   alpha: number;
   clippingRect: RectWithValid;
   tx: number;
@@ -55,20 +49,14 @@ export interface QuadOptions {
   tc: number;
   td: number;
   renderCoords?: RenderCoords;
-  rtt?: boolean;
-  parentHasRenderTexture?: boolean;
-  framebufferDimensions?: Dimensions;
+  rtt: boolean;
+  parentHasRenderTexture: boolean;
+  framebufferDimensions: Dimensions;
 }
 
 export interface CoreRendererOptions {
   stage: Stage;
   canvas: HTMLCanvasElement | OffscreenCanvas;
-  pixelRatio: number;
-  txManager: CoreTextureManager;
-  txMemManager: TextureMemoryManager;
-  shManager: CoreShaderManager;
-  clearColor: number;
-  bufferMemory: number;
   contextSpy: ContextSpy | null;
   forceWebGL2: boolean;
 }
@@ -85,24 +73,29 @@ export abstract class CoreRenderer {
   readonly stage: Stage;
 
   //// Core Managers
-  txManager: CoreTextureManager;
-  txMemManager: TextureMemoryManager;
-  shManager: CoreShaderManager;
   rttNodes: CoreNode[] = [];
 
   constructor(options: CoreRendererOptions) {
     this.options = options;
     this.stage = options.stage;
-    this.txManager = options.txManager;
-    this.txMemManager = options.txMemManager;
-    this.shManager = options.shManager;
   }
 
   abstract reset(): void;
   abstract render(surface?: 'screen' | CoreContextTexture): void;
   abstract addQuad(quad: QuadOptions): void;
   abstract createCtxTexture(textureSource: Texture): CoreContextTexture;
-  abstract getShaderManager(): CoreShaderManager;
+  abstract createShaderProgram(
+    shaderConfig: Readonly<CoreShaderType>,
+    props?: Record<string, unknown>,
+  ): CoreShaderProgram | null;
+  abstract createShaderNode(
+    shaderKey: string,
+    shaderType: Readonly<CoreShaderType>,
+    props?: Record<string, unknown>,
+    program?: CoreShaderProgram,
+  ): CoreShaderNode;
+  abstract supportsShaderType(shaderType: Readonly<CoreShaderType>): boolean;
+  abstract getDefaultShaderNode(): CoreShaderNode | null;
   abstract get renderToTextureActive(): boolean;
   abstract get activeRttNode(): CoreNode | null;
   abstract renderRTTNodes(): void;
@@ -110,6 +103,5 @@ export abstract class CoreRenderer {
   abstract renderToTexture(node: CoreNode): void;
   abstract getBufferInfo(): BufferInfo | null;
   abstract getQuadCount(): number | null;
-  abstract getDefShaderCtr(): BaseShaderController;
   abstract updateClearColor(color: number): void;
 }

package/src/core/renderers/CoreShaderNode.ts

@@ -0,0 +1,171 @@
+import { deepClone } from '../../utils.js';
+import { UpdateType, type CoreNode } from '../CoreNode.js';
+import type { Stage } from '../Stage.js';
+
+export interface AdvShaderProp<T = any, Props = Record<string, unknown>> {
+  /**
+   * default value
+   */
+  default: T;
+  resolve?: (this: AdvShaderProp<T, Props>, value: T, props: Props) => T;
+  transform?: (start: T, end: T, progress: number) => T;
+}
+
+export type AdvancedShaderProp<T = any, Props = Record<string, unknown>> =
+  | (AdvShaderProp<T, Props> & {
+      set: (value: T, props: Props) => void;
+      get: (props: Props) => T;
+    })
+  | (AdvShaderProp<T, Props> & { set?: never; get?: never });
+
+export type ShaderProp<T, Props> = T | AdvancedShaderProp<T, Props>;
+
+export type ShaderProps<Props> = {
+  [K in keyof Props]: ShaderProp<Props[K], Props>;
+};
+
+export function isAdvancedShaderProp(obj: any): obj is AdvancedShaderProp {
+  return obj !== null && typeof obj === 'object' && obj.default !== undefined;
+}
+
+export function resolveShaderProps(
+  props: Record<string, unknown>,
+  propsConfig: ShaderProps<Record<string, unknown>>,
+) {
+  for (const key in propsConfig) {
+    if (!isAdvancedShaderProp(propsConfig[key]) && props[key] === undefined) {
+      props[key] = propsConfig[key];
+      continue;
+    }
+
+    const pConfig = propsConfig[key]! as AdvancedShaderProp;
+    const hasValue = props[key] !== undefined;
+
+    if (pConfig.resolve !== undefined) {
+      props[key] = pConfig.resolve!(props[key], props);
+      continue;
+    }
+    if (hasValue && pConfig.set !== undefined) {
+      pConfig.set(props[key], props);
+      continue;
+    }
+    if (hasValue) {
+      continue;
+    }
+
+    if (props[key] === undefined && pConfig.get === undefined) {
+      props[key] = deepClone(pConfig.default);
+      continue;
+    }
+    props[key] = pConfig.get!(props);
+  }
+}
+
+/**
+ * CoreShaderType is a template for ShaderTypes the renderer.
+ * You could view a ShaderType as a configuration object that contains methods,
+ * and values that you can use to alter the way a node is drawn by the Renderer.
+ */
+export interface CoreShaderType<
+  Props extends object = Record<string, unknown>,
+> {
+  /**
+   * Values you use to draw the Shader
+   */
+  props?: ShaderProps<Props>;
+  /**
+   * used for making a cache key to check for reusability, currently only used for webgl ShaderTypes but might be needed for other types of renderer
+   */
+  getCacheMarkers?: (props: Props) => string;
+}
+
+/**
+ * CoreShaderNode is a base class that manages the shader prop values.
+ * When a prop is being updated the CoreShaderNode will notify either the associated CoreNode,
+ * or the Stage that there has been a change and a new render of the scene.
+ */
+export class CoreShaderNode<Props extends object = Record<string, unknown>> {
+  readonly stage: Stage;
+  readonly shaderType: CoreShaderType<Props>;
+  protected propsConfig: ShaderProps<Props> | undefined;
+  protected resolvedProps: Props | undefined = undefined;
+  protected definedProps: Props | undefined = undefined;
+  protected node: CoreNode | null = null;
+  update: (() => void) | undefined = undefined;
+
+  constructor(
+    readonly shaderKey: string,
+    type: CoreShaderType<Props>,
+    stage: Stage,
+    props?: Props,
+  ) {
+    this.stage = stage;
+    this.shaderType = type;
+
+    if (props !== undefined) {
+      /**
+       * props are already resolved by shadermanager
+       */
+      this.resolvedProps = props;
+      this.defineProps(props);
+    }
+  }
+
+  private defineProps(props: Props) {
+    const definedProps = {};
+    for (const key in props) {
+      const propConfig = this.shaderType.props![key];
+      const isAdvancedProp = isAdvancedShaderProp(propConfig);
+
+      Object.defineProperty(definedProps, key, {
+        get: () => {
+          return this.resolvedProps![key as keyof Props];
+        },
+        set: (value) => {
+          // this.resolvedProps![key as keyof Props] = value;
+          if (isAdvancedProp === true && propConfig.resolve !== undefined) {
+            this.resolvedProps![key] = propConfig.resolve(
+              value,
+              this.resolvedProps as Record<string, unknown>,
+            );
+          } else if (isAdvancedProp === true && propConfig.set !== undefined) {
+            propConfig.set(
+              value,
+              this.resolvedProps as Record<string, unknown>,
+            );
+          } else {
+            this.resolvedProps![key] = value;
+          }
+
+          if (this.update !== undefined && this.node !== null) {
+            this.node.setUpdateType(UpdateType.RecalcUniforms);
+          } else {
+            this.stage.requestRender();
+          }
+        },
+      });
+    }
+    this.definedProps = definedProps as Props;
+  }
+
+  attachNode(node: CoreNode) {
+    this.node = node;
+  }
+
+  getResolvedProps() {
+    return this.resolvedProps;
+  }
+
+  get props(): Props | undefined {
+    return this.definedProps;
+  }
+
+  set props(props: Props | undefined) {
+    if (props === undefined) {
+      return;
+    }
+    for (const key in props) {
+      this.props![key] = props[key];
+    }
+  }
+}

package/src/core/renderers/{canvas/shaders/UnsupportedShader.ts → CoreShaderProgram.ts}

@@ -17,32 +17,7 @@
  * limitations under the License.
  */
 
-import { CoreShader } from '../../CoreShader.js';
-
-export const ROUNDED_RECTANGLE_SHADER_TYPE = 'RoundedRectangle';
-
-export class UnsupportedShader extends CoreShader {
-  public shType: string;
-
-  constructor(shType: string) {
-    super();
-    this.shType = shType;
-    // if (shType !== ROUNDED_RECTANGLE_SHADER_TYPE) {
-    //   console.warn('Unsupported shader:', shType);
-    // }
-  }
-
-  bindRenderOp(): void {
-    // noop
-  }
-  protected bindProps(): void {
-    // noop
-  }
-
-  attach(): void {
-    // noop
-  }
-  detach(): void {
-    // noop
-  }
+export interface CoreShaderProgram {
+  attach?: () => void;
+  detach?: () => void;
 }