@babylonjs/smart-filters 0.7.8-alpha → 0.7.10-alpha

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

@@ -0,0 +1,186 @@
+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 { DisableStrategy } from "../../../../blockFoundation/index.js";
+import { DisableableShaderBinding } from "../../../../runtime/shaderRuntime.js";
+import type { ShaderProgram } from "../../../../utils/shaderCodeUtils.js";
+import type { SmartFilter } from "../../../../smartFilter.js";
+
+import { kaleidoscopeBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+
+const shaderProgram: ShaderProgram = {
+    vertex: `
+        // Attributes
+        attribute vec2 position;
+        
+        // Output
+        varying vec2 vUV;
+        
+        void main(void) {
+            vUV = position;
+            gl_Position = vec4(position, 0.0, 1.0);
+        }
+    `,
+
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_;
+            uniform float _time_;
+            uniform bool _disabled_;
+            `,
+
+        const: `
+            const float _width_ = 200.;
+            const float _height_ = 300.;
+            const vec2 _imageRatio_ =  vec2(700. / _width_, 1024. / _height_);
+            const vec2 _imageRelativeSize_ = 1. / _imageRatio_;
+            const float _halfDiag_ = sqrt(_imageRelativeSize_.x * _imageRelativeSize_.x + _imageRelativeSize_.y * _imageRelativeSize_.y) * 0.5;
+            
+            const float _radius_ = 0.9;
+            const float _radius2_ = 0.4;
+            
+            const float _segments_ = 6.;
+            const float _segmentArc_ = (2. * 3.1415926535897932384626433832795 / _segments_);
+            `,
+
+        mainFunctionName: "_kaleidoscope_",
+
+        mainInputTexture: "_input_",
+
+        functions: [
+            {
+                name: "_kaleidoscope_",
+                code: `
+                vec4 _kaleidoscope_(vec2 vUV) {
+                    if (_disabled_) return texture2D(_input_, vUV);
+                    
+                    float distanceToCircle = abs(length(vUV) - _radius_);
+                    vec4 result = vec4(0., 0., 0., 0.);
+                
+                    if (distanceToCircle < _halfDiag_ * 10000.) {
+                        float pointTheta = atan(vUV.y, vUV.x);
+                        pointTheta += _time_;
+                        for (float i = -1.; i < 2.; i += 1.) {
+                            float chunk = floor(pointTheta / _segmentArc_) + i;
+                            float chunkStart = -_time_ + chunk * _segmentArc_ + _segmentArc_ * 0.5;
+                            vec2 chunkStartCenter = vec2(cos(chunkStart), sin(chunkStart)) * _radius_;
+                            vec2 chunkStartPoint = vUV - chunkStartCenter;
+                            chunkStartPoint *= _imageRatio_;
+                            chunkStartPoint *= vec2(0.5, 0.5);
+                            chunkStartPoint += vec2(0.5, 0.5);
+                
+                            if (chunkStartPoint.x > 0. && chunkStartPoint.x < 1. && chunkStartPoint.y > 0. && chunkStartPoint.y < 1.) {
+                                result = texture2D(_input_, chunkStartPoint);
+                            }
+                        }
+                
+                        for (float i = -1.; i < 2.; i += 1.) {
+                            float chunk = floor(pointTheta / _segmentArc_) + i;
+                            float chunkStart = -_time_ + chunk * _segmentArc_ + _segmentArc_ * 0.5;
+                            vec2 chunkStartCenter = vec2(cos(chunkStart), sin(chunkStart)) * _radius2_;
+                            vec2 chunkStartPoint = vUV - chunkStartCenter;
+                            chunkStartPoint *= _imageRatio_;
+                            chunkStartPoint *= vec2(0.5, 0.5);
+                            chunkStartPoint += vec2(0.5, 0.5);
+                
+                            if (chunkStartPoint.x > 0. && chunkStartPoint.x < 1. && chunkStartPoint.y > 0. && chunkStartPoint.y < 1.) {
+                                vec4 top = texture2D(_input_, chunkStartPoint);
+                                result = mix(result, top, (result.a <= 0.) ? 1. : top.a);
+                            }
+                        }
+                    }
+                
+                    return result;
+                }
+            `,
+            },
+        ],
+    },
+};
+
+/**
+ * The shader bindings for the Kaleidoscope block.
+ */
+export class KaleidoscopeShaderBinding extends DisableableShaderBinding {
+    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _time: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the Kaleidoscope block.
+     * @param parentBlock - The parent block
+     * @param inputTexture - the input texture
+     * @param time - the time
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        inputTexture: RuntimeData<ConnectionPointType.Texture>,
+        time: RuntimeData<ConnectionPointType.Float>
+    ) {
+        super(parentBlock);
+        this._inputTexture = inputTexture;
+        this._time = time;
+    }
+
+    /**
+     * 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("time"), this._time.value);
+    }
+}
+
+/**
+ * A block performing a Kaleidoscope looking like effect.
+ */
+export class KaleidoscopeBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = kaleidoscopeBlockType;
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = babylonDemoEffectsNamespace;
+
+    /**
+     * The input texture connection point.
+     */
+    public readonly input = this._registerInput("input", ConnectionPointType.Texture);
+
+    /**
+     * The time connection point.
+     */
+    public readonly time = this._registerInput("time", 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, false, DisableStrategy.Manual);
+    }
+
+    /**
+     * 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 time = this._confirmRuntimeDataSupplied(this.time);
+
+        return new KaleidoscopeShaderBinding(this, input, time);
+    }
+}

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

@@ -0,0 +1,10 @@
+uniform sampler2D input; // main
+uniform sampler2D mask;
+
+vec4 maskBlock(vec2 vUV) { // main
+    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);
+}

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

@@ -0,0 +1,39 @@
+import type { ShaderProgram } from "../../../../utils/shaderCodeUtils";
+
+/**
+ * The shader program for the block.
+ */
+export 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);
+                    }
+                    
+                    `,
+            },
+        ],
+    },
+};
+
+/**
+ * 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",
+    mask: "mask",
+};

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

@@ -0,0 +1,94 @@
+import type { Effect } from "@babylonjs/core/Materials/effect";
+
+import { maskBlockType } from "../../../blockTypes.js";
+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 { SmartFilter } from "../../../../smartFilter.js";
+
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+import { uniforms, shaderProgram } from "./maskBlock.shader.js";
+
+/**
+ * The shader bindings for the Mask block.
+ */
+export class MaskShaderBinding extends DisableableShaderBinding {
+    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _maskTexture: RuntimeData<ConnectionPointType.Texture>;
+
+    /**
+     * Creates a new shader binding instance for the Mask block.
+     * @param parentBlock - The parent block
+     * @param inputTexture - the input texture
+     * @param maskTexture - the mask texture
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        inputTexture: RuntimeData<ConnectionPointType.Texture>,
+        maskTexture: RuntimeData<ConnectionPointType.Texture>
+    ) {
+        super(parentBlock);
+        this._inputTexture = inputTexture;
+        this._maskTexture = maskTexture;
+    }
+
+    /**
+     * 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._inputTexture.value);
+        effect.setTexture(this.getRemappedName(uniforms.mask), this._maskTexture.value);
+    }
+}
+
+/**
+ * A simple block to apply a mask from one texture to the color of another texture
+ */
+export class MaskBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = maskBlockType;
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = babylonDemoEffectsNamespace;
+
+    /**
+     * The input texture connection point.
+     */
+    public readonly input = this._registerInput("input", ConnectionPointType.Texture);
+
+    /**
+     * The mask texture connection point.
+     */
+    public readonly mask = this._registerInput("mask", ConnectionPointType.Texture);
+    /**
+     * 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 mask = this._confirmRuntimeDataSupplied(this.mask);
+
+        return new MaskShaderBinding(this, input, mask);
+    }
+}

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

@@ -0,0 +1,18 @@
+uniform sampler2D input; // main
+uniform float intensity;
+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.shader.ts

@@ -0,0 +1,46 @@
+import type { ShaderProgram } from "../../../../utils/shaderCodeUtils";
+
+/**
+ * The shader program for the block.
+ */
+export 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);
+                    }
+                    
+                    `,
+            },
+        ],
+    },
+};
+
+/**
+ * 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",
+    intensity: "intensity",
+    disabled: "disabled",
+};

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

@@ -0,0 +1,101 @@
+import type { Effect } from "@babylonjs/core/Materials/effect";
+
+import { pixelateBlockType } from "../../../blockTypes.js";
+import { type RuntimeData } from "../../../../connection/connectionPoint.js";
+import { ConnectionPointType } from "../../../../connection/connectionPointType.js";
+import { type IDisableableBlock, DisableableShaderBlock } from "../../../../blockFoundation/disableableShaderBlock.js";
+import { DisableStrategy } from "../../../../blockFoundation/index.js";
+import { DisableableShaderBinding } from "../../../../runtime/shaderRuntime.js";
+import { createStrongRef } from "../../../../runtime/strongRef.js";
+import type { SmartFilter } from "../../../../smartFilter.js";
+
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+import { shaderProgram, uniforms } from "./pixelateBlock.shader.js";
+
+/**
+ * The shader bindings for the Pixelate block.
+ */
+export class PixelateShaderBinding extends DisableableShaderBinding {
+    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _intensity: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the Kaleidoscope block.
+     * @param parentBlock - The parent block
+     * @param inputTexture - The input texture
+     * @param intensity - The intensity of the effect
+     */
+    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(uniforms.input), this._inputTexture.value);
+        effect.setFloat(this.getRemappedName(uniforms.intensity), this._intensity.value);
+    }
+}
+
+/**
+ * A simple block pixelating the input texture.
+ */
+export class PixelateBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = pixelateBlockType;
+
+    /**
+     * 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, false, DisableStrategy.Manual);
+    }
+
+    /**
+     * 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 PixelateShaderBinding(this, input, intensity);
+    }
+}

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

@@ -0,0 +1,139 @@
+import type { Effect } from "@babylonjs/core/Materials/effect";
+
+import { type IDisableableBlock, DisableableShaderBlock } from "../../../../blockFoundation/disableableShaderBlock.js";
+import type { RuntimeData } from "../../../../connection/connectionPoint.js";
+import { ConnectionPointType } from "../../../../connection/connectionPointType.js";
+import { DisableableShaderBinding } from "../../../../runtime/shaderRuntime.js";
+import { createStrongRef } from "../../../../runtime/strongRef.js";
+import type { SmartFilter } from "../../../../smartFilter.js";
+import type { ShaderProgram } from "../../../../utils/shaderCodeUtils.js";
+
+import { posterizeBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+
+const shaderProgram: ShaderProgram = {
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_;
+            uniform float _intensity_;
+            `,
+
+        const: `
+            const float _posterizePower_ = 6.0;
+            const float _minLevel_ = 2.0;
+            const float _maxLevel_ = 256.0;
+            
+            const float _aspect_ = 1.72;
+            `,
+
+        mainFunctionName: "_posterize_",
+
+        mainInputTexture: "_input_",
+
+        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;
+                }
+            `,
+            },
+        ],
+    },
+};
+
+/**
+ * The shader bindings for the Posterize block.
+ */
+export class PosterizeShaderBinding extends DisableableShaderBinding {
+    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _intensity: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the Posterize block.
+     * @param parentBlock - The parent block
+     * @param inputTexture - The input texture
+     * @param intensity - The intensity of the effect
+     */
+    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 posterizing the input texture.
+ */
+export class PosterizeBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = posterizeBlockType;
+
+    /**
+     * 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 PosterizeShaderBinding(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);
+}