@onerjs/smart-filters-blocks 8.25.0

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

@@ -0,0 +1,211 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import type { Effect } from "core/Materials/effect.js";
+import {
+    DisableableShaderBinding,
+    type RuntimeData,
+    ConnectionPointType,
+    type IDisableableBlock,
+    DisableableShaderBlock,
+    type SmartFilter,
+    createStrongRef,
+    PropertyTypeForEdition,
+    editableInPropertyPage,
+} from "smart-filters";
+import { compositionBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+import { uniforms, shaderProgram } from "./compositionBlock.fragment.js";
+
+/** Defines that alpha blending is disabled */
+export const ALPHA_DISABLE = 0;
+/** Defines that alpha blending is SRC ALPHA * SRC + DEST */
+export const ALPHA_ADD = 1;
+/** Defines that alpha blending is SRC ALPHA * SRC + (1 - SRC ALPHA) * DEST */
+export const ALPHA_COMBINE = 2;
+/** Defines that alpha blending is DEST - SRC * DEST */
+export const ALPHA_SUBTRACT = 3;
+/** Defines that alpha blending is SRC * DEST */
+export const ALPHA_MULTIPLY = 4;
+
+/**
+ * The shader bindings for the Composition block.
+ * This demonstrates how multiple input connection point values can be packed into a single
+ * uniform.
+ */
+export class CompositionShaderBinding extends DisableableShaderBinding {
+    private readonly _backgroundTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _foregroundTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _foregroundTop: RuntimeData<ConnectionPointType.Float>;
+    private readonly _foregroundLeft: RuntimeData<ConnectionPointType.Float>;
+    private readonly _foregroundWidth: RuntimeData<ConnectionPointType.Float>;
+    private readonly _foregroundHeight: RuntimeData<ConnectionPointType.Float>;
+    private readonly _foregroundAlphaScale: RuntimeData<ConnectionPointType.Float>;
+    private readonly _alphaMode: number;
+
+    /**
+     * Creates a new shader binding instance for the Composition block.
+     * @param parentBlock - The parent block
+     * @param backgroundTexture - the background texture
+     * @param foregroundTexture - the foreground texture
+     * @param foregroundTop - the top position of the foreground texture
+     * @param foregroundLeft - the left position of the foreground texture
+     * @param foregroundWidth - the width of the foreground texture
+     * @param foregroundHeight - the height of the foreground texture
+     * @param foregroundAlphaScale - the alpha scale of the foreground texture
+     * @param alphaMode - the alpha mode to use
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        backgroundTexture: RuntimeData<ConnectionPointType.Texture>,
+        foregroundTexture: RuntimeData<ConnectionPointType.Texture>,
+        foregroundTop: RuntimeData<ConnectionPointType.Float>,
+        foregroundLeft: RuntimeData<ConnectionPointType.Float>,
+        foregroundWidth: RuntimeData<ConnectionPointType.Float>,
+        foregroundHeight: RuntimeData<ConnectionPointType.Float>,
+        foregroundAlphaScale: RuntimeData<ConnectionPointType.Float>,
+        alphaMode: number
+    ) {
+        super(parentBlock);
+        this._backgroundTexture = backgroundTexture;
+        this._foregroundTexture = foregroundTexture;
+        this._foregroundTop = foregroundTop;
+        this._foregroundLeft = foregroundLeft;
+        this._foregroundWidth = foregroundWidth;
+        this._foregroundHeight = foregroundHeight;
+        this._foregroundAlphaScale = foregroundAlphaScale;
+        this._alphaMode = alphaMode;
+    }
+
+    /**
+     * Binds all the required data to the shader when rendering.
+     * @param effect - defines the effect to bind the data to
+     * @param width - defines the width of the output
+     * @param height - defines the height of the output
+     */
+    public override bind(effect: Effect, width: number, height: number): void {
+        super.bind(effect, width, height);
+
+        const background = this._backgroundTexture.value;
+        const foreground = this._foregroundTexture.value;
+        const foregroundTop = this._foregroundTop.value;
+        const foregroundLeft = this._foregroundLeft.value;
+        const foregroundWidth = this._foregroundWidth.value;
+        const foregroundHeight = this._foregroundHeight.value;
+        const foregroundAlphaScale = this._foregroundAlphaScale.value;
+        const alphaMode = this._alphaMode;
+
+        effect.setFloat(this.getRemappedName(uniforms.alphaMode), alphaMode);
+        effect.setTexture(this.getRemappedName(uniforms.background), background);
+        effect.setTexture(this.getRemappedName(uniforms.foreground), foreground);
+
+        // NOTE: textures may always be undefined if connected to another shader block when the graph is optimized
+
+        effect.setFloat2(this.getRemappedName(uniforms.scaleUV), foregroundWidth, foregroundHeight);
+        effect.setFloat2(this.getRemappedName(uniforms.translateUV), -1 * foregroundLeft, foregroundTop);
+        effect.setFloat(this.getRemappedName(uniforms.foregroundAlphaScale), foregroundAlphaScale);
+    }
+}
+
+/**
+ * A simple compositing Block letting the filter "blend" 2 different layers.
+ * It demonstrates how a block can use properties for values which will not change at runtime (alphaMode)
+ *
+ * The alpha mode of the block can be set to one of the following:
+ * - ALPHA_DISABLE: alpha blending is disabled
+ * - ALPHA_ADD: alpha blending is SRC ALPHA * SRC + DEST
+ * - ALPHA_COMBINE: alpha blending is SRC ALPHA * SRC + (1 - SRC ALPHA) * DEST
+ * - ALPHA_SUBTRACT: alpha blending is DEST - SRC * DEST
+ * - ALPHA_MULTIPLY: alpha blending is SRC * DEST
+ */
+export class CompositionBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = compositionBlockType;
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = babylonDemoEffectsNamespace;
+
+    /**
+     * The background texture to composite on to.
+     */
+    public readonly background = this._registerInput(uniforms.background, ConnectionPointType.Texture);
+
+    /**
+     * The foreground texture to composite in.
+     */
+    public readonly foreground = this._registerOptionalInput(uniforms.foreground, ConnectionPointType.Texture, createStrongRef(null));
+
+    /**
+     * Defines where the top of the texture to composite in should be displayed. (between 0 and 1).
+     */
+    public readonly foregroundTop = this._registerOptionalInput("foregroundTop", ConnectionPointType.Float, createStrongRef(0.0));
+
+    /**
+     * Defines where the left of the texture to composite in should be displayed. (between 0 and 1).
+     */
+    public readonly foregroundLeft = this._registerOptionalInput("foregroundLeft", ConnectionPointType.Float, createStrongRef(0.0));
+
+    /**
+     * Defines the width of the texture in the composition.
+     */
+    public readonly foregroundWidth = this._registerOptionalInput("foregroundWidth", ConnectionPointType.Float, createStrongRef(1.0));
+
+    /**
+     * Defines the height of the texture in the composition.
+     */
+    public readonly foregroundHeight = this._registerOptionalInput("foregroundHeight", ConnectionPointType.Float, createStrongRef(1.0));
+
+    /**
+     * Defines a multiplier applied to the foreground's alpha channel.
+     */
+    public readonly foregroundAlphaScale = this._registerOptionalInput(uniforms.foregroundAlphaScale, ConnectionPointType.Float, createStrongRef(1.0));
+
+    /**
+     * Defines blend mode of the composition.
+     */
+    @editableInPropertyPage("Alpha Mode", PropertyTypeForEdition.List, "PROPERTIES", {
+        notifiers: { rebuild: true },
+        options: [
+            { label: "Disable", value: ALPHA_DISABLE },
+            { label: "Add", value: ALPHA_ADD },
+            { label: "Combine", value: ALPHA_COMBINE },
+            { label: "Subtract", value: ALPHA_SUBTRACT },
+            { label: "Multiply", value: ALPHA_MULTIPLY },
+        ],
+    })
+    public alphaMode: number = ALPHA_COMBINE;
+
+    /**
+     * 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, true);
+    }
+
+    /**
+     * 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 background = this._confirmRuntimeDataSupplied(this.background);
+        const foreground = this._confirmRuntimeDataSupplied(this.foreground);
+        const foregroundWidth = this.foregroundWidth.runtimeData;
+        const foregroundLeft = this.foregroundLeft.runtimeData;
+        const foregroundHeight = this.foregroundHeight.runtimeData;
+        const foregroundTop = this.foregroundTop.runtimeData;
+        const foregroundAlphaScale = this.foregroundAlphaScale.runtimeData;
+        const alphaMode = this.alphaMode;
+
+        return new CompositionShaderBinding(this, background, foreground, foregroundTop, foregroundLeft, foregroundWidth, foregroundHeight, foregroundAlphaScale, alphaMode);
+    }
+}

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

@@ -0,0 +1,36 @@
+/*  
+{ 
+    "smartFilterBlockType": "ContrastBlock", 
+    "namespace": "Babylon.Demo.Effects", 
+    "blockDisableStrategy": "AutoSample"
+}
+*/
+
+uniform sampler2D input; // main
+// { "default": 0.5 }
+uniform float intensity;
+
+vec4 contrast(vec2 vUV) { // main
+    vec4 color = texture2D(input, vUV);
+
+    float contrastLMin = mix(-2., 0., intensity * 2.0);
+    float contrastLMax = mix(3., 1., intensity * 2.0);
+
+    vec3 contrastMin = remap(color.rgb, contrastLMin, contrastLMax, 0., 1.);
+
+    float intensityMapped = remap(intensity, 0.5, 1., 0., 1.0);
+    float contrastHMin = mix(0., 0.45, intensityMapped);
+    float contrastHMax = mix(1., 0.5, intensityMapped);
+
+    vec3 contrastMax = remap(color.rgb, contrastHMin, contrastHMax, 0., 1.);
+
+    return vec4(mix(contrastMin, contrastMax, step(intensity, 0.5)), color.a);
+}
+
+float remap(float i, float smin, float smax, float dmin, float dmax) {
+    return dmin + (i - smin) * (dmax - dmin) / (smax - smin);
+}
+
+vec3 remap(vec3 i, float smin, float smax, float dmin, float dmax) {
+    return dmin + (i - smin) * (dmax - dmin) / (smax - smin);
+}

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

@@ -0,0 +1,178 @@
+/* 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,
+    createStrongRef,
+    type IDisableableBlock,
+    BlockDisableStrategy} from "smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+const BlockShaderProgram: ShaderProgram = {
+    vertex: undefined,
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_; // main
+            uniform float _intensity_;`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_contrast_",
+        functions: [
+            {
+                name: "_contrast_",
+                code: `
+                    vec4 _contrast_(vec2 vUV) { 
+                        vec4 color = texture2D(_input_, vUV);
+                    
+                        float contrastLMin = mix(-2., 0., _intensity_ * 2.0);
+                        float contrastLMax = mix(3., 1., _intensity_ * 2.0);
+                    
+                        vec3 contrastMin = _remap_(color.rgb, contrastLMin, contrastLMax, 0., 1.);
+                    
+                        float intensityMapped = _remap_(_intensity_, 0.5, 1., 0., 1.0);
+                        float contrastHMin = mix(0., 0.45, intensityMapped);
+                        float contrastHMax = mix(1., 0.5, intensityMapped);
+                    
+                        vec3 contrastMax = _remap_(color.rgb, contrastHMin, contrastHMax, 0., 1.);
+                    
+                        return vec4(mix(contrastMin, contrastMax, step(_intensity_, 0.5)), color.a);
+                    }
+                    `,
+                params: "vec2 vUV",
+            },
+            {
+                name: "_remap_",
+                code: `
+                    float _remap_(float i, float smin, float smax, float dmin, float dmax) {
+                        return dmin + (i - smin) * (dmax - dmin) / (smax - smin);
+                    }
+                    `,
+                params: "float i, float smin, float smax, float dmin, float dmax",
+            },
+            {
+                name: "_remap_",
+                code: `
+                    vec3 _remap_(vec3 i, float smin, float smax, float dmin, float dmax) {
+                        return dmin + (i - smin) * (dmax - dmin) / (smax - smin);
+                    }
+                    `,
+                params: "vec3 i, float smin, float smax, float dmin, float dmax",
+            },
+        ],
+    },
+};
+
+/**
+ * The uniform names for this shader, to be used in the shader binding so
+ * that the names are always in sync.
+ */
+const Uniforms = {
+    input: "input",
+    intensity: "intensity",
+};
+
+
+/**
+ * The shader binding for the ContrastBlock, used by the runtime
+ */
+class ContrastBlockShaderBinding extends DisableableShaderBinding {
+    private readonly _input: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _intensity: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the block.
+     * @param parentBlock - IDisableableBlock
+     * @param input - The input runtime value
+     * @param intensity - The intensity runtime value
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        input: RuntimeData<ConnectionPointType.Texture>,
+        intensity: RuntimeData<ConnectionPointType.Float>
+    ) {
+        super(parentBlock);
+        this._input = input;
+        this._intensity = intensity;
+    }
+
+    /**
+     * Binds all the required data to the shader when rendering.
+     * @param effect - defines the effect to bind the data to
+     */
+    public override bind(effect: Effect): void {
+        super.bind(effect);
+        effect.setTexture(this.getRemappedName(Uniforms.input), this._input.value);
+        effect.setFloat(this.getRemappedName(Uniforms.intensity), this._intensity.value);
+    }
+}
+
+/**
+ * The implementation of the ContrastBlock
+ */
+export class ContrastBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "ContrastBlock";
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = "Babylon.Demo.Effects";
+
+    /**
+     * The input connection point.
+     */
+    public readonly input = this._registerInput(Uniforms.input, ConnectionPointType.Texture);
+
+    /**
+    /**
+     * The intensity connection point.
+     */
+    public readonly intensity = this._registerOptionalInput(
+        "intensity",
+        ConnectionPointType.Float,
+        createStrongRef(0.5)
+    );
+
+    /**
+     * The shader program (vertex and fragment code) to use to render the block
+     */
+    public static override ShaderCode = BlockShaderProgram;
+
+    /**
+     * Instantiates a new ContrastBlock.
+     * @param smartFilter - The smart filter this block belongs to
+     * @param name - The friendly name of the block
+     */
+    constructor(smartFilter: SmartFilter, name: string) {
+        super(smartFilter, name, false, BlockDisableStrategy.AutoSample);
+    }
+
+    /**
+     * Get the class instance that binds all the required data to the shader (effect) when rendering.
+     * @returns The class instance that binds the data to the effect
+     */
+    public getShaderBinding(): DisableableShaderBinding {
+        const input = this._confirmRuntimeDataSupplied(this.input);
+        const intensity = this._confirmRuntimeDataSupplied(this.intensity);
+
+        return new ContrastBlockShaderBinding(this,input,intensity);
+    }
+}
+

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

