@babylonjs/smart-filters-blocks 0.8.1

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

@@ -0,0 +1,138 @@
+import type { Effect } from "@babylonjs/core/Materials/effect";
+
+import { spritesheetBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+import { shaderProgram, uniforms } from "./spritesheetBlock.fragment.js";
+import {
+    DisableableShaderBinding,
+    type RuntimeData,
+    ConnectionPointType,
+    type IDisableableBlock,
+    DisableableShaderBlock,
+    type SmartFilter,
+    createStrongRef,
+    BlockDisableStrategy,
+} from "@babylonjs/smart-filters";
+
+/**
+ * The shader bindings for the Spritesheet block.
+ */
+export class SpritesheetShaderBinding extends DisableableShaderBinding {
+    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _time: RuntimeData<ConnectionPointType.Float>;
+    private readonly _rows: RuntimeData<ConnectionPointType.Float>;
+    private readonly _cols: RuntimeData<ConnectionPointType.Float>;
+    private readonly _frames: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the SpriteSheet block.
+     * @param parentBlock - The parent block
+     * @param inputTexture - The input texture
+     * @param time - The time passed since the start of the effect
+     * @param rows - The number of rows in the sprite sheet
+     * @param cols - The number of columns in the sprite sheet
+     * @param frames - The number of frames to show
+     */
+    constructor(
+        parentBlock: IDisableableBlock,
+        inputTexture: RuntimeData<ConnectionPointType.Texture>,
+        time: RuntimeData<ConnectionPointType.Float>,
+        rows: RuntimeData<ConnectionPointType.Float>,
+        cols: RuntimeData<ConnectionPointType.Float>,
+        frames: RuntimeData<ConnectionPointType.Float>
+    ) {
+        super(parentBlock);
+        this._inputTexture = inputTexture;
+        this._time = time;
+        this._rows = rows;
+        this._cols = cols;
+        this._frames = frames;
+    }
+
+    /**
+     * Binds all the required data to the shader when rendering.
+     * @param effect - defines the effect to bind the data to
+     */
+    public override bind(effect: Effect): void {
+        super.bind(effect);
+        effect.setTexture(this.getRemappedName(uniforms.input), this._inputTexture.value);
+        effect.setFloat(this.getRemappedName(uniforms.time), this._time.value);
+        effect.setFloat(this.getRemappedName(uniforms.rows), this._rows.value);
+        effect.setFloat(this.getRemappedName(uniforms.cols), this._cols.value);
+
+        // Apply default value for frame count if it was not provided
+        effect.setFloat(
+            this.getRemappedName(uniforms.frames),
+            this._frames.value > 0 ? this._frames.value : this._rows.value * this._cols.value
+        );
+    }
+}
+
+/**
+ * A block that animates a sprite sheet texture.
+ */
+export class SpritesheetBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = spritesheetBlockType;
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = babylonDemoEffectsNamespace;
+
+    /**
+     * The input texture connection point
+     */
+    public readonly input = this._registerInput("input", ConnectionPointType.Texture);
+
+    /**
+     * The time connection point to animate the effect.
+     */
+    public readonly time = this._registerOptionalInput("time", ConnectionPointType.Float, createStrongRef(0.0));
+
+    /**
+     * The number of rows in the sprite sheet, as a connection point.
+     */
+    public readonly rows = this._registerOptionalInput("rows", ConnectionPointType.Float, createStrongRef(1.0));
+
+    /**
+     * The number of columns in the sprite sheet, as a connection point.
+     */
+    public readonly columns = this._registerOptionalInput("columns", ConnectionPointType.Float, createStrongRef(1.0));
+
+    /**
+     * The number of frames to animate from the beginning, as a connection point.
+     * Defaults to rows * columns at runtime.
+     */
+    public readonly frames = this._registerOptionalInput("frames", ConnectionPointType.Float, createStrongRef(0.0));
+
+    /**
+     * The shader program (vertex and fragment code) to use to render the block
+     */
+    public static override ShaderCode = shaderProgram;
+
+    /**
+     * Instantiates a new Block.
+     * @param smartFilter - The smart filter this block belongs to
+     * @param name - The friendly name of the block
+     */
+    constructor(smartFilter: SmartFilter, name: string) {
+        super(smartFilter, name, false, BlockDisableStrategy.Manual);
+    }
+
+    /**
+     * Get the class instance that binds all the required data to the shader (effect) when rendering.
+     * @returns The class instance that binds the data to the effect
+     */
+    public getShaderBinding(): DisableableShaderBinding {
+        const input = this._confirmRuntimeDataSupplied(this.input);
+        const rows = this.rows.runtimeData;
+        const columns = this.columns.runtimeData;
+        const time = this.time.runtimeData;
+        const frames = this.frames.runtimeData;
+
+        return new SpritesheetShaderBinding(this, input, time, rows, columns, frames);
+    }
+}

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

