@babylonjs/smart-filters-blocks 1.0.13 → 8.18.0

package/src/blocks/babylon/demo/effects/directionalBlurBlock.deserializer.ts

@@ -1,46 +1,43 @@
-import type { ISerializedBlockV1, SmartFilter } from "@babylonjs/smart-filters";
-import { DirectionalBlurBlock } from "./directionalBlurBlock.js";
-
-/**
- * The definition of the extra data serialized for directional blur blocks.
- */
-export interface ISerializedDirectionalBlurBlockV1 extends ISerializedBlockV1 {
-    /**
-     * The extra data of the block.
-     */
-    data: {
-        /**
-         * The horizontal width of the blur.
-         */
-        blurHorizontalWidth: number;
-
-        /**
-         * The vertical width of the blur.
-         */
-        blurVerticalWidth: number;
-
-        /**
-         * The blur texture ratio.
-         */
-        blurTextureRatio: number;
-    };
-}
-
-/**
- * V1 Directional Blur Deserializer.
- * @param smartFilter - The SmartFilter to deserialize the block into
- * @param serializedBlock - The serialized block data
- * @returns A deserialized DirectionalBlurBlock
- */
-export function directionalBlurDeserializer(
-    smartFilter: SmartFilter,
-    serializedBlock: ISerializedDirectionalBlurBlockV1
-) {
-    const block = new DirectionalBlurBlock(smartFilter, serializedBlock.name);
-
-    // If data is missing, use the default value set by the block
-    block.blurHorizontalWidth = serializedBlock.data.blurHorizontalWidth ?? block.blurHorizontalWidth;
-    block.blurVerticalWidth = serializedBlock.data.blurVerticalWidth ?? block.blurVerticalWidth;
-    block.blurTextureRatio = serializedBlock.data.blurTextureRatio ?? block.blurTextureRatio;
-    return block;
-}
+import type { ISerializedBlockV1, SmartFilter } from "smart-filters";
+import { DirectionalBlurBlock } from "./directionalBlurBlock.js";
+
+/**
+ * The definition of the extra data serialized for directional blur blocks.
+ */
+export interface ISerializedDirectionalBlurBlockV1 extends ISerializedBlockV1 {
+    /**
+     * The extra data of the block.
+     */
+    data: {
+        /**
+         * The horizontal width of the blur.
+         */
+        blurHorizontalWidth: number;
+
+        /**
+         * The vertical width of the blur.
+         */
+        blurVerticalWidth: number;
+
+        /**
+         * The blur texture ratio.
+         */
+        blurTextureRatio: number;
+    };
+}
+
+/**
+ * V1 Directional Blur Deserializer.
+ * @param smartFilter - The SmartFilter to deserialize the block into
+ * @param serializedBlock - The serialized block data
+ * @returns A deserialized DirectionalBlurBlock
+ */
+export function DirectionalBlurDeserializer(smartFilter: SmartFilter, serializedBlock: ISerializedDirectionalBlurBlockV1) {
+    const block = new DirectionalBlurBlock(smartFilter, serializedBlock.name);
+
+    // If data is missing, use the default value set by the block
+    block.blurHorizontalWidth = serializedBlock.data.blurHorizontalWidth ?? block.blurHorizontalWidth;
+    block.blurVerticalWidth = serializedBlock.data.blurVerticalWidth ?? block.blurVerticalWidth;
+    block.blurTextureRatio = serializedBlock.data.blurTextureRatio ?? block.blurTextureRatio;
+    return block;
+}

package/src/blocks/babylon/demo/effects/directionalBlurBlock.serializer.ts

