@onerjs/smart-filters-blocks 8.25.0

package/license.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Babylon.js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "@onerjs/smart-filters-blocks",
+    "version": "8.25.0",
+    "description": "Babylon.js Smart Filter Block Library",
+    "keywords": [
+        "video",
+        "composition",
+        "3D",
+        "2D",
+        "javascript",
+        "html5",
+        "webgl",
+        "webgl2",
+        "webgpu",
+        "babylon"
+    ],
+    "license": "MIT",
+    "readme": "README.md",
+    "main": "dist/index",
+    "module": "dist/index",
+    "esnext": "dist/index",
+    "types": "dist/index",
+    "type": "module",
+    "sideEffects": false,
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/BabylonJS/Babylon.js.git"
+    },
+    "files": [
+        "dist",
+        "src",
+        "license.md",
+        "readme.md"
+    ],
+    "scripts": {
+        "build": "npm run clean && npm run copySrc && npm run compile",
+        "clean": "rimraf dist && rimraf src && rimraf *.tsbuildinfo -g && rimraf \"./**/*.!(cmd|md|json|build.json|lts.json|tasks.json|cjs)\" -g",
+        "copySrc": "node -e \"require('fs').cpSync('../../../dev/smartFilterBlocks/src', './src', { recursive: true })\"",
+        "precompile": "tsx ../../../dev/smartFilters/src/utils/buildTools/buildShaders.ts ./src/blocks smart-filters core",
+        "compile": "tsc -b tsconfig.build.json",
+        "postcompile": "build-tools -c add-js-to-es6"
+    },
+    "devDependencies": {
+        "@dev/build-tools": "^1.0.0",
+        "@dev/core": "1.0.0",
+        "@dev/smart-filters": "1.0.0"
+    },
+    "peerDependencies": {
+        "@onerjs/core": "^7.47.3 || ^8.0.1"
+    },
+    "dependencies": {
+        "@onerjs/smart-filters": "^8.25.0"
+    }
+}

package/readme.md

@@ -0,0 +1,7 @@
+# Babylon.js Smart Filters
+
+## Blocks
+
+This package contains a library of blocks for use with Babylon Smart Filters (see @babylonjs/smart-filters).
+
+See the full documentation at [doc.babylonjs.com](https://doc.babylonjs.com/features/featuresDeepDive/smartFilters/)

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

@@ -0,0 +1,18 @@
+/*
+{
+    "smartFilterBlockType": "BlackAndWhiteBlock", 
+    "namespace": "Babylon.Demo.Effects",
+    "blockDisableStrategy": "AutoSample"
+}
+*/
+
+uniform sampler2D input; // main
+
+vec4 blackAndWhite(vec2 vUV) { // main
+    vec4 color = texture2D(input, vUV);
+
+    float luminance = dot(color.rgb, vec3(0.3, 0.59, 0.11));
+    vec3 bg = vec3(luminance, luminance, luminance);
+
+    return vec4(bg, color.a);
+}

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

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

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

@@ -0,0 +1,37 @@
+import { type SmartFilter, type ISerializedBlockV1 } from "smart-filters";
+import { BlurBlock } from "./blurBlock.js";
+
+/**
+ * The definition of the extra data serialized for blur blocks.
+ */
+export interface ISerializedBlurBlockV1 extends ISerializedBlockV1 {
+    /**
+     * The extra data of the block.
+     */
+    data: {
+        /**
+         * The blur texture ratio per pass.
+         */
+        blurTextureRatioPerPass: number;
+
+        /**
+         * The size of the blur.
+         */
+        blurSize: number;
+    };
+}
+
+/**
+ * V1 Blur Deserializer.
+ * @param smartFilter - The SmartFilter to deserialize the block into
+ * @param serializedBlock - The serialized block data
+ * @returns A deserialized BlurBlock
+ */
+export function BlurBlockDeserializer(smartFilter: SmartFilter, serializedBlock: ISerializedBlurBlockV1) {
+    const block = new BlurBlock(smartFilter, serializedBlock.name);
+
+    // If data is missing, use the default value set by the block
+    block.blurTextureRatioPerPass = serializedBlock.data.blurTextureRatioPerPass ?? block.blurSize;
+    block.blurSize = serializedBlock.data.blurSize ?? block.blurSize;
+    return block;
+}

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

@@ -0,0 +1,31 @@
+import type { BaseBlock, IBlockSerializerV1 } from "smart-filters";
+import type { BlurBlock } from "./blurBlock.js";
+import { blurBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+
+/**
+ * The V1 serializer for a Blur Block.
+ * Though it is an aggregate block, Blur creates and manages its own blocks
+ * internally, so there's no need to worry about serializing them.
+ */
+export const BlurBlockSerializer: IBlockSerializerV1 = {
+    blockType: blurBlockType,
+    serialize: (block: BaseBlock) => {
+        if (block.getClassName() !== blurBlockType) {
+            throw new Error("Was asked to serialize an unrecognized block type");
+        }
+
+        const blurBlock = block as unknown as BlurBlock;
+        return {
+            name: block.name,
+            uniqueId: block.uniqueId,
+            blockType: blurBlockType,
+            namespace: babylonDemoEffectsNamespace,
+            comments: block.comments,
+            data: {
+                blurTextureRatioPerPass: blurBlock.blurTextureRatioPerPass,
+                blurSize: blurBlock.blurSize,
+            },
+        };
+    },
+};

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

@@ -0,0 +1,115 @@
+import { type ConnectionPointType, AggregateBlock, type ConnectionPoint, editableInPropertyPage, PropertyTypeForEdition, SmartFilter } from "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 "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,74 @@
+import type { ShaderProgram } from "smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+const BlockShaderProgram: 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.
+ */
+const Uniforms = {
+    background: "background",
+    foreground: "foreground",
+    scaleUV: "scaleUV",
+    translateUV: "translateUV",
+    alphaMode: "alphaMode",
+    foregroundAlphaScale: "foregroundAlphaScale",
+};
+
+export { BlockShaderProgram, Uniforms };
+// Back compat for when camelCase was used
+export { BlockShaderProgram as shaderProgram, Uniforms as uniforms };

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

@@ -0,0 +1,28 @@
+import type { CompositionBlock } from "./compositionBlock.js";
+import { compositionBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+import type { IBlockSerializerV1, BaseBlock } from "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,
+            },
+        };
+    },
+};