@babylonjs/smart-filters 1.0.13 → 8.19.0

package/src/runtime/shaderRuntime.ts

@@ -1,173 +1,174 @@
-import type { EffectRenderer } from "@babylonjs/core/Materials/effectRenderer";
-import type { RenderTargetWrapper } from "@babylonjs/core/Engines/renderTargetWrapper";
-import type { AbstractEngine } from "@babylonjs/core/Engines/abstractEngine";
-import type { Effect } from "@babylonjs/core/Materials/effect";
-import { EffectWrapper } from "@babylonjs/core/Materials/effectRenderer.js";
-import type { ThinRenderTargetTexture } from "@babylonjs/core/Materials/Textures/thinRenderTargetTexture";
-
-import type { IDisposable } from "../IDisposable";
-import type { ShaderProgram } from "../utils/shaderCodeUtils";
-import { createStrongRef, type StrongRef } from "./strongRef.js";
-import type { IDisableableBlock } from "../blockFoundation/disableableShaderBlock";
-import { decorateSymbol, DisableUniform, getShaderCreateOptions } from "../utils/shaderCodeUtils.js";
-import type { OutputBlock } from "../blockFoundation/outputBlock";
-
-/**
- * The shader bindings for a ShaderBlock that can't be disabled.
- */
-export abstract class ShaderBinding {
-    /**
-     * Binds all the required data to the shader when rendering.
-     * Overridden by derived classes.
-     * @param effect - defines the effect to bind the data to
-     * @param width - defines the width of the output
-     * @param height - defines the height of the output
-     */
-    public abstract bind(effect: Effect, width?: number, height?: number): void;
-
-    private _remappedShaderVariables: { [key: string]: string } = {};
-
-    /**
-     * Gets the remapped shader variable name.
-     * @param variableName - The variable name
-     * @returns The remapped variable name
-     */
-    public getRemappedName(variableName: string) {
-        variableName = decorateSymbol(variableName);
-        return this._remappedShaderVariables[variableName] ?? variableName;
-    }
-
-    /**
-     * Sets the remapped shader variables.
-     * @param variableName - defines the variable name to remap
-     * @param remappedName - defines the remapped name
-     */
-    public addShaderVariableRemapping(variableName: string, remappedName: string) {
-        this._remappedShaderVariables[variableName] = remappedName;
-    }
-}
-
-/**
- * The shader bindings for a disableable ShaderBlock.
- */
-export abstract class DisableableShaderBinding extends ShaderBinding {
-    private _disabled: StrongRef<boolean>;
-
-    /**
-     * Construct a ShaderBinding instance.
-     * @param parentBlock - The parent block
-     */
-    constructor(parentBlock: IDisableableBlock) {
-        super();
-        this._disabled = parentBlock.disabled?.runtimeData || createStrongRef(false);
-    }
-
-    /**
-     * Binds all the required data to the shader when rendering.
-     * @param effect - defines the effect to bind the data to
-     * @param _width - defines the width of the output
-     * @param _height - defines the height of the output
-     */
-    public bind(effect: Effect, _width?: number, _height?: number): void {
-        effect.setBool(this.getRemappedName(DisableUniform), this._disabled.value);
-    }
-}
-
-/**
- * The shader runtime is the base for any runtime associated with a @see ShaderBlock.
- *
- * It encapsulates the basic needs to render a full screen effect mainly the effect wrapper holding on the shader program.
- *
- * It is able to either render to a texture or directly to the main canvas.
- *
- * It also manages the disposal of the effect wrapper.
- */
-export class ShaderRuntime implements IDisposable {
-    /**
-     * Promise that resolves when the effect is ready to be used.
-     */
-    public readonly onReadyAsync: Promise<void>;
-
-    private readonly _engine: AbstractEngine;
-    private readonly _effectRenderer: EffectRenderer;
-    private readonly _effectWrapper: EffectWrapper;
-    private readonly _shaderBinding: ShaderBinding;
-
-    /**
-     * Creates a new @see ShaderRuntime.
-     * @param effectRenderer - defines the effect renderer to use to render the full screen effect
-     * @param shaderProgram - defines the shader code associated with this runtime
-     * @param shaderBinding - defines the shader bindings associated with this runtime
-     */
-    constructor(effectRenderer: EffectRenderer, shaderProgram: ShaderProgram, shaderBinding: ShaderBinding) {
-        this._engine = effectRenderer.engine;
-        this._effectRenderer = effectRenderer;
-        this._shaderBinding = shaderBinding;
-        this._effectWrapper = new EffectWrapper({
-            engine: this._engine,
-            ...getShaderCreateOptions(shaderProgram),
-        });
-
-        // Wraps the effect readiness in a promise to expose it as a public property.
-        this.onReadyAsync = new Promise<void>((resolve, reject) => {
-            this._effectWrapper.effect.executeWhenCompiled(() => {
-                resolve();
-            });
-
-            this._effectWrapper.effect.onErrorObservable.addOnce((error) => {
-                reject(error);
-            });
-        });
-    }
-
-    /**
-     * Renders the full screen effect into a render target.
-     * @param outputBlock - The output block to render to - assumes it has a .renderTargetWrapper
-     */
-    public renderToTargetWrapper(outputBlock: OutputBlock): void {
-        this._renderToTargetWrapper(outputBlock.renderTargetWrapper!);
-    }
-
-    /**
-     * Renders the full screen effect into a texture.
-     * @param renderTargetTexture - The render target texture to render into
-     */
-    public renderToTargetTexture(renderTargetTexture: ThinRenderTargetTexture): void {
-        const renderTargetWrapper = renderTargetTexture.renderTarget;
-        if (renderTargetWrapper) {
-            this._renderToTargetWrapper(renderTargetWrapper);
-        }
-    }
-
-    private _renderToTargetWrapper(renderTargetWrapper: RenderTargetWrapper): void {
-        this._engine.bindFramebuffer(renderTargetWrapper);
-        this._draw(renderTargetWrapper.width, renderTargetWrapper.height);
-        this._engine.unBindFramebuffer(renderTargetWrapper);
-    }
-
-    /**
-     * Renders the full screen effect into the main canvas.
-     */
-    public renderToCanvas(): void {
-        this._effectRenderer.setViewport();
-        this._draw(this._engine.getRenderWidth(), this._engine.getRenderHeight());
-    }
-
-    /**
-     * "Draws" the full screen effect into the currently bound output.
-     * @param width - defines the width of the output
-     * @param height - defines the height of the output
-     */
-    private _draw(width: number, height: number): void {
-        this._effectRenderer.applyEffectWrapper(this._effectWrapper);
-        this._shaderBinding.bind(this._effectWrapper.effect, width, height);
-        this._effectRenderer.draw();
-    }
-
-    /**
-     * Disposes the runtime resources.
-     */
-    public dispose(): void {
-        this._effectWrapper.dispose();
-    }
-}
+import type { EffectRenderer } from "core/Materials/effectRenderer.js";
+import type { RenderTargetWrapper } from "core/Engines/renderTargetWrapper.js";
+import type { AbstractEngine } from "core/Engines/abstractEngine.js";
+import type { Effect } from "core/Materials/effect.js";
+import { EffectWrapper } from "core/Materials/effectRenderer.js";
+import type { ThinRenderTargetTexture } from "core/Materials/Textures/thinRenderTargetTexture.js";
+
+import type { IDisposable } from "../IDisposable.js";
+import type { ShaderProgram } from "../utils/shaderCodeUtils.js";
+import { CreateStrongRef, type StrongRef } from "./strongRef.js";
+import type { IDisableableBlock } from "../blockFoundation/disableableShaderBlock.js";
+import { DecorateSymbol, DisableUniform, GetShaderCreateOptions } from "../utils/shaderCodeUtils.js";
+import type { OutputBlock } from "../blockFoundation/outputBlock.js";
+
+/**
+ * The shader bindings for a ShaderBlock that can't be disabled.
+ */
+export abstract class ShaderBinding {
+    /**
+     * Binds all the required data to the shader when rendering.
+     * Overridden by derived classes.
+     * @param effect - defines the effect to bind the data to
+     * @param width - defines the width of the output
+     * @param height - defines the height of the output
+     */
+    public abstract bind(effect: Effect, width?: number, height?: number): void;
+
+    private _remappedShaderVariables: { [key: string]: string } = {};
+
+    /**
+     * Gets the remapped shader variable name.
+     * @param variableName - The variable name
+     * @returns The remapped variable name
+     */
+    public getRemappedName(variableName: string) {
+        variableName = DecorateSymbol(variableName);
+        return this._remappedShaderVariables[variableName] ?? variableName;
+    }
+
+    /**
+     * Sets the remapped shader variables.
+     * @param variableName - defines the variable name to remap
+     * @param remappedName - defines the remapped name
+     */
+    public addShaderVariableRemapping(variableName: string, remappedName: string) {
+        this._remappedShaderVariables[variableName] = remappedName;
+    }
+}
+
+/**
+ * The shader bindings for a disableable ShaderBlock.
+ */
+export abstract class DisableableShaderBinding extends ShaderBinding {
+    private _disabled: StrongRef<boolean>;
+
+    /**
+     * Construct a ShaderBinding instance.
+     * @param parentBlock - The parent block
+     */
+    constructor(parentBlock: IDisableableBlock) {
+        super();
+        this._disabled = parentBlock.disabled?.runtimeData || CreateStrongRef(false);
+    }
+
+    /**
+     * Binds all the required data to the shader when rendering.
+     * @param effect - defines the effect to bind the data to
+     * @param _width - defines the width of the output
+     * @param _height - defines the height of the output
+     */
+    public bind(effect: Effect, _width?: number, _height?: number): void {
+        effect.setBool(this.getRemappedName(DisableUniform), this._disabled.value);
+    }
+}
+
+/**
+ * The shader runtime is the base for any runtime associated with a @see ShaderBlock.
+ *
+ * It encapsulates the basic needs to render a full screen effect mainly the effect wrapper holding on the shader program.
+ *
+ * It is able to either render to a texture or directly to the main canvas.
+ *
+ * It also manages the disposal of the effect wrapper.
+ */
+export class ShaderRuntime implements IDisposable {
+    /**
+     * Promise that resolves when the effect is ready to be used.
+     */
+    public readonly onReadyAsync: Promise<void>;
+
+    private readonly _engine: AbstractEngine;
+    private readonly _effectRenderer: EffectRenderer;
+    private readonly _effectWrapper: EffectWrapper;
+    private readonly _shaderBinding: ShaderBinding;
+
+    /**
+     * Creates a new @see ShaderRuntime.
+     * @param effectRenderer - defines the effect renderer to use to render the full screen effect
+     * @param shaderProgram - defines the shader code associated with this runtime
+     * @param shaderBinding - defines the shader bindings associated with this runtime
+     */
+    constructor(effectRenderer: EffectRenderer, shaderProgram: ShaderProgram, shaderBinding: ShaderBinding) {
+        this._engine = effectRenderer.engine;
+        this._effectRenderer = effectRenderer;
+        this._shaderBinding = shaderBinding;
+        this._effectWrapper = new EffectWrapper({
+            engine: this._engine,
+            ...GetShaderCreateOptions(shaderProgram),
+        });
+
+        // Wraps the effect readiness in a promise to expose it as a public property.
+        this.onReadyAsync = new Promise<void>((resolve, reject) => {
+            this._effectWrapper.effect.executeWhenCompiled(() => {
+                resolve();
+            });
+
+            this._effectWrapper.effect.onErrorObservable.addOnce((error) => {
+                // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
+                reject(error);
+            });
+        });
+    }
+
+    /**
+     * Renders the full screen effect into a render target.
+     * @param outputBlock - The output block to render to - assumes it has a .renderTargetWrapper
+     */
+    public renderToTargetWrapper(outputBlock: OutputBlock): void {
+        this._renderToTargetWrapper(outputBlock.renderTargetWrapper!);
+    }
+
+    /**
+     * Renders the full screen effect into a texture.
+     * @param renderTargetTexture - The render target texture to render into
+     */
+    public renderToTargetTexture(renderTargetTexture: ThinRenderTargetTexture): void {
+        const renderTargetWrapper = renderTargetTexture.renderTarget;
+        if (renderTargetWrapper) {
+            this._renderToTargetWrapper(renderTargetWrapper);
+        }
+    }
+
+    private _renderToTargetWrapper(renderTargetWrapper: RenderTargetWrapper): void {
+        this._engine.bindFramebuffer(renderTargetWrapper);
+        this._draw(renderTargetWrapper.width, renderTargetWrapper.height);
+        this._engine.unBindFramebuffer(renderTargetWrapper);
+    }
+
+    /**
+     * Renders the full screen effect into the main canvas.
+     */
+    public renderToCanvas(): void {
+        this._effectRenderer.setViewport();
+        this._draw(this._engine.getRenderWidth(), this._engine.getRenderHeight());
+    }
+
+    /**
+     * "Draws" the full screen effect into the currently bound output.
+     * @param width - defines the width of the output
+     * @param height - defines the height of the output
+     */
+    private _draw(width: number, height: number): void {
+        this._effectRenderer.applyEffectWrapper(this._effectWrapper);
+        this._shaderBinding.bind(this._effectWrapper.effect, width, height);
+        this._effectRenderer.draw();
+    }
+
+    /**
+     * Disposes the runtime resources.
+     */
+    public dispose(): void {
+        this._effectWrapper.dispose();
+    }
+}

