@onerjs/smart-filters-blocks 8.25.0

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

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

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

@@ -0,0 +1,142 @@
+/* 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 "core/Materials/effect.js";
+
+import {
+    DisableableShaderBinding,
+    type RuntimeData,
+    ConnectionPointType,
+    type SmartFilter,
+    DisableableShaderBlock,
+    type ShaderProgram,
+    type IDisableableBlock,
+    BlockDisableStrategy} from "smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+const BlockShaderProgram: ShaderProgram = {
+    vertex: undefined,
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_; // main
+            uniform float _amount_;`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_exposure_",
+        functions: [
+            {
+                name: "_exposure_",
+                code: `
+                    vec4 _exposure_(vec2 vUV) { 
+                        vec4 color = texture2D(_input_, vUV);
+                        return vec4(color.rgb * _amount_, 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",
+    amount: "amount",
+};
+
+
+/**
+ * The shader binding for the ExposureBlock, used by the runtime
+ */
+class ExposureBlockShaderBinding extends DisableableShaderBinding {
+    private readonly _input: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _amount: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the block.
+     * @param parentBlock - IDisableableBlock
+     * @param input - The input runtime value
+     * @param amount - The amount runtime value
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        input: RuntimeData<ConnectionPointType.Texture>,
+        amount: RuntimeData<ConnectionPointType.Float>
+    ) {
+        super(parentBlock);
+        this._input = input;
+        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(Uniforms.input), this._input.value);
+        effect.setFloat(this.getRemappedName(Uniforms.amount), this._amount.value);
+    }
+}
+
+/**
+ * The implementation of the ExposureBlock
+ */
+export class ExposureBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "ExposureBlock";
+
+    /**
+     * 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 amount connection point.
+     */
+    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 = BlockShaderProgram;
+
+    /**
+     * Instantiates a new ExposureBlock.
+     * @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 amount = this._confirmRuntimeDataSupplied(this.amount);
+
+        return new ExposureBlockShaderBinding(this,input,amount);
+    }
+}
+

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

@@ -0,0 +1,23 @@
+/*  
+{ 
+    "smartFilterBlockType": "GreenScreenBlock", 
+    "namespace": "Babylon.Demo.Effects", 
+    "blockDisableStrategy": "AutoSample"
+}
+*/
+
+uniform sampler2D input; // main
+uniform sampler2D background;
+uniform vec3 reference;
+uniform float distance;
+
+vec4 greenScreen(vec2 vUV) { // main
+    vec4 color = texture2D(input, vUV);
+    vec4 background = texture2D(background, vUV);
+
+    if (length(color.rgb - reference) < distance) {
+        return background;
+    }
+
+    return color;
+}

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

@@ -0,0 +1,174 @@
+/* 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 "core/Materials/effect.js";
+
+import {
+    DisableableShaderBinding,
+    type RuntimeData,
+    ConnectionPointType,
+    type SmartFilter,
+    DisableableShaderBlock,
+    type ShaderProgram,
+    type IDisableableBlock,
+    BlockDisableStrategy} from "smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+const BlockShaderProgram: ShaderProgram = {
+    vertex: undefined,
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_; // main
+            uniform sampler2D _background_;
+            uniform vec3 _reference_;
+            uniform float _distance_;`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_greenScreen_",
+        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;
+                    }
+                    `,
+                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",
+    background: "background",
+    reference: "reference",
+    distance: "distance",
+};
+
+
+/**
+ * The shader binding for the GreenScreenBlock, used by the runtime
+ */
+class GreenScreenBlockShaderBinding extends DisableableShaderBinding {
+    private readonly _input: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _background: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _reference: RuntimeData<ConnectionPointType.Color3>;
+    private readonly _distance: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the block.
+     * @param parentBlock - IDisableableBlock
+     * @param input - The input runtime value
+     * @param background - The background runtime value
+     * @param reference - The reference runtime value
+     * @param distance - The distance runtime value
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        input: RuntimeData<ConnectionPointType.Texture>,
+        background: RuntimeData<ConnectionPointType.Texture>,
+        reference: RuntimeData<ConnectionPointType.Color3>,
+        distance: RuntimeData<ConnectionPointType.Float>
+    ) {
+        super(parentBlock);
+        this._input = input;
+        this._background = background;
+        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(Uniforms.input), this._input.value);
+        effect.setTexture(this.getRemappedName(Uniforms.background), this._background.value);
+        effect.setColor3(this.getRemappedName(Uniforms.reference), this._reference.value);
+        effect.setFloat(this.getRemappedName(Uniforms.distance), this._distance.value);
+    }
+}
+
+/**
+ * The implementation of the GreenScreenBlock
+ */
+export class GreenScreenBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "GreenScreenBlock";
+
+    /**
+     * 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 background connection point.
+     */
+    public readonly background = this._registerInput(Uniforms.background, ConnectionPointType.Texture);
+
+    /**
+     * The reference connection point.
+     */
+    public readonly reference = this._registerInput(Uniforms.reference, ConnectionPointType.Color3);
+
+    /**
+     * The distance connection point.
+     */
+    public readonly distance = this._registerInput(Uniforms.distance, ConnectionPointType.Float);
+
+    /**
+     * The shader program (vertex and fragment code) to use to render the block
+     */
+    public static override ShaderCode = BlockShaderProgram;
+
+    /**
+     * Instantiates a new GreenScreenBlock.
+     * @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 background = this._confirmRuntimeDataSupplied(this.background);
+        const reference = this._confirmRuntimeDataSupplied(this.reference);
+        const distance = this._confirmRuntimeDataSupplied(this.distance);
+
+        return new GreenScreenBlockShaderBinding(this,input,background,reference,distance);
+    }
+}
+

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

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