@lightningjs/renderer 0.3.6 → 0.4.1

package/src/core/CoreShaderManager.ts

@@ -22,10 +22,26 @@ import type { CoreShader } from './renderers/CoreShader.js';
 
 import { DefaultShader } from './renderers/webgl/shaders/DefaultShader.js';
 import { DefaultShaderBatched } from './renderers/webgl/shaders/DefaultShaderBatched.js';
-import { DynamicShader } from './renderers/webgl/shaders/DynamicShader.js';
+import {
+  DynamicShader,
+  type DynamicShaderProps,
+} from './renderers/webgl/shaders/DynamicShader.js';
 import { RoundedRectangle } from './renderers/webgl/shaders/RoundedRectangle.js';
 import { SdfShader } from './renderers/webgl/shaders/SdfShader.js';
 
+import { RadiusEffect } from './renderers/webgl/shaders/effects/RadiusEffect.js';
+import { BorderEffect } from './renderers/webgl/shaders/effects/BorderEffect.js';
+import { LinearGradientEffect } from './renderers/webgl/shaders/effects/LinearGradientEffect.js';
+import { GrayscaleEffect } from './renderers/webgl/shaders/effects/GrayscaleEffect.js';
+import { BorderRightEffect } from './renderers/webgl/shaders/effects/BorderRightEffect.js';
+import { BorderTopEffect } from './renderers/webgl/shaders/effects/BorderTopEffect.js';
+import { BorderBottomEffect } from './renderers/webgl/shaders/effects/BorderBottomEffect.js';
+import { BorderLeftEffect } from './renderers/webgl/shaders/effects/BorderLeftEffect.js';
+import { GlitchEffect } from './renderers/webgl/shaders/effects/GlitchEffect.js';
+import { FadeOutEffect } from './renderers/webgl/shaders/effects/FadeOutEffect.js';
+import { RadialGradientEffect } from './renderers/webgl/shaders/effects/RadialGradientEffect.js';
+import type { WebGlCoreRenderer } from './renderers/webgl/WebGlCoreRenderer.js';
+
 export interface ShaderMap {
   DefaultShader: typeof DefaultShader;
   DefaultShaderBatched: typeof DefaultShaderBatched;
@@ -39,12 +55,26 @@ export type ShaderNode<Type extends keyof ShaderMap> = {
   props: Record<string, unknown>;
 };
 
+export interface EffectMap {
+  radius: typeof RadiusEffect;
+  border: typeof BorderEffect;
+  borderBottom: typeof BorderBottomEffect;
+  borderLeft: typeof BorderLeftEffect;
+  borderRight: typeof BorderRightEffect;
+  borderTop: typeof BorderTopEffect;
+  fadeOut: typeof FadeOutEffect;
+  linearGradient: typeof LinearGradientEffect;
+  radialGradient: typeof RadialGradientEffect;
+  grayscale: typeof GrayscaleEffect;
+  glitch: typeof GlitchEffect;
+}
+
 export class CoreShaderManager {
   protected shCache: Map<string, InstanceType<ShaderMap[keyof ShaderMap]>> =
     new Map();
   protected shConstructors: Partial<ShaderMap> = {};
   protected attachedShader: CoreShader | null = null;
-
+  protected effectConstructors: Partial<EffectMap> = {};
   renderer!: CoreRenderer;
 
   constructor() {
@@ -53,6 +83,18 @@ export class CoreShaderManager {
     this.registerShaderType('RoundedRectangle', RoundedRectangle);
     this.registerShaderType('DynamicShader', DynamicShader);
     this.registerShaderType('SdfShader', SdfShader);
+
+    this.registerEffectType('border', BorderEffect);
+    this.registerEffectType('borderBottom', BorderBottomEffect);
+    this.registerEffectType('borderLeft', BorderLeftEffect);
+    this.registerEffectType('borderRight', BorderRightEffect);
+    this.registerEffectType('borderTop', BorderTopEffect);
+    this.registerEffectType('fadeOut', FadeOutEffect);
+    this.registerEffectType('linearGradient', LinearGradientEffect);
+    this.registerEffectType('radialGradient', RadialGradientEffect);
+    this.registerEffectType('grayscale', GrayscaleEffect);
+    this.registerEffectType('glitch', GlitchEffect);
+    this.registerEffectType('radius', RadiusEffect);
   }
 
   registerShaderType<Type extends keyof ShaderMap>(
@@ -62,6 +104,13 @@ export class CoreShaderManager {
     this.shConstructors[shType] = shClass;
   }
 
+  registerEffectType<Type extends keyof EffectMap>(
+    effectType: Type,
+    effectClass: EffectMap[Type],
+  ): void {
+    this.effectConstructors[effectType] = effectClass;
+  }
+
   loadShader<Type extends keyof ShaderMap>(
     shType: Type,
     props?: ExtractProps<ShaderMap[Type]>,
@@ -73,6 +122,11 @@ export class CoreShaderManager {
     if (!ShaderClass) {
       throw new Error(`Shader type "${shType as string}" is not registered`);
     }
+
+    if (shType === 'DynamicShader') {
+      return this.loadDynamicShader(props!);
+    }
+
     const resolvedProps = ShaderClass.resolveDefaults(
       props as Record<string, unknown>,
     );
@@ -98,6 +152,40 @@ export class CoreShaderManager {
     };
   }
 
+  loadDynamicShader<Type extends keyof ShaderMap>(
+    props: DynamicShaderProps,
+  ): ShaderNode<Type> {
+    if (!this.renderer) {
+      throw new Error(`Renderer is not been defined`);
+    }
+    const resolvedProps = DynamicShader.resolveDefaults(
+      props as Record<string, unknown>,
+      this.effectConstructors,
+    );
+    const cacheKey = DynamicShader.makeCacheKey(
+      resolvedProps,
+      this.effectConstructors,
+    );
+    if (cacheKey && this.shCache.has(cacheKey)) {
+      return {
+        shader: this.shCache.get(cacheKey) as InstanceType<ShaderMap[Type]>,
+        props: resolvedProps,
+      };
+    }
+    const shader = new DynamicShader(
+      this.renderer as WebGlCoreRenderer,
+      props,
+      this.effectConstructors,
+    );
+    if (cacheKey) {
+      this.shCache.set(cacheKey, shader);
+    }
+    return {
+      shader: shader as InstanceType<ShaderMap[Type]>,
+      props: resolvedProps,
+    };
+  }
+
   useShader(shader: CoreShader): void {
     if (this.attachedShader === shader) {
       return;

package/src/core/animations/CoreAnimation.ts

@@ -23,7 +23,7 @@ import { getTimingFunction } from '../utils.js';
 import { mergeColorProgress } from '../../utils.js';
 import { EventEmitter } from '../../common/EventEmitter.js';
 
-export interface IAnimationSettings {
+export interface AnimationSettings {
   duration: number;
   delay: number;
   easing: string;
@@ -42,7 +42,7 @@ export class CoreAnimation extends EventEmitter {
   constructor(
     private node: CoreNode,
     private props: Partial<INodeAnimatableProps>,
-    public settings: Partial<IAnimationSettings>,
+    public settings: Partial<AnimationSettings>,
   ) {
     super();
     this.propStartValues = {};
@@ -78,7 +78,7 @@ export class CoreAnimation extends EventEmitter {
     (Object.keys(this.props) as Array<keyof INodeAnimatableProps>).forEach(
       (propName) => {
         // set the start value to the current value
-        const startValue = this.node[propName];
+        const startValue = this.props[propName];
         const endValue = this.propStartValues[propName] as number;
 
         // swap the start and end values
@@ -87,8 +87,10 @@ export class CoreAnimation extends EventEmitter {
       },
     );
 
-    // restore stop method
-    this.settings.stopMethod = false;
+    // restore stop method if we are not looping
+    if (!this.settings.loop) {
+      this.settings.stopMethod = false;
+    }
   }
 
   applyEasing(p: number, s: number, e: number): number {
@@ -96,7 +98,6 @@ export class CoreAnimation extends EventEmitter {
   }
 
   update(dt: number) {
-    // finish if no duration is provided
     const { duration, loop, easing } = this.settings;
     if (!duration) {
       this.emit('finished', {});

package/src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -37,6 +37,7 @@ import { BorderLeftEffect } from './effects/BorderLeftEffect.js';
 import { GlitchEffect } from './effects/GlitchEffect.js';
 import { FadeOutEffect } from './effects/FadeOutEffect.js';
 import { RadialGradientEffect } from './effects/RadialGradientEffect.js';
+import type { EffectMap } from '../../../CoreShaderManager.js';
 
 /**
  * Allows the `keyof EffectMap` to be mapped over and form an discriminated
@@ -82,20 +83,6 @@ export interface DynamicShaderProps
   effects?: EffectDesc[];
 }
 
-export interface EffectMap {
-  radius: typeof RadiusEffect;
-  border: typeof BorderEffect;
-  borderBottom: typeof BorderBottomEffect;
-  borderLeft: typeof BorderLeftEffect;
-  borderRight: typeof BorderRightEffect;
-  borderTop: typeof BorderTopEffect;
-  fadeOut: typeof FadeOutEffect;
-  linearGradient: typeof LinearGradientEffect;
-  radialGradient: typeof RadialGradientEffect;
-  grayscale: typeof GrayscaleEffect;
-  glitch: typeof GlitchEffect;
-}
-
 const Effects = {
   radius: RadiusEffect,
   border: BorderEffect,
@@ -120,8 +107,12 @@ export interface SpecificEffectDesc<
 export class DynamicShader extends WebGlCoreShader {
   effects: Array<InstanceType<EffectMap[keyof EffectMap]>> = [];
 
-  constructor(renderer: WebGlCoreRenderer, props: DynamicShaderProps) {
-    const shader = DynamicShader.createShader(props);
+  constructor(
+    renderer: WebGlCoreRenderer,
+    props: DynamicShaderProps,
+    effectContructors: Partial<EffectMap>,
+  ) {
+    const shader = DynamicShader.createShader(props, effectContructors);
     super({
       renderer,
       attributes: ['a_position', 'a_textureCoordinate', 'a_color'],
@@ -170,7 +161,10 @@ export class DynamicShader extends WebGlCoreShader {
     });
   }
 
-  static createShader(props: DynamicShaderProps) {
+  static createShader(
+    props: DynamicShaderProps,
+    effectContructors: Partial<EffectMap>,
+  ) {
     //counts duplicate effects
     const effectNameCount: Record<string, number> = {};
     const methods: Record<string, string> = {};
@@ -181,7 +175,7 @@ export class DynamicShader extends WebGlCoreShader {
     const uFx: Record<string, unknown>[] = [];
 
     const effects = props.effects!.map((effect) => {
-      const baseClass = Effects[effect.type];
+      const baseClass = effectContructors[effect.type]!;
       const key = baseClass.getEffectKey(effect.props || {});
 
       effectNameCount[key] = effectNameCount[key] ? ++effectNameCount[key] : 1;
@@ -208,7 +202,7 @@ export class DynamicShader extends WebGlCoreShader {
     let effectMethods = '';
 
     uFx?.forEach((fx) => {
-      const fxClass = Effects[fx.type as keyof EffectMap];
+      const fxClass = effectContructors[fx.type as keyof EffectMap]!;
       const fxProps = fxClass.resolveDefaults(
         (fx.props ?? {}) as Record<string, unknown>,
       );
@@ -360,11 +354,14 @@ export class DynamicShader extends WebGlCoreShader {
 
   static override resolveDefaults(
     props: DynamicShaderProps,
+    effectContructors?: Partial<EffectMap>,
   ): Required<DynamicShaderProps> {
     return {
       effects: (props.effects ?? []).map((effect) => ({
         type: effect.type,
-        props: Effects[effect.type].resolveDefaults(effect.props || {}),
+        props: effectContructors![effect.type]!.resolveDefaults(
+          effect.props || {},
+        ),
       })) as MapEffectDescs<keyof EffectMap>[],
       $dimensions: {
         width: 0,
@@ -374,10 +371,13 @@ export class DynamicShader extends WebGlCoreShader {
     };
   }
 
-  static override makeCacheKey(props: DynamicShaderProps): string {
+  static override makeCacheKey(
+    props: DynamicShaderProps,
+    effectContructors?: Partial<EffectMap>,
+  ): string {
     let fx = '';
     props.effects?.forEach((effect) => {
-      const baseClass = Effects[effect.type];
+      const baseClass = effectContructors![effect.type]!;
       const key = baseClass.getEffectKey(effect.props || {});
       fx += `,${key}`;
     });

package/src/core/renderers/webgl/shaders/effects/FadeOutEffect.ts

@@ -22,7 +22,31 @@ import {
   type ShaderEffectUniforms,
 } from './ShaderEffect.js';
 
+/**
+ * Properties of the {@link FadeOutEffect}
+ *
+ */
 export interface FadeOutEffectProps extends DefaultEffectProps {
+  /**
+   * Fade around the edges of the node
+   *
+   * @remarks
+   * You can input an array with a length of up to four or a number.
+   *
+   * array length 4:
+   * [top, right, bottom, left]
+   *
+   * array length 2:
+   * [20, 40] -> [20(top), 40(right), 20(bottom), 40(left)]
+   *
+   * array length 3:
+   * [20, 40, 60] -> [20(top), 40(right), 60(bottom), 20(left)]
+   *
+   * number:
+   * 30 -> [30, 30, 30, 30]
+   *
+   * @default 10
+   */
   fade?: number | number[];
 }
 

package/src/core/renderers/webgl/shaders/effects/LinearGradientEffect.ts

@@ -34,7 +34,7 @@ export interface LinearGradientEffectProps extends DefaultEffectProps {
    */
   colors?: number[];
   /**
-   * Angle of the LinearGradientEffect
+   * Angle of the LinearGradientEffect, Angle in Radians
    *
    * @default 0
    */
@@ -137,11 +137,6 @@ export class LinearGradientEffect extends ShaderEffect {
         return mix(higher, lower, 1.0);
       }
     `,
-    degToRad: `
-      float function(float d) {
-        return d * (PI / 180.0);
-      }
-    `,
     calcPoint: `
       vec2 function(float d, float angle) {
         return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
@@ -162,12 +157,10 @@ export class LinearGradientEffect extends ShaderEffect {
   static override onColorize = (props: LinearGradientEffectProps) => {
     const colors = props.colors!.length || 1;
     return `
-      float d = angle - 90.0;
-      float a = $degToRad(d);
+      float a = angle - (PI / 180.0 * 90.0);
       float lineDist = abs(u_dimensions.x * cos(a)) + abs(u_dimensions.y * sin(a));
-
       vec2 f = $calcPoint(lineDist * 0.5, a);
-      vec2 t = $calcPoint(lineDist * 0.5, $degToRad(d + 180.0));
+      vec2 t = $calcPoint(lineDist * 0.5, a + PI);
       vec2 gradVec = t - f;
       float dist = dot(v_textureCoordinate.xy * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
 

package/src/core/renderers/webgl/shaders/effects/RadiusEffect.ts

@@ -29,6 +29,21 @@ export interface RadiusEffectProps extends DefaultEffectProps {
   /**
    * Corner radius, in pixels, to cut out of the corners
    *
+   * @remarks
+   * You can input an array with a length of up to four or a number.
+   *
+   * array length 4:
+   * [topLeft, topRight, bottomRight, bottomLeft]
+   *
+   * array length 2:
+   * [20, 40] -> [20(topLeft), 40(topRight), 20(bottomRight), 40(bottomLeft)]
+   *
+   * array length 3:
+   * [20, 40, 60] -> [20(topLeft), 40(topRight), 60(bottomRight), 20(bottomLeft)]
+   *
+   * number:
+   * 30 -> [30, 30, 30, 30]
+   *
    * @default 10
    */
   radius?: number | number[];

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

@@ -42,11 +42,13 @@ import {
   type TrProps,
 } from './TextRenderer.js';
 
+const resolvedGlobal = typeof self === 'undefined' ? globalThis : self;
+
 /**
  * Global font set regardless of if run in the main thread or a web worker
  */
-const globalFontSet = ((self.document as any)?.fonts ||
-  (self as any).fonts) as FontFaceSet;
+const globalFontSet = ((resolvedGlobal.document as any)?.fonts ||
+  (resolvedGlobal as any).fonts) as FontFaceSet;
 
 declare module './TextRenderer.js' {
   interface TextRendererMap {

package/src/main-api/INode.ts

@@ -24,7 +24,7 @@ import type {
   TextRendererMap,
   TrProps,
 } from '../core/text-rendering/renderers/TextRenderer.js';
-import type { IAnimationSettings } from '../core/animations/CoreAnimation.js';
+import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
 
 /**
  * Writable properties of a Node.
@@ -399,7 +399,7 @@ export interface INode extends INodeWritableProps, IEventEmitter<INodeEvents> {
   readonly children: INode[];
   animate(
     props: Partial<INodeAnimatableProps>,
-    settings: Partial<IAnimationSettings>,
+    settings: Partial<AnimationSettings>,
   ): IAnimationController;
   destroy(): void;
   flush(): void;

package/src/main-api/RendererMain.ts

@@ -229,7 +229,7 @@ export interface RendererMainSettings {
 export class RendererMain {
   readonly root: INode | null = null;
   readonly driver: IRenderDriver;
-  private canvas: HTMLCanvasElement;
+  readonly canvas: HTMLCanvasElement;
   readonly settings: Readonly<Required<RendererMainSettings>>;
   private nodes: Map<number, INode> = new Map();
   private nextTextureId = 1;

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

@@ -33,7 +33,7 @@ import type {
   ShaderRef,
   TextureRef,
 } from '../../main-api/RendererMain.js';
-import type { IAnimationSettings } from '../../core/animations/CoreAnimation.js';
+import type { AnimationSettings } from '../../core/animations/CoreAnimation.js';
 import { EventEmitter } from '../../common/EventEmitter.js';
 import type {
   TextureFailedEventHandler,
@@ -422,7 +422,7 @@ export class MainOnlyNode extends EventEmitter implements INode {
 
   animate(
     props: Partial<INodeAnimatableProps>,
-    settings: Partial<IAnimationSettings>,
+    settings: Partial<AnimationSettings>,
   ): IAnimationController {
     const animation = new CoreAnimation(this.coreNode, props, settings);
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call

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

@@ -28,7 +28,7 @@ import { assertTruthy } from '../../utils.js';
 import type { NodeStruct } from './NodeStruct.js';
 import { SharedNode } from './SharedNode.js';
 import { ThreadXMainAnimationController } from './ThreadXMainAnimationController.js';
-import type { IAnimationSettings } from '../../core/animations/CoreAnimation.js';
+import type { AnimationSettings } from '../../core/animations/CoreAnimation.js';
 
 export class ThreadXMainNode extends SharedNode implements INode {
   private nextAnimationId = 1;
@@ -97,7 +97,7 @@ export class ThreadXMainNode extends SharedNode implements INode {
 
   animate(
     props: Partial<INodeAnimatableProps>,
-    settings: Partial<IAnimationSettings>,
+    settings: Partial<AnimationSettings>,
   ): IAnimationController {
     const id = this.nextAnimationId++;
     this.emit('createAnimation', { id, props, settings });

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

@@ -29,7 +29,7 @@ import { CoreAnimationController } from '../../../core/animations/CoreAnimationC
 import type { Texture } from '../../../core/textures/Texture.js';
 import { CoreNode } from '../../../core/CoreNode.js';
 import type { ShaderRef, TextureRef } from '../../../main-api/RendererMain.js';
-import type { IAnimationSettings } from '../../../core/animations/CoreAnimation.js';
+import type { AnimationSettings } from '../../../core/animations/CoreAnimation.js';
 import type { Dimensions } from '../../../common/CommonTypes.js';
 
 export class ThreadXRendererNode extends SharedNode {
@@ -78,7 +78,7 @@ export class ThreadXRendererNode extends SharedNode {
         const animation = new CoreAnimation(
           this.coreNode,
           props as Partial<INodeAnimatableProps>,
-          settings as Partial<IAnimationSettings>,
+          settings as Partial<AnimationSettings>,
         );
         animation.on('finished', () => {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access