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

package/src/{blocks → blockFoundation}/inputBlock.serializer.ts

@@ -9,7 +9,7 @@ import type {
     SerializedInputBlockData,
     TextureInputBlockData,
     Vector2InputBlockData,
-} from "./inputBlock.serialization.types";
+} from "./inputBlock.serialization.types.js";
 import type { IBlockSerializerV1 } from "../serialization/v1/smartFilterSerialization.types.js";
 
 /**

package/src/{blocks → blockFoundation}/inputBlock.ts

@@ -3,7 +3,7 @@ import type { ConnectionPointValue } from "../connection/connectionPointType";
 import type { RuntimeData } from "../connection/connectionPoint";
 import type { ConnectionPointWithDefault } from "../connection/connectionPointWithDefault";
 import type { DisableableShaderBlock } from "./disableableShaderBlock";
-import { BaseBlock } from "../blocks/baseBlock.js";
+import { BaseBlock } from "./baseBlock.js";
 import { createStrongRef } from "../runtime/strongRef.js";
 import { ConnectionPointType } from "../connection/connectionPointType.js";
 import type { Nullable } from "@babylonjs/core/types";

package/src/blockRegistration/IBlockRegistration.ts

@@ -0,0 +1,45 @@
+import type { ThinEngine } from "@babylonjs/core/Engines/thinEngine";
+import type { SmartFilter } from "../smartFilter";
+import type { BaseBlock } from "../blockFoundation";
+import type { SmartFilterDeserializer, ISerializedBlockV1 } from "../serialization";
+
+/**
+ * An object which describes a block definition, as well as a factory for creating a new instance of the block or
+ * deserializing it
+ */
+export interface IBlockRegistration {
+    /**
+     * The block type of the block
+     */
+    blockType: string;
+
+    /**
+     * Creates an instance of the block, either fresh or deserialized from a serialized block
+     * @param smartFilter - The smart filter to create the block for
+     * @param engine - The engine to use for creating blocks
+     * @param smartFilterDeserializer - The deserializer to use for deserializing blocks
+     * @param serializedBlock - The serialized block to deserialize, if any
+     * @returns - A promise for a new instance of the block
+     */
+    factory?: (
+        smartFilter: SmartFilter,
+        engine: ThinEngine,
+        smartFilterDeserializer: SmartFilterDeserializer,
+        serializedBlock?: ISerializedBlockV1
+    ) => Promise<BaseBlock>;
+
+    /**
+     * The namespace of the block
+     */
+    namespace: string;
+
+    /**
+     * A tooltip for the block if displayed in an editor, for instance
+     */
+    tooltip: string;
+
+    /**
+     * If true, this represents a custom block (not one that was programmatically included)
+     */
+    isCustom?: boolean;
+}

package/src/blockRegistration/blockSerializers.ts

@@ -0,0 +1,52 @@
+import { blurBlockSerializer } from "../blocks/babylon/demo/effects/blurBlock.serializer.js";
+import { directionalBlurBlockSerializer } from "../blocks/babylon/demo/effects/directionalBlurBlock.serializer.js";
+import { compositionBlockSerializer } from "../blocks/babylon/demo/effects/compositionBlock.serializer.js";
+import type { IBlockSerializerV1 } from "../serialization/v1/smartFilterSerialization.types.js";
+import {
+    blackAndWhiteBlockType,
+    pixelateBlockType,
+    exposureBlockType,
+    contrastBlockType,
+    desaturateBlockType,
+    posterizeBlockType,
+    kaleidoscopeBlockType,
+    greenScreenBlockType,
+    maskBlockType,
+    particleBlockType,
+    spritesheetBlockType,
+    tintBlockType,
+    premultiplyAlphaBlockType,
+    wipeBlockType,
+} from "../blocks/blockTypes.js";
+
+/**
+ * Any blocks that do not need to make use of ISerializedBlockV1.data can use the default serialization and
+ * should go in this list. If the serializer needs to store additional info in ISerializedBlockV1.data (e.g.
+ * webcam source name), then it should be registered in additionalBlockSerializers below.
+ */
+export const blocksUsingDefaultSerialization: string[] = [
+    blackAndWhiteBlockType,
+    pixelateBlockType,
+    exposureBlockType,
+    contrastBlockType,
+    desaturateBlockType,
+    posterizeBlockType,
+    kaleidoscopeBlockType,
+    greenScreenBlockType,
+    maskBlockType,
+    particleBlockType,
+    spritesheetBlockType,
+    tintBlockType,
+    premultiplyAlphaBlockType,
+    wipeBlockType,
+];
+
+/**
+ * Any blocks which require serializing more information than just the connections should be registered here.
+ * They should make use of the ISerializedBlockV1.data field to store this information.
+ */
+export const additionalBlockSerializers: IBlockSerializerV1[] = [
+    blurBlockSerializer,
+    directionalBlurBlockSerializer,
+    compositionBlockSerializer,
+];

package/src/blockRegistration/builtInBlockRegistrations.ts

@@ -0,0 +1,390 @@
+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

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

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

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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,38 @@
+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;
+}