@lightningjs/renderer 0.3.5 → 0.4.0

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/RoundedRectangle.ts

@@ -45,12 +45,7 @@ export class RoundedRectangle extends WebGlCoreShader {
   constructor(renderer: WebGlCoreRenderer) {
     super({
       renderer,
-      attributes: [
-        'a_position',
-        'a_textureCoordinate',
-        'a_color',
-        'a_textureIndex',
-      ],
+      attributes: ['a_position', 'a_textureCoordinate', 'a_color'],
       uniforms: [
         { name: 'u_resolution', uniform: 'uniform2fv' },
         { name: 'u_pixelRatio', uniform: 'uniform1f' },
@@ -115,7 +110,6 @@ export class RoundedRectangle extends WebGlCoreShader {
 
       varying vec4 v_color;
       varying vec2 v_textureCoordinate;
-      varying float v_textureIndex;
 
       void main() {
         vec2 normalized = a_position * u_pixelRatio / u_resolution;
@@ -125,7 +119,6 @@ export class RoundedRectangle extends WebGlCoreShader {
         // pass to fragment
         v_color = a_color;
         v_textureCoordinate = a_textureCoordinate;
-        v_textureIndex = a_textureIndex;
 
         // flip y
         gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);

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

@@ -18,7 +18,7 @@
  */
 
 import type { CoreTextureManager } from '../CoreTextureManager.js';
-import { Texture } from './Texture.js';
+import { Texture, type TextureData } from './Texture.js';
 
 /**
  * Properties of the {@link ColorTexture}
@@ -60,12 +60,13 @@ export class ColorTexture extends Texture {
     this.props.color = color;
   }
 
-  override async getTextureData(): Promise<ImageBitmap> {
+  override async getTextureData(): Promise<TextureData> {
     const pixelData32 = new Uint32Array([this.color]);
     const pixelData8 = new Uint8ClampedArray(pixelData32.buffer);
-    return await createImageBitmap(new ImageData(pixelData8, 1, 1), {
-      premultiplyAlpha: 'none',
-    });
+    return {
+      data: new ImageData(pixelData8, 1, 1),
+      premultiplyAlpha: true,
+    };
   }
 
   static override makeCacheKey(props: ColorTextureProps): string {

package/src/core/textures/ImageTexture.ts

@@ -73,22 +73,25 @@ export class ImageTexture extends Texture {
   override async getTextureData(): Promise<TextureData> {
     const { src, premultiplyAlpha } = this.props;
     if (!src) {
-      return null;
+      return {
+        data: null,
+      };
     }
     if (src instanceof ImageData) {
-      return await createImageBitmap(src, {
-        premultiplyAlpha: premultiplyAlpha ? 'premultiply' : 'none',
-        colorSpaceConversion: 'none',
-        imageOrientation: 'none',
-      });
+      return {
+        data: src,
+        premultiplyAlpha,
+      };
     }
     const response = await fetch(src);
     const blob = await response.blob();
-    return await createImageBitmap(blob, {
-      premultiplyAlpha: premultiplyAlpha ? 'premultiply' : 'none',
-      colorSpaceConversion: 'none',
-      imageOrientation: 'none',
-    });
+    return {
+      data: await createImageBitmap(blob, {
+        premultiplyAlpha: premultiplyAlpha ? 'premultiply' : 'none',
+        colorSpaceConversion: 'none',
+        imageOrientation: 'none',
+      }),
+    };
   }
 
   static override makeCacheKey(props: ImageTextureProps): string | false {

package/src/core/textures/NoiseTexture.ts

@@ -72,9 +72,9 @@ export class NoiseTexture extends Texture {
       pixelData8[i + 2] = v;
       pixelData8[i + 3] = 255;
     }
-    return await createImageBitmap(new ImageData(pixelData8, width, height), {
-      premultiplyAlpha: 'none',
-    });
+    return {
+      data: new ImageData(pixelData8, width, height),
+    };
   }
 
   static override makeCacheKey(props: NoiseTextureProps): string {

package/src/core/textures/SubTexture.ts

@@ -23,7 +23,7 @@ import type {
 } from '../../common/CommonTypes.js';
 import type { TextureRef } from '../../main-api/RendererMain.js';
 import type { CoreTextureManager } from '../CoreTextureManager.js';
-import { Texture } from './Texture.js';
+import { Texture, type TextureData } from './Texture.js';
 
 /**
  * Properties of the {@link SubTexture}
@@ -115,8 +115,10 @@ export class SubTexture extends Texture {
     this.setState('failed', error);
   };
 
-  override async getTextureData(): Promise<SubTextureProps> {
-    return this.props;
+  override async getTextureData(): Promise<TextureData> {
+    return {
+      data: this.props,
+    };
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/core/textures/Texture.ts

@@ -28,9 +28,20 @@ import type {
 import { EventEmitter } from '../../common/EventEmitter.js';
 
 /**
- * Texture sources that are used to populate a CoreContextTexture
+ * TextureData that is used to populate a CoreContextTexture
  */
-export type TextureData = ImageBitmap | SubTextureProps | null;
+export interface TextureData {
+  /**
+   * The texture data
+   */
+  data: ImageBitmap | ImageData | SubTextureProps | null;
+  /**
+   * Premultiply alpha when uploading texture data to the GPU
+   *
+   * @defaultValue `false`
+   */
+  premultiplyAlpha?: boolean;
+}
 
 export type TextureState = 'loading' | 'loaded' | 'failed';
 

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