@@ -0,0 +1,24 @@
+/*  
+{ 
+    "smartFilterBlockType": "DesaturateBlock", 
+    "namespace": "Babylon.Demo.Effects", 
+    "blockDisableStrategy": "AutoSample"
+}
+*/
+
+uniform sampler2D input; // main
+// { "default": 0.3 }
+uniform float intensity;
+
+vec4 desaturate(vec2 vUV) { // main
+    float saturationStrength = 1. - intensity;
+
+    vec4 color = texture2D(input, vUV);
+
+    float tempMin = min(min(color.x, color.y), color.z);
+    float tempMax = max(max(color.x, color.y), color.z);
+    float tempMerge = 0.5 * (tempMin + tempMax);
+
+    return vec4(mix(color.rgb, vec3(tempMerge, tempMerge, tempMerge), saturationStrength), color.a);
+}
+            

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

@@ -0,0 +1,155 @@
+/* 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,
+    createStrongRef,
+    type IDisableableBlock,
+    BlockDisableStrategy} from "smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+const BlockShaderProgram: ShaderProgram = {
+    vertex: undefined,
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_; // main
+            uniform float _intensity_;`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_desaturate_",
+        functions: [
+            {
+                name: "_desaturate_",
+                code: `
+                    vec4 _desaturate_(vec2 vUV) { 
+                        float saturationStrength = 1. - _intensity_;
+                    
+                        vec4 color = texture2D(_input_, vUV);
+                    
+                        float tempMin = min(min(color.x, color.y), color.z);
+                        float tempMax = max(max(color.x, color.y), color.z);
+                        float tempMerge = 0.5 * (tempMin + tempMax);
+                    
+                        return vec4(mix(color.rgb, vec3(tempMerge, tempMerge, tempMerge), saturationStrength), 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",
+    intensity: "intensity",
+};
+
+
+/**
+ * The shader binding for the DesaturateBlock, used by the runtime
+ */
+class DesaturateBlockShaderBinding extends DisableableShaderBinding {
+    private readonly _input: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _intensity: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the block.
+     * @param parentBlock - IDisableableBlock
+     * @param input - The input runtime value
+     * @param intensity - The intensity runtime value
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        input: RuntimeData<ConnectionPointType.Texture>,
+        intensity: RuntimeData<ConnectionPointType.Float>
+    ) {
+        super(parentBlock);
+        this._input = input;
+        this._intensity = intensity;
+    }
+
+    /**
+     * Binds all the required data to the shader when rendering.
+     * @param effect - defines the effect to bind the data to
+     */
+    public override bind(effect: Effect): void {
+        super.bind(effect);
+        effect.setTexture(this.getRemappedName(Uniforms.input), this._input.value);
+        effect.setFloat(this.getRemappedName(Uniforms.intensity), this._intensity.value);
+    }
+}
+
+/**
+ * The implementation of the DesaturateBlock
+ */
+export class DesaturateBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "DesaturateBlock";
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = "Babylon.Demo.Effects";
+
+    /**
+     * The input connection point.
+     */
+    public readonly input = this._registerInput(Uniforms.input, ConnectionPointType.Texture);
+
+    /**
+    /**
+     * The intensity connection point.
+     */
+    public readonly intensity = this._registerOptionalInput(
+        "intensity",
+        ConnectionPointType.Float,
+        createStrongRef(0.3)
+    );
+
+    /**
+     * The shader program (vertex and fragment code) to use to render the block
+     */
+    public static override ShaderCode = BlockShaderProgram;
+
+    /**
+     * Instantiates a new DesaturateBlock.
+     * @param smartFilter - The smart filter this block belongs to
+     * @param name - The friendly name of the block
+     */
+    constructor(smartFilter: SmartFilter, name: string) {
+        super(smartFilter, name, false, BlockDisableStrategy.AutoSample);
+    }
+
+    /**
+     * Get the class instance that binds all the required data to the shader (effect) when rendering.
+     * @returns The class instance that binds the data to the effect
+     */
+    public getShaderBinding(): DisableableShaderBinding {
+        const input = this._confirmRuntimeDataSupplied(this.input);
+        const intensity = this._confirmRuntimeDataSupplied(this.intensity);
+
+        return new DesaturateBlockShaderBinding(this,input,intensity);
+    }
+}
+

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