package/src/runtime/smartFilterRuntime.ts

@@ -1,112 +1,112 @@
-import { EffectRenderer } from "@babylonjs/core/Materials/effectRenderer.js";
-import type { ThinEngine } from "@babylonjs/core/Engines/thinEngine";
-import { CommandBuffer } from "../command/commandBuffer.js";
-import type { IDisposable } from "../IDisposable";
-import type { Command } from "../command/command";
-
-/**
- * A runtime is a snapshot of a smart filter containing all the
- * required data to render it as well as the entire command buffer.
- */
-export type SmartFilterRuntime = {
-    /**
-     * The command buffer containing all the commands to execute during a frame.
-     */
-    readonly commandBuffer: Readonly<CommandBuffer>;
-
-    /**
-     * Renders one frame of the smart filter.
-     */
-    render(): void;
-
-    /**
-     * Dispose the runtime and all its associated resources
-     */
-    dispose(): void;
-};
-
-/**
- * The internal runtime implementation exposing more information than @see SmartFilterRuntime.
- * This is used internally to render the smart filter.
- *
- * It is not fully exposed publicly to prevent any misuse of the runtime.
- */
-export class InternalSmartFilterRuntime implements SmartFilterRuntime {
-    /**
-     * The engine used by the smart filter.
-     */
-    public readonly engine: ThinEngine;
-
-    /**
-     * The effect renderer used by the smart filter.
-     */
-    public readonly effectRenderer: EffectRenderer;
-
-    /**
-     * The command buffer containing all the commands to execute during a frame.
-     */
-    public readonly commandBuffer: CommandBuffer;
-
-    private readonly _resources: IDisposable[];
-
-    /**
-     * Instantiates a new smart filter runtime for one given engine.
-     * @param engine - the engine to use to render the smart filter
-     */
-    constructor(engine: ThinEngine) {
-        this.engine = engine;
-
-        this._resources = [];
-
-        this.commandBuffer = new CommandBuffer();
-
-        this.effectRenderer = new EffectRenderer(engine);
-        this.registerResource(this.effectRenderer);
-    }
-
-    /**
-     * Register a resource to be disposed when the runtime is disposed.
-     * @param resource - defines the resource to dispose once the runtime is disposed
-     */
-    public registerResource(resource: IDisposable): void {
-        this._resources.push(resource);
-    }
-
-    /**
-     * Registers a command to be executed during the render loop.
-     * @param command - defines the command to execute
-     */
-    public registerCommand(command: Command): void {
-        this.commandBuffer.push(command);
-    }
-
-    /**
-     * Renders the smart filter.
-     * This function will execute all the commands contained int the command buffer.
-     */
-    public render(): void {
-        try {
-            const depthTest = this.engine.depthCullingState.depthTest;
-            const stencilTest = this.engine.stencilState.stencilTest;
-
-            this.commandBuffer.execute();
-
-            // EffectRenderer.applyEffectWrapper(), which is called by ShaderRuntime._draw(),
-            // sets the depth/stencil state, so we need to restore it.
-            this.engine.depthCullingState.depthTest = depthTest;
-            this.engine.stencilState.stencilTest = stencilTest;
-        } catch (e) {
-            // eslint-disable-next-line no-debugger
-            debugger;
-        }
-    }
-
-    /**
-     * Dispose the runtime and all its associated resources
-     */
-    public dispose(): void {
-        for (const resource of this._resources) {
-            resource.dispose();
-        }
-    }
-}
+import { EffectRenderer } from "core/Materials/effectRenderer.js";
+import type { ThinEngine } from "core/Engines/thinEngine.js";
+import { CommandBuffer } from "../command/commandBuffer.js";
+import type { IDisposable } from "../IDisposable.js";
+import type { Command } from "../command/command.js";
+
+/**
+ * A runtime is a snapshot of a smart filter containing all the
+ * required data to render it as well as the entire command buffer.
+ */
+export type SmartFilterRuntime = {
+    /**
+     * The command buffer containing all the commands to execute during a frame.
+     */
+    readonly commandBuffer: Readonly<CommandBuffer>;
+
+    /**
+     * Renders one frame of the smart filter.
+     */
+    render(): void;
+
+    /**
+     * Dispose the runtime and all its associated resources
+     */
+    dispose(): void;
+};
+
+/**
+ * The internal runtime implementation exposing more information than @see SmartFilterRuntime.
+ * This is used internally to render the smart filter.
+ *
+ * It is not fully exposed publicly to prevent any misuse of the runtime.
+ */
+export class InternalSmartFilterRuntime implements SmartFilterRuntime {
+    /**
+     * The engine used by the smart filter.
+     */
+    public readonly engine: ThinEngine;
+
+    /**
+     * The effect renderer used by the smart filter.
+     */
+    public readonly effectRenderer: EffectRenderer;
+
+    /**
+     * The command buffer containing all the commands to execute during a frame.
+     */
+    public readonly commandBuffer: CommandBuffer;
+
+    private readonly _resources: IDisposable[];
+
+    /**
+     * Instantiates a new smart filter runtime for one given engine.
+     * @param engine - the engine to use to render the smart filter
+     */
+    constructor(engine: ThinEngine) {
+        this.engine = engine;
+
+        this._resources = [];
+
+        this.commandBuffer = new CommandBuffer();
+
+        this.effectRenderer = new EffectRenderer(engine);
+        this.registerResource(this.effectRenderer);
+    }
+
+    /**
+     * Register a resource to be disposed when the runtime is disposed.
+     * @param resource - defines the resource to dispose once the runtime is disposed
+     */
+    public registerResource(resource: IDisposable): void {
+        this._resources.push(resource);
+    }
+
+    /**
+     * Registers a command to be executed during the render loop.
+     * @param command - defines the command to execute
+     */
+    public registerCommand(command: Command): void {
+        this.commandBuffer.push(command);
+    }
+
+    /**
+     * Renders the smart filter.
+     * This function will execute all the commands contained int the command buffer.
+     */
+    public render(): void {
+        try {
+            const depthTest = this.engine.depthCullingState.depthTest;
+            const stencilTest = this.engine.stencilState.stencilTest;
+
+            this.commandBuffer.execute();
+
+            // EffectRenderer.applyEffectWrapper(), which is called by ShaderRuntime._draw(),
+            // sets the depth/stencil state, so we need to restore it.
+            this.engine.depthCullingState.depthTest = depthTest;
+            this.engine.stencilState.stencilTest = stencilTest;
+        } catch (e) {
+            // eslint-disable-next-line no-debugger
+            debugger;
+        }
+    }
+
+    /**
+     * Dispose the runtime and all its associated resources
+     */
+    public dispose(): void {
+        for (const resource of this._resources) {
+            resource.dispose();
+        }
+    }
+}

package/src/runtime/strongRef.ts

@@ -1,18 +1,18 @@
-/**
- * This describes a strong reference to any data type.
- */
-export type StrongRef<T> = {
-    /**
-     * The value of the strong reference.
-     */
-    value: T;
-};
-
-/**
- * Create a strong reference to the given value.
- * @param value - the value to wrap in a strong reference
- * @returns the strong reference containing the value
- */
-export function createStrongRef<T>(value: T): StrongRef<T> {
-    return { value };
-}
+/**
+ * This describes a strong reference to any data type.
+ */
+export type StrongRef<T> = {
+    /**
+     * The value of the strong reference.
+     */
+    value: T;
+};
+
+/**
+ * Create a strong reference to the given value.
+ * @param value - the value to wrap in a strong reference
+ * @returns the strong reference containing the value
+ */
+export function CreateStrongRef<T>(value: T): StrongRef<T> {
+    return { value };
+}