@babylonjs/smart-filters-blocks 0.8.1

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

@@ -0,0 +1,180 @@
+/* eslint-disable prettier/prettier */
+// ************************************************************
+// Note: this file is auto-generated, do not modify it directly
+// ************************************************************
+
+// It was generated by convertGlslIntoBlock() from
+// an annotated .glsl file. Modify the .glsl file to make changes
+// 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 {
+    DisableableShaderBinding,
+    type RuntimeData,
+    ConnectionPointType,
+    type SmartFilter,
+    DisableableShaderBlock,
+    type ShaderProgram,
+    createStrongRef,
+    type IDisableableBlock,
+    BlockDisableStrategy} from "@babylonjs/smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+const shaderProgram: ShaderProgram = {
+    vertex: undefined,
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_; // main
+            uniform float _intensity_;`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_contrast_",
+        functions: [
+            {
+                name: "_contrast_",
+                code: `
+                    vec4 _contrast_(vec2 vUV) { 
+                        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);
+                    }
+                    
+                    `,
+                params: "vec2 vUV",
+            },
+            {
+                name: "_remap_",
+                code: `
+                    float _remap_(float i, float smin, float smax, float dmin, float dmax) {
+                        return dmin + (i - smin) * (dmax - dmin) / (smax - smin);
+                    }
+                    
+                    `,
+                params: "float i, float smin, float smax, float dmin, float dmax",
+            },
+            {
+                name: "_remap_",
+                code: `
+                    vec3 _remap_(vec3 i, float smin, float smax, float dmin, float dmax) {
+                        return dmin + (i - smin) * (dmax - dmin) / (smax - smin);
+                    }
+                    
+                    `,
+                params: "vec3 i, float smin, float smax, float dmin, float dmax",
+            },
+        ],
+    },
+};
+
+/**
+ * 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",
+    intensity: "intensity",
+};
+
+/**
+ * The shader binding for the ContrastBlock, used by the runtime
+ */
+class ContrastBlockShaderBinding extends DisableableShaderBinding {
+    private readonly _input: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _intensity: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the block.
+     * @param parentBlock - IDisableableBlock
+     * @param input - The input runtime value
+     * @param intensity - The intensity runtime value
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        input: RuntimeData<ConnectionPointType.Texture>,
+        intensity: RuntimeData<ConnectionPointType.Float>
+    ) {
+        super(parentBlock);
+        this._input = input;
+        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(uniforms.input), this._input.value);
+        effect.setFloat(this.getRemappedName(uniforms.intensity), this._intensity.value);
+    }
+}
+
+/**
+ * The implementation of the ContrastBlock
+ */
+export class ContrastBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "ContrastBlock";
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = "Babylon.Demo.Effects";
+
+    /**
+     * The input connection point.
+     */
+    public readonly input = this._registerInput(uniforms.input, ConnectionPointType.Texture);
+
+    /**
+    /**
+     * The intensity connection point.
+     */
+    public readonly intensity = this._registerOptionalInput(
+        "intensity",
+        ConnectionPointType.Float,
+        createStrongRef(0.5)
+    );
+
+    /**
+     * The shader program (vertex and fragment code) to use to render the block
+     */
+    public static override ShaderCode = shaderProgram;
+
+    /**
+     * Instantiates a new ContrastBlock.
+     * @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, false, BlockDisableStrategy.AutoSample);
+    }
+
+    /**
+     * 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._confirmRuntimeDataSupplied(this.intensity);
+
+        return new ContrastBlockShaderBinding(this,input,intensity);
+    }
+}
+

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

@@ -0,0 +1,24 @@
+/*  
+{ 
+    "smartFilterBlockType": "DesaturateBlock", 
+    "namespace": "Babylon.Demo.Effects", 
+    "blockDisableStrategy": "AutoSample"
+}
+*/
+
+uniform sampler2D input; // main
+// { "default": 0.3 }
+uniform float intensity;
+
+vec4 desaturate(vec2 vUV) { // main
+    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);
+}
+            

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

@@ -0,0 +1,155 @@
+/* eslint-disable prettier/prettier */
+// ************************************************************
+// Note: this file is auto-generated, do not modify it directly
+// ************************************************************
+
+// It was generated by convertGlslIntoBlock() from
+// an annotated .glsl file. Modify the .glsl file to make changes
+// 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 {
+    DisableableShaderBinding,
+    type RuntimeData,
+    ConnectionPointType,
+    type SmartFilter,
+    DisableableShaderBlock,
+    type ShaderProgram,
+    createStrongRef,
+    type IDisableableBlock,
+    BlockDisableStrategy} from "@babylonjs/smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+const shaderProgram: ShaderProgram = {
+    vertex: undefined,
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_; // main
+            uniform float _intensity_;`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_desaturate_",
+        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);
+                    }
+                    
+                    `,
+                params: "vec2 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",
+    intensity: "intensity",
+};
+
+/**
+ * The shader binding for the DesaturateBlock, used by the runtime
+ */
+class DesaturateBlockShaderBinding extends DisableableShaderBinding {
+    private readonly _input: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _intensity: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the block.
+     * @param parentBlock - IDisableableBlock
+     * @param input - The input runtime value
+     * @param intensity - The intensity runtime value
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        input: RuntimeData<ConnectionPointType.Texture>,
+        intensity: RuntimeData<ConnectionPointType.Float>
+    ) {
+        super(parentBlock);
+        this._input = input;
+        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(uniforms.input), this._input.value);
+        effect.setFloat(this.getRemappedName(uniforms.intensity), this._intensity.value);
+    }
+}
+
+/**
+ * The implementation of the DesaturateBlock
+ */
+export class DesaturateBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "DesaturateBlock";
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = "Babylon.Demo.Effects";
+
+    /**
+     * The input connection point.
+     */
+    public readonly input = this._registerInput(uniforms.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 DesaturateBlock.
+     * @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, false, BlockDisableStrategy.AutoSample);
+    }
+
+    /**
+     * 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._confirmRuntimeDataSupplied(this.intensity);
+
+        return new DesaturateBlockShaderBinding(this,input,intensity);
+    }
+}
+

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

@@ -0,0 +1,46 @@
+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;
+}

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

@@ -0,0 +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,
+            },
+        };
+    },
+};

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

@@ -0,0 +1,196 @@
+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);
+    }
+}

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

@@ -0,0 +1,15 @@
+/*  
+{ 
+    "smartFilterBlockType": "ExposureBlock", 
+    "namespace": "Babylon.Demo.Effects", 
+    "blockDisableStrategy": "AutoSample"
+}
+*/
+
+uniform sampler2D input; // main
+uniform float amount;
+
+vec4 exposure(vec2 vUV) { // main
+    vec4 color = texture2D(input, vUV);
+    return vec4(color.rgb * amount, color.a);
+}