@babylonjs/smart-filters 1.0.13 → 8.19.0

package/src/blockFoundation/outputBlock.ts

@@ -1,151 +1,144 @@
-import type { InitializationData, SmartFilter } from "../smartFilter";
-import { ConnectionPointType } from "../connection/connectionPointType.js";
-import { BaseBlock } from "./baseBlock.js";
-import { ShaderBinding, ShaderRuntime } from "../runtime/shaderRuntime.js";
-import type { Nullable } from "@babylonjs/core/types";
-import type { RenderTargetWrapper } from "@babylonjs/core/Engines/renderTargetWrapper";
-import { registerFinalRenderCommand } from "../utils/renderTargetUtils.js";
-import type { RuntimeData } from "../connection/connectionPoint";
-import type { Effect } from "@babylonjs/core/Materials/effect";
-import type { ShaderProgram } from "../utils/shaderCodeUtils";
-
-/**
- * The shader program for the block.
- */
-export const shaderProgram: ShaderProgram = {
-    vertex: undefined,
-    fragment: {
-        uniform: `
-            uniform sampler2D _input_; // main`,
-        mainInputTexture: "_input_",
-        mainFunctionName: "_copy_",
-        functions: [
-            {
-                name: "_copy_",
-                code: `
-                    vec4 _copy_(vec2 vUV) { 
-                        return texture2D(_input_, vUV);
-                    }
-                    
-                    `,
-            },
-        ],
-    },
-};
-
-/**
- * The uniform names for this shader, to be used in the shader binding so
- * that the names are always in sync.
- */
-const uniforms = {
-    input: "input",
-};
-
-/**
- * The output block of a smart filter.
- *
- * Only the smart filter will internally create and host the output block.
- * It should not be exported through the main index.ts module.
- */
-export class OutputBlock extends BaseBlock {
-    /**
-     * The class name of the block.
-     */
-    public static override ClassName = "OutputBlock";
-
-    /**
-     * Input connection point of the output block.
-     * This takes a texture as input.
-     */
-    public readonly input = this._registerInput("input", ConnectionPointType.Texture);
-
-    /**
-     * If supplied, the Smart Filter will render into this RenderTargetWrapper. Otherwise, it renders
-     * into the the canvas or WebGL context the ThinEngine is using for rendering.
-     */
-    public renderTargetWrapper: Nullable<RenderTargetWrapper> = null;
-
-    /**
-     * Create a new output block.
-     * @param smartFilter - The smart filter this block belongs to
-     */
-    constructor(smartFilter: SmartFilter) {
-        super(smartFilter, "output");
-    }
-
-    /**
-     * Prepares all blocks for runtime by traversing the graph.
-     */
-    public override prepareForRuntime(): void {
-        this.visit({}, (block: BaseBlock, _extraData: Object) => {
-            if (block !== this) {
-                block.prepareForRuntime();
-            }
-        });
-    }
-
-    /**
-     * Propagates the runtime data for all graph blocks.
-     */
-    public override propagateRuntimeData(): void {
-        this.visit({}, (block: BaseBlock, _extraData: Object) => {
-            if (block !== this) {
-                block.propagateRuntimeData();
-            }
-        });
-        this._confirmRuntimeDataSupplied(this.input);
-    }
-
-    /**
-     * Generates the commands needed to execute the block at runtime and gathers promises for initialization work
-     * @param initializationData - The initialization data to use
-     * @param finalOutput - Defines if the block is the final output of the smart filter
-     */
-    public override generateCommandsAndGatherInitPromises(
-        initializationData: InitializationData,
-        finalOutput: boolean
-    ): void {
-        // In the case that this OutputBlock is directly connected to a texture InputBlock, we must
-        // use a shader to copy the texture to the render target texture.
-        if (this.input.connectedTo?.ownerBlock.isInput && this.input.runtimeData) {
-            const runtime = initializationData.runtime;
-
-            const shaderBlockRuntime = new ShaderRuntime(
-                runtime.effectRenderer,
-                shaderProgram,
-                new OutputShaderBinding(this.input.runtimeData)
-            );
-            initializationData.initializationPromises.push(shaderBlockRuntime.onReadyAsync);
-            runtime.registerResource(shaderBlockRuntime);
-
-            registerFinalRenderCommand(this, runtime, this, shaderBlockRuntime);
-
-            super.generateCommandsAndGatherInitPromises(initializationData, finalOutput);
-        }
-    }
-}
-
-/**
- * Shader binding to use when the OutputBlock is directly connected to a texture InputBlock.
- */
-class OutputShaderBinding extends ShaderBinding {
-    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
-
-    /**
-     * Creates a new shader binding instance.
-     * @param inputTexture - defines the input texture to copy
-     */
-    constructor(inputTexture: RuntimeData<ConnectionPointType.Texture>) {
-        super();
-        this._inputTexture = inputTexture;
-    }
-
-    /**
-     * Binds all the required data to the shader when rendering.
-     * @param effect - defines the effect to bind the data to
-     * @internal
-     */
-    public override bind(effect: Effect): void {
-        effect.setTexture(this.getRemappedName(uniforms.input), this._inputTexture.value);
-    }
-}
+import type { InitializationData, SmartFilter } from "../smartFilter.js";
+import { ConnectionPointType } from "../connection/connectionPointType.js";
+import { BaseBlock } from "./baseBlock.js";
+import { ShaderBinding, ShaderRuntime } from "../runtime/shaderRuntime.js";
+import type { Nullable } from "core/types.js";
+import type { RenderTargetWrapper } from "core/Engines/renderTargetWrapper.js";
+import { RegisterFinalRenderCommand } from "../utils/renderTargetUtils.js";
+import type { RuntimeData } from "../connection/connectionPoint.js";
+import type { Effect } from "core/Materials/effect.js";
+import type { ShaderProgram } from "../utils/shaderCodeUtils.js";
+
+/**
+ * The shader program for the block.
+ */
+const BlockShaderProgram: ShaderProgram = {
+    vertex: undefined,
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_; // main`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_copy_",
+        functions: [
+            {
+                name: "_copy_",
+                code: `
+                    vec4 _copy_(vec2 vUV) {
+                        return texture2D(_input_, vUV);
+                    }
+
+                    `,
+            },
+        ],
+    },
+};
+
+/**
+ * The uniform names for this shader, to be used in the shader binding so
+ * that the names are always in sync.
+ */
+const Uniforms = {
+    input: "input",
+};
+
+/**
+ * The output block of a smart filter.
+ *
+ * Only the smart filter will internally create and host the output block.
+ * It should not be exported through the main index.ts module.
+ */
+export class OutputBlock extends BaseBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "OutputBlock";
+
+    /**
+     * Input connection point of the output block.
+     * This takes a texture as input.
+     */
+    public readonly input = this._registerInput("input", ConnectionPointType.Texture);
+
+    /**
+     * If supplied, the Smart Filter will render into this RenderTargetWrapper. Otherwise, it renders
+     * into the the canvas or WebGL context the ThinEngine is using for rendering.
+     */
+    public renderTargetWrapper: Nullable<RenderTargetWrapper> = null;
+
+    /**
+     * Create a new output block.
+     * @param smartFilter - The smart filter this block belongs to
+     */
+    constructor(smartFilter: SmartFilter) {
+        super(smartFilter, "output");
+    }
+
+    /**
+     * Prepares all blocks for runtime by traversing the graph.
+     */
+    public override prepareForRuntime(): void {
+        this.visit({}, (block: BaseBlock, _extraData: object) => {
+            if (block !== this) {
+                block.prepareForRuntime();
+            }
+        });
+    }
+
+    /**
+     * Propagates the runtime data for all graph blocks.
+     */
+    public override propagateRuntimeData(): void {
+        this.visit({}, (block: BaseBlock, _extraData: object) => {
+            if (block !== this) {
+                block.propagateRuntimeData();
+            }
+        });
+        this._confirmRuntimeDataSupplied(this.input);
+    }
+
+    /**
+     * Generates the commands needed to execute the block at runtime and gathers promises for initialization work
+     * @param initializationData - The initialization data to use
+     * @param finalOutput - Defines if the block is the final output of the smart filter
+     */
+    public override generateCommandsAndGatherInitPromises(initializationData: InitializationData, finalOutput: boolean): void {
+        // In the case that this OutputBlock is directly connected to a texture InputBlock, we must
+        // use a shader to copy the texture to the render target texture.
+        if (this.input.connectedTo?.ownerBlock.isInput && this.input.runtimeData) {
+            const runtime = initializationData.runtime;
+
+            const shaderBlockRuntime = new ShaderRuntime(runtime.effectRenderer, BlockShaderProgram, new OutputShaderBinding(this.input.runtimeData));
+            initializationData.initializationPromises.push(shaderBlockRuntime.onReadyAsync);
+            runtime.registerResource(shaderBlockRuntime);
+
+            RegisterFinalRenderCommand(this, runtime, this, shaderBlockRuntime);
+
+            super.generateCommandsAndGatherInitPromises(initializationData, finalOutput);
+        }
+    }
+}
+
+/**
+ * Shader binding to use when the OutputBlock is directly connected to a texture InputBlock.
+ */
+class OutputShaderBinding extends ShaderBinding {
+    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
+
+    /**
+     * Creates a new shader binding instance.
+     * @param inputTexture - defines the input texture to copy
+     */
+    constructor(inputTexture: RuntimeData<ConnectionPointType.Texture>) {
+        super();
+        this._inputTexture = inputTexture;
+    }
+
+    /**
+     * Binds all the required data to the shader when rendering.
+     * @param effect - defines the effect to bind the data to
+     * @internal
+     */
+    public override bind(effect: Effect): void {
+        effect.setTexture(this.getRemappedName(Uniforms.input), this._inputTexture.value);
+    }
+}

