@lightningjs/renderer 2.13.1 → 3.0.0-beta2

package/src/core/Stage.ts

@@ -27,7 +27,7 @@ import {
 } from './CoreNode.js';
 import { CoreTextureManager } from './CoreTextureManager.js';
 import { TrFontManager } from './text-rendering/TrFontManager.js';
-import { CoreShaderManager, type ShaderMap } from './CoreShaderManager.js';
+import { CoreShaderManager } from './CoreShaderManager.js';
 import {
   TextRenderer,
   type TextRendererMap,
@@ -45,15 +45,14 @@ import {
   TextureMemoryManager,
   type TextureMemoryManagerSettings,
 } from './TextureMemoryManager.js';
-import type { CoreRendererOptions } from './renderers/CoreRenderer.js';
 import { CoreRenderer } from './renderers/CoreRenderer.js';
-import type { WebGlCoreRenderer } from './renderers/webgl/WebGlCoreRenderer.js';
-import type { CanvasCoreRenderer } from './renderers/canvas/CanvasCoreRenderer.js';
-import type { BaseShaderController } from '../main-api/ShaderController.js';
+import type { WebGlRenderer } from './renderers/webgl/WebGlRenderer.js';
+import type { CanvasRenderer } from './renderers/canvas/CanvasRenderer.js';
 import { CoreTextNode, type CoreTextNodeProps } from './CoreTextNode.js';
 import { santizeCustomDataMap } from '../main-api/utils.js';
 import type { SdfTextRenderer } from './text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
 import type { CanvasTextRenderer } from './text-rendering/renderers/CanvasTextRenderer.js';
+import type { CoreShaderNode } from './renderers/CoreShaderNode.js';
 import { createBound, createPreloadBounds, type Bound } from './lib/utils.js';
 import type { Texture } from './textures/Texture.js';
 import { ColorTexture } from './textures/ColorTexture.js';
@@ -71,7 +70,7 @@ export interface StageOptions {
   enableContextSpy: boolean;
   forceWebGL2: boolean;
   numImageWorkers: number;
-  renderEngine: typeof WebGlCoreRenderer | typeof CanvasCoreRenderer;
+  renderEngine: typeof WebGlRenderer | typeof CanvasRenderer;
   eventBus: EventEmitter;
   quadBufferSize: number;
   fontEngines: (typeof CanvasTextRenderer | typeof SdfTextRenderer)[];
@@ -91,7 +90,6 @@ export type StageFrameTickHandler = (
   frameTickData: FrameTickPayload,
 ) => void;
 
-const bufferMemory = 2e6;
 const autoStart = true;
 
 export class Stage {
@@ -105,12 +103,13 @@ export class Stage {
   public readonly renderer: CoreRenderer;
   public readonly root: CoreNode;
   public boundsMargin: [number, number, number, number];
-  public readonly defShaderCtr: BaseShaderController;
+  public readonly defShaderNode: CoreShaderNode | null = null;
   public readonly strictBound: Bound;
   public readonly preloadBound: Bound;
   public readonly strictBounds: boolean;
   public readonly defaultTexture: Texture | null = null;
-
+  public readonly pixelRatio: number;
+  public readonly bufferMemory: number = 2e6;
   /**
    * Renderer Event Bus for the Stage to emit events onto
    *
@@ -125,6 +124,7 @@ export class Stage {
   deltaTime = 0;
   lastFrameTime = 0;
   currentFrameTime = 0;
+  private clrColor = 0x00000000;
   private fpsNumFrames = 0;
   private fpsElapsedTime = 0;
   private numQuadsRendered = 0;
@@ -168,7 +168,7 @@ export class Stage {
     });
 
     this.txMemManager = new TextureMemoryManager(this, textureMemory);
-    this.shManager = new CoreShaderManager();
+
     this.animationManager = new AnimationManager();
     this.contextSpy = enableContextSpy ? new ContextSpy() : null;
     this.strictBounds = options.strictBounds;
@@ -185,25 +185,25 @@ export class Stage {
     this.strictBound = createBound(0, 0, appWidth, appHeight);
     this.preloadBound = createPreloadBounds(this.strictBound, bm);
 
-    const rendererOptions: CoreRendererOptions = {
+    this.clrColor = clearColor;
+
+    this.pixelRatio =
+      options.devicePhysicalPixelRatio * options.deviceLogicalPixelRatio;
+
+    this.renderer = new renderEngine({
       stage: this,
       canvas,
-      pixelRatio:
-        options.devicePhysicalPixelRatio * options.deviceLogicalPixelRatio,
-      clearColor: clearColor ?? 0xff000000,
-      bufferMemory,
-      txManager: this.txManager,
-      txMemManager: this.txMemManager,
-      shManager: this.shManager,
       contextSpy: this.contextSpy,
       forceWebGL2,
-    };
+    });
+
+    this.shManager = new CoreShaderManager(this);
+
+    this.defShaderNode = this.renderer.getDefaultShaderNode();
 
-    this.renderer = new renderEngine(rendererOptions);
     const renderMode = this.renderer.mode || 'webgl';
 
     this.createDefaultTexture();
-    this.defShaderCtr = this.renderer.getDefShaderCtr();
     setPremultiplyMode(renderMode);
 
     // Must do this after renderer is created
@@ -271,7 +271,7 @@ export class Stage {
       parent: null,
       texture: null,
       textureOptions: {},
-      shader: this.defShaderCtr,
+      shader: this.defShaderNode,
       rtt: false,
       src: null,
       scale: 1,
@@ -288,6 +288,7 @@ export class Stage {
   }
 
   setClearColor(color: number) {
+    this.clearColor = color;
     this.renderer.updateClearColor(color);
     this.renderRequested = true;
   }
@@ -589,20 +590,6 @@ export class Stage {
     return resolvedTextRenderer as unknown as TextRenderer;
   }
 
-  /**
-   * Create a shader controller instance
-   *
-   * @param type
-   * @param props
-   * @returns
-   */
-  createShaderCtr(
-    type: keyof ShaderMap,
-    props: Record<string, unknown>,
-  ): BaseShaderController {
-    return this.shManager.loadShader(type, props);
-  }
-
   createNode(props: Partial<CoreNodeProps>) {
     const resolvedProps = this.resolveNodeDefaults(props);
     return new CoreNode(this, resolvedProps);
@@ -610,8 +597,7 @@ export class Stage {
 
   createTextNode(props: Partial<CoreTextNodeProps>) {
     const fontSize = props.fontSize ?? 16;
-    const resolvedProps = {
-      ...this.resolveNodeDefaults(props),
+    const resolvedProps = Object.assign(this.resolveNodeDefaults(props), {
       text: props.text ?? '',
       textRendererOverride: props.textRendererOverride ?? null,
       fontSize,
@@ -631,8 +617,7 @@ export class Stage {
       verticalAlign: props.verticalAlign ?? 'middle',
       overflowSuffix: props.overflowSuffix ?? '...',
       debug: props.debug ?? {},
-      shaderProps: null,
-    };
+    });
 
     const resolvedTextRenderer = this.resolveTextRenderer(
       resolvedProps,
@@ -705,7 +690,7 @@ export class Stage {
       parent: props.parent ?? null,
       texture: props.texture ?? null,
       textureOptions: props.textureOptions ?? {},
-      shader: props.shader ?? this.defShaderCtr,
+      shader: props.shader ?? this.defShaderNode,
       // Since setting the `src` will trigger a texture load, we need to set it after
       // we set the texture. Otherwise, problems happen.
       src: props.src ?? null,
@@ -740,4 +725,14 @@ export class Stage {
   cleanup(aggressive: boolean) {
     this.txMemManager.cleanup(aggressive);
   }
+
+  set clearColor(value: number) {
+    this.renderer.updateClearColor(value);
+    this.renderRequested = true;
+    this.clrColor = value;
+  }
+
+  get clearColor() {
+    return this.clrColor;
+  }
 }

package/src/core/animations/CoreAnimation.ts

@@ -46,7 +46,6 @@ export class CoreAnimation extends EventEmitter {
   private timingFunction: (t: number) => number | undefined;
 
   propValuesMap: PropValuesMap = {};
-  dynPropValuesMap: PropValuesMap | undefined = undefined;
 
   constructor(
     private node: CoreNode,
@@ -67,33 +66,18 @@ export class CoreAnimation extends EventEmitter {
             key as keyof Omit<CoreNodeAnimateProps, 'shaderProps'>
           ] as number,
         };
-      } else if (node.shader.type !== 'DynamicShader') {
+      } else if (key === 'shaderProps' && node.shader !== null) {
         this.propValuesMap['shaderProps'] = {};
         for (const key in props.shaderProps) {
+          let start = node.shader.props![key];
+          if (Array.isArray(start) === true) {
+            start = start[0];
+          }
           this.propValuesMap['shaderProps'][key] = {
-            start: node.shader.props[key] as number,
+            start,
             target: props.shaderProps[key] as number,
           };
         }
-      } else {
-        const shaderPropKeys = Object.keys(props.shaderProps!);
-        const spLength = shaderPropKeys.length;
-        this.dynPropValuesMap = {};
-        for (let j = 0; j < spLength; j++) {
-          const effectName = shaderPropKeys[j]!;
-          const effect = props.shaderProps![effectName]!;
-          this.dynPropValuesMap[effectName] = {};
-          const effectProps = Object.entries(effect);
-          const eLength = effectProps.length;
-
-          for (let k = 0; k < eLength; k++) {
-            const [key, value] = effectProps[k]!;
-            this.dynPropValuesMap[effectName]![key] = {
-              start: node.shader.props[effectName][key],
-              target: value,
-            };
-          }
-        }
       }
     }
 
@@ -142,24 +126,10 @@ export class CoreAnimation extends EventEmitter {
     }
     if (this.propValuesMap['shaderProps'] !== undefined) {
       this.restoreValues(
-        this.node.shader.props as Record<string, number>,
+        this.node.shader!.props as Record<string, number>,
         this.propValuesMap['shaderProps'],
       );
     }
-
-    if (this.dynPropValuesMap !== undefined) {
-      const dynEntries = Object.keys(this.dynPropValuesMap);
-      const dynEntriesL = dynEntries.length;
-      if (dynEntriesL > 0) {
-        for (let i = 0; i < dynEntriesL; i++) {
-          const key = dynEntries[i]!;
-          this.restoreValues(
-            this.node.shader.props[key],
-            this.dynPropValuesMap[key]!,
-          );
-        }
-      }
-    }
   }
 
   private reverseValues(valueMap: Record<string, PropValues>) {
@@ -185,17 +155,6 @@ export class CoreAnimation extends EventEmitter {
       this.reverseValues(this.propValuesMap['shaderProps']);
     }
 
-    if (this.dynPropValuesMap !== undefined) {
-      const dynEntries = Object.keys(this.dynPropValuesMap);
-      const dynEntriesL = dynEntries.length;
-      if (dynEntriesL > 0) {
-        for (let i = 0; i < dynEntriesL; i++) {
-          const key = dynEntries[i]!;
-          this.reverseValues(this.dynPropValuesMap[key]!);
-        }
-      }
-    }
-
     // restore stop method if we are not looping
     if (!this.settings.loop) {
       this.settings.stopMethod = false;
@@ -308,27 +267,12 @@ export class CoreAnimation extends EventEmitter {
     }
     if (this.propValuesMap['shaderProps'] !== undefined) {
       this.updateValues(
-        this.node.shader.props as Record<string, number>,
+        this.node.shader!.props as Record<string, number>,
         this.propValuesMap['shaderProps'],
         easing,
       );
     }
 
-    if (this.dynPropValuesMap !== undefined) {
-      const dynEntries = Object.keys(this.dynPropValuesMap);
-      const dynEntriesL = dynEntries.length;
-      if (dynEntriesL > 0) {
-        for (let i = 0; i < dynEntriesL; i++) {
-          const key = dynEntries[i]!;
-          this.updateValues(
-            this.node.shader.props[key],
-            this.dynPropValuesMap[key]!,
-            easing,
-          );
-        }
-      }
-    }
-
     if (this.progress < 1) {
       this.emit('tick', { progress: this.progress });
     }

package/src/core/lib/RenderCoords.ts

@@ -1,33 +1,50 @@
-const rx1 = 0;
-const rx2 = 2;
-const rx3 = 4;
-const rx4 = 6;
-const ry1 = 1;
-const ry2 = 3;
-const ry3 = 5;
-const ry4 = 7;
-
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
 export class RenderCoords {
-  public data: Float32Array;
+  public x1: number;
+  public y1: number;
+  public x2: number;
+  public y2: number;
+  public x3: number;
+  public y3: number;
+  public x4: number;
+  public y4: number;
+
   constructor(
-    entries?:
-      | [number, number, number, number, number, number, number, number]
-      | Float32Array,
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    x3: number,
+    y3: number,
+    x4: number,
+    y4: number,
   ) {
-    this.data = new Float32Array(8);
-    if (entries) {
-      this.data[rx1] = entries[rx1];
-      this.data[rx2] = entries[rx2];
-      this.data[rx3] = entries[rx3];
-      this.data[rx4] = entries[rx4];
-      this.data[ry1] = entries[ry1];
-      this.data[ry2] = entries[ry2];
-      this.data[ry3] = entries[ry3];
-      this.data[ry4] = entries[ry4];
-    }
+    this.x1 = x1;
+    this.y1 = y1;
+    this.x2 = x2;
+    this.y2 = y2;
+    this.x3 = x3;
+    this.y3 = y3;
+    this.x4 = x4;
+    this.y4 = y4;
   }
 
-  public static translate(
+  static translate(
     x1: number,
     y1: number,
     x2: number,
@@ -38,49 +55,17 @@ export class RenderCoords {
     y4: number,
     out?: RenderCoords,
   ): RenderCoords {
-    if (!out) {
-      out = new RenderCoords();
+    if (out === undefined) {
+      return new RenderCoords(x1, y1, x2, y2, x3, y3, x4, y4);
     }
-    out.data[rx1] = x1;
-    out.data[rx2] = x2;
-    out.data[rx3] = x3;
-    out.data[rx4] = x4;
-    out.data[ry1] = y1;
-    out.data[ry2] = y2;
-    out.data[ry3] = y3;
-    out.data[ry4] = y4;
+    out.x1 = x1;
+    out.y1 = y1;
+    out.x2 = x2;
+    out.y2 = y2;
+    out.x3 = x3;
+    out.y3 = y3;
+    out.x4 = x4;
+    out.y4 = y4;
     return out;
   }
-
-  get x1(): number {
-    return this.data[rx1]!;
-  }
-
-  get x2(): number {
-    return this.data[rx2]!;
-  }
-
-  get x3(): number {
-    return this.data[rx3]!;
-  }
-
-  get x4(): number {
-    return this.data[rx4]!;
-  }
-
-  get y1(): number {
-    return this.data[ry1]!;
-  }
-
-  get y2(): number {
-    return this.data[ry2]!;
-  }
-
-  get y3(): number {
-    return this.data[ry3]!;
-  }
-
-  get y4(): number {
-    return this.data[ry4]!;
-  }
 }