@onerjs/smart-filters-blocks 8.25.0

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

@@ -0,0 +1,156 @@
+/* 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_;`,
+        const: `            const float _posterizePower_ = 6.0;
+            const float _minLevel_ = 2.0;
+            const float _maxLevel_ = 256.0;`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_posterize_",
+        functions: [
+            {
+                name: "_posterize_",
+                code: `
+                    vec4 _posterize_(vec2 vUV) { 
+                        vec4 color = texture2D(_input_, vUV);
+                    
+                        float posterizeStrength = mix(_minLevel_, _maxLevel_, pow(1. - _intensity_, _posterizePower_));
+                        vec3 _posterize_ = vec3(posterizeStrength);
+                        color.rgb = floor(color.rgb / (1.0 / _posterize_)) * (1.0 / _posterize_);
+                    
+                        return color;
+                    }
+                    `,
+                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 PosterizeBlock, used by the runtime
+ */
+class PosterizeBlockShaderBinding 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 PosterizeBlock
+ */
+export class PosterizeBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "PosterizeBlock";
+
+    /**
+     * 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 PosterizeBlock.
+     * @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 PosterizeBlockShaderBinding(this,input,intensity);
+    }
+}
+

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

@@ -0,0 +1,26 @@
+uniform sampler2D input; // main
+uniform float time;
+uniform float rows;
+uniform float cols;
+uniform float frames;
+uniform bool disabled;
+
+vec4 mainImage(vec2 vUV) { // main
+    if (!disabled) {
+        float invRows = 1.0 / rows;
+        float invCols = 1.0 / cols;
+
+        // Get offset of frame 
+        float frame = mod(floor(time), frames);
+        float row = (rows - 1.0) - floor(frame * invCols); // Reverse row direction b/c UVs start from bottom
+        float col = mod(frame, cols);
+
+        // Add offset, then scale UV down to frame size
+        vUV = vec2(
+            (vUV.x + col) * invCols,
+            (vUV.y + row) * invRows
+        );
+    }
+
+    return texture2D(input, vUV);
+}

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

@@ -0,0 +1,63 @@
+import type { ShaderProgram } from "smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+const BlockShaderProgram: ShaderProgram = {
+    vertex: undefined,
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_; // main
+            uniform float _time_;
+            uniform float _rows_;
+            uniform float _cols_;
+            uniform float _frames_;
+            uniform bool _disabled_;`,
+        mainInputTexture: "_input_",
+        mainFunctionName: "_mainImage_",
+        functions: [
+            {
+                name: "_mainImage_",
+                code: `
+                    vec4 _mainImage_(vec2 vUV) { 
+                        if (!_disabled_) {
+                            float invRows = 1.0 / _rows_;
+                            float invCols = 1.0 / _cols_;
+                    
+                            // Get offset of frame 
+                            float frame = mod(floor(_time_), _frames_);
+                            float row = (_rows_ - 1.0) - floor(frame * invCols); // Reverse row direction b/c UVs start from bottom
+                            float col = mod(frame, _cols_);
+                    
+                            // Add offset, then scale UV down to frame size
+                            vUV = vec2(
+                                (vUV.x + col) * invCols,
+                                (vUV.y + row) * invRows
+                            );
+                        }
+                    
+                        return texture2D(_input_, vUV);
+                    }
+                    `,
+                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",
+    time: "time",
+    rows: "rows",
+    cols: "cols",
+    frames: "frames",
+    disabled: "disabled",
+};
+
+export { BlockShaderProgram, Uniforms };
+// Back compat for when camelCase was used
+export { BlockShaderProgram as shaderProgram, Uniforms as uniforms };

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

@@ -0,0 +1,135 @@
+import type { Effect } from "core/Materials/effect.js";
+
+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 "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 "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 "core/Materials/effect.js";
+
+import {
+    ShaderBinding,
+    type RuntimeData,
+    ConnectionPointType,
+    type SmartFilter,
+    ShaderBlock,
+    type ShaderProgram,
+} from "smart-filters";
+
+/**
+ * The shader program for the block.
+ */
+const BlockShaderProgram: 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 = BlockShaderProgram;
+
+    /**
+     * 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);
+}