@lightningjs/renderer 0.8.2 → 0.8.4

package/src/core/utils.ts

@@ -23,8 +23,6 @@
  * @module
  */
 
-import memo from 'memize';
-
 export const EPSILON = 0.000001;
 export let ARRAY_TYPE =
   typeof Float32Array !== 'undefined' ? Float32Array : Array;
@@ -121,97 +119,107 @@ const getTimingBezier = (
   };
 };
 
-export const getTimingFunction = memo(
-  (str: string): ((time: number) => number | undefined) => {
-    switch (str) {
-      case 'linear':
-        return function (time: number) {
-          return time;
-        };
-      case 'ease':
-        return getTimingBezier(0.25, 0.1, 0.25, 1.0);
-
-      case 'ease-in':
-        return getTimingBezier(0.42, 0, 1.0, 1.0);
-      case 'ease-out':
-        return getTimingBezier(0, 0, 0.58, 1.0);
-      case 'ease-in-out':
-        return getTimingBezier(0.42, 0, 0.58, 1.0);
-
-      case 'ease-in-sine':
-        return getTimingBezier(0.12, 0, 0.39, 0);
-      case 'ease-out-sine':
-        return getTimingBezier(0.12, 0, 0.39, 0);
-      case 'ease-in-out-sine':
-        return getTimingBezier(0.37, 0, 0.63, 1);
-
-      case 'ease-in-cubic':
-        return getTimingBezier(0.32, 0, 0.67, 0);
-      case 'ease-out-cubic':
-        return getTimingBezier(0.33, 1, 0.68, 1);
-      case 'ease-in-out-cubic':
-        return getTimingBezier(0.65, 0, 0.35, 1);
-
-      case 'ease-in-circ':
-        return getTimingBezier(0.55, 0, 1, 0.45);
-      case 'ease-out-circ':
-        return getTimingBezier(0, 0.55, 0.45, 1);
-      case 'ease-in-out-circ':
-        return getTimingBezier(0.85, 0, 0.15, 1);
-
-      case 'ease-in-back':
-        return getTimingBezier(0.36, 0, 0.66, -0.56);
-      case 'ease-out-back':
-        return getTimingBezier(0.34, 1.56, 0.64, 1);
-      case 'ease-in-out-back':
-        return getTimingBezier(0.68, -0.6, 0.32, 1.6);
-
-      case 'step-start':
-        return function () {
-          return 1;
-        };
-      case 'step-end':
-        return function (time: number) {
-          return time === 1 ? 1 : 0;
-        };
-      default:
-        // eslint-disable-next-line no-case-declarations
-        const s = 'cubic-bezier(';
-        if (str && str.indexOf(s) === 0) {
-          const parts = str
-            .substr(s.length, str.length - s.length - 1)
-            .split(',');
-          if (parts.length !== 4) {
-            console.warn('Unknown timing function: ' + str);
-            // Fallback: use linear.
-            return function (time) {
-              return time;
-            };
-          }
-          const a = parseFloat(parts[0] || '0.42');
-          const b = parseFloat(parts[1] || '0');
-          const c = parseFloat(parts[2] || '1');
-          const d = parseFloat(parts[3] || '1');
-
-          if (isNaN(a) || isNaN(b) || isNaN(c) || isNaN(d)) {
-            console.warn(' Unknown timing function: ' + str);
-            // Fallback: use linear.
-            return function (time) {
-              return time;
-            };
-          }
-
-          return getTimingBezier(a, b, c, d);
-        } else {
-          console.warn('Unknown timing function: ' + str);
-          // Fallback: use linear.
-          return function (time) {
-            return time;
-          };
-        }
-    }
-  },
-);
+interface TimingFunctionMap {
+  [key: string]: (time: number) => number | undefined;
+}
+
+type TimingLookupArray = number[];
+interface TimingLookup {
+  [key: string]: TimingLookupArray;
+}
+
+const timingMapping: TimingFunctionMap = {};
+
+const timingLookup: TimingLookup = {
+  ease: [0.25, 0.1, 0.25, 1.0],
+  'ease-in': [0.42, 0, 1.0, 1.0],
+  'ease-out': [0, 0, 0.58, 1.0],
+  'ease-in-out': [0.42, 0, 0.58, 1.0],
+  'ease-in-sine': [0.12, 0, 0.39, 0],
+  'ease-out-sine': [0.12, 0, 0.39, 0],
+  'ease-in-out-sine': [0.37, 0, 0.63, 1],
+  'ease-in-cubic': [0.32, 0, 0.67, 0],
+  'ease-out-cubic': [0.33, 1, 0.68, 1],
+  'ease-in-out-cubic': [0.65, 0, 0.35, 1],
+  'ease-in-circ': [0.55, 0, 1, 0.45],
+  'ease-out-circ': [0, 0.55, 0.45, 1],
+  'ease-in-out-circ': [0.85, 0, 0.15, 1],
+  'ease-in-back': [0.36, 0, 0.66, -0.56],
+  'ease-out-back': [0.34, 1.56, 0.64, 1],
+  'ease-in-out-back': [0.68, -0.6, 0.32, 1.6],
+};
+
+const defaultTiming = (t: number): number => t;
+
+const parseCubicBezier = (str: string) => {
+  //cubic-bezier(0.84, 0.52, 0.56, 0.6)
+  const regex = /-?\d*\.?\d+/g;
+  const match = str.match(regex);
+
+  if (match) {
+    const [num1, num2, num3, num4] = match;
+    const a = parseFloat(num1 || '0.42');
+    const b = parseFloat(num2 || '0');
+    const c = parseFloat(num3 || '1');
+    const d = parseFloat(num4 || '1');
+
+    const timing = getTimingBezier(a, b, c, d);
+    timingMapping[str] = timing;
+
+    return timing;
+  }
+
+  // parse failed, return linear
+  console.warn('Unknown cubic-bezier timing: ' + str);
+  return defaultTiming;
+};
+
+export const getTimingFunction = (
+  str: string,
+): ((time: number) => number | undefined) => {
+  if (str === '') {
+    return defaultTiming;
+  }
+
+  if (timingMapping[str] !== undefined) {
+    return timingMapping[str] || defaultTiming;
+  }
+
+  if (str === 'linear') {
+    return (time: number) => {
+      return time;
+    };
+  }
+
+  if (str === 'step-start') {
+    return () => {
+      return 1;
+    };
+  }
+
+  if (str === 'step-end') {
+    return (time: number) => {
+      return time === 1 ? 1 : 0;
+    };
+  }
+
+  if (timingLookup[str] !== undefined) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - TS doesn't understand that we've checked for undefined
+    const [a, b, c, d] = timingLookup[str];
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const timing = getTimingBezier(a, b, c, d);
+    timingMapping[str] = timing;
+    return timing;
+  }
+
+  if (str.startsWith('cubic-bezier')) {
+    return parseCubicBezier(str);
+  }
+
+  console.warn('Unknown timing function: ' + str);
+  return defaultTiming;
+};
 
 if (!Math.hypot)
   Math.hypot = (...args: number[]) => {

package/src/main-api/INode.ts

@@ -405,6 +405,17 @@ export interface INodeWritableProps {
    * - `2 * Math.PI`: 360 rotation clockwise
    */
   rotation: number;
+
+  /**
+   * Whether the Node is rendered to a texture
+   *
+   * @remarks
+   * TBD
+   *
+   * @default false
+   */
+  rtt: boolean;
+
   /**
    * Node data element for custom data storage (optional)
    *

package/src/main-api/Inspector.ts

@@ -393,7 +393,12 @@ export class Inspector {
     if (property === 'data') {
       for (const key in value) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        div.setAttribute(`data-${key}`, String(value[key]));
+        const keyValue: unknown = value[key];
+        if (keyValue === undefined) {
+          div.removeAttribute(`data-${key}`);
+        } else {
+          div.setAttribute(`data-${key}`, String(keyValue));
+        }
       }
       return;
     }

package/src/main-api/RendererMain.ts

@@ -41,6 +41,7 @@ import { EventEmitter } from '../common/EventEmitter.js';
 import { Inspector } from './Inspector.js';
 import { santizeCustomDataMap } from '../render-drivers/utils.js';
 import { isProductionEnvironment } from '../utils.js';
+import type { StageOptions } from '../core/Stage.js';
 
 /**
  * An immutable reference to a specific Texture type
@@ -270,6 +271,11 @@ export interface RendererMainSettings {
    * @defaultValue `false` (disabled)
    */
   enableInspector?: boolean;
+
+  /**
+   * Renderer mode
+   */
+  renderMode?: 'webgl' | 'canvas';
 }
 
 /**
@@ -344,6 +350,7 @@ export class RendererMain extends EventEmitter {
         settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2,
       enableContextSpy: settings.enableContextSpy ?? false,
       enableInspector: settings.enableInspector ?? false,
+      renderMode: settings.renderMode ?? 'webgl',
     };
     this.settings = resolvedSettings;
 
@@ -563,6 +570,7 @@ export class RendererMain extends EventEmitter {
       pivotX: props.pivotX ?? props.pivot ?? 0.5,
       pivotY: props.pivotY ?? props.pivot ?? 0.5,
       rotation: props.rotation ?? 0,
+      rtt: props.rtt ?? false,
       data: data,
     };
   }

package/src/render-drivers/main/MainCoreDriver.ts

@@ -64,6 +64,7 @@ export class MainCoreDriver implements ICoreDriver {
       fpsUpdateInterval: rendererSettings.fpsUpdateInterval,
       enableContextSpy: rendererSettings.enableContextSpy,
       numImageWorkers: rendererSettings.numImageWorkers,
+      renderMode: rendererSettings.renderMode,
       debug: {
         monitorTextureCache: false,
       },

package/src/render-drivers/main/MainOnlyNode.ts

@@ -105,6 +105,7 @@ export class MainOnlyNode extends EventEmitter implements INode {
         shaderProps: null,
         texture: null,
         textureOptions: null,
+        rtt: props.rtt,
       });
     // Forward loaded/failed events
     this.coreNode.on('loaded', this.onTextureLoaded);
@@ -121,6 +122,7 @@ export class MainOnlyNode extends EventEmitter implements INode {
     this.shader = props.shader;
     this.texture = props.texture;
     this.src = props.src;
+    this.rtt = props.rtt;
     this._data = props.data;
   }
 
@@ -145,6 +147,16 @@ export class MainOnlyNode extends EventEmitter implements INode {
   }
 
   set width(value: number) {
+    if (value !== this.coreNode.width && this.coreNode.rtt) {
+      this.texture = this.rendererMain.createTexture(
+        'RenderTexture',
+        {
+          width: this.width,
+          height: this.height,
+        },
+        { preload: true, flipY: true },
+      );
+    }
     this.coreNode.width = value;
   }
 
@@ -153,6 +165,16 @@ export class MainOnlyNode extends EventEmitter implements INode {
   }
 
   set height(value: number) {
+    if (value !== this.coreNode.height && this.coreNode.rtt) {
+      this.texture = this.rendererMain.createTexture(
+        'RenderTexture',
+        {
+          width: this.width,
+          height: this.height,
+        },
+        { preload: true, flipY: true },
+      );
+    }
     this.coreNode.height = value;
   }
 
@@ -422,6 +444,28 @@ export class MainOnlyNode extends EventEmitter implements INode {
     }
   }
 
+  get rtt(): boolean {
+    return this.coreNode.rtt;
+  }
+
+  set rtt(value: boolean) {
+    if (value) {
+      this.texture = this.rendererMain.createTexture(
+        'RenderTexture',
+        {
+          width: this.width,
+          height: this.height,
+        },
+        { preload: true, flipY: true },
+      );
+    }
+    this.coreNode.rtt = value;
+  }
+
+  get parentHasRenderTexture(): boolean {
+    return this.coreNode.parentHasRenderTexture;
+  }
+
   private onTextureLoaded: NodeLoadedEventHandler = (target, payload) => {
     this.emit('loaded', payload);
   };

package/src/render-drivers/main/MainOnlyTextNode.ts

@@ -94,6 +94,7 @@ export class MainOnlyTextNode extends MainOnlyNode implements ITextNode {
         textureOptions: null,
         shader: null,
         shaderProps: null,
+        rtt: false,
       }),
     );
   }

package/src/render-drivers/threadx/NodeStruct.ts

@@ -48,6 +48,7 @@ export interface NodeStructWritableProps {
   pivotX: number;
   pivotY: number;
   rotation: number;
+  rtt: boolean;
 }
 
 export class NodeStruct
@@ -307,4 +308,13 @@ export class NodeStruct
   set zIndexLocked(value: number) {
     // Decorator will handle this
   }
+
+  @structProp('boolean')
+  get rtt(): boolean {
+    return false;
+  }
+
+  set rtt(value: boolean) {
+    // Decorator will handle this
+  }
 }

package/src/render-drivers/threadx/SharedNode.ts

@@ -63,6 +63,7 @@ export class SharedNode extends SharedObject {
       pivotX: sharedNodeStruct.pivotX,
       pivotY: sharedNodeStruct.pivotY,
       rotation: sharedNodeStruct.rotation,
+      rtt: sharedNodeStruct.rtt,
     } satisfies NodeStructWritableProps);
   }
 
@@ -96,4 +97,5 @@ export class SharedNode extends SharedObject {
   protected declare parentId: number;
   declare zIndex: number;
   declare zIndexLocked: number;
+  declare rtt: boolean;
 }

package/src/render-drivers/threadx/ThreadXCoreDriver.ts

@@ -174,6 +174,7 @@ export class ThreadXCoreDriver implements ICoreDriver {
       pivotX: props.pivotX,
       pivotY: props.pivotY,
       rotation: props.rotation,
+      rtt: props.rtt,
     } satisfies NodeStructWritableProps);
 
     const node = new ThreadXMainNode(rendererMain, bufferStruct);
@@ -221,6 +222,7 @@ export class ThreadXCoreDriver implements ICoreDriver {
       pivotX: props.pivotX,
       pivotY: props.pivotY,
       rotation: props.rotation,
+      rtt: props.rtt,
 
       // Text specific properties
       text: props.text,

package/src/render-drivers/threadx/ThreadXMainNode.ts

@@ -43,6 +43,7 @@ export class ThreadXMainNode extends SharedNode implements INode {
   protected _shader: ShaderRef | null = null;
   protected _data: CustomDataMap | undefined = {};
   private _src = '';
+  private _parentHasRenderTexture = false;
 
   /**
    * FinalizationRegistry for animation controllers. When an animation
@@ -168,6 +169,14 @@ export class ThreadXMainNode extends SharedNode implements INode {
     }
   }
 
+  set parentHasRenderTexture(hasRenderTexture: boolean) {
+    this._parentHasRenderTexture = hasRenderTexture;
+  }
+
+  get parentHasRenderTexture(): boolean {
+    return this._parentHasRenderTexture;
+  }
+
   get children(): ThreadXMainNode[] {
     return this._children;
   }

package/src/render-drivers/threadx/worker/ThreadXRendererNode.ts

@@ -231,6 +231,7 @@ export class ThreadXRendererNode extends SharedNode {
       pivotX: sharedNodeStruct.pivotX,
       pivotY: sharedNodeStruct.pivotY,
       rotation: sharedNodeStruct.rotation,
+      rtt: sharedNodeStruct.rtt,
 
       // These are passed in via message handlers
       shader: null,

package/src/render-drivers/threadx/worker/ThreadXRendererTextNode.ts

@@ -68,6 +68,7 @@ export class ThreadXRendererTextNode extends ThreadXRendererNode {
         scaleX: sharedNodeStruct.scaleX,
         scaleY: sharedNodeStruct.scaleY,
         rotation: sharedNodeStruct.rotation,
+        rtt: sharedNodeStruct.rtt,
 
         // These are passed in via message handlers
         shader: null,

package/src/render-drivers/threadx/worker/renderer.ts

@@ -75,6 +75,7 @@ const threadx = ThreadX.init({
         fpsUpdateInterval: message.fpsUpdateInterval,
         enableContextSpy: message.enableContextSpy,
         numImageWorkers: message.numImageWorkers,
+        renderMode: 'webgl',
         debug: {
           monitorTextureCache: false,
         },
@@ -113,6 +114,7 @@ const threadx = ThreadX.init({
         pivotX: coreRootNode.pivotX,
         pivotY: coreRootNode.pivotY,
         rotation: coreRootNode.rotation,
+        rtt: coreRootNode.rtt,
       } satisfies NodeStructWritableProps);
 
       // Share the root node that was created by the Stage with the main worker.

package/src/render-drivers/utils.ts

@@ -58,7 +58,7 @@ export async function loadCoreExtension(
 }
 
 export function santizeCustomDataMap(d: CustomDataMap): CustomDataMap {
-  const validTypes = { boolean: true, string: true, number: true };
+  const validTypes = { boolean: true, string: true, number: true, undefined: true };
 
   const keys = Object.keys(d);
   for (let i = 0; i < keys.length; i++) {

package/src/utils.ts

@@ -143,19 +143,30 @@ export function mergeColorAlpha(rgba: number, alpha: number): number {
   return ((r << 24) | (g << 16) | (b << 8) | a) >>> 0;
 }
 
+let premultiplyRGB = true;
+
+/**
+ * RGB components should not be premultiplied when using Canvas renderer
+ * @param mode  Renderer mode
+ */
+export function setPremultiplyMode(mode: 'webgl' | 'canvas'): void {
+  premultiplyRGB = mode === 'webgl';
+}
+
 /**
  * Given an RGBA encoded number, returns back the RGBA number with it's alpha
- * component multiplied by the passed `alpha` parameter. Before returning, the
- * final alpha value is multiplied into the color channels.
+ * component multiplied by the passed `alpha` parameter.
+ *
+ * For the webGl renderer, each color channel is premultiplied by the final alpha value.
  *
  * @remarks
  * If `flipEndianess` is set to true, the function will returned an ABGR encoded number
  * which is useful when the color value needs to be passed into a shader attribute.
  *
- * NOTE: This method returns a PREMULTIPLIED alpha color which is generally only useful
- * in the context of the internal rendering process. Use {@link mergeColorAlpha} if you
- * need to blend an alpha value into a color in the context of the Renderer's
- * main API.
+ * NOTE: Depending on the mode set by {@link setPremultiplyMode}, this method returns
+ * a PREMULTIPLIED alpha color which is generally only useful in the context of the
+ * internal rendering process. Use {@link mergeColorAlpha} if you need to blend an alpha
+ * value into a color in the context of the Renderer's main API.
  *
  * @internalRemarks
  * Do not expose this method in the main API because Renderer users should instead use
@@ -173,9 +184,10 @@ export function mergeColorAlphaPremultiplied(
   flipEndianess = false,
 ): number {
   const newAlpha = ((rgba & 0xff) / 255) * alpha;
-  const r = Math.trunc((rgba >>> 24) * newAlpha);
-  const g = Math.trunc(((rgba >>> 16) & 0xff) * newAlpha);
-  const b = Math.trunc(((rgba >>> 8) & 0xff) * newAlpha);
+  const rgbAlpha = premultiplyRGB ? newAlpha : 1;
+  const r = Math.trunc((rgba >>> 24) * rgbAlpha);
+  const g = Math.trunc(((rgba >>> 16) & 0xff) * rgbAlpha);
+  const b = Math.trunc(((rgba >>> 8) & 0xff) * rgbAlpha);
   const a = Math.trunc(newAlpha * 255);
 
   if (flipEndianess) {