package/src/blockFoundation/shaderBlock.ts

@@ -1,163 +1,156 @@
-import type { ThinRenderTargetTexture } from "@babylonjs/core/Materials/Textures/thinRenderTargetTexture";
-import "@babylonjs/core/Engines/Extensions/engine.renderTarget.js";
-
-import type { InitializationData, SmartFilter } from "../smartFilter";
-import type { ShaderProgram } from "../utils/shaderCodeUtils";
-import type { ShaderBinding } from "../runtime/shaderRuntime";
-import type { ConnectionPoint } from "../connection/connectionPoint";
-import { ShaderRuntime } from "../runtime/shaderRuntime.js";
-import { ConnectionPointType } from "../connection/connectionPointType.js";
-import { createCommand } from "../command/command.js";
-import { undecorateSymbol } from "../utils/shaderCodeUtils.js";
-import { registerFinalRenderCommand } from "../utils/renderTargetUtils.js";
-import { BaseBlock } from "./baseBlock.js";
-import { TextureFormat, TextureType, type OutputTextureOptions } from "./textureOptions.js";
-import { editableInPropertyPage, PropertyTypeForEdition } from "../editorUtils/editableInPropertyPage.js";
-import type { Nullable } from "@babylonjs/core/types";
-
-const OutputTexturePropertiesGroupName = "OUTPUT TEXTURE PROPERTIES";
-
-/**
- * This is the base class for all shader blocks.
- *
- * It contains the redundant part of wrapping a shader for a full screen pass.
- *
- * The only required function to implement is the bind function.
- */
-export abstract class ShaderBlock extends BaseBlock {
-    /**
-     * The class name of the block.
-     */
-    public static override ClassName = "ShaderBlock";
-
-    /**
-     * Get the class instance that binds all the required data to the shader (effect) when rendering.
-     * It should throw an error if required inputs are missing.
-     * @returns The class instance that binds the data to the effect
-     */
-    public abstract getShaderBinding(): ShaderBinding;
-
-    /**
-     * The shader program (vertex and fragment code) to use to render the block
-     */
-    public static ShaderCode: ShaderProgram;
-
-    /**
-     * The output connection point of the block.
-     */
-    public readonly output = this._registerOutput("output", ConnectionPointType.Texture);
-
-    /**
-     * The options used when creating the texture this block outputs to
-     */
-    @editableInPropertyPage("Ratio", PropertyTypeForEdition.Float, OutputTexturePropertiesGroupName, {
-        min: 0.1,
-        max: 10.0,
-        notifiers: { rebuild: true },
-        subPropertyName: "ratio",
-    })
-    @editableInPropertyPage("Format", PropertyTypeForEdition.List, OutputTexturePropertiesGroupName, {
-        notifiers: { rebuild: true },
-        subPropertyName: "format",
-        options: [
-            { label: "R", value: TextureFormat.R },
-            { label: "RG", value: TextureFormat.RG },
-            { label: "RGBA", value: TextureFormat.RGBA },
-        ],
-    })
-    @editableInPropertyPage("Type", PropertyTypeForEdition.List, OutputTexturePropertiesGroupName, {
-        notifiers: { rebuild: true },
-        subPropertyName: "type",
-        options: [
-            { label: "UByte", value: TextureType.UNSIGNED_BYTE },
-            { label: "Float", value: TextureType.FLOAT },
-            { label: "Half Float", value: TextureType.HALF_FLOAT },
-        ],
-    })
-    public outputTextureOptions: OutputTextureOptions = {
-        ratio: 1,
-        format: TextureFormat.RGBA,
-        type: TextureType.UNSIGNED_BYTE,
-    };
-
-    /**
-     * Disconnects the block from the graph.
-     * @param disconnectedConnections - Stores the connections that have been broken in the process. You can reconnect them later if needed.
-     */
-    public override disconnectFromGraph(disconnectedConnections?: [ConnectionPoint, ConnectionPoint][]): void {
-        const input = this._getConnectionForMainInputTexture();
-
-        for (const endpoint of this.output.endpoints) {
-            disconnectedConnections?.push([endpoint, this.output]);
-            input.connectTo(endpoint);
-        }
-    }
-
-    protected _getConnectionForMainInputTexture(): ConnectionPoint {
-        const mainInputTextureName = this.getShaderProgram().fragment.mainInputTexture;
-        if (!mainInputTextureName) {
-            throw `The block named "${this.name}" does not have a main input texture defined!`;
-        }
-
-        const mainInputTexture = this.findInput(undecorateSymbol(mainInputTextureName));
-        if (!mainInputTexture || !mainInputTexture.connectedTo) {
-            throw `The main input texture "${mainInputTextureName}" of block named "${this.name}" is not connected!`;
-        }
-
-        return mainInputTexture.connectedTo;
-    }
-
-    /**
-     * Instantiates a new block.
-     * @param smartFilter - Defines the smart filter the block belongs to
-     * @param name - Defines the name of the block
-     * @param disableOptimization - Defines if the block should not be optimized (default: false)
-     */
-    constructor(smartFilter: SmartFilter, name: string, disableOptimization = false) {
-        super(smartFilter, name, disableOptimization);
-    }
-
-    /**
-     * Gets the shader program to use to render the block.
-     * @returns The shader program to use to render the block
-     */
-    public getShaderProgram() {
-        return (this.constructor as typeof ShaderBlock).ShaderCode;
-    }
-
-    /**
-     * Generates the commands needed to execute the block at runtime and gathers promises for initialization work
-     * @param initializationData - The initialization data to use
-     * @param finalOutput - Defines if the block is the final output of the smart filter
-     */
-    public override generateCommandsAndGatherInitPromises(
-        initializationData: InitializationData,
-        finalOutput: boolean
-    ): void {
-        const runtime = initializationData.runtime;
-        const shaderBlockRuntime = new ShaderRuntime(
-            runtime.effectRenderer,
-            this.getShaderProgram(),
-            this.getShaderBinding()
-        );
-        initializationData.initializationPromises.push(shaderBlockRuntime.onReadyAsync);
-        runtime.registerResource(shaderBlockRuntime);
-
-        if (finalOutput) {
-            registerFinalRenderCommand(initializationData.outputBlock, runtime, this, shaderBlockRuntime);
-        } else {
-            const renderTargetTexture = this.output.runtimeData?.value as Nullable<ThinRenderTargetTexture>;
-            if (!renderTargetTexture) {
-                throw new Error(`${this.blockType} did not have a render target texture.`);
-            }
-
-            runtime.registerCommand(
-                createCommand(`${this.blockType}.render`, this, () => {
-                    shaderBlockRuntime.renderToTargetTexture(renderTargetTexture);
-                })
-            );
-        }
-
-        super.generateCommandsAndGatherInitPromises(initializationData, finalOutput);
-    }
-}
+import type { ThinRenderTargetTexture } from "core/Materials/Textures/thinRenderTargetTexture.js";
+import "core/Engines/Extensions/engine.renderTarget.js";
+
+import type { InitializationData, SmartFilter } from "../smartFilter.js";
+import type { ShaderProgram } from "../utils/shaderCodeUtils.js";
+import type { ShaderBinding } from "../runtime/shaderRuntime.js";
+import type { ConnectionPoint } from "../connection/connectionPoint.js";
+import { ShaderRuntime } from "../runtime/shaderRuntime.js";
+import { ConnectionPointType } from "../connection/connectionPointType.js";
+import { CreateCommand } from "../command/command.js";
+import { UndecorateSymbol } from "../utils/shaderCodeUtils.js";
+import { RegisterFinalRenderCommand } from "../utils/renderTargetUtils.js";
+import { BaseBlock } from "./baseBlock.js";
+import { TextureFormat, TextureType, type OutputTextureOptions } from "./textureOptions.js";
+import { EditableInPropertyPage, PropertyTypeForEdition } from "../editorUtils/editableInPropertyPage.js";
+import type { Nullable } from "core/types.js";
+
+const OutputTexturePropertiesGroupName = "OUTPUT TEXTURE PROPERTIES";
+
+/**
+ * This is the base class for all shader blocks.
+ *
+ * It contains the redundant part of wrapping a shader for a full screen pass.
+ *
+ * The only required function to implement is the bind function.
+ */
+export abstract class ShaderBlock extends BaseBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "ShaderBlock";
+
+    /**
+     * Get the class instance that binds all the required data to the shader (effect) when rendering.
+     * It should throw an error if required inputs are missing.
+     * @returns The class instance that binds the data to the effect
+     */
+    public abstract getShaderBinding(): ShaderBinding;
+
+    /**
+     * The shader program (vertex and fragment code) to use to render the block
+     */
+    public static ShaderCode: ShaderProgram;
+
+    /**
+     * The output connection point of the block.
+     */
+    public readonly output = this._registerOutput("output", ConnectionPointType.Texture);
+
+    /**
+     * The options used when creating the texture this block outputs to
+     */
+    @EditableInPropertyPage("Ratio", PropertyTypeForEdition.Float, OutputTexturePropertiesGroupName, {
+        min: 0.1,
+        max: 10.0,
+        notifiers: { rebuild: true },
+        subPropertyName: "ratio",
+    })
+    @EditableInPropertyPage("Format", PropertyTypeForEdition.List, OutputTexturePropertiesGroupName, {
+        notifiers: { rebuild: true },
+        subPropertyName: "format",
+        options: [
+            { label: "R", value: TextureFormat.R },
+            { label: "RG", value: TextureFormat.RG },
+            { label: "RGBA", value: TextureFormat.RGBA },
+        ],
+    })
+    @EditableInPropertyPage("Type", PropertyTypeForEdition.List, OutputTexturePropertiesGroupName, {
+        notifiers: { rebuild: true },
+        subPropertyName: "type",
+        options: [
+            { label: "UByte", value: TextureType.UNSIGNED_BYTE },
+            { label: "Float", value: TextureType.FLOAT },
+            { label: "Half Float", value: TextureType.HALF_FLOAT },
+        ],
+    })
+    public outputTextureOptions: OutputTextureOptions = {
+        ratio: 1,
+        format: TextureFormat.RGBA,
+        type: TextureType.UNSIGNED_BYTE,
+    };
+
+    /**
+     * Disconnects the block from the graph.
+     * @param disconnectedConnections - Stores the connections that have been broken in the process. You can reconnect them later if needed.
+     */
+    public override disconnectFromGraph(disconnectedConnections?: [ConnectionPoint, ConnectionPoint][]): void {
+        const input = this._getConnectionForMainInputTexture();
+
+        for (const endpoint of this.output.endpoints) {
+            disconnectedConnections?.push([endpoint, this.output]);
+            input.connectTo(endpoint);
+        }
+    }
+
+    protected _getConnectionForMainInputTexture(): ConnectionPoint {
+        const mainInputTextureName = this.getShaderProgram().fragment.mainInputTexture;
+        if (!mainInputTextureName) {
+            throw `The block named "${this.name}" does not have a main input texture defined!`;
+        }
+
+        const mainInputTexture = this.findInput(UndecorateSymbol(mainInputTextureName));
+        if (!mainInputTexture || !mainInputTexture.connectedTo) {
+            throw `The main input texture "${mainInputTextureName}" of block named "${this.name}" is not connected!`;
+        }
+
+        return mainInputTexture.connectedTo;
+    }
+
+    /**
+     * Instantiates a new block.
+     * @param smartFilter - Defines the smart filter the block belongs to
+     * @param name - Defines the name of the block
+     * @param disableOptimization - Defines if the block should not be optimized (default: false)
+     */
+    constructor(smartFilter: SmartFilter, name: string, disableOptimization = false) {
+        super(smartFilter, name, disableOptimization);
+    }
+
+    /**
+     * Gets the shader program to use to render the block.
+     * @returns The shader program to use to render the block
+     */
+    public getShaderProgram() {
+        return (this.constructor as typeof ShaderBlock).ShaderCode;
+    }
+
+    /**
+     * Generates the commands needed to execute the block at runtime and gathers promises for initialization work
+     * @param initializationData - The initialization data to use
+     * @param finalOutput - Defines if the block is the final output of the smart filter
+     */
+    public override generateCommandsAndGatherInitPromises(initializationData: InitializationData, finalOutput: boolean): void {
+        const runtime = initializationData.runtime;
+        const shaderBlockRuntime = new ShaderRuntime(runtime.effectRenderer, this.getShaderProgram(), this.getShaderBinding());
+        initializationData.initializationPromises.push(shaderBlockRuntime.onReadyAsync);
+        runtime.registerResource(shaderBlockRuntime);
+
+        if (finalOutput) {
+            RegisterFinalRenderCommand(initializationData.outputBlock, runtime, this, shaderBlockRuntime);
+        } else {
+            const renderTargetTexture = this.output.runtimeData?.value as Nullable<ThinRenderTargetTexture>;
+            if (!renderTargetTexture) {
+                throw new Error(`${this.blockType} did not have a render target texture.`);
+            }
+
+            runtime.registerCommand(
+                CreateCommand(`${this.blockType}.render`, this, () => {
+                    shaderBlockRuntime.renderToTargetTexture(renderTargetTexture);
+                })
+            );
+        }
+
+        super.generateCommandsAndGatherInitPromises(initializationData, finalOutput);
+    }
+}