@babylonjs/smart-filters-blocks 0.8.1

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

@@ -0,0 +1,122 @@
+import {
+    type ConnectionPointType,
+    AggregateBlock,
+    type ConnectionPoint,
+    editableInPropertyPage,
+    PropertyTypeForEdition,
+    SmartFilter,
+} from "@babylonjs/smart-filters";
+import { DirectionalBlurBlock } from "./directionalBlurBlock.js";
+import { blurBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+
+const defaultBlurTextureRatioPerPass = 0.5;
+const defaultBlurSize = 2;
+
+/**
+ * A block performing a blur on the input texture.
+ *
+ * It performs the blur in 4 consecutive passes, 2 verticals and 2 horizontals downsizing the texture as we go.
+ */
+export class BlurBlock extends AggregateBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = blurBlockType;
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = babylonDemoEffectsNamespace;
+
+    /**
+     * The input texture connection point.
+     */
+    public readonly input: ConnectionPoint<ConnectionPointType.Texture>;
+
+    /**
+     * The output blurred texture connection point.
+     */
+    public readonly output: ConnectionPoint<ConnectionPointType.Texture>;
+
+    private _blurTextureRatioPerPass = defaultBlurTextureRatioPerPass;
+    private _blurSize = defaultBlurSize;
+
+    private readonly _intermediateBlurV: DirectionalBlurBlock;
+    private readonly _intermediateBlurH: DirectionalBlurBlock;
+    private readonly _finalBlurV: DirectionalBlurBlock;
+    private readonly _finalBlurH: DirectionalBlurBlock;
+
+    /**
+     * Gets how much smaller we should make the texture between the 2 consecutive bi lateral passes.
+     */
+    public get blurTextureRatioPerPass(): number {
+        return this._blurTextureRatioPerPass;
+    }
+
+    /**
+     * Sets how much smaller we should make the texture between the 2 consecutive bi lateral passes.
+     */
+    @editableInPropertyPage("Pass Texture Ratio", PropertyTypeForEdition.Float, "PROPERTIES", {
+        min: 0,
+        max: 1,
+        notifiers: { rebuild: true },
+    })
+    public set blurTextureRatioPerPass(value: number) {
+        this._blurTextureRatioPerPass = value;
+        this._intermediateBlurV.blurTextureRatio = value;
+        this._intermediateBlurH.blurTextureRatio = value;
+        this._finalBlurV.blurTextureRatio = value * value;
+        this._finalBlurH.blurTextureRatio = value * value;
+    }
+
+    /**
+     * Gets how far the kernel might fetch the data from.
+     */
+    public get blurSize(): number {
+        return this._blurSize;
+    }
+
+    /**
+     * Sets how far the kernel might fetch the data from.
+     */
+    @editableInPropertyPage("Size", PropertyTypeForEdition.Float, "PROPERTIES", {
+        notifiers: { rebuild: true },
+    })
+    public set blurSize(value: number) {
+        this._blurSize = value;
+        this._intermediateBlurV.blurHorizontalWidth = value;
+        this._intermediateBlurH.blurVerticalWidth = value;
+        this._finalBlurV.blurHorizontalWidth = value;
+        this._finalBlurH.blurVerticalWidth = value;
+    }
+
+    /**
+     * 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);
+
+        const internalFilter = new SmartFilter(name + "_BlurBlock_Aggregated");
+        this._intermediateBlurV = new DirectionalBlurBlock(internalFilter, name + "IV");
+        this._intermediateBlurH = new DirectionalBlurBlock(internalFilter, name + "IH");
+        this._finalBlurV = new DirectionalBlurBlock(internalFilter, name + "V");
+        this._finalBlurH = new DirectionalBlurBlock(internalFilter, name + "H");
+
+        this._intermediateBlurV.output.connectTo(this._intermediateBlurH.input);
+        this._intermediateBlurH.output.connectTo(this._finalBlurV.input);
+        this._finalBlurV.output.connectTo(this._finalBlurH.input);
+
+        this.input = this._registerSubfilterInput("input", [this._intermediateBlurV.input]);
+        this.output = this._registerSubfilterOutput("output", this._finalBlurH.output);
+
+        this.blurSize = defaultBlurSize;
+        this.blurTextureRatioPerPass = defaultBlurTextureRatioPerPass;
+        this._intermediateBlurV.blurVerticalWidth = 0;
+        this._intermediateBlurH.blurHorizontalWidth = 0;
+        this._finalBlurV.blurVerticalWidth = 0;
+        this._finalBlurH.blurHorizontalWidth = 0;
+    }
+}

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

@@ -0,0 +1,31 @@
+import type { ISerializedBlockV1, SmartFilter } from "@babylonjs/smart-filters";
+import { CompositionBlock } from "./compositionBlock.js";
+
+/**
+ * The definition of the extra data serialized for composition blocks.
+ */
+export interface ISerializedCompositionBlockV1 extends ISerializedBlockV1 {
+    /**
+     * The extra data of the block.
+     */
+    data: {
+        /**
+         * The alpha mode of the composition.
+         */
+        alphaMode: number;
+    };
+}
+
+/**
+ * V1 Composition Deserializer.
+ * @param smartFilter - The SmartFilter to deserialize the block into
+ * @param serializedBlock - The serialized block data
+ * @returns A deserialized CompositionBlock
+ */
+export function compositionDeserializer(smartFilter: SmartFilter, serializedBlock: ISerializedCompositionBlockV1) {
+    const block = new CompositionBlock(smartFilter, serializedBlock.name);
+
+    // If data is missing, use the default value set by the block
+    block.alphaMode = serializedBlock.data.alphaMode ?? block.alphaMode;
+    return block;
+}

package/src/blocks/babylon/demo/effects/compositionBlock.fragment.glsl

@@ -0,0 +1,38 @@
+uniform sampler2D background; // main
+uniform sampler2D foreground;
+
+uniform vec2 scaleUV;
+uniform vec2 translateUV;
+uniform float alphaMode;
+uniform float foregroundAlphaScale;
+
+vec4 composition(vec2 vUV) { // main
+    vec4 background = texture2D(background, vUV);
+
+    vec2 transformedUV = vUV * (1.0 / scaleUV) + translateUV;
+    if (transformedUV.x < 0.0 || transformedUV.x > 1.0 || transformedUV.y < 0.0 || transformedUV.y > 1.0) {
+        return background;
+    }
+
+    vec4 foreground = texture2D(foreground, transformedUV);
+    foreground.a *= foregroundAlphaScale;
+
+    // SRC is foreground, DEST is background
+    if (alphaMode == 0.) {
+        return foreground;
+    }
+    else if (alphaMode == 1.) {
+        return foreground.a * foreground + background;
+    }
+    else if (alphaMode == 2.) {
+        return mix(background, foreground, foreground.a);
+    }
+    else if (alphaMode == 3.) {
+        return background - foreground * background;
+    }
+    else if (alphaMode == 4.) {
+        return foreground * background;
+    }
+
+    return background;
+}

package/src/blocks/babylon/demo/effects/compositionBlock.fragment.ts

@@ -0,0 +1,71 @@
+import type { ShaderProgram } from "@babylonjs/smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+export const shaderProgram: ShaderProgram = {
+    vertex: undefined,
+    fragment: {
+        uniform: `
+            uniform sampler2D _background_; // main
+            uniform sampler2D _foreground_;
+            uniform vec2 _scaleUV_;
+            uniform vec2 _translateUV_;
+            uniform float _alphaMode_;
+            uniform float _foregroundAlphaScale_;`,
+        mainInputTexture: "_background_",
+        mainFunctionName: "_composition_",
+        functions: [
+            {
+                name: "_composition_",
+                code: `
+                    vec4 _composition_(vec2 vUV) { 
+                        vec4 _background_ = texture2D(_background_, vUV);
+                    
+                        vec2 transformedUV = vUV * (1.0 / _scaleUV_) + _translateUV_;
+                        if (transformedUV.x < 0.0 || transformedUV.x > 1.0 || transformedUV.y < 0.0 || transformedUV.y > 1.0) {
+                            return _background_;
+                        }
+                    
+                        vec4 _foreground_ = texture2D(_foreground_, transformedUV);
+                        _foreground_.a *= _foregroundAlphaScale_;
+                    
+                        // SRC is _foreground_, DEST is _background_
+                        if (_alphaMode_ == 0.) {
+                            return _foreground_;
+                        }
+                        else if (_alphaMode_ == 1.) {
+                            return _foreground_.a * _foreground_ + _background_;
+                        }
+                        else if (_alphaMode_ == 2.) {
+                            return mix(_background_, _foreground_, _foreground_.a);
+                        }
+                        else if (_alphaMode_ == 3.) {
+                            return _background_ - _foreground_ * _background_;
+                        }
+                        else if (_alphaMode_ == 4.) {
+                            return _foreground_ * _background_;
+                        }
+                    
+                        return _background_;
+                    }
+                    
+                    `,
+                params: "vec2 vUV",
+            },
+        ],
+    },
+};
+
+/**
+ * The uniform names for this shader, to be used in the shader binding so
+ * that the names are always in sync.
+ */
+export const uniforms = {
+    background: "background",
+    foreground: "foreground",
+    scaleUV: "scaleUV",
+    translateUV: "translateUV",
+    alphaMode: "alphaMode",
+    foregroundAlphaScale: "foregroundAlphaScale",
+};

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

