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

package/src/blockRegistration/builtInBlockRegistrations.ts

@@ -1,390 +0,0 @@
-import type { ThinEngine } from "@babylonjs/core/Engines/thinEngine.js";
-import type { IBlockRegistration } from "./IBlockRegistration.js";
-import {
-    babylonDemoEffectsNamespace,
-    babylonDemoTransitionsNamespace,
-    babylonDemoUtilitiesNamespace,
-    inputsNamespace,
-} from "../blocks/blockNamespaces.js";
-import { CustomShaderBlock } from "../blockFoundation/customShaderBlock.js";
-import {
-    blackAndWhiteBlockType,
-    kaleidoscopeBlockType,
-    posterizeBlockType,
-    desaturateBlockType,
-    contrastBlockType,
-    greenScreenBlockType,
-    pixelateBlockType,
-    exposureBlockType,
-    maskBlockType,
-    spritesheetBlockType,
-    premultiplyAlphaBlockType,
-    wipeBlockType,
-    blurBlockType,
-    compositionBlockType,
-    tintBlockType,
-} from "../blocks/blockTypes.js";
-import { ConnectionPointType } from "../connection/connectionPointType.js";
-import type { ISerializedBlockV1 } from "../serialization/index.js";
-import type { SmartFilterDeserializer } from "../serialization/smartFilterDeserializer.js";
-import type { SmartFilter } from "../smartFilter.js";
-import { InputBlock } from "../blockFoundation/inputBlock.js";
-
-/**
- * The list of block registrations.
- *
- * Important notes:
- *   1. Do not import the block code directly in this file. Instead, use dynamic imports to ensure that the block code
- *      is only loaded when needed.
- *   2. If the deserializer is trivial (doesn't require consulting the serializedBlock.data), it can be implemented here
- *   3. If the deserializer is non-trivial (needs serializedBlock.data), implement it in a separate file alongside the block
- *      in the form blockClassName.deserializer.ts
- */
-export const builtInBlockRegistrations: IBlockRegistration[] = [
-    // Blocks with trivial deserializers
-    // Note that some choose to predefine corresponding input blocks if not being deserialized
-    // ---------------------------------------------------------------------------------------
-    {
-        blockType: blackAndWhiteBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            const module = await import(
-                /* webpackChunkName: "blackAndWhiteBlock" */ "../blocks/babylon/demo/effects/blackAndWhiteBlock.js"
-            );
-            return new module.BlackAndWhiteBlock(smartFilter, serializedBlock?.name || "BlackAndWhite");
-        },
-        namespace: babylonDemoEffectsNamespace,
-        tooltip: "Transform the input texture to black and white",
-    },
-    {
-        blockType: kaleidoscopeBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            const module = await import(
-                /* webpackChunkName: "kaleidoscopeBlock" */ "../blocks/babylon/demo/effects/kaleidoscopeBlock.js"
-            );
-            const block = new module.KaleidoscopeBlock(smartFilter, serializedBlock?.name || "Kaleidoscope");
-            if (!serializedBlock) {
-                const input = new InputBlock(smartFilter, "Angle", ConnectionPointType.Float, 0);
-                input.output.connectTo(block.time);
-            }
-            return block;
-        },
-        namespace: babylonDemoEffectsNamespace,
-        tooltip: "Kaleidoscope effect",
-    },
-    {
-        blockType: posterizeBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            const module = await import(
-                /* webpackChunkName: "posterizeBlock" */ "../blocks/babylon/demo/effects/posterizeBlock.js"
-            );
-            const block = new module.PosterizeBlock(smartFilter, serializedBlock?.name || "Posterize");
-            if (!serializedBlock) {
-                const input = new InputBlock(smartFilter, "Intensity", ConnectionPointType.Float, 0.5);
-                input.output.connectTo(block.intensity);
-            }
-            return block;
-        },
-        namespace: babylonDemoEffectsNamespace,
-        tooltip: "Posterize to the input texture",
-    },
-    {
-        blockType: desaturateBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            const module = await import(
-                /* webpackChunkName: "desaturateBlock" */ "../blocks/babylon/demo/effects/desaturateBlock.js"
-            );
-            const block = new module.DesaturateBlock(smartFilter, serializedBlock?.name || "Desaturate");
-            if (!serializedBlock) {
-                const input = new InputBlock(smartFilter, "Intensity", ConnectionPointType.Float, 0.5);
-                input.output.connectTo(block.intensity);
-            }
-            return block;
-        },
-        namespace: babylonDemoEffectsNamespace,
-        tooltip: "Applies a desaturated effect to the input texture",
-    },
-    {
-        blockType: contrastBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            const module = await import(
-                /* webpackChunkName: "contrastBlock" */ "../blocks/babylon/demo/effects/contrastBlock.js"
-            );
-            const block = new module.ContrastBlock(smartFilter, serializedBlock?.name || "Contrast");
-            if (!serializedBlock) {
-                const input = new InputBlock(smartFilter, "Intensity", ConnectionPointType.Float, 0.5);
-                input.output.connectTo(block.intensity);
-            }
-            return block;
-        },
-        namespace: babylonDemoEffectsNamespace,
-        tooltip: "Change the contrast of the input texture",
-    },
-    {
-        blockType: greenScreenBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            const module = await import(
-                /* webpackChunkName: "greenScreenBlock" */ "../blocks/babylon/demo/effects/greenScreenBlock.js"
-            );
-            const block = new module.GreenScreenBlock(smartFilter, serializedBlock?.name || "GreenScreen");
-            if (!serializedBlock) {
-                const reference = new InputBlock(smartFilter, "Reference", ConnectionPointType.Color3, {
-                    r: 92 / 255,
-                    g: 204 / 255,
-                    b: 78 / 255,
-                });
-                const distance = new InputBlock(smartFilter, "Distance", ConnectionPointType.Float, 0.25);
-                reference.output.connectTo(block.reference);
-                distance.output.connectTo(block.distance);
-            }
-            return block;
-        },
-        namespace: babylonDemoEffectsNamespace,
-        tooltip: "Replaces a green screen background with a different texture",
-    },
-    {
-        blockType: pixelateBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            const module = await import(
-                /* webpackChunkName: "pixelateBlock" */ "../blocks/babylon/demo/effects/pixelateBlock.js"
-            );
-            const block = new module.PixelateBlock(smartFilter, serializedBlock?.name || "Pixelate");
-            if (!serializedBlock) {
-                const input = new InputBlock(smartFilter, "Intensity", ConnectionPointType.Float, 0.4);
-                input.output.connectTo(block.intensity);
-            }
-            return block;
-        },
-        namespace: babylonDemoEffectsNamespace,
-        tooltip: "Add pixelation to the input texture",
-    },
-    {
-        blockType: exposureBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            const module = await import(
-                /* webpackChunkName: "exposureBlock" */ "../blocks/babylon/demo/effects/exposureBlock.js"
-            );
-            const block = new module.ExposureBlock(smartFilter, serializedBlock?.name || "Exposure");
-            if (!serializedBlock) {
-                const input = new InputBlock(smartFilter, "Amount", ConnectionPointType.Float, 0.7);
-                input.output.connectTo(block.amount);
-            }
-            return block;
-        },
-        namespace: babylonDemoEffectsNamespace,
-        tooltip: "Alters the exposure of the input texture",
-    },
-    {
-        blockType: maskBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            const module = await import(
-                /* webpackChunkName: "maskBlock" */ "../blocks/babylon/demo/effects/maskBlock.js"
-            );
-            return new module.MaskBlock(smartFilter, serializedBlock?.name || "Mask");
-        },
-        namespace: babylonDemoEffectsNamespace,
-        tooltip: "Applies mask in one texture to another texture",
-    },
-    {
-        blockType: spritesheetBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            const module = await import(
-                /* webpackChunkName: "spritesheetBlock" */ "../blocks/babylon/demo/effects/spritesheetBlock.js"
-            );
-            return new module.SpritesheetBlock(smartFilter, serializedBlock?.name || "Spritesheet");
-        },
-        namespace: babylonDemoEffectsNamespace,
-        tooltip: "Animates a sprite sheet texture",
-    },
-    {
-        blockType: premultiplyAlphaBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            const module = await import(
-                /* webpackChunkName: "premultiplyAlphaBlock" */ "../blocks/babylon/demo/utilities/premultiplyAlphaBlock.js"
-            );
-            return new module.PremultiplyAlphaBlock(smartFilter, serializedBlock?.name || "PremultiplyAlpha");
-        },
-        namespace: babylonDemoUtilitiesNamespace,
-        tooltip: "Premultiplies the input texture's color against its alpha",
-    },
-    {
-        blockType: wipeBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            const module = await import(
-                /* webpackChunkName: "wipeBlock" */ "../blocks/babylon/demo/transitions/wipeBlock.js"
-            );
-            return new module.WipeBlock(smartFilter, serializedBlock?.name || "Wipe");
-        },
-        namespace: babylonDemoTransitionsNamespace,
-        tooltip: "Transition from one texture to another using a wipe",
-    },
-
-    // Blocks with custom deserializers
-    // --------------------------------
-    {
-        blockType: blurBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            if (serializedBlock) {
-                const module = await import(
-                    /* webpackChunkName: "blurBlockDeserializer" */ "../blocks/babylon/demo/effects/blurBlock.deserializer.js"
-                );
-                return module.blurBlockDeserializer(smartFilter, serializedBlock);
-            } else {
-                const module = await import(
-                    /* webpackChunkName: "blurBlock" */ "../blocks/babylon/demo/effects/blurBlock.js"
-                );
-                return new module.BlurBlock(smartFilter, "Blur");
-            }
-        },
-        namespace: babylonDemoEffectsNamespace,
-        tooltip: "Blur the input texture",
-    },
-    {
-        blockType: compositionBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            if (serializedBlock) {
-                const module = await import(
-                    /* webpackChunkName: "compositionBlockDeserializer" */ "../blocks/babylon/demo/effects/compositionBlock.deserializer.js"
-                );
-                return module.compositionDeserializer(smartFilter, serializedBlock);
-            } else {
-                const module = await import(
-                    /* webpackChunkName: "compositionBlock" */ "../blocks/babylon/demo/effects/compositionBlock.js"
-                );
-                const block = new module.CompositionBlock(smartFilter, "Composition");
-                const top = new InputBlock(smartFilter, "Top", ConnectionPointType.Float, 0.0);
-                const left = new InputBlock(smartFilter, "Left", ConnectionPointType.Float, 0.0);
-                const width = new InputBlock(smartFilter, "Width", ConnectionPointType.Float, 1.0);
-                const height = new InputBlock(smartFilter, "Height", ConnectionPointType.Float, 1.0);
-
-                top.output.connectTo(block.foregroundTop);
-                left.output.connectTo(block.foregroundLeft);
-                width.output.connectTo(block.foregroundWidth);
-                height.output.connectTo(block.foregroundHeight);
-                return block;
-            }
-        },
-        namespace: babylonDemoEffectsNamespace,
-        tooltip: "Composite the foreground texture over the background texture",
-    },
-
-    // Blocks defined by serialized definitions
-    // ----------------------------------------
-    {
-        blockType: tintBlockType,
-        factory: async (
-            smartFilter: SmartFilter,
-            _engine: ThinEngine,
-            _smartFilterDeserializer: SmartFilterDeserializer,
-            serializedBlock: ISerializedBlockV1 | undefined
-        ) => {
-            const module = await import(
-                /* webpackChunkName: "tintBlock" */ "../blocks/babylon/demo/effects/tintBlock.js"
-            );
-            return CustomShaderBlock.Create(
-                smartFilter,
-                serializedBlock?.name || "Tint",
-                module.deserializedTintBlockDefinition
-            );
-        },
-        namespace: babylonDemoEffectsNamespace,
-        tooltip: "Adds colored tint to the input texture",
-    },
-
-    // Standard input blocks
-    // ---------------------
-    {
-        blockType: "Float",
-        namespace: inputsNamespace,
-        tooltip: "A floating point number representing a value with a fractional component",
-    },
-    {
-        blockType: "Color3",
-        namespace: inputsNamespace,
-        tooltip: "A set of 3 floating point numbers representing a color",
-    },
-    {
-        blockType: "Color4",
-        namespace: inputsNamespace,
-        tooltip: "A set of 4 floating point numbers representing a color",
-    },
-    {
-        blockType: "Texture",
-        namespace: inputsNamespace,
-        tooltip: "A texture to be used as input",
-    },
-    {
-        blockType: "Vector2",
-        namespace: inputsNamespace,
-        tooltip: "A Vector2 to be used as input",
-    },
-];

