@babylonjs/smart-filters-blocks 0.8.1

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

@@ -0,0 +1,145 @@
+/* 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,
+    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 sampler2D _mask_;`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_maskBlock_",
+        functions: [
+            {
+                name: "_maskBlock_",
+                code: `
+                    vec4 _maskBlock_(vec2 vUV) { 
+                        vec4 color = texture2D(_input_, vUV);
+                        vec3 maskColor = texture2D(_mask_, vUV).rgb;
+                        float luminance = dot(maskColor, vec3(0.3, 0.59, 0.11));
+                    
+                        return vec4(color.rgb * luminance, luminance * 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",
+    mask: "mask",
+};
+
+/**
+ * The shader binding for the MaskBlock, used by the runtime
+ */
+class MaskBlockShaderBinding extends DisableableShaderBinding {
+    private readonly _input: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _mask: RuntimeData<ConnectionPointType.Texture>;
+
+    /**
+     * Creates a new shader binding instance for the block.
+     * @param parentBlock - IDisableableBlock
+     * @param input - The input runtime value
+     * @param mask - The mask runtime value
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        input: RuntimeData<ConnectionPointType.Texture>,
+        mask: RuntimeData<ConnectionPointType.Texture>
+    ) {
+        super(parentBlock);
+        this._input = input;
+        this._mask = mask;
+    }
+
+    /**
+     * 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.mask), this._mask.value);
+    }
+}
+
+/**
+ * The implementation of the MaskBlock
+ */
+export class MaskBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "MaskBlock";
+
+    /**
+     * 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 mask connection point.
+     */
+    public readonly mask = this._registerInput(uniforms.mask, ConnectionPointType.Texture);
+
+    /**
+     * The shader program (vertex and fragment code) to use to render the block
+     */
+    public static override ShaderCode = shaderProgram;
+
+    /**
+     * Instantiates a new MaskBlock.
+     * @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 mask = this._confirmRuntimeDataSupplied(this.mask);
+
+        return new MaskBlockShaderBinding(this,input,mask);
+    }
+}
+

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

@@ -0,0 +1,28 @@
+/*  
+{ 
+    "smartFilterBlockType": "PixelateBlock", 
+    "namespace": "Babylon.Demo.Effects", 
+    "blockDisableStrategy": "Manual"
+}
+*/
+
+uniform sampler2D input; // main
+// { "default": "0.3" }
+uniform float intensity;
+// { "default": false }
+uniform bool disabled;
+
+const float videoPixelatePower = 6.0;
+const float videoPixelateMin = 10.0;
+const float videoPixelateMax = 1920.0;
+            
+const float aspect = 1.72;
+
+vec4 pixelate(vec2 vUV) { // main
+    if (!disabled) {
+        float pixelateStrength = mix(videoPixelateMin, videoPixelateMax, pow(1. - intensity, videoPixelatePower));
+        vec2 pixelate = vec2(pixelateStrength * aspect, pixelateStrength);
+        vUV = floor(pixelate * vUV) / pixelate;
+    }
+    return texture2D(input, vUV);
+}

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

@@ -0,0 +1,169 @@
+/* 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 {
+    ShaderBinding,
+    type RuntimeData,
+    ConnectionPointType,
+    type SmartFilter,
+    ShaderBlock,
+    type ShaderProgram,
+    createStrongRef} from "@babylonjs/smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+const shaderProgram: ShaderProgram = {
+    vertex: undefined,
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_; // main
+            uniform float _intensity_;
+            uniform bool _disabled_;`,
+        const: `            const float _videoPixelatePower_ = 6.0;
+            const float _videoPixelateMin_ = 10.0;
+            const float _videoPixelateMax_ = 1920.0;
+            const float _aspect_ = 1.72;`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_pixelate_",
+        functions: [
+            {
+                name: "_pixelate_",
+                code: `
+                    vec4 _pixelate_(vec2 vUV) { 
+                        if (!_disabled_) {
+                            float pixelateStrength = mix(_videoPixelateMin_, _videoPixelateMax_, pow(1. - _intensity_, _videoPixelatePower_));
+                            vec2 _pixelate_ = vec2(pixelateStrength * _aspect_, pixelateStrength);
+                            vUV = floor(_pixelate_ * vUV) / _pixelate_;
+                        }
+                        return texture2D(_input_, vUV);
+                    }
+                    
+                    `,
+                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",
+    disabled: "disabled",
+};
+
+/**
+ * The shader binding for the PixelateBlock, used by the runtime
+ */
+class PixelateBlockShaderBinding extends ShaderBinding {
+    private readonly _input: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _intensity: RuntimeData<ConnectionPointType.Float>;
+    private readonly _disabled: RuntimeData<ConnectionPointType.Boolean>;
+
+    /**
+     * Creates a new shader binding instance for the block.
+     * @param input - The input runtime value
+     * @param intensity - The intensity runtime value
+     * @param disabled - The disabled runtime value
+     */
+    constructor(
+        input: RuntimeData<ConnectionPointType.Texture>,
+        intensity: RuntimeData<ConnectionPointType.Float>,
+        disabled: RuntimeData<ConnectionPointType.Boolean>
+    ) {
+        super();
+        this._input = input;
+        this._intensity = intensity;
+        this._disabled = disabled;
+    }
+
+    /**
+     * 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 {
+        effect.setTexture(this.getRemappedName(uniforms.input), this._input.value);
+        effect.setFloat(this.getRemappedName(uniforms.intensity), this._intensity.value);
+        effect.setBool(this.getRemappedName(uniforms.disabled), this._disabled.value);
+    }
+}
+
+/**
+ * The implementation of the PixelateBlock
+ */
+export class PixelateBlock extends ShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "PixelateBlock";
+
+    /**
+     * 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 disabled connection point.
+     */
+    public readonly disabled = this._registerOptionalInput(
+        "disabled",
+        ConnectionPointType.Boolean,
+        createStrongRef(false)
+    );
+
+    /**
+     * The shader program (vertex and fragment code) to use to render the block
+     */
+    public static override ShaderCode = shaderProgram;
+
+    /**
+     * Instantiates a new PixelateBlock.
+     * @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);
+    }
+
+    /**
+     * 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);
+        const intensity = this._confirmRuntimeDataSupplied(this.intensity);
+        const disabled = this._confirmRuntimeDataSupplied(this.disabled);
+
+        return new PixelateBlockShaderBinding(input,intensity,disabled);
+    }
+}
+

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

@@ -0,0 +1,25 @@
+/*  
+{ 
+    "smartFilterBlockType": "PosterizeBlock", 
+    "namespace": "Babylon.Demo.Effects", 
+    "blockDisableStrategy": "AutoSample"
+}
+*/
+
+uniform sampler2D input; // main
+// { "default": 0.3 }
+uniform float intensity;
+
+const float posterizePower = 6.0;
+const float minLevel = 2.0;
+const float maxLevel = 256.0;
+
+vec4 posterize(vec2 vUV) { // main
+    vec4 color = texture2D(input, vUV);
+
+    float posterizeStrength = mix(minLevel, maxLevel, pow(1. - intensity, posterizePower));
+    vec3 posterize = vec3(posterizeStrength);
+    color.rgb = floor(color.rgb / (1.0 / posterize)) * (1.0 / posterize);
+
+    return color;
+}

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

@@ -0,0 +1,156 @@
+/* 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_;`,
+        const: `            const float _posterizePower_ = 6.0;
+            const float _minLevel_ = 2.0;
+            const float _maxLevel_ = 256.0;`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_posterize_",
+        functions: [
+            {
+                name: "_posterize_",
+                code: `
+                    vec4 _posterize_(vec2 vUV) { 
+                        vec4 color = texture2D(_input_, vUV);
+                    
+                        float posterizeStrength = mix(_minLevel_, _maxLevel_, pow(1. - _intensity_, _posterizePower_));
+                        vec3 _posterize_ = vec3(posterizeStrength);
+                        color.rgb = floor(color.rgb / (1.0 / _posterize_)) * (1.0 / _posterize_);
+                    
+                        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",
+    intensity: "intensity",
+};
+
+/**
+ * The shader binding for the PosterizeBlock, used by the runtime
+ */
+class PosterizeBlockShaderBinding 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 PosterizeBlock
+ */
+export class PosterizeBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "PosterizeBlock";
+
+    /**
+     * 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 PosterizeBlock.
+     * @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 PosterizeBlockShaderBinding(this,input,intensity);
+    }
+}
+

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

@@ -0,0 +1,26 @@
+uniform sampler2D input; // main
+uniform float time;
+uniform float rows;
+uniform float cols;
+uniform float frames;
+uniform bool disabled;
+
+vec4 mainImage(vec2 vUV) { // main
+    if (!disabled) {
+        float invRows = 1.0 / rows;
+        float invCols = 1.0 / cols;
+
+        // Get offset of frame 
+        float frame = mod(floor(time), frames);
+        float row = (rows - 1.0) - floor(frame * invCols); // Reverse row direction b/c UVs start from bottom
+        float col = mod(frame, cols);
+
+        // Add offset, then scale UV down to frame size
+        vUV = vec2(
+            (vUV.x + col) * invCols,
+            (vUV.y + row) * invRows
+        );
+    }
+
+    return texture2D(input, vUV);
+}

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

@@ -0,0 +1,60 @@
+import type { ShaderProgram } from "@babylonjs/smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+export const shaderProgram: ShaderProgram = {
+    vertex: undefined,
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_; // main
+            uniform float _time_;
+            uniform float _rows_;
+            uniform float _cols_;
+            uniform float _frames_;
+            uniform bool _disabled_;`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_mainImage_",
+        functions: [
+            {
+                name: "_mainImage_",
+                code: `
+                    vec4 _mainImage_(vec2 vUV) { 
+                        if (!_disabled_) {
+                            float invRows = 1.0 / _rows_;
+                            float invCols = 1.0 / _cols_;
+                    
+                            // Get offset of frame 
+                            float frame = mod(floor(_time_), _frames_);
+                            float row = (_rows_ - 1.0) - floor(frame * invCols); // Reverse row direction b/c UVs start from bottom
+                            float col = mod(frame, _cols_);
+                    
+                            // Add offset, then scale UV down to frame size
+                            vUV = vec2(
+                                (vUV.x + col) * invCols,
+                                (vUV.y + row) * invRows
+                            );
+                        }
+                    
+                        return texture2D(_input_, vUV);
+                    }
+                    
+                    `,
+                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 = {
+    input: "input",
+    time: "time",
+    rows: "rows",
+    cols: "cols",
+    frames: "frames",
+    disabled: "disabled",
+};