@lightningjs/renderer 2.5.1 → 2.6.0

package/src/core/CoreNode.ts

@@ -46,6 +46,7 @@ import {
   createBound,
   boundInsideBound,
   boundLargeThanBound,
+  createPreloadBounds,
 } from './lib/utils.js';
 import { Matrix3d } from './lib/Matrix3d.js';
 import { RenderCoords } from './lib/RenderCoords.js';
@@ -862,22 +863,27 @@ export class CoreNode extends EventEmitter {
   setUpdateType(type: UpdateType): void {
     this.updateType |= type;
 
-    // If we're updating this node at all, we need to inform the parent
-    // (and all ancestors) that their children need updating as well
     const parent = this.props.parent;
-    if (parent !== null && !(parent.updateType & UpdateType.Children)) {
+    if (!parent) return;
+
+    // Inform the parent if it doesn’t already have a child update
+    if ((parent.updateType & UpdateType.Children) === 0) {
       parent.setUpdateType(UpdateType.Children);
     }
 
-    // If node is part of RTT texture
-    // Flag that we need to update
-    if (this.parentHasRenderTexture) {
-      this.setRTTUpdates(type);
+    if (this.parentHasRenderTexture === false) return;
 
-      if (parent !== null) {
+    if (this.rtt === false) {
+      if ((parent.updateType & UpdateType.RenderTexture) === 0) {
+        this.setRTTUpdates(type);
         parent.setUpdateType(UpdateType.RenderTexture);
       }
     }
+
+    // If this node has outstanding RTT updates, propagate them
+    if (this.hasRTTupdates) {
+      this.setRTTUpdates(type);
+    }
   }
 
   sortChildren() {
@@ -1154,6 +1160,7 @@ export class CoreNode extends EventEmitter {
     // being marked as out of bounds
     if (renderState === CoreNodeRenderState.OutOfBounds) {
       this.updateRenderState(renderState);
+      this.updateIsRenderable();
     }
 
     // reset update type
@@ -1162,7 +1169,7 @@ export class CoreNode extends EventEmitter {
   }
 
   //check if CoreNode is renderable based on props
-  checkRenderProps(): boolean {
+  hasRenderableProperties(): boolean {
     if (this.props.texture) {
       return true;
     }
@@ -1248,16 +1255,6 @@ export class CoreNode extends EventEmitter {
     return CoreNodeRenderState.OutOfBounds;
   }
 
-  createPreloadBounds(strictBound: Bound): Bound {
-    const renderM = this.stage.boundsMargin;
-    return createBound(
-      strictBound.x1 - renderM[3],
-      strictBound.y1 - renderM[0],
-      strictBound.x2 + renderM[1],
-      strictBound.y2 + renderM[2],
-    );
-  }
-
   updateBoundingRect() {
     const { renderCoords, globalTransform: transform } = this;
     assertTruthy(transform);
@@ -1282,34 +1279,43 @@ export class CoreNode extends EventEmitter {
   createRenderBounds(): void {
     assertTruthy(this.stage);
 
-    // no clipping, use parent's bounds
-    if (this.clipping === false) {
-      if (this.parent !== null && this.parent.strictBound !== undefined) {
-        // we have a parent with a valid bound, copy it
-        this.strictBound = createBound(
-          this.parent.strictBound.x1,
-          this.parent.strictBound.y1,
-          this.parent.strictBound.x2,
-          this.parent.strictBound.y2,
-        );
+    if (this.parent !== null && this.parent.strictBound !== undefined) {
+      // we have a parent with a valid bound, copy it
+      const parentBound = this.parent.strictBound;
+      this.strictBound = createBound(
+        parentBound.x1,
+        parentBound.y1,
+        parentBound.x2,
+        parentBound.y2,
+      );
 
-        this.preloadBound = this.createPreloadBounds(this.strictBound);
-        return;
-      } else {
-        // no parent or parent does not have a bound, take the stage dimensions
-        this.strictBound = createBound(
-          0,
-          0,
-          this.stage.root.width,
-          this.stage.root.height,
-        );
+      this.preloadBound = createPreloadBounds(
+        this.strictBound,
+        this.stage.boundsMargin,
+      );
+    } else {
+      // no parent or parent does not have a bound, take the stage boundaries
+      this.strictBound = this.stage.strictBound;
+      this.preloadBound = this.stage.preloadBound;
+    }
 
-        this.preloadBound = this.createPreloadBounds(this.strictBound);
-        return;
-      }
+    // if clipping is disabled, we're done
+    if (this.props.clipping === false) {
+      return;
+    }
+
+    // only create local clipping bounds if node itself is in bounds
+    // this can only be done if we have a render bound already
+    if (this.renderBound === undefined) {
+      return;
     }
 
-    // clipping is enabled create our own bounds
+    // if we're out of bounds, we're done
+    if (boundInsideBound(this.renderBound, this.strictBound) === false) {
+      return;
+    }
+
+    // clipping is enabled and we are in bounds create our own bounds
     const { x, y, width, height } = this.props;
     const { tx, ty } = this.globalTransform || {};
     const _x = tx ?? x;
@@ -1322,7 +1328,10 @@ export class CoreNode extends EventEmitter {
       this.strictBound,
     );
 
-    this.preloadBound = this.createPreloadBounds(this.strictBound);
+    this.preloadBound = createPreloadBounds(
+      this.strictBound,
+      this.stage.boundsMargin,
+    );
   }
 
   updateRenderState(renderState: CoreNodeRenderState) {
@@ -1347,7 +1356,7 @@ export class CoreNode extends EventEmitter {
    */
   updateIsRenderable() {
     let newIsRenderable;
-    if (this.worldAlpha === 0 || !this.checkRenderProps()) {
+    if (this.worldAlpha === 0 || !this.hasRenderableProperties()) {
       newIsRenderable = false;
     } else {
       newIsRenderable = this.renderState > CoreNodeRenderState.OutOfBounds;
@@ -2150,6 +2159,10 @@ export class CoreNode extends EventEmitter {
   }
 
   setRTTUpdates(type: number) {
+    if (this.hasRTTupdates === true) {
+      return;
+    }
+
     this.hasRTTupdates = true;
     this.parent?.setRTTUpdates(type);
   }

package/src/core/CoreTextNode.ts

@@ -368,11 +368,11 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     this.textRenderer.set.y(this.trState, this.globalTransform.ty);
   }
 
-  override checkRenderProps(): boolean {
+  override hasRenderableProperties(): boolean {
     if (this.trState && this.trState.props.text !== '') {
       return true;
     }
-    return super.checkRenderProps();
+    return super.hasRenderableProperties();
   }
 
   override onChangeIsRenderable(isRenderable: boolean) {

package/src/core/Stage.ts

@@ -52,6 +52,7 @@ 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 { createBound, createPreloadBounds, type Bound } from './lib/utils.js';
 
 export interface StageOptions {
   appWidth: number;
@@ -71,6 +72,7 @@ export interface StageOptions {
   quadBufferSize: number;
   fontEngines: (typeof CanvasTextRenderer | typeof SdfTextRenderer)[];
   inspector: boolean;
+  strictBounds: boolean;
 }
 
 export type StageFpsUpdateHandler = (
@@ -98,6 +100,9 @@ export class Stage {
   public readonly root: CoreNode;
   public readonly boundsMargin: [number, number, number, number];
   public readonly defShaderCtr: BaseShaderController;
+  public readonly strictBound: Bound;
+  public readonly preloadBound: Bound;
+  public readonly strictBounds: boolean;
 
   /**
    * Renderer Event Bus for the Stage to emit events onto
@@ -147,6 +152,7 @@ export class Stage {
     this.shManager = new CoreShaderManager();
     this.animationManager = new AnimationManager();
     this.contextSpy = enableContextSpy ? new ContextSpy() : null;
+    this.strictBounds = options.strictBounds;
 
     let bm = [0, 0, 0, 0] as [number, number, number, number];
     if (boundsMargin) {
@@ -156,6 +162,10 @@ export class Stage {
     }
     this.boundsMargin = bm;
 
+    // precalculate our viewport bounds
+    this.strictBound = createBound(0, 0, appWidth, appHeight);
+    this.preloadBound = createPreloadBounds(this.strictBound, bm);
+
     const rendererOptions: CoreRendererOptions = {
       stage: this,
       canvas,
@@ -245,7 +255,7 @@ export class Stage {
       src: null,
       scale: 1,
       preventCleanup: false,
-      strictBounds: false,
+      strictBounds: this.strictBounds,
     });
 
     this.root = rootNode;
@@ -631,7 +641,7 @@ export class Stage {
       data: data,
       preventCleanup: props.preventCleanup ?? false,
       imageType: props.imageType,
-      strictBounds: props.strictBounds ?? false,
+      strictBounds: props.strictBounds ?? this.strictBounds,
     };
   }
 }

package/src/core/lib/utils.ts

@@ -261,6 +261,25 @@ export function isRectPositive(rect: Rect): boolean {
   return rect.width > 0 && rect.height > 0;
 }
 
+/**
+ * Create a preload bounds from a strict bound
+ *
+ * @param strictBound The strict boundary of the node
+ * @param boundsMargin Boundary margin to apply to the strictBound
+ * @returns
+ */
+export function createPreloadBounds(
+  strictBound: Bound,
+  boundsMargin: [number, number, number, number],
+): Bound {
+  return createBound(
+    strictBound.x1 - boundsMargin[3],
+    strictBound.y1 - boundsMargin[0],
+    strictBound.x2 + boundsMargin[1],
+    strictBound.y2 + boundsMargin[2],
+  );
+}
+
 export function convertUrlToAbsolute(url: string): string {
   // handle local file imports if the url isn't remote resource or data blob
   if (self.location.protocol === 'file:' && !PROTOCOL_REGEX.test(url)) {

package/src/main-api/Inspector.ts

@@ -142,6 +142,14 @@ const gradientColorPropertyMap = [
   'colorBr',
 ];
 
+const knownProperties = new Set<string>([
+  ...Object.keys(stylePropertyMap),
+  ...Object.keys(domPropertyMap),
+  // ...gradientColorPropertyMap,
+  'src',
+  'parent',
+]);
+
 export class Inspector {
   private root: HTMLElement | null = null;
   private canvas: HTMLCanvasElement | null = null;
@@ -239,35 +247,22 @@ export class Inspector {
 
   createNode(node: CoreNode): CoreNode {
     const div = this.createDiv(node.id, node.props);
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
     (div as any).node = node;
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
     (node as any).div = div;
 
-    node.on('inViewport', () => {
-      div.setAttribute('state', 'inViewport');
-    });
-
-    node.on('inBounds', () => {
-      div.setAttribute('state', 'inBounds');
-    });
-
-    node.on('outOfBounds', () => {
-      div.setAttribute('state', 'outOfBounds');
-    });
+    node.on('inViewport', () => div.setAttribute('state', 'inViewport'));
+    node.on('inBounds', () => div.setAttribute('state', 'inBounds'));
+    node.on('outOfBounds', () => div.setAttribute('state', 'outOfBounds'));
 
+    // Monitor only relevant properties by trapping with selective assignment
     return this.createProxy(node, div);
   }
 
   createTextNode(node: CoreNode): CoreTextNode {
     const div = this.createDiv(node.id, node.props);
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
     (div as any).node = node;
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
     (node as any).div = div;
+
     return this.createProxy(node, div) as CoreTextNode;
   }
 
@@ -275,36 +270,58 @@ export class Inspector {
     node: CoreNode | CoreTextNode,
     div: HTMLElement,
   ): CoreNode | CoreTextNode {
-    return new Proxy(node, {
-      set: (target, property: keyof CoreNodeProps, value) => {
-        this.updateNodeProperty(div, property, value);
-        return Reflect.set(target, property, value);
-      },
-      get: (target, property: keyof CoreNode, receiver: any): any => {
-        if (property === 'destroy') {
-          this.destroyNode(target.id);
-        }
+    // Define traps for each property in knownProperties
+    knownProperties.forEach((property) => {
+      const originalProp = Object.getOwnPropertyDescriptor(node, property);
+      if (!originalProp) {
+        return;
+      }
 
-        if (property === 'animate') {
-          return (props: CoreNodeAnimateProps, settings: AnimationSettings) => {
-            const anim = target.animate(props, settings);
-
-            // Trap the animate start function so we can update the inspector accordingly
-            return new Proxy(anim, {
-              get: (target, property: keyof IAnimationController, receiver) => {
-                if (property === 'start') {
-                  this.animateNode(div, props, settings);
-                }
-
-                return Reflect.get(target, property, receiver);
-              },
-            });
-          };
-        }
+      Object.defineProperties(node, {
+        [property]: {
+          get() {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+            return originalProp.get?.call(node);
+          },
+          set(value) {
+            originalProp.set?.call(node, value);
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+            this.updateNodeProperty(div, property, value);
+          },
+          configurable: true,
+          enumerable: true,
+        },
+      });
+    });
 
-        return Reflect.get(target, property, receiver);
+    const originalDestroy = node.destroy;
+    Object.defineProperty(node, 'destroy', {
+      value: () => {
+        this.destroyNode(node.id);
+        originalDestroy.call(node);
       },
     });
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const originalAnimate = node.animate;
+    Object.defineProperty(node, 'animate', {
+      value: (
+        props: CoreNodeAnimateProps,
+        settings: AnimationSettings,
+      ): IAnimationController => {
+        const animationController = originalAnimate.call(node, props, settings);
+
+        return {
+          ...animationController,
+          start: () => {
+            this.animateNode(div, props, settings);
+            return animationController.start();
+          },
+        };
+      },
+    });
+
+    return node;
   }
 
   destroyNode(id: number) {

package/src/main-api/Renderer.ts

@@ -256,6 +256,17 @@ export interface RendererMainSettings {
    * @defaultValue `false`
    */
   forceWebGL2?: boolean;
+
+  /**
+   * Enable strictBounds
+   *
+   * @remarks
+   * Enable strict bounds for the renderer. This will ensure that the renderer
+   * will not render outside the bounds of the canvas.
+   *
+   * @defaultValue `true`
+   */
+  strictBounds?: boolean;
 }
 
 /**
@@ -346,6 +357,7 @@ export class RendererMain extends EventEmitter {
       renderEngine: settings.renderEngine,
       quadBufferSize: settings.quadBufferSize ?? 4 * 1024 * 1024,
       fontEngines: settings.fontEngines,
+      strictBounds: settings.strictBounds ?? true,
     };
     this.settings = resolvedSettings;
 
@@ -387,6 +399,7 @@ export class RendererMain extends EventEmitter {
       quadBufferSize: this.settings.quadBufferSize,
       fontEngines: this.settings.fontEngines,
       inspector: this.settings.inspector !== null,
+      strictBounds: this.settings.strictBounds,
     });
 
     // Extract the root node
@@ -432,8 +445,6 @@ export class RendererMain extends EventEmitter {
   createNode<
     ShCtr extends BaseShaderController = ShaderController<'DefaultShader'>,
   >(props: Partial<INodeProps<ShCtr>>): INode<ShCtr> {
-    assertTruthy(this.stage, 'Stage is not initialized');
-
     const node = this.stage.createNode(props as Partial<CoreNodeProps>);
 
     if (this.inspector) {

package/dist/exports/core-api.d.ts

@@ -1,74 +0,0 @@
-/**
- * Lightning 3 Renderer Core API
- *
- * @remarks
- * ```
- * import * from '@lightning/renderer/core';
- * ```
- *
- * The Core API is used by developers to extend the capabilities of the Renderer
- * by writing custom Shaders, Dynamic Shader Effects, Textures, Text Renderers,
- * etc.
- *
- * Custom capabilities as well as fonts can be loaded via Core Extensions.
- *
- * A core extension module is structured like so:
- * ```ts
- * import {
- *   CoreExtension,
- *   WebTrFontFace,
- *   SdfTrFontFace,
- *   type Stage
- * } from '@lightning/renderer/core';
- *
- * export default class MyCoreExtension extends CoreExtension {
- *   async run(stage: Stage) {
- *     stage.fontManager.addFontFace(
- *       new WebTrFontFace('Ubuntu', {}, '/fonts/Ubuntu-Regular.ttf'),
- *     );
- *
- *     stage.fontManager.addFontFace(
- *       new SdfTrFontFace(
- *         'Ubuntu',
- *         {},
- *         'msdf',
- *         stage,
- *         '/fonts/Ubuntu-Regular.msdf.png',
- *         '/fonts/Ubuntu-Regular.msdf.json',
- *       ),
- *     );
- *   }
- * }
- * ```
- *
- * And then imported and registered in the application's entry point
- * using the `@lightningjs/vite-plugin-import-chunk-url` plugin:
- * ```ts
- * import coreExtensionModuleUrl from './MyCoreExtension.js?importChunkUrl';
- *
- * // Set up driver, etc.
- *
- * // Initialize the Renderer
- * const renderer = new RendererMain(
- *   {
- *     // Other Renderer Config...
- *     coreExtensionModule: coreExtensionModuleUrl,
- *   },
- *   'app',
- *   driver,
- * );
- * ```
- *
- * @module
- */
-export * from '../src/core/renderers/webgl/WebGlCoreShader.js';
-export * from '../src/core/renderers/webgl/shaders/effects/ShaderEffect.js';
-export * from '../src/core/textures/Texture.js';
-export * from '../src/core/text-rendering/renderers/TextRenderer.js';
-export * from '../src/core/text-rendering/renderers/CanvasTextRenderer.js';
-export * from '../src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
-export * from '../src/core/text-rendering/font-face-types/TrFontFace.js';
-export * from '../src/core/text-rendering/font-face-types/WebTrFontFace.js';
-export * from '../src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.js';
-export * from '../src/core/CoreExtension.js';
-export type * from '../src/core/Stage.js';

package/dist/exports/core-api.js

@@ -1,96 +0,0 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * 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.
- */
-/**
- * Lightning 3 Renderer Core API
- *
- * @remarks
- * ```
- * import * from '@lightning/renderer/core';
- * ```
- *
- * The Core API is used by developers to extend the capabilities of the Renderer
- * by writing custom Shaders, Dynamic Shader Effects, Textures, Text Renderers,
- * etc.
- *
- * Custom capabilities as well as fonts can be loaded via Core Extensions.
- *
- * A core extension module is structured like so:
- * ```ts
- * import {
- *   CoreExtension,
- *   WebTrFontFace,
- *   SdfTrFontFace,
- *   type Stage
- * } from '@lightning/renderer/core';
- *
- * export default class MyCoreExtension extends CoreExtension {
- *   async run(stage: Stage) {
- *     stage.fontManager.addFontFace(
- *       new WebTrFontFace('Ubuntu', {}, '/fonts/Ubuntu-Regular.ttf'),
- *     );
- *
- *     stage.fontManager.addFontFace(
- *       new SdfTrFontFace(
- *         'Ubuntu',
- *         {},
- *         'msdf',
- *         stage,
- *         '/fonts/Ubuntu-Regular.msdf.png',
- *         '/fonts/Ubuntu-Regular.msdf.json',
- *       ),
- *     );
- *   }
- * }
- * ```
- *
- * And then imported and registered in the application's entry point
- * using the `@lightningjs/vite-plugin-import-chunk-url` plugin:
- * ```ts
- * import coreExtensionModuleUrl from './MyCoreExtension.js?importChunkUrl';
- *
- * // Set up driver, etc.
- *
- * // Initialize the Renderer
- * const renderer = new RendererMain(
- *   {
- *     // Other Renderer Config...
- *     coreExtensionModule: coreExtensionModuleUrl,
- *   },
- *   'app',
- *   driver,
- * );
- * ```
- *
- * @module
- */
-// Shaders
-export * from '../src/core/renderers/webgl/WebGlCoreShader.js';
-export * from '../src/core/renderers/webgl/shaders/effects/ShaderEffect.js';
-// Textures
-export * from '../src/core/textures/Texture.js';
-// Text Rendering & Fonts
-export * from '../src/core/text-rendering/renderers/TextRenderer.js';
-export * from '../src/core/text-rendering/renderers/CanvasTextRenderer.js';
-export * from '../src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
-export * from '../src/core/text-rendering/font-face-types/TrFontFace.js';
-export * from '../src/core/text-rendering/font-face-types/WebTrFontFace.js';
-export * from '../src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.js';
-// Core Extensions
-export * from '../src/core/CoreExtension.js';
-//# sourceMappingURL=core-api.js.map

package/dist/exports/core-api.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"core-api.js","sourceRoot":"","sources":["../../exports/core-api.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AAEH,UAAU;AACV,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6DAA6D,CAAC;AAE5E,WAAW;AACX,cAAc,iCAAiC,CAAC;AAEhD,yBAAyB;AACzB,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAC3E,cAAc,yEAAyE,CAAC;AACxF,cAAc,0DAA0D,CAAC;AACzE,cAAc,6DAA6D,CAAC;AAC5E,cAAc,2EAA2E,CAAC;AAE1F,kBAAkB;AAClB,cAAc,8BAA8B,CAAC"}

package/dist/exports/main-api.d.ts

@@ -1,30 +0,0 @@
-/**
- * Lightning 3 Renderer Main API
- *
- * @remarks
- * This module exports the Main API for the Lightning 3 Renderer. You
- * can import the exports from this module like so:
- * ```ts
- * import { RendererMain } from '@lightning/renderer';
- * ```
- *
- * Generally developers/frameworks using the Renderer will use the Main API to
- * render applications.
- *
- * Do not confuse the Main API with the Core API which is used to extend
- * capabilities of the Renderer. The Main API code always runs from the main
- * thread.
- *
- * @module
- */
-export * from '../src/main-api/INode.js';
-export * from '../src/main-api/ICoreDriver.js';
-export * from '../src/main-api/RendererMain.js';
-export * from '../src/render-drivers/main/MainCoreDriver.js';
-export * from '../src/render-drivers/threadx/ThreadXCoreDriver.js';
-export * from '../src/common/IAnimationController.js';
-export * from '../src/common/CommonTypes.js';
-export type { TextRendererMap } from '../src/core/text-rendering/renderers/TextRenderer.js';
-export type { TrFontFaceMap } from '../src/core/text-rendering/font-face-types/TrFontFace.js';
-export type { AnimationSettings } from '../src/core/animations/CoreAnimation.js';
-export type { EffectProps, FadeOutEffectProps, LinearGradientEffectProps, RadialGradientEffectProps, GrayscaleEffectProps, GlitchEffectProps, RadialProgressEffectProps, } from '../src/core/CoreShaderManager.js';