@lightningjs/renderer 1.0.0-rc.0 → 1.0.0-rc.2

package/src/core/animations/CoreAnimation.ts

@@ -45,7 +45,7 @@ export class CoreAnimation extends EventEmitter {
   private timingFunction: (t: number) => number | undefined;
 
   propValuesMap: PropValuesMap = {};
-  dynPropValuesMap: PropValuesMap = {};
+  dynPropValuesMap: PropValuesMap | undefined = undefined;
 
   constructor(
     private node: CoreNode,
@@ -76,16 +76,15 @@ export class CoreAnimation extends EventEmitter {
       } else {
         const shaderPropKeys = Object.keys(props.shaderProps!);
         const spLength = shaderPropKeys.length;
-        let j = 0;
-        for (; j < spLength; j++) {
+        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;
 
-          let k = 0;
-          for (; k < eLength; k++) {
+          for (let k = 0; k < eLength; k++) {
             const [key, value] = effectProps[k]!;
             this.dynPropValuesMap[effectName]![key] = {
               start: node.shader.props[effectName][key],
@@ -145,16 +144,17 @@ export class CoreAnimation extends EventEmitter {
       );
     }
 
-    const dynEntries = Object.keys(this.dynPropValuesMap);
-    const dynEntriesL = dynEntries.length;
-    if (dynEntriesL > 0) {
-      let i = 0;
-      for (; i < dynEntriesL; i++) {
-        const key = dynEntries[i]!;
-        this.restoreValues(
-          this.node.shader.props[key],
-          this.dynPropValuesMap[key]!,
-        );
+    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]!,
+          );
+        }
       }
     }
   }
@@ -182,13 +182,14 @@ export class CoreAnimation extends EventEmitter {
       this.reverseValues(this.propValuesMap['shaderProps']);
     }
 
-    const dynEntries = Object.keys(this.dynPropValuesMap);
-    const dynEntriesL = dynEntries.length;
-    if (dynEntriesL > 0) {
-      let i = 0;
-      for (; i < dynEntriesL; i++) {
-        const key = dynEntries[i]!;
-        this.reverseValues(this.dynPropValuesMap[key]!);
+    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]!);
+        }
       }
     }
 
@@ -309,17 +310,18 @@ export class CoreAnimation extends EventEmitter {
       );
     }
 
-    const dynEntries = Object.keys(this.dynPropValuesMap);
-    const dynEntriesL = dynEntries.length;
-    if (dynEntriesL > 0) {
-      let i = 0;
-      for (; i < dynEntriesL; i++) {
-        const key = dynEntries[i]!;
-        this.updateValues(
-          this.node.shader.props[key],
-          this.dynPropValuesMap[key]!,
-          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,
+          );
+        }
       }
     }
 

package/src/core/renderers/CoreRenderer.ts

@@ -72,6 +72,11 @@ export interface CoreRendererOptions {
   contextSpy: ContextSpy | null;
 }
 
+export interface BufferInfo {
+  totalUsed: number;
+  totalAvailable: number;
+}
+
 export abstract class CoreRenderer {
   public options: CoreRendererOptions;
   public mode: 'webgl' | 'canvas' | undefined;
@@ -102,5 +107,6 @@ export abstract class CoreRenderer {
   abstract renderRTTNodes(): void;
   abstract removeRTTNode(node: CoreNode): void;
   abstract renderToTexture(node: CoreNode): void;
+  abstract getBufferInfo(): BufferInfo | null;
   abstract getDefShaderCtr(): BaseShaderController;
 }

package/src/core/renderers/canvas/CanvasCoreRenderer.ts

@@ -239,4 +239,7 @@ export class CanvasCoreRenderer extends CoreRenderer {
   renderToTexture(node: CoreNode): void {
     // noop
   }
+  getBufferInfo(): null {
+    return null;
+  }
 }

package/src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -20,6 +20,7 @@
 import { assertTruthy, createWebGLContext, hasOwn } from '../../../utils.js';
 import {
   CoreRenderer,
+  type BufferInfo,
   type CoreRendererOptions,
   type QuadOptions,
 } from '../CoreRenderer.js';
@@ -54,6 +55,7 @@ import type { BaseShaderController } from '../../../main-api/ShaderController.js
 import { ImageTexture } from '../../textures/ImageTexture.js';
 
 const WORDS_PER_QUAD = 24;
+const QUAD_BUFFER_SIZE = 4 * 1024 * 1024;
 // const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
 
 export type WebGlCoreRendererOptions = CoreRendererOptions;
@@ -69,7 +71,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
   system: CoreWebGlSystem;
 
   //// Persistent data
-  quadBuffer: ArrayBuffer = new ArrayBuffer(1024 * 1024 * 4);
+  quadBuffer: ArrayBuffer = new ArrayBuffer(QUAD_BUFFER_SIZE);
   fQuadBuffer: Float32Array = new Float32Array(this.quadBuffer);
   uiQuadBuffer: Uint32Array = new Uint32Array(this.quadBuffer);
   renderOps: WebGlCoreRenderOp[] = [];
@@ -90,6 +92,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
    */
   defaultTexture: Texture;
 
+  quadBufferUsage = 0;
   /**
    * Whether the renderer is currently rendering to a texture.
    */
@@ -613,6 +616,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       }
       renderOp.draw();
     });