@@ -1,30 +1,30 @@
-import type { IBlockSerializerV1, BaseBlock } from "@babylonjs/smart-filters";
-import type { DirectionalBlurBlock } from "./directionalBlurBlock";
-import { directionalBlurBlockType } from "../../../blockTypes.js";
-import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
-
-/**
- * The V1 serializer for a Directional Blur Block
- */
-export const directionalBlurBlockSerializer: IBlockSerializerV1 = {
-    blockType: directionalBlurBlockType,
-    serialize: (block: BaseBlock) => {
-        if (block.getClassName() !== directionalBlurBlockType) {
-            throw new Error("Was asked to serialize an unrecognized block type");
-        }
-
-        const directionalBlurBlock = block as DirectionalBlurBlock;
-        return {
-            name: block.name,
-            uniqueId: block.uniqueId,
-            blockType: directionalBlurBlockType,
-            namespace: babylonDemoEffectsNamespace,
-            comments: block.comments,
-            data: {
-                blurTextureRatio: directionalBlurBlock.blurTextureRatio,
-                blurHorizontalWidth: directionalBlurBlock.blurHorizontalWidth,
-                blurVerticalWidth: directionalBlurBlock.blurVerticalWidth,
-            },
-        };
-    },
-};
+import type { IBlockSerializerV1, BaseBlock } from "smart-filters";
+import type { DirectionalBlurBlock } from "./directionalBlurBlock.js";
+import { directionalBlurBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+
+/**
+ * The V1 serializer for a Directional Blur Block
+ */
+export const DirectionalBlurBlockSerializer: IBlockSerializerV1 = {
+    blockType: directionalBlurBlockType,
+    serialize: (block: BaseBlock) => {
+        if (block.getClassName() !== directionalBlurBlockType) {
+            throw new Error("Was asked to serialize an unrecognized block type");
+        }
+
+        const directionalBlurBlock = block as DirectionalBlurBlock;
+        return {
+            name: block.name,
+            uniqueId: block.uniqueId,
+            blockType: directionalBlurBlockType,
+            namespace: babylonDemoEffectsNamespace,
+            comments: block.comments,
+            data: {
+                blurTextureRatio: directionalBlurBlock.blurTextureRatio,
+                blurHorizontalWidth: directionalBlurBlock.blurHorizontalWidth,
+                blurVerticalWidth: directionalBlurBlock.blurVerticalWidth,
+            },
+        };
+    },
+};

package/src/blocks/babylon/demo/effects/directionalBlurBlock.ts

@@ -1,196 +1,192 @@
-import type { Effect } from "@babylonjs/core/Materials/effect";
-
-import {
-    type ShaderProgram,
-    type RuntimeData,
-    ConnectionPointType,
-    type SmartFilter,
-    editableInPropertyPage,
-    PropertyTypeForEdition,
-    ShaderBinding,
-    ShaderBlock,
-} from "@babylonjs/smart-filters";
-
-import { directionalBlurBlockType } from "../../../blockTypes.js";
-import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
-
-const shaderProgram: ShaderProgram = {
-    fragment: {
-        const: `
-            const float _epsilon_ = 0.01;
-            `,
-        uniform: `
-                uniform vec2 _texelStep_;
-                uniform sampler2D _input_;
-            `,
-
-        uniformSingle: `
-                uniform float[7] _weights_;
-            `,
-
-        mainFunctionName: "_directionalBlur_",
-
-        mainInputTexture: "_input_",
-
-        functions: [
-            {
-                name: "_directionalBlur_",
-                code: `
-                vec4 _directionalBlur_(vec2 vUV) {
-                    vec2 start = vUV - 3.0 * _texelStep_;
-    
-                    vec4 finalWeightedColor = vec4(0., 0., 0., 0.);
-                
-                    for (int i = 0; i < 7; i++)
-                    {
-                        vec2 fetchUV = start + _texelStep_ * float(i);
-                        fetchUV = clamp(fetchUV, 0., 1.);
-                        vec4 colorSample = texture2D(_input_, fetchUV);
-
-                        // Ignore samples from mostly transparent pixels
-                        if (colorSample.a < _epsilon_) continue;
-                
-                        finalWeightedColor += colorSample * _weights_[i];                    
-                    }
-                
-                    return finalWeightedColor;
-                }
-            `,
-            },
-        ],
-    },
-};
-
-const wideWeights = Float32Array.from([0.05, 0.1, 0.2, 0.3, 0.2, 0.1, 0.05]);
-
-/**
- * The shader bindings for the DirectionalBlur block.
- */
-export class DirectionalBlurShaderBinding extends ShaderBinding {
-    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
-    private readonly _blurHorizontalWidth: number;
-    private readonly _blurVerticalWidth: number;
-
-    /**
-     * Creates a new shader binding instance for the DirectionalBlur block.
-     * @param inputTexture - The input texture
-     * @param blurHorizontalWidth - The horizontal blur width
-     * @param blurVerticalWidth - The vertical blur width
-     */
-    constructor(
-        inputTexture: RuntimeData<ConnectionPointType.Texture>,
-        blurHorizontalWidth: number,
-        blurVerticalWidth: number
-    ) {
-        super();
-        this._inputTexture = inputTexture;
-        this._blurHorizontalWidth = blurHorizontalWidth;
-        this._blurVerticalWidth = blurVerticalWidth;
-    }
-
-    /**
-     * Binds all the required data to the shader when rendering.
-     * @param effect - defines the effect to bind the data to
-     */
-    public override bind(effect: Effect): void {
-        // Global pass Setup
-        effect.setFloatArray(this.getRemappedName("weights"), wideWeights);
-
-        // V blur
-        effect.setTexture(this.getRemappedName("input"), this._inputTexture.value);
-
-        // Texel size
-        if (this._inputTexture.value) {
-            const inputSize = this._inputTexture.value.getSize();
-            const texelWidth = this._blurHorizontalWidth / inputSize.width;
-            const texelHeight = this._blurVerticalWidth / inputSize.height;
-            effect.setFloat2(this.getRemappedName("texelStep"), texelWidth, texelHeight);
-        }
-    }
-}
-
-/**
- * A block performing a directional "gaussian" blur.
- *
- * It is aggregated as part of the @see BlurBlock.
- */
-export class DirectionalBlurBlock extends ShaderBlock {
-    /**
-     * The class name of the block.
-     */
-    public static override ClassName = directionalBlurBlockType;
-
-    /**
-     * The namespace of the block.
-     */
-    public static override Namespace = babylonDemoEffectsNamespace;
-
-    /**
-     * The input texture connection point.
-     */
-    public readonly input = this._registerInput("input", ConnectionPointType.Texture);
-
-    /**
-     * Defines how smaller we should make the target compared to the screen size.
-     */
-    @editableInPropertyPage("Texture Ratio", PropertyTypeForEdition.Float, "PROPERTIES", {
-        min: 0,
-        max: 1,
-        notifiers: { rebuild: true },
-    })
-    public blurTextureRatio = 0.5;
-
-    /**
-     * Defines the horizontal strength of the blur.
-     */
-    @editableInPropertyPage("Horizontal strength", PropertyTypeForEdition.Float, "PROPERTIES", {
-        min: 0,
-        max: 1,
-        notifiers: { rebuild: true },
-    })
-    public blurHorizontalWidth = 0;
-
-    /**
-     * Defines the vertical strength of the blur.
-     */
-    @editableInPropertyPage("Vertical strength", PropertyTypeForEdition.Float, "PROPERTIES", {
-        min: 0,
-        max: 1,
-        notifiers: { rebuild: true },
-    })
-    public blurVerticalWidth = 1;
-
-    /**
-     * The shader program (vertex and fragment code) to use to render the block
-     */
-    public static override ShaderCode = shaderProgram;
-
-    /**
-     * Instantiates a new Block.
-     * @param smartFilter - The smart filter this block belongs to
-     * @param name - The friendly name of the block
-     */
-    constructor(smartFilter: SmartFilter, name: string) {
-        super(smartFilter, name, true);
-    }
-
-    /**
-     * Prepares the block for runtime.
-     * This is called by the smart filter just before creating the smart filter runtime.
-     */
-    public override prepareForRuntime(): void {
-        super.prepareForRuntime();
-
-        this.outputTextureOptions.ratio = this.blurTextureRatio;
-    }
-
-    /**
-     * Get the class instance that binds all the required data to the shader (effect) when rendering.
-     * @returns The class instance that binds the data to the effect
-     */
-    public getShaderBinding(): ShaderBinding {
-        const input = this._confirmRuntimeDataSupplied(this.input);
-
-        return new DirectionalBlurShaderBinding(input, this.blurHorizontalWidth, this.blurVerticalWidth);
-    }
-}
+import type { Effect } from "core/Materials/effect.js";
+
+import {
+    type ShaderProgram,
+    type RuntimeData,
+    ConnectionPointType,
+    type SmartFilter,
+    editableInPropertyPage,
+    PropertyTypeForEdition,
+    ShaderBinding,
+    ShaderBlock,
+} from "smart-filters";
+
+import { directionalBlurBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+
+const ShaderProgram: ShaderProgram = {
+    fragment: {
+        const: `
+            const float _epsilon_ = 0.01;
+            `,
+        uniform: `
+                uniform vec2 _texelStep_;
+                uniform sampler2D _input_;
+            `,
+
+        uniformSingle: `
+                uniform float[7] _weights_;
+            `,
+
+        mainFunctionName: "_directionalBlur_",
+
+        mainInputTexture: "_input_",
+
+        functions: [
+            {
+                name: "_directionalBlur_",
+                code: `
+                vec4 _directionalBlur_(vec2 vUV) {
+                    vec2 start = vUV - 3.0 * _texelStep_;
+
+                    vec4 finalWeightedColor = vec4(0., 0., 0., 0.);
+
+                    for (int i = 0; i < 7; i++)
+                    {
+                        vec2 fetchUV = start + _texelStep_ * float(i);
+                        fetchUV = clamp(fetchUV, 0., 1.);
+                        vec4 colorSample = texture2D(_input_, fetchUV);
+
+                        // Ignore samples from mostly transparent pixels
+                        if (colorSample.a < _epsilon_) continue;
+
+                        finalWeightedColor += colorSample * _weights_[i];
+                    }
+
+                    return finalWeightedColor;
+                }
+            `,
+            },
+        ],
+    },
+};
+
+const WideWeights = Float32Array.from([0.05, 0.1, 0.2, 0.3, 0.2, 0.1, 0.05]);
+
+/**
+ * The shader bindings for the DirectionalBlur block.
+ */
+export class DirectionalBlurShaderBinding extends ShaderBinding {
+    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _blurHorizontalWidth: number;
+    private readonly _blurVerticalWidth: number;
+
+    /**
+     * Creates a new shader binding instance for the DirectionalBlur block.
+     * @param inputTexture - The input texture
+     * @param blurHorizontalWidth - The horizontal blur width
+     * @param blurVerticalWidth - The vertical blur width
+     */
+    constructor(inputTexture: RuntimeData<ConnectionPointType.Texture>, blurHorizontalWidth: number, blurVerticalWidth: number) {
+        super();
+        this._inputTexture = inputTexture;
+        this._blurHorizontalWidth = blurHorizontalWidth;
+        this._blurVerticalWidth = blurVerticalWidth;
+    }
+
+    /**
+     * Binds all the required data to the shader when rendering.
+     * @param effect - defines the effect to bind the data to
+     */
+    public override bind(effect: Effect): void {
+        // Global pass Setup
+        effect.setFloatArray(this.getRemappedName("weights"), WideWeights);
+
+        // V blur
+        effect.setTexture(this.getRemappedName("input"), this._inputTexture.value);
+
+        // Texel size
+        if (this._inputTexture.value) {
+            const inputSize = this._inputTexture.value.getSize();
+            const texelWidth = this._blurHorizontalWidth / inputSize.width;
+            const texelHeight = this._blurVerticalWidth / inputSize.height;
+            effect.setFloat2(this.getRemappedName("texelStep"), texelWidth, texelHeight);
+        }
+    }
+}
+
+/**
+ * A block performing a directional "gaussian" blur.
+ *
+ * It is aggregated as part of the @see BlurBlock.
+ */
+export class DirectionalBlurBlock extends ShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = directionalBlurBlockType;
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = babylonDemoEffectsNamespace;
+
+    /**
+     * The input texture connection point.
+     */
+    public readonly input = this._registerInput("input", ConnectionPointType.Texture);
+
+    /**
+     * Defines how smaller we should make the target compared to the screen size.
+     */
+    @editableInPropertyPage("Texture Ratio", PropertyTypeForEdition.Float, "PROPERTIES", {
+        min: 0,
+        max: 1,
+        notifiers: { rebuild: true },
+    })
+    public blurTextureRatio = 0.5;
+
+    /**
+     * Defines the horizontal strength of the blur.
+     */
+    @editableInPropertyPage("Horizontal strength", PropertyTypeForEdition.Float, "PROPERTIES", {
+        min: 0,
+        max: 1,
+        notifiers: { rebuild: true },
+    })
+    public blurHorizontalWidth = 0;
+
+    /**
+     * Defines the vertical strength of the blur.
+     */
+    @editableInPropertyPage("Vertical strength", PropertyTypeForEdition.Float, "PROPERTIES", {
+        min: 0,
+        max: 1,
+        notifiers: { rebuild: true },
+    })
+    public blurVerticalWidth = 1;
+
+    /**
+     * The shader program (vertex and fragment code) to use to render the block
+     */
+    public static override ShaderCode = ShaderProgram;
+
+    /**
+     * Instantiates a new Block.
+     * @param smartFilter - The smart filter this block belongs to
+     * @param name - The friendly name of the block
+     */
+    constructor(smartFilter: SmartFilter, name: string) {
+        super(smartFilter, name, true);
+    }
+
+    /**
+     * Prepares the block for runtime.
+     * This is called by the smart filter just before creating the smart filter runtime.
+     */
+    public override prepareForRuntime(): void {
+        super.prepareForRuntime();
+
+        this.outputTextureOptions.ratio = this.blurTextureRatio;
+    }
+
+    /**
+     * Get the class instance that binds all the required data to the shader (effect) when rendering.
+     * @returns The class instance that binds the data to the effect
+     */
+    public getShaderBinding(): ShaderBinding {
+        const input = this._confirmRuntimeDataSupplied(this.input);
+
+        return new DirectionalBlurShaderBinding(input, this.blurHorizontalWidth, this.blurVerticalWidth);
+    }
+}

package/src/blocks/babylon/demo/effects/exposureBlock.block.ts

@@ -8,7 +8,7 @@
 // to the block. This file will get overwritten when the build
 // is run or during a watch when the .glsl file is updated.
 
-import type { Effect } from "@babylonjs/core/Materials/effect";
+import type { Effect } from "core/Materials/effect.js";
 
 import {
     DisableableShaderBinding,
@@ -18,12 +18,12 @@ import {
     DisableableShaderBlock,
     type ShaderProgram,
     type IDisableableBlock,
-    BlockDisableStrategy} from "@babylonjs/smart-filters";
+    BlockDisableStrategy} from "smart-filters";
 
 /**
  * The shader program for the block.
  */
-const shaderProgram: ShaderProgram = {
+const BlockShaderProgram: ShaderProgram = {
     vertex: undefined,
     fragment: {
         uniform: `
@@ -50,11 +50,12 @@ const shaderProgram: ShaderProgram = {
  * The uniform names for this shader, to be used in the shader binding so
  * that the names are always in sync.
  */
-const uniforms = {
+const Uniforms = {
     input: "input",
     amount: "amount",
 };
 
+
 /**
  * The shader binding for the ExposureBlock, used by the runtime
  */
@@ -84,8 +85,8 @@ class ExposureBlockShaderBinding extends DisableableShaderBinding {
      */
     public override bind(effect: Effect): void {
         super.bind(effect);
-        effect.setTexture(this.getRemappedName(uniforms.input), this._input.value);
-        effect.setFloat(this.getRemappedName(uniforms.amount), this._amount.value);
+        effect.setTexture(this.getRemappedName(Uniforms.input), this._input.value);
+        effect.setFloat(this.getRemappedName(Uniforms.amount), this._amount.value);
     }
 }
 
@@ -106,17 +107,17 @@ export class ExposureBlock extends DisableableShaderBlock {
     /**
      * The input connection point.
      */
-    public readonly input = this._registerInput(uniforms.input, ConnectionPointType.Texture);
+    public readonly input = this._registerInput(Uniforms.input, ConnectionPointType.Texture);
 
     /**
      * The amount connection point.
      */
-    public readonly amount = this._registerInput(uniforms.amount, ConnectionPointType.Float);
+    public readonly amount = this._registerInput(Uniforms.amount, ConnectionPointType.Float);
 
     /**
      * The shader program (vertex and fragment code) to use to render the block
      */
-    public static override ShaderCode = shaderProgram;
+    public static override ShaderCode = BlockShaderProgram;
 
     /**
      * Instantiates a new ExposureBlock.