@babylonjs/smart-filters 0.7.7-alpha → 0.7.9-alpha

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

@@ -0,0 +1,137 @@
+import type { Effect } from "@babylonjs/core/Materials/effect";
+
+import { type RuntimeData } from "../../../../connection/connectionPoint.js";
+import { ConnectionPointType } from "../../../../connection/connectionPointType.js";
+import { type IDisableableBlock, DisableableShaderBlock } from "../../../../blockFoundation/disableableShaderBlock.js";
+import { DisableableShaderBinding } from "../../../../runtime/shaderRuntime.js";
+import type { ShaderProgram } from "../../../../utils/shaderCodeUtils.js";
+import type { SmartFilter } from "../../../../smartFilter.js";
+import { createStrongRef } from "../../../../runtime/strongRef.js";
+
+import { desaturateBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+
+const shaderProgram: ShaderProgram = {
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_;
+            uniform float _intensity_;
+            `,
+
+        const: `
+            const float _aspect_ = 1.72;
+            `,
+
+        mainFunctionName: "_desaturate_",
+
+        mainInputTexture: "_input_",
+
+        functions: [
+            {
+                name: "_desaturate_",
+                code: `
+                vec4 _desaturate_(vec2 vUV)
+                {
+                    float saturationStrength = 1. - _intensity_;
+
+                    vec4 color = texture2D(_input_, vUV);
+                
+                    float tempMin = min(min(color.x, color.y), color.z);
+                    float tempMax = max(max(color.x, color.y), color.z);
+                    float tempMerge = 0.5 * (tempMin + tempMax);
+                
+                    return vec4(mix(color.rgb, vec3(tempMerge, tempMerge, tempMerge), saturationStrength), color.a);
+                }
+            `,
+            },
+        ],
+    },
+};
+
+/**
+ * The shader bindings for the Desaturate block.
+ */
+export class DesaturateShaderBinding extends DisableableShaderBinding {
+    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _intensity: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the Desaturate block.
+     * @param parentBlock - The parent block
+     * @param inputTexture - The input texture
+     * @param intensity - The intensity of the desaturation
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        inputTexture: RuntimeData<ConnectionPointType.Texture>,
+        intensity: RuntimeData<ConnectionPointType.Float>
+    ) {
+        super(parentBlock);
+        this._inputTexture = inputTexture;
+        this._intensity = intensity;
+    }
+
+    /**
+     * 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 {
+        super.bind(effect);
+        effect.setTexture(this.getRemappedName("input"), this._inputTexture.value);
+        effect.setFloat(this.getRemappedName("intensity"), this._intensity.value);
+    }
+}
+
+/**
+ * A simple block to desaturate the input texture.
+ */
+export class DesaturateBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = desaturateBlockType;
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = babylonDemoEffectsNamespace;
+
+    /**
+     * The input texture connection point.
+     */
+    public readonly input = this._registerInput("input", ConnectionPointType.Texture);
+
+    /**
+     * The intensity connection point.
+     */
+    public readonly intensity = this._registerOptionalInput(
+        "intensity",
+        ConnectionPointType.Float,
+        createStrongRef(0.3)
+    );
+
+    /**
+     * 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);
+    }
+
+    /**
+     * 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(): DisableableShaderBinding {
+        const input = this._confirmRuntimeDataSupplied(this.input);
+        const intensity = this.intensity.runtimeData;
+
+        return new DesaturateShaderBinding(this, input, intensity);
+    }
+}

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

@@ -0,0 +1,47 @@
+import type { ISerializedBlockV1 } from "../../../../serialization/index.js";
+import type { SmartFilter } from "../../../../smartFilter.js";
+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

@@ -0,0 +1,31 @@
+import type { BaseBlock } from "../../../../blockFoundation";
+import type { IBlockSerializerV1 } from "../../../../serialization";
+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,
+            },
+        };
+    },
+};

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

@@ -0,0 +1,193 @@
+import type { Effect } from "@babylonjs/core/Materials/effect";
+
+import { type RuntimeData } from "../../../../connection/connectionPoint.js";
+import { ConnectionPointType } from "../../../../connection/connectionPointType.js";
+import { ShaderBinding } from "../../../../runtime/shaderRuntime.js";
+import type { ShaderProgram } from "../../../../utils/shaderCodeUtils.js";
+import type { SmartFilter } from "../../../../smartFilter.js";
+import { ShaderBlock } from "../../../../blockFoundation/shaderBlock.js";
+import { editableInPropertyPage, PropertyTypeForEdition } from "../../../../editorUtils/editableInPropertyPage.js";
+
+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.ts

@@ -0,0 +1,120 @@
+import type { Effect } from "@babylonjs/core/Materials/effect";
+
+import { type RuntimeData } from "../../../../connection/connectionPoint.js";
+import { ConnectionPointType } from "../../../../connection/connectionPointType.js";
+import { type IDisableableBlock, DisableableShaderBlock } from "../../../../blockFoundation/disableableShaderBlock.js";
+import { DisableableShaderBinding } from "../../../../runtime/shaderRuntime.js";
+import type { ShaderProgram } from "../../../../utils/shaderCodeUtils.js";
+import type { SmartFilter } from "../../../../smartFilter.js";
+
+import { exposureBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+
+const shaderProgram: ShaderProgram = {
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_;
+            uniform float _amount_;
+            `,
+
+        mainFunctionName: "_exposure_",
+
+        mainInputTexture: "_input_",
+
+        functions: [
+            {
+                name: "_exposure_",
+                code: `
+                vec4 _exposure_(vec2 vUV) {
+                    vec4 color = texture2D(_input_, vUV);
+                    return vec4(color.rgb * _amount_, color.a);
+                }
+            `,
+            },
+        ],
+    },
+};
+
+/**
+ * The shader bindings for the ExposureBlock.
+ */
+export class ExposureBinding extends DisableableShaderBinding {
+    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _amount: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the exposure block.
+     * @param parentBlock - The parent block
+     * @param inputTexture - The input texture
+     * @param amount - The exposure adjustment amount (1.0 means no adjustment)
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        inputTexture: RuntimeData<ConnectionPointType.Texture>,
+        amount: RuntimeData<ConnectionPointType.Float>
+    ) {
+        super(parentBlock);
+        this._inputTexture = inputTexture;
+        this._amount = amount;
+    }
+
+    /**
+     * 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 {
+        super.bind(effect);
+        effect.setTexture(this.getRemappedName("input"), this._inputTexture.value);
+        effect.setFloat(this.getRemappedName("amount"), this._amount.value);
+    }
+}
+
+/**
+ * Applies an exposure adjustment to the input texture.
+ */
+export class ExposureBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = exposureBlockType;
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = babylonDemoEffectsNamespace;
+
+    /**
+     * The input texture connection point.
+     */
+    public readonly input = this._registerInput("input", ConnectionPointType.Texture);
+
+    /**
+     * The amount of exposure adjustment to apply (1.0 is no adjustment).
+     */
+    public readonly amount = this._registerInput("amount", ConnectionPointType.Float);
+
+    /**
+     * 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);
+    }
+
+    /**
+     * 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(): DisableableShaderBinding {
+        const input = this._confirmRuntimeDataSupplied(this.input);
+        const amount = this._confirmRuntimeDataSupplied(this.amount);
+
+        return new ExposureBinding(this, input, amount);
+    }
+}

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

@@ -0,0 +1,152 @@
+import type { Effect } from "@babylonjs/core/Materials/effect";
+
+import { type RuntimeData } from "../../../../connection/connectionPoint.js";
+import { ConnectionPointType } from "../../../../connection/connectionPointType.js";
+import { type IDisableableBlock, DisableableShaderBlock } from "../../../../blockFoundation/disableableShaderBlock.js";
+import { DisableableShaderBinding } from "../../../../runtime/shaderRuntime.js";
+import type { ShaderProgram } from "../../../../utils/shaderCodeUtils.js";
+import type { SmartFilter } from "../../../../smartFilter.js";
+import { createStrongRef } from "../../../../runtime/strongRef.js";
+
+import { greenScreenBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+
+const shaderProgram: ShaderProgram = {
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_;
+            uniform sampler2D _background_;
+            uniform vec3 _reference_;
+            uniform float _distance_;
+            `,
+
+        mainFunctionName: "_greenScreen_",
+
+        mainInputTexture: "_input_",
+
+        functions: [
+            {
+                name: "_greenScreen_",
+                code: `
+                vec4 _greenScreen_(vec2 vUV)
+                {
+                    vec4 color = texture2D(_input_, vUV);
+                    vec4 background = texture2D(_background_, vUV);
+                
+                    if (length(color.rgb - _reference_) < _distance_) {
+                        return background;
+                    }
+
+                    return color;
+                }
+            `,
+            },
+        ],
+    },
+};
+
+/**
+ * The shader bindings for the Green block.
+ */
+export class GreenShaderBinding extends DisableableShaderBinding {
+    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _backgroundTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _reference: RuntimeData<ConnectionPointType.Color3>;
+    private readonly _distance: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the Green block.
+     * @param parentBlock - The parent block
+     * @param inputTexture - the input texture
+     * @param backgroundTexture - the background texture
+     * @param reference - the reference color
+     * @param distance - the distance from the reference color
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        inputTexture: RuntimeData<ConnectionPointType.Texture>,
+        backgroundTexture: RuntimeData<ConnectionPointType.Texture>,
+        reference: RuntimeData<ConnectionPointType.Color3>,
+        distance: RuntimeData<ConnectionPointType.Float>
+    ) {
+        super(parentBlock);
+        this._inputTexture = inputTexture;
+        this._backgroundTexture = backgroundTexture;
+        this._reference = reference;
+        this._distance = distance;
+    }
+
+    /**
+     * 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 {
+        super.bind(effect);
+        effect.setTexture(this.getRemappedName("input"), this._inputTexture.value);
+        effect.setTexture(this.getRemappedName("background"), this._backgroundTexture.value);
+        effect.setColor3(this.getRemappedName("reference"), this._reference.value);
+        effect.setFloat(this.getRemappedName("distance"), this._distance.value);
+    }
+}
+
+/**
+ * A simple block to insert a background in place of a green screen.
+ */
+export class GreenScreenBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = greenScreenBlockType;
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = babylonDemoEffectsNamespace;
+
+    /**
+     * The input texture connection point.
+     */
+    public readonly input = this._registerInput("input", ConnectionPointType.Texture);
+
+    /**
+     * The background texture connection point.
+     */
+    public readonly background = this._registerInput("background", ConnectionPointType.Texture);
+
+    /**
+     * The reference color of the green screen.
+     */
+    public readonly reference = this._registerInput("reference", ConnectionPointType.Color3);
+
+    /**
+     * The "distance" from the color the reference is allowed to have for replacement.
+     */
+    public readonly distance = this._registerOptionalInput("distance", ConnectionPointType.Float, createStrongRef(0.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);
+    }
+
+    /**
+     * 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(): DisableableShaderBinding {
+        const input = this._confirmRuntimeDataSupplied(this.input);
+        const background = this._confirmRuntimeDataSupplied(this.background);
+        const reference = this._confirmRuntimeDataSupplied(this.reference);
+        const distance = this.distance.runtimeData;
+
+        return new GreenShaderBinding(this, input, background, reference, distance);
+    }
+}

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

@@ -0,0 +1,14 @@
+export * from "./blackAndWhiteBlock.js";
+export * from "./blurBlock.js";
+export * from "./compositionBlock.js";
+export * from "./contrastBlock.js";
+export * from "./desaturateBlock.js";
+export * from "./directionalBlurBlock.js";
+export * from "./exposureBlock.js";
+export * from "./greenScreenBlock.js";
+export * from "./kaleidoscopeBlock.js";
+export * from "./maskBlock.js";
+export * from "./pixelateBlock.js";
+export * from "./posterizeBlock.js";
+export * from "./spritesheetBlock.js";
+export * from "./tintBlock.js";