+    this.quadBufferUsage = this.curBufferIdx * arr.BYTES_PER_ELEMENT;
   }
 
   renderToTexture(node: CoreNode) {
@@ -694,6 +698,14 @@ export class WebGlCoreRenderer extends CoreRenderer {
     this.rttNodes.splice(index, 1);
   }
 
+  getBufferInfo(): BufferInfo | null {
+    const bufferInfo: BufferInfo = {
+      totalAvailable: QUAD_BUFFER_SIZE,
+      totalUsed: this.quadBufferUsage,
+    };
+    return bufferInfo;
+  }
+
   override getDefShaderCtr(): BaseShaderController {
     return this.defShaderCtrl;
   }

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

@@ -16,7 +16,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { ExtractProps } from '../../../CoreTextureManager.js';
 import type { WebGlCoreRenderer } from '../WebGlCoreRenderer.js';
 import {
   WebGlCoreShader,
@@ -27,70 +26,14 @@ import type { UniformInfo } from '../internal/ShaderUtils.js';
 import type { WebGlCoreCtxTexture } from '../WebGlCoreCtxTexture.js';
 import {
   ShaderEffect,
+  type EffectDescUnion,
   type ShaderEffectUniform,
   type ShaderEffectValueMap,
+  type BaseEffectDesc,
 } from './effects/ShaderEffect.js';
 import type { EffectMap } from '../../../CoreShaderManager.js';
 import { assertTruthy } from '../../../../utils.js';
 
-export interface BaseEffectDesc {
-  name: string;
-  type: keyof EffectMap;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  props: Record<string, any>;
-}
-
-export interface EffectDesc<
-  T extends { name: string; type: keyof EffectMap } = {
-    name: string;
-    type: keyof EffectMap;
-  },
-> extends BaseEffectDesc {
-  name: T['name'];
-  type: T['type'];
-  props: ExtractProps<EffectMap[T['type']]>;
-}
-
-/**
- * Allows the `keyof EffectMap` to be mapped over and form an discriminated
- * union of all the EffectDescs structures individually.
- *
- * @remarks
- * When used like the following:
- * ```
- * MapEffectDescs<keyof EffectMap>[]
- * ```
- * The resultant type will be a discriminated union like so:
- * ```
- * (
- *   {
- *     name: 'effect1',
- *     type: 'radius',
- *     props?: {
- *       radius?: number | number[];
- *     }
- *   } |
- *   {
- *     name: 'effect2',
- *     type: 'border',
- *     props?: {
- *       width?: number;
- *       color?: number;
- *     }
- *   } |
- *   // ...
- * )[]
- * ```
- * Which means TypeScript will now base its type checking on the `type` field
- * and will know exactly what the `props` field should be based on the `type`
- * field.
- */
-type MapEffectDescs<T extends keyof EffectMap> = T extends keyof EffectMap
-  ? EffectDesc<{ type: T; name: string }>
-  : never;
-
-export type EffectDescUnion = MapEffectDescs<keyof EffectMap>;
-
 export interface DynamicShaderProps
   extends DimensionsShaderProp,
     AlphaShaderProp {

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

@@ -77,7 +77,10 @@ export class RoundedRectangle extends WebGlCoreShader {
   }
 
   protected override bindProps(props: Required<RoundedRectangleProps>): void {
-    this.setUniform('u_radius', props.radius);
+    const radiusFactor =
+      Math.min(props.$dimensions.width, props.$dimensions.height) /
+      (2.0 * props.radius);
+    this.setUniform('u_radius', props.radius * Math.min(radiusFactor, 1));
   }
 
   override canBatchShaderProps(

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

@@ -1,3 +1,5 @@
+import type { EffectMap } from '../../../../CoreShaderManager.js';
+import type { ExtractProps } from '../../../../CoreTextureManager.js';
 import type {
   AlphaShaderProp,
   DimensionsShaderProp,
@@ -7,6 +9,64 @@ import type {
   UniformMethodMap,
 } from '../../internal/ShaderUtils.js';
 
+export interface BaseEffectDesc {
+  name?: string;
+  type: keyof EffectMap;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  props: Record<string, any>;
+}
+
+export interface EffectDesc<
+  T extends { name?: string; type: keyof EffectMap } = {
+    name?: string;
+    type: keyof EffectMap;
+  },
+> extends BaseEffectDesc {
+  name?: T['name'];
+  type: T['type'];
+  props: ExtractProps<EffectMap[T['type']]>;
+}
+
+/**
+ * Allows the `keyof EffectMap` to be mapped over and form an discriminated
+ * union of all the EffectDescs structures individually.
+ *
+ * @remarks
+ * When used like the following:
+ * ```
+ * MapEffectDescs<keyof EffectMap>[]
+ * ```
+ * The resultant type will be a discriminated union like so:
+ * ```
+ * (
+ *   {
+ *     name: 'effect1',
+ *     type: 'radius',
+ *     props?: {
+ *       radius?: number | number[];
+ *     }
+ *   } |
+ *   {
+ *     name: 'effect2',
+ *     type: 'border',
+ *     props?: {
+ *       width?: number;
+ *       color?: number;
+ *     }
+ *   } |
+ *   // ...
+ * )[]
+ * ```
+ * Which means TypeScript will now base its type checking on the `type` field
+ * and will know exactly what the `props` field should be based on the `type`
+ * field.
+ */
+type MapEffectDescs<T extends keyof EffectMap> = T extends keyof EffectMap
+  ? EffectDesc<{ type: T; name: string }>
+  : never;
+
+export type EffectDescUnion = MapEffectDescs<keyof EffectMap>;
+
 export interface ShaderEffectUniform {
   value: number | number[] | boolean | string;
   type: string;

package/src/main-api/DynamicShaderController.ts

@@ -5,23 +5,27 @@ import type {
   ShaderMap,
 } from '../core/CoreShaderManager.js';
 import type { ExtractProps } from '../core/CoreTextureManager.js';
-import type { EffectDesc } from '../core/renderers/webgl/shaders/DynamicShader.js';
+import type { EffectDesc } from '../core/renderers/webgl/shaders/effects/ShaderEffect.js';
 import type { BaseShaderController } from './ShaderController.js';
 
+type OptionalName<T> = T extends string ? T : never;
+
 type MapEffectProps<
-  Effects extends [...{ name: string; type: keyof EffectMap }[]],
+  Effects extends [...{ name?: string; type: keyof EffectMap }[]],
 > = {
-  [K in Effects[number] as K['name']]: ExtractProps<EffectMap[K['type']]>;
+  [K in Effects[number] as OptionalName<K['name']>]: ExtractProps<
+    EffectMap[K['type']]
+  >;
 };
 
 export type DynamicEffects<
-  T extends [...{ name: string; type: keyof EffectMap }[]],
+  T extends [...{ name?: string; type: keyof EffectMap }[]],
 > = {
   [K in keyof T]: EffectDesc<T[K]>;
 };
 
 export class DynamicShaderController<
-  Effects extends [...{ name: string; type: keyof EffectMap }[]],
+  Effects extends [...{ name?: string; type: keyof EffectMap }[]],
 > implements BaseShaderController
 {
   private resolvedProps: ExtractProps<ShaderMap['DynamicShader']>;
@@ -47,6 +51,9 @@ export class DynamicShaderController<
         props: effectProps,
         type: effectType,
       } = effects[i]!;
+      if (effectName === undefined) {
+        continue;
+      }
       const definedEffectProps = {};
       const propEntries = Object.keys(effectProps);
       const propEntriesLength = propEntries.length;

package/src/main-api/INode.ts

@@ -57,8 +57,9 @@ export interface INode<SC extends BaseShaderController = BaseShaderController>
 /**
  * Properties used to animate() a Node
  */
-export interface INodeAnimateProps<SC extends BaseShaderController>
-  extends Omit<CoreNodeAnimateProps, 'shaderProps'> {
+export interface INodeAnimateProps<
+  SC extends BaseShaderController = BaseShaderController,
+> extends Omit<CoreNodeAnimateProps, 'shaderProps'> {
   shaderProps: Partial<SC['props']>;
 }
 

package/src/main-api/Renderer.ts

@@ -29,7 +29,7 @@ import { Inspector } from './Inspector.js';
 import { assertTruthy, isProductionEnvironment } from '../utils.js';
 import { Stage } from '../core/Stage.js';
 import { CoreNode, type CoreNodeProps } from '../core/CoreNode.js';
-import { CoreTextNode, type CoreTextNodeProps } from '../core/CoreTextNode.js';
+import { type CoreTextNodeProps } from '../core/CoreTextNode.js';
 import type {
   BaseShaderController,
   ShaderController,
@@ -42,7 +42,7 @@ import type {
 import type {
   EffectDesc,
   EffectDescUnion,
-} from '../core/renderers/webgl/shaders/DynamicShader.js';
+} from '../core/renderers/webgl/shaders/effects/ShaderEffect.js';
 import type { TextureMemoryManagerSettings } from '../core/TextureMemoryManager.js';
 
 /**
@@ -470,18 +470,61 @@ export class RendererMain extends EventEmitter {
     return this.stage.shManager.loadShader(shaderType, props);
   }
 
+  /**
+   * Create a new Dynamic Shader controller
+   *
+   * @remarks
+   * A Dynamic Shader is a shader that can be composed of an array of mulitple
+   * effects. Each effect can be animated or changed after creation (provided
+   * the effect is given a name).
+   *
+   * Example:
+   * ```ts
+   * renderer.createNode({
+   *   shader: renderer.createDynamicShader([
+   *     renderer.createEffect('radius', {
+   *       radius: 0
+   *     }, 'effect1'),
+   *     renderer.createEffect('border', {
+   *       color: 0xff00ffff,
+   *       width: 10,
+   *     }, 'effect2'),
+   *   ]),
+   * });
+   * ```
+   *
+   * @param effects
+   * @returns
+   */
   createDynamicShader<
-    T extends DynamicEffects<[...{ name: string; type: keyof EffectMap }[]]>,
+    T extends DynamicEffects<[...{ name?: string; type: keyof EffectMap }[]]>,
   >(effects: [...T]): DynamicShaderController<T> {
     return this.stage.shManager.loadDynamicShader({
       effects: effects as EffectDescUnion[],
     });
   }
 
-  createEffect<Name extends string, Type extends keyof EffectMap>(
-    name: Name,
+  /**
+   * Create an effect to be used in a Dynamic Shader
+   *
+   * @remark
+   * The {name} parameter is optional but required if you want to animate the effect
+   * or change the effect's properties after creation.
+   *
+   * See {@link createDynamicShader} for an example.
+   *
+   * @param type
+   * @param props
+   * @param name
+   * @returns
+   */
+  createEffect<
+    Type extends keyof EffectMap,
+    Name extends string | undefined = undefined,
+  >(
     type: Type,
     props: EffectDesc<{ name: Name; type: Type }>['props'],
+    name?: Name,
   ): EffectDesc<{ name: Name; type: Type }> {
     return {
       name,
@@ -528,6 +571,10 @@ export class RendererMain extends EventEmitter {
     throw new Error('Not implemented');
   }
 
+  getBufferInfo() {
+    return this.stage.renderer.getBufferInfo();
+  }
+
   /**
    * Re-render the current frame without advancing any running animations.
    *