package/src/blockRegistration/index.ts

@@ -1,2 +0,0 @@
-export * from "./builtInBlockRegistrations.js";
-export * from "./IBlockRegistration.js";

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

@@ -1,10 +0,0 @@
-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.shader.ts

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

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

@@ -1,80 +0,0 @@
-import type { Effect } from "@babylonjs/core/Materials/effect";
-import { blackAndWhiteBlockType } from "../../../blockTypes.js";
-import { DisableableShaderBinding } from "../../../../runtime/shaderRuntime.js";
-import { DisableableShaderBlock } from "../../../../blockFoundation/disableableShaderBlock.js";
-import type { RuntimeData } from "../../../../connection/connectionPoint.js";
-import { ConnectionPointType } from "../../../../connection/connectionPointType.js";
-import type { SmartFilter } from "../../../../smartFilter.js";
-
-import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
-import { shaderProgram, uniforms } from "./blackAndWhiteBlock.shader.js";
-
-/**
- * The shader bindings for the BlackAndWhite block.
- */
-export class BlackAndWhiteShaderBinding extends DisableableShaderBinding {
-    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
-
-    /**
-     * Creates a new shader binding instance for the BlackAndWhite block.
-     * @param parentBlock - The parent block
-     * @param inputTexture - The input texture
-     */
-    constructor(parentBlock: DisableableShaderBlock, inputTexture: RuntimeData<ConnectionPointType.Texture>) {
-        super(parentBlock);
-        this._inputTexture = inputTexture;
-    }
-
-    /**
-     * 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);
-    }
-}
-
-/**
- * A simple block converting the input texture to black and white.
- */
-export class BlackAndWhiteBlock extends DisableableShaderBlock {
-    /**
-     * The class name of the block.
-     */
-    public static override ClassName = blackAndWhiteBlockType;
-
-    /**
-     * The namespace of the block.
-     */
-    public static override Namespace = babylonDemoEffectsNamespace;
-
-    /**
-     * The input texture connection point.
-     */
-    public readonly input = this._registerInput("input", 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);
-
-        return new BlackAndWhiteShaderBinding(this, input);
-    }
-}

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

@@ -1,38 +0,0 @@
-import type { ISerializedBlockV1 } from "../../../../serialization/index.js";
-import { BlurBlock } from "./blurBlock.js";
-import type { SmartFilter } from "../../../../smartFilter.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

@@ -1,32 +0,0 @@
-import type { IBlockSerializerV1 } from "../../../../serialization/v1/smartFilterSerialization.types";
-import type { BaseBlock } from "../../../../blockFoundation/baseBlock";
-import type { BlurBlock } from "./blurBlock";
-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 BlurBlock;
-        return {
-            name: block.name,
-            uniqueId: block.uniqueId,
-            blockType: blurBlockType,
-            namespace: babylonDemoEffectsNamespace,
-            comments: block.comments,
-            data: {
-                blurTextureRatioPerPass: blurBlock.blurTextureRatioPerPass,
-                blurSize: blurBlock.blurSize,
-            },
-        };
-    },
-};