@lightningjs/renderer 0.9.4 → 1.0.0-rc.0

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

@@ -166,7 +166,6 @@ export class LightningTextTextureRenderer {
     | OffscreenCanvasRenderingContext2D
     | CanvasRenderingContext2D;
   private _settings: Settings;
-  private renderInfo: RenderInfo | undefined;
 
   constructor(
     canvas: OffscreenCanvas | HTMLCanvasElement,
@@ -619,8 +618,6 @@ export class LightningTextTextureRenderer {
     if (renderInfo.cutSx || renderInfo.cutSy) {
       this._context.translate(renderInfo.cutSx, renderInfo.cutSy);
     }
-
-    this.renderInfo = renderInfo;
   }
 
   wrapWord(word: string, wordWrapWidth: number, suffix: string) {

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

@@ -403,7 +403,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
         this.setStatus(state, 'failed', new Error(msg));
         return;
       }
-      trFontFace.texture.setRenderableOwner(state, state.isRenderable);
+      trFontFace.texture.setRenderableOwner(state, true);
     }
 
     // If the font hasn't been loaded yet, stop here.
@@ -712,7 +712,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
 
     const texture = state.trFontFace?.texture;
     assertTruthy(texture);
-    const ctxTexture = this.stage.txManager.getCtxTexture(texture);
+    const ctxTexture = texture.ctxTexture;
 
     renderOp.addTexture(ctxTexture as WebGlCoreCtxTexture);
     renderOp.length = state.bufferNumFloats;

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/layoutText.ts

@@ -360,7 +360,8 @@ export function layoutText(
 
       const xOffset = (vertexTextW - lineWidth) / 2;
       for (let j = line.bufferStart; j < line.bufferEnd; j += 4) {
-        vertexBuffer[j] += xOffset;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        vertexBuffer[j]! += xOffset;
       }
     }
   } else if (textAlign === 'right') {
@@ -376,7 +377,8 @@ export function layoutText(
 
       const xOffset = vertexTextW - lineWidth;
       for (let j = line.bufferStart; j < line.bufferEnd; j += 4) {
-        vertexBuffer[j] += xOffset;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        vertexBuffer[j]! += xOffset;
       }
     }
   }

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

@@ -19,6 +19,7 @@
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import type { EventEmitter } from '../../../common/EventEmitter.js';
+import type { CoreTextNode } from '../../CoreTextNode.js';
 import type { Stage } from '../../Stage.js';
 import type { Matrix3d } from '../../lib/Matrix3d.js';
 import type { Rect, RectWithValid } from '../../lib/utils.js';
@@ -501,7 +502,7 @@ export abstract class TextRenderer<
    */
   abstract addFontFace(fontFace: TrFontFace): void;
 
-  abstract createState(props: TrProps): StateT;
+  abstract createState(props: TrProps, node: CoreTextNode): StateT;
 
   /**
    * Destroy/Clean up the state object
@@ -544,7 +545,7 @@ export abstract class TextRenderer<
 
   abstract updateState(state: StateT): void;
 
-  abstract renderQuads(
+  renderQuads?(
     state: StateT,
     transform: Matrix3d,
     clippingRect: RectWithValid,

package/src/core/textures/ColorTexture.ts

@@ -39,7 +39,7 @@ export interface ColorTextureProps {
  * The pixel color is set with the {@link ColorTextureProps.color} prop.
  *
  * This is the default texture used for a Node if it's
- * {@link INodeWritableProps.texture} prop is set to `null` (the default)
+ * {@link INodeProps.texture} prop is set to `null` (the default)
  *
  * Generally the 1x1 color pixel is stretched to whatever the set dimensions of
  * a Node are.

package/src/core/textures/ImageTexture.ts

@@ -38,7 +38,7 @@ export interface ImageTextureProps {
    *
    * @default ''
    */
-  src?: string | ImageData | (() => ImageData);
+  src?: string | ImageData | (() => ImageData | null);
   /**
    * Whether to premultiply the alpha channel into the color channels of the
    * image.

package/src/core/textures/NoiseTexture.ts

@@ -77,7 +77,10 @@ export class NoiseTexture extends Texture {
     };
   }
 
-  static override makeCacheKey(props: NoiseTextureProps): string {
+  static override makeCacheKey(props: NoiseTextureProps): string | false {
+    if (props.cacheId === undefined) {
+      return false;
+    }
     const resolvedProps = NoiseTexture.resolveDefaults(props);
     return `NoiseTexture,${resolvedProps.width},${resolvedProps.height},${resolvedProps.cacheId}`;
   }

package/src/core/textures/SubTexture.ts

@@ -17,7 +17,6 @@
  * limitations under the License.
  */
 