@@ -0,0 +1,43 @@
+import type { ISerializedBlockV1, SmartFilter } from "smart-filters";
+import { DirectionalBlurBlock } from "./directionalBlurBlock.js";
+
+/**
+ * The definition of the extra data serialized for directional blur blocks.
+ */
+export interface ISerializedDirectionalBlurBlockV1 extends ISerializedBlockV1 {
+    /**
+     * The extra data of the block.
+     */
+    data: {
+        /**
+         * The horizontal width of the blur.
+         */
+        blurHorizontalWidth: number;
+
+        /**
+         * The vertical width of the blur.
+         */
+        blurVerticalWidth: number;
+
+        /**
+         * The blur texture ratio.
+         */
+        blurTextureRatio: number;
+    };
+}
+
+/**
+ * V1 Directional Blur Deserializer.
+ * @param smartFilter - The SmartFilter to deserialize the block into
+ * @param serializedBlock - The serialized block data
+ * @returns A deserialized DirectionalBlurBlock
+ */
+export function DirectionalBlurDeserializer(smartFilter: SmartFilter, serializedBlock: ISerializedDirectionalBlurBlockV1) {
+    const block = new DirectionalBlurBlock(smartFilter, serializedBlock.name);
+
+    // If data is missing, use the default value set by the block
+    block.blurHorizontalWidth = serializedBlock.data.blurHorizontalWidth ?? block.blurHorizontalWidth;
+    block.blurVerticalWidth = serializedBlock.data.blurVerticalWidth ?? block.blurVerticalWidth;
+    block.blurTextureRatio = serializedBlock.data.blurTextureRatio ?? block.blurTextureRatio;
+    return block;
+}

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

@@ -0,0 +1,30 @@
+import type { IBlockSerializerV1, BaseBlock } from "smart-filters";
+import type { DirectionalBlurBlock } from "./directionalBlurBlock.js";
+import { directionalBlurBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+
+/**
+ * The V1 serializer for a Directional Blur Block
+ */
+export const DirectionalBlurBlockSerializer: IBlockSerializerV1 = {
+    blockType: directionalBlurBlockType,
+    serialize: (block: BaseBlock) => {
+        if (block.getClassName() !== directionalBlurBlockType) {
+            throw new Error("Was asked to serialize an unrecognized block type");
+        }
+
+        const directionalBlurBlock = block as DirectionalBlurBlock;
+        return {
+            name: block.name,
+            uniqueId: block.uniqueId,
+            blockType: directionalBlurBlockType,
+            namespace: babylonDemoEffectsNamespace,
+            comments: block.comments,
+            data: {
+                blurTextureRatio: directionalBlurBlock.blurTextureRatio,
+                blurHorizontalWidth: directionalBlurBlock.blurHorizontalWidth,
+                blurVerticalWidth: directionalBlurBlock.blurVerticalWidth,
+            },
+        };
+    },
+};