@@ -0,0 +1,28 @@
+import type { CompositionBlock } from "./compositionBlock";
+import { compositionBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+import type { IBlockSerializerV1, BaseBlock } from "@babylonjs/smart-filters";
+
+/**
+ * The V1 serializer for a Composition Block
+ */
+export const compositionBlockSerializer: IBlockSerializerV1 = {
+    blockType: compositionBlockType,
+    serialize: (block: BaseBlock) => {
+        if (block.getClassName() !== compositionBlockType) {
+            throw new Error("Was asked to serialize an unrecognized block type");
+        }
+
+        const compositionBlock = block as unknown as CompositionBlock;
+        return {
+            name: block.name,
+            uniqueId: block.uniqueId,
+            blockType: compositionBlockType,
+            namespace: babylonDemoEffectsNamespace,
+            comments: block.comments,
+            data: {
+                alphaMode: compositionBlock.alphaMode,
+            },
+        };
+    },
+};

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

@@ -0,0 +1,243 @@
+import type { Effect } from "@babylonjs/core/Materials/effect";
+import {
+    DisableableShaderBinding,
+    type RuntimeData,
+    ConnectionPointType,
+    type IDisableableBlock,
+    DisableableShaderBlock,
+    type SmartFilter,
+    createStrongRef,
+    PropertyTypeForEdition,
+    editableInPropertyPage,
+} from "@babylonjs/smart-filters";
+import { compositionBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+import { uniforms, shaderProgram } from "./compositionBlock.fragment.js";
+
+/** Defines that alpha blending is disabled */
+export const ALPHA_DISABLE = 0;
+/** Defines that alpha blending is SRC ALPHA * SRC + DEST */
+export const ALPHA_ADD = 1;
+/** Defines that alpha blending is SRC ALPHA * SRC + (1 - SRC ALPHA) * DEST */
+export const ALPHA_COMBINE = 2;
+/** Defines that alpha blending is DEST - SRC * DEST */
+export const ALPHA_SUBTRACT = 3;
+/** Defines that alpha blending is SRC * DEST */
+export const ALPHA_MULTIPLY = 4;
+
+/**
+ * The shader bindings for the Composition block.
+ * This demonstrates how multiple input connection point values can be packed into a single
+ * uniform.
+ */
+export class CompositionShaderBinding extends DisableableShaderBinding {
+    private readonly _backgroundTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _foregroundTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _foregroundTop: RuntimeData<ConnectionPointType.Float>;
+    private readonly _foregroundLeft: RuntimeData<ConnectionPointType.Float>;
+    private readonly _foregroundWidth: RuntimeData<ConnectionPointType.Float>;
+    private readonly _foregroundHeight: RuntimeData<ConnectionPointType.Float>;
+    private readonly _foregroundAlphaScale: RuntimeData<ConnectionPointType.Float>;
+    private readonly _alphaMode: number;
+
+    /**
+     * Creates a new shader binding instance for the Composition block.
+     * @param parentBlock - The parent block
+     * @param backgroundTexture - the background texture
+     * @param foregroundTexture - the foreground texture
+     * @param foregroundTop - the top position of the foreground texture
+     * @param foregroundLeft - the left position of the foreground texture
+     * @param foregroundWidth - the width of the foreground texture
+     * @param foregroundHeight - the height of the foreground texture
+     * @param foregroundAlphaScale - the alpha scale of the foreground texture
+     * @param alphaMode - the alpha mode to use
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        backgroundTexture: RuntimeData<ConnectionPointType.Texture>,
+        foregroundTexture: RuntimeData<ConnectionPointType.Texture>,
+        foregroundTop: RuntimeData<ConnectionPointType.Float>,
+        foregroundLeft: RuntimeData<ConnectionPointType.Float>,
+        foregroundWidth: RuntimeData<ConnectionPointType.Float>,
+        foregroundHeight: RuntimeData<ConnectionPointType.Float>,
+        foregroundAlphaScale: RuntimeData<ConnectionPointType.Float>,
+        alphaMode: number
+    ) {
+        super(parentBlock);
+        this._backgroundTexture = backgroundTexture;
+        this._foregroundTexture = foregroundTexture;
+        this._foregroundTop = foregroundTop;
+        this._foregroundLeft = foregroundLeft;
+        this._foregroundWidth = foregroundWidth;
+        this._foregroundHeight = foregroundHeight;
+        this._foregroundAlphaScale = foregroundAlphaScale;
+        this._alphaMode = alphaMode;
+    }
+
+    /**
+     * 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 override bind(effect: Effect, width: number, height: number): void {
+        super.bind(effect, width, height);
+
+        const background = this._backgroundTexture.value;
+        const foreground = this._foregroundTexture.value;
+        const foregroundTop = this._foregroundTop.value;
+        const foregroundLeft = this._foregroundLeft.value;
+        const foregroundWidth = this._foregroundWidth.value;
+        const foregroundHeight = this._foregroundHeight.value;
+        const foregroundAlphaScale = this._foregroundAlphaScale.value;
+        const alphaMode = this._alphaMode;
+
+        effect.setFloat(this.getRemappedName(uniforms.alphaMode), alphaMode);
+        effect.setTexture(this.getRemappedName(uniforms.background), background);
+        effect.setTexture(this.getRemappedName(uniforms.foreground), foreground);
+
+        // NOTE: textures may always be undefined if connected to another shader block when the graph is optimized
+
+        effect.setFloat2(this.getRemappedName(uniforms.scaleUV), foregroundWidth, foregroundHeight);
+        effect.setFloat2(this.getRemappedName(uniforms.translateUV), -1 * foregroundLeft, foregroundTop);
+        effect.setFloat(this.getRemappedName(uniforms.foregroundAlphaScale), foregroundAlphaScale);
+    }
+}
+
+/**
+ * A simple compositing Block letting the filter "blend" 2 different layers.
+ * It demonstrates how a block can use properties for values which will not change at runtime (alphaMode)
+ *
+ * The alpha mode of the block can be set to one of the following:
+ * - ALPHA_DISABLE: alpha blending is disabled
+ * - ALPHA_ADD: alpha blending is SRC ALPHA * SRC + DEST
+ * - ALPHA_COMBINE: alpha blending is SRC ALPHA * SRC + (1 - SRC ALPHA) * DEST
+ * - ALPHA_SUBTRACT: alpha blending is DEST - SRC * DEST
+ * - ALPHA_MULTIPLY: alpha blending is SRC * DEST
+ */
+export class CompositionBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = compositionBlockType;
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = babylonDemoEffectsNamespace;
+
+    /**
+     * The background texture to composite on to.
+     */
+    public readonly background = this._registerInput(uniforms.background, ConnectionPointType.Texture);
+
+    /**
+     * The foreground texture to composite in.
+     */
+    public readonly foreground = this._registerOptionalInput(
+        uniforms.foreground,
+        ConnectionPointType.Texture,
+        createStrongRef(null)
+    );
+
+    /**
+     * Defines where the top of the texture to composite in should be displayed. (between 0 and 1).
+     */
+    public readonly foregroundTop = this._registerOptionalInput(
+        "foregroundTop",
+        ConnectionPointType.Float,
+        createStrongRef(0.0)
+    );
+
+    /**
+     * Defines where the left of the texture to composite in should be displayed. (between 0 and 1).
+     */
+    public readonly foregroundLeft = this._registerOptionalInput(
+        "foregroundLeft",
+        ConnectionPointType.Float,
+        createStrongRef(0.0)
+    );
+
+    /**
+     * Defines the width of the texture in the composition.
+     */
+    public readonly foregroundWidth = this._registerOptionalInput(
+        "foregroundWidth",
+        ConnectionPointType.Float,
+        createStrongRef(1.0)
+    );
+
+    /**
+     * Defines the height of the texture in the composition.
+     */
+    public readonly foregroundHeight = this._registerOptionalInput(
+        "foregroundHeight",
+        ConnectionPointType.Float,
+        createStrongRef(1.0)
+    );
+
+    /**
+     * Defines a multiplier applied to the foreground's alpha channel.
+     */
+    public readonly foregroundAlphaScale = this._registerOptionalInput(
+        uniforms.foregroundAlphaScale,
+        ConnectionPointType.Float,
+        createStrongRef(1.0)
+    );
+
+    /**
+     * Defines blend mode of the composition.
+     */
+    @editableInPropertyPage("Alpha Mode", PropertyTypeForEdition.List, "PROPERTIES", {
+        notifiers: { rebuild: true },
+        options: [
+            { label: "Disable", value: ALPHA_DISABLE },
+            { label: "Add", value: ALPHA_ADD },
+            { label: "Combine", value: ALPHA_COMBINE },
+            { label: "Subtract", value: ALPHA_SUBTRACT },
+            { label: "Multiply", value: ALPHA_MULTIPLY },
+        ],
+    })
+    public alphaMode: number = ALPHA_COMBINE;
+
+    /**
+     * 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);
+    }
+
+    /**
+     * 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 background = this._confirmRuntimeDataSupplied(this.background);
+        const foreground = this._confirmRuntimeDataSupplied(this.foreground);
+        const foregroundWidth = this.foregroundWidth.runtimeData;
+        const foregroundLeft = this.foregroundLeft.runtimeData;
+        const foregroundHeight = this.foregroundHeight.runtimeData;
+        const foregroundTop = this.foregroundTop.runtimeData;
+        const foregroundAlphaScale = this.foregroundAlphaScale.runtimeData;
+        const alphaMode = this.alphaMode;
+
+        return new CompositionShaderBinding(
+            this,
+            background,
+            foreground,
+            foregroundTop,
+            foregroundLeft,
+            foregroundWidth,
+            foregroundHeight,
+            foregroundAlphaScale,
+            alphaMode
+        );
+    }
+}

package/src/blocks/babylon/demo/effects/contrastBlock.block.glsl

@@ -0,0 +1,36 @@
+/*  
+{ 
+    "smartFilterBlockType": "ContrastBlock", 
+    "namespace": "Babylon.Demo.Effects", 
+    "blockDisableStrategy": "AutoSample"
+}
+*/
+
+uniform sampler2D input; // main
+// { "default": 0.5 }
+uniform float intensity;
+
+vec4 contrast(vec2 vUV) { // main
+    vec4 color = texture2D(input, vUV);
+
+    float contrastLMin = mix(-2., 0., intensity * 2.0);
+    float contrastLMax = mix(3., 1., intensity * 2.0);
+
+    vec3 contrastMin = remap(color.rgb, contrastLMin, contrastLMax, 0., 1.);
+
+    float intensityMapped = remap(intensity, 0.5, 1., 0., 1.0);
+    float contrastHMin = mix(0., 0.45, intensityMapped);
+    float contrastHMax = mix(1., 0.5, intensityMapped);
+
+    vec3 contrastMax = remap(color.rgb, contrastHMin, contrastHMax, 0., 1.);
+
+    return vec4(mix(contrastMin, contrastMax, step(intensity, 0.5)), color.a);
+}
+
+float remap(float i, float smin, float smax, float dmin, float dmax) {
+    return dmin + (i - smin) * (dmax - dmin) / (smax - smin);
+}
+
+vec3 remap(vec3 i, float smin, float smax, float dmin, float dmax) {
+    return dmin + (i - smin) * (dmax - dmin) / (smax - smin);
+}