-import type { TextureRef } from '../../main-api/RendererMain.js';
 import type { CoreTextureManager } from '../CoreTextureManager.js';
 import {
   Texture,
@@ -33,7 +32,7 @@ export interface SubTextureProps {
   /**
    * The texture that this sub-texture is a sub-region of.
    */
-  texture: TextureRef;
+  texture: Texture;
 
   /**
    * The x pixel position of the top-left of the sub-texture within the parent
@@ -80,12 +79,8 @@ export class SubTexture extends Texture {
 
   constructor(txManager: CoreTextureManager, props: SubTextureProps) {
     super(txManager);
-    this.parentTexture = this.txManager.loadTexture(
-      props.texture.txType,
-      props.texture.props,
-      props.texture.options,
-    );
     this.props = SubTexture.resolveDefaults(props || {});
+    this.parentTexture = this.props.texture;
 
     // If parent texture is already loaded / failed, trigger loaded event manually
     // so that users get a consistent event experience.
@@ -116,6 +111,11 @@ export class SubTexture extends Texture {
     this.setState('failed', error);
   };
 
+  override onChangeIsRenderable(isRenderable: boolean): void {
+    // Propagate the renderable owner change to the parent texture
+    this.parentTexture.setRenderableOwner(this, isRenderable);
+  }
+
   override async getTextureData(): Promise<TextureData> {
     return {
       data: this.props,

package/src/core/textures/Texture.ts

@@ -21,6 +21,7 @@ import type { CoreTextureManager } from '../CoreTextureManager.js';
 import type { SubTextureProps } from './SubTexture.js';
 import type { Dimensions } from '../../common/CommonTypes.js';
 import { EventEmitter } from '../../common/EventEmitter.js';
+import type { CoreContextTexture } from '../renderers/CoreContextTexture.js';
 
 /**
  * Event handler for when a Texture is freed
@@ -145,6 +146,10 @@ export abstract class Texture extends EventEmitter {
 
   readonly renderableOwners = new Set<unknown>();
 
+  readonly renderable: boolean = false;
+
+  readonly lastRenderableChangeTime = 0;
+
   constructor(protected txManager: CoreTextureManager) {
     super();
   }
@@ -164,18 +169,56 @@ export abstract class Texture extends EventEmitter {
    * @param renderable
    */
   setRenderableOwner(owner: unknown, renderable: boolean): void {
+    const oldSize = this.renderableOwners.size;
     if (renderable) {
       this.renderableOwners.add(owner);
+      const newSize = this.renderableOwners.size;
+      if (newSize > oldSize && newSize === 1) {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        (this.renderable as boolean) = true;
+        (this.lastRenderableChangeTime as number) = this.txManager.frameTime;
+        this.onChangeIsRenderable?.(true);
+      }
     } else {
       this.renderableOwners.delete(owner);
+      const newSize = this.renderableOwners.size;
+      if (newSize < oldSize && newSize === 0) {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        (this.renderable as boolean) = false;
+        (this.lastRenderableChangeTime as number) = this.txManager.frameTime;
+        this.onChangeIsRenderable?.(false);
+      }
     }
   }
 
   /**
-   * Returns true if the texture is assigned to any Nodes that are renderable.
+   * Event called when the Texture becomes renderable or unrenderable.
+   *
+   * @remarks
+   * Used by subclasses like SubTexture propogate then renderability of the
+   * Texture to other referenced Textures.
+   *
+   * @param isRenderable `true` if this Texture has renderable owners.
+   */
+  onChangeIsRenderable?(isRenderable: boolean): void;
+
+  /**
+   * Get the CoreContextTexture for this Texture
+   *
+   * @remarks
+   * Each Texture has a corresponding CoreContextTexture that is used to
+   * manage the texture's native data depending on the renderer's mode
+   * (WebGL, Canvas, etc).
+   *
+   * The Texture and CoreContextTexture are always linked together in a 1:1
+   * relationship.
    */
-  get renderable(): boolean {
-    return this.renderableOwners.size > 0;
+  get ctxTexture() {
+    // The first time this is called, create the ctxTexture
+    const ctxTexture = this.txManager.renderer.createCtxTexture(this);
+    // And replace this getter with the value for future calls
+    Object.defineProperty(this, 'ctxTexture', { value: ctxTexture });
+    return ctxTexture;
   }
 
   /**

package/src/core/utils.ts

@@ -197,10 +197,11 @@ export const getTimingFunction = (
     };
   }
 
-  if (timingLookup[str] !== undefined) {
+  const lookup = timingLookup[str];
+  if (lookup !== undefined) {
+    const [a, b, c, d] = lookup;
     // 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;
@@ -215,12 +216,12 @@ export const getTimingFunction = (
   return defaultTiming;
 };
 
-if (!Math.hypot)
-  Math.hypot = (...args: number[]) => {
-    let y = 0,
-      i = args.length;
-    while (i--) {
-      y += args[i]! * args[i]!;
-    }
-    return Math.sqrt(y);
-  };
+/**
+ * Convert bytes to string of megabytes with 2 decimal points
+ *
+ * @param bytes
+ * @returns
+ */
+export function bytesToMb(bytes: number) {
+  return (bytes / 1024 / 1024).toFixed(2);
+}

package/src/main-api/DynamicShaderController.ts

@@ -0,0 +1,97 @@
+import type { ShaderEffectValueMap } from '../../exports/index.js';
+import type {
+  CoreShaderManager,
+  EffectMap,
+  ShaderMap,
+} from '../core/CoreShaderManager.js';
+import type { ExtractProps } from '../core/CoreTextureManager.js';
+import type { EffectDesc } from '../core/renderers/webgl/shaders/DynamicShader.js';
+import type { BaseShaderController } from './ShaderController.js';
+
+type MapEffectProps<
+  Effects extends [...{ name: string; type: keyof EffectMap }[]],
+> = {
+  [K in Effects[number] as K['name']]: ExtractProps<EffectMap[K['type']]>;
+};
+
+export type DynamicEffects<
+  T extends [...{ name: string; type: keyof EffectMap }[]],
+> = {
+  [K in keyof T]: EffectDesc<T[K]>;
+};
+
+export class DynamicShaderController<
+  Effects extends [...{ name: string; type: keyof EffectMap }[]],
+> implements BaseShaderController
+{
+  private resolvedProps: ExtractProps<ShaderMap['DynamicShader']>;
+  props: MapEffectProps<Effects>;
+  type: 'DynamicShader';
+
+  constructor(
+    readonly shader: InstanceType<ShaderMap['DynamicShader']>,
+    props: ExtractProps<ShaderMap['DynamicShader']>,
+    shManager: CoreShaderManager,
+  ) {
+    this.type = 'DynamicShader';
+    this.resolvedProps = props;
+    const effectConstructors = shManager.getRegisteredEffects();
+    const definedProps = {};
+
+    const effects = props.effects!;
+    const effectsLength = effects.length;
+
+    for (let i = 0; i < effectsLength; i++) {
+      const {
+        name: effectName,
+        props: effectProps,
+        type: effectType,
+      } = effects[i]!;
+      const definedEffectProps = {};
+      const propEntries = Object.keys(effectProps);
+      const propEntriesLength = propEntries.length;
+      for (let j = 0; j < propEntriesLength; j++) {
+        const propName = propEntries[j]!;
+        Object.defineProperty(definedEffectProps, propName, {
+          get: () => {
+            return (
+              this.resolvedProps.effects![i]!.props[propName] as Record<
+                string,
+                any
+              >
+            ).value;
+          },
+          set: (value) => {
+            const target = this.resolvedProps.effects![i]!.props[
+              propName
+            ] as Record<string, any>;
+            target.value = value;
+            if (target.hasValidator) {
+              value = target.validatedValue = effectConstructors[effectType]!
+                .uniforms[propName]?.validator!(value, effectProps);
+            }
+            if (target.hasProgramValueUpdater) {
+              effectConstructors[effectType]!.uniforms[propName]
+                ?.updateProgramValue!(target as ShaderEffectValueMap);
+            } else {
+              target.programValue = value;
+            }
+            shManager.renderer.stage.requestRender();
+          },
+        });
+      }
+
+      Object.defineProperty(definedProps, effectName, {
+        get: () => {
+          return definedEffectProps;
+        },
+      });
+    }
+
+    this.props = definedProps as MapEffectProps<Effects>;
+  }
+
+  getResolvedProps() {
+    return this.resolvedProps;
+  }
+}