@@ -0,0 +1,51 @@
+import { ConnectionPointType, type SerializedShaderBlockDefinition } from "@babylonjs/smart-filters";
+
+/**
+ * This is included to show how a serialized block definition can be loaded and used.
+ * This object could have been deserialized from a JSON file, for example.
+ */
+export const deserializedTintBlockDefinition: SerializedShaderBlockDefinition = {
+    format: "shaderBlockDefinition",
+    formatVersion: 1,
+    blockType: "TintBlock",
+    namespace: "Babylon.Demo.Effects",
+    shaderProgram: {
+        fragment: {
+            uniform: `
+                uniform sampler2D _input_; // main 
+                uniform vec3 _tint_;
+                uniform float _amount_;
+                `,
+            mainInputTexture: "_input_",
+            mainFunctionName: "_mainImage_",
+            functions: [
+                {
+                    name: "_mainImage_",
+                    code: `
+                        vec4 _mainImage_(vec2 vUV) {
+                            vec4 color = texture2D(_input_, vUV);
+                            vec3 tinted = mix(color.rgb, _tint_, _amount_);
+                            return vec4(tinted, color.a);
+                        }`,
+                },
+            ],
+        },
+    },
+    inputConnectionPoints: [
+        {
+            name: "input",
+            type: ConnectionPointType.Texture,
+        },
+        {
+            name: "tint",
+            type: ConnectionPointType.Color3,
+            defaultValue: { r: 1, g: 0, b: 0 },
+        },
+        {
+            name: "amount",
+            type: ConnectionPointType.Float,
+            defaultValue: 0.25,
+        },
+    ],
+    disableOptimization: false,
+};

package/src/blocks/babylon/demo/transitions/index.ts

@@ -0,0 +1 @@
+export * from "./wipeBlock.block.js";

package/src/blocks/babylon/demo/transitions/wipeBlock.block.glsl

@@ -0,0 +1,11 @@
+// { "smartFilterBlockType": "WipeBlock", "namespace": "Babylon.Demo.Transitions" }
+
+uniform sampler2D textureA;
+uniform sampler2D textureB;
+uniform float progress;
+
+vec4 wipe(vec2 vUV) { // main
+    vec4 colorA = texture2D(textureA, vUV);
+    vec4 colorB = texture2D(textureB, vUV);
+    return mix(colorB, colorA, step(progress, vUV.y));
+}

package/src/blocks/babylon/demo/transitions/wipeBlock.block.ts

@@ -0,0 +1,152 @@
+/* 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 "@babylonjs/core/Materials/effect";
+
+import {
+    ShaderBinding,
+    type RuntimeData,
+    ConnectionPointType,
+    type SmartFilter,
+    ShaderBlock,
+    type ShaderProgram,
+} from "@babylonjs/smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+const shaderProgram: ShaderProgram = {
+    vertex: undefined,
+    fragment: {
+        uniform: `
+            uniform sampler2D _textureA_;
+            uniform sampler2D _textureB_;
+            uniform float _progress_;`,
+        mainInputTexture: "",
+        mainFunctionName: "_wipe_",
+        functions: [
+            {
+                name: "_wipe_",
+                code: `
+                    vec4 _wipe_(vec2 vUV) { 
+                        vec4 colorA = texture2D(_textureA_, vUV);
+                        vec4 colorB = texture2D(_textureB_, vUV);
+                        return mix(colorB, colorA, step(_progress_, vUV.y));
+                    }
+                    
+                    `,
+                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 = {
+    textureA: "textureA",
+    textureB: "textureB",
+    progress: "progress",
+};
+
+/**
+ * The shader binding for the WipeBlock, used by the runtime
+ */
+class WipeBlockShaderBinding extends ShaderBinding {
+    private readonly _textureA: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _textureB: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _progress: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the block.
+     * @param textureA - The textureA runtime value
+     * @param textureB - The textureB runtime value
+     * @param progress - The progress runtime value
+     */
+    constructor(
+        textureA: RuntimeData<ConnectionPointType.Texture>,
+        textureB: RuntimeData<ConnectionPointType.Texture>,
+        progress: RuntimeData<ConnectionPointType.Float>
+    ) {
+        super();
+        this._textureA = textureA;
+        this._textureB = textureB;
+        this._progress = progress;
+    }
+
+    /**
+     * 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 {
+        effect.setTexture(this.getRemappedName(uniforms.textureA), this._textureA.value);
+        effect.setTexture(this.getRemappedName(uniforms.textureB), this._textureB.value);
+        effect.setFloat(this.getRemappedName(uniforms.progress), this._progress.value);
+    }
+}
+
+/**
+ * The implementation of the WipeBlock
+ */
+export class WipeBlock extends ShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "WipeBlock";
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = "Babylon.Demo.Transitions";
+
+    /**
+     * The textureA connection point.
+     */
+    public readonly textureA = this._registerInput(uniforms.textureA, ConnectionPointType.Texture);
+
+    /**
+     * The textureB connection point.
+     */
+    public readonly textureB = this._registerInput(uniforms.textureB, ConnectionPointType.Texture);
+
+    /**
+     * The progress connection point.
+     */
+    public readonly progress = this._registerInput(uniforms.progress, ConnectionPointType.Float);
+
+    /**
+     * The shader program (vertex and fragment code) to use to render the block
+     */
+    public static override ShaderCode = shaderProgram;
+
+    /**
+     * Instantiates a new WipeBlock.
+     * @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);
+    }
+
+    /**
+     * 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(): ShaderBinding {
+        const textureA = this._confirmRuntimeDataSupplied(this.textureA);
+        const textureB = this._confirmRuntimeDataSupplied(this.textureB);
+        const progress = this._confirmRuntimeDataSupplied(this.progress);
+
+        return new WipeBlockShaderBinding(textureA,textureB,progress);
+    }
+}
+

package/src/blocks/babylon/demo/utilities/index.ts

@@ -0,0 +1 @@
+export * from "./premultiplyAlphaBlock.block.js";

package/src/blocks/babylon/demo/utilities/premultiplyAlphaBlock.block.glsl

@@ -0,0 +1,14 @@
+/*  
+{ 
+    "smartFilterBlockType": "PremultiplyAlphaBlock", 
+    "namespace": "Babylon.Demo.Utilities", 
+    "blockDisableStrategy": "AutoSample"
+}
+*/
+
+uniform sampler2D input; // main
+
+vec4 premultiply(vec2 vUV) { // main
+    vec4 color = texture2D(input, vUV);
+    return vec4(color.rgb * color.a, color.a);
+}

package/src/blocks/babylon/demo/utilities/premultiplyAlphaBlock.block.ts

@@ -0,0 +1,129 @@
+/* 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 "@babylonjs/core/Materials/effect";
+
+import {
+    DisableableShaderBinding,
+    type RuntimeData,
+    ConnectionPointType,
+    type SmartFilter,
+    DisableableShaderBlock,
+    type ShaderProgram,
+    type IDisableableBlock,
+    BlockDisableStrategy} from "@babylonjs/smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+const shaderProgram: ShaderProgram = {
+    vertex: undefined,
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_; // main`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_premultiply_",
+        functions: [
+            {
+                name: "_premultiply_",
+                code: `
+                    vec4 _premultiply_(vec2 vUV) { 
+                        vec4 color = texture2D(_input_, vUV);
+                        return vec4(color.rgb * color.a, 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 PremultiplyAlphaBlock, used by the runtime
+ */
+class PremultiplyAlphaBlockShaderBinding 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 PremultiplyAlphaBlock
+ */
+export class PremultiplyAlphaBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "PremultiplyAlphaBlock";
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = "Babylon.Demo.Utilities";
+
+    /**
+     * 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 = shaderProgram;
+
+    /**
+     * Instantiates a new PremultiplyAlphaBlock.
+     * @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 PremultiplyAlphaBlockShaderBinding(this,input);
+    }
+}
+

package/src/blocks/blockNamespaces.ts

@@ -0,0 +1,4 @@
+export const babylonDemoEffectsNamespace = "Babylon.Demo.Effects";
+export const babylonDemoUtilitiesNamespace = "Babylon.Demo.Utilities";
+export const babylonDemoTransitionsNamespace = "Babylon.Demo.Transitions";
+export const inputsNamespace = "Inputs";

package/src/blocks/blockTypes.ts

@@ -0,0 +1,21 @@
+export const pixelateBlockType = "PixelateBlock";
+export const blackAndWhiteBlockType = "BlackAndWhiteBlock";
+export const exposureBlockType = "ExposureBlock";
+export const contrastBlockType = "ContrastBlock";
+export const desaturateBlockType = "DesaturateBlock";
+export const posterizeBlockType = "PosterizeBlock";
+export const kaleidoscopeBlockType = "KaleidoscopeBlock";
+export const greenScreenBlockType = "GreenScreenBlock";
+export const glassBlockType = "GlassBlock";
+export const frameBlockType = "FrameBlock";
+export const blurBlockType = "BlurBlock";
+export const directionalBlurBlockType = "DirectionalBlurBlock";
+export const compositionBlockType = "CompositionBlock";
+export const glitchBlockType = "GlitchBlock";
+export const tileBlockType = "TileBlock";
+export const wipeBlockType = "WipeBlock";
+export const maskBlockType = "MaskBlock";
+export const particleBlockType = "ParticleBlock";
+export const spritesheetBlockType = "SpritesheetBlock";
+export const tintBlockType = "TintBlock";
+export const premultiplyAlphaBlockType = "PremultiplyAlphaBlock";

package/src/blocks/index.ts

@@ -0,0 +1,5 @@
+export * from "./babylon/demo/effects/index.js";
+export * from "./babylon/demo/transitions/index.js";
+export * from "./babylon/demo/utilities/index.js";
+export * from "./blockTypes.js";
+export * from "./blockNamespaces.js";

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./registration/index.js";
+export * from "./blocks/index.js";

package/src/registration/IBlockRegistration.ts

@@ -0,0 +1,43 @@
+import type { ThinEngine } from "@babylonjs/core/Engines/thinEngine";
+import type { SmartFilter, SmartFilterDeserializer, ISerializedBlockV1, BaseBlock } from "@babylonjs/smart-filters";
+
+/**
+ * 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/registration/blockSerializers.ts

@@ -0,0 +1,52 @@
+import type { IBlockSerializerV1 } from "@babylonjs/smart-filters";
+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 {
+    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,
+];