@babylonjs/smart-filters-blocks 1.0.13 → 8.18.0

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

@@ -8,7 +8,7 @@
 // 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 type { Effect } from "core/Materials/effect.js";
 
 import {
     DisableableShaderBinding,
@@ -18,12 +18,12 @@ import {
     DisableableShaderBlock,
     type ShaderProgram,
     type IDisableableBlock,
-    BlockDisableStrategy} from "@babylonjs/smart-filters";
+    BlockDisableStrategy} from "smart-filters";
 
 /**
  * The shader program for the block.
  */
-const shaderProgram: ShaderProgram = {
+const BlockShaderProgram: ShaderProgram = {
     vertex: undefined,
     fragment: {
         uniform: `
@@ -58,13 +58,14 @@ const shaderProgram: ShaderProgram = {
  * The uniform names for this shader, to be used in the shader binding so
  * that the names are always in sync.
  */
-const uniforms = {
+const Uniforms = {
     input: "input",
     background: "background",
     reference: "reference",
     distance: "distance",
 };
 
+
 /**
  * The shader binding for the GreenScreenBlock, used by the runtime
  */
@@ -102,10 +103,10 @@ class GreenScreenBlockShaderBinding extends DisableableShaderBinding {
      */
     public override bind(effect: Effect): void {
         super.bind(effect);
-        effect.setTexture(this.getRemappedName(uniforms.input), this._input.value);
-        effect.setTexture(this.getRemappedName(uniforms.background), this._background.value);
-        effect.setColor3(this.getRemappedName(uniforms.reference), this._reference.value);
-        effect.setFloat(this.getRemappedName(uniforms.distance), this._distance.value);
+        effect.setTexture(this.getRemappedName(Uniforms.input), this._input.value);
+        effect.setTexture(this.getRemappedName(Uniforms.background), this._background.value);
+        effect.setColor3(this.getRemappedName(Uniforms.reference), this._reference.value);
+        effect.setFloat(this.getRemappedName(Uniforms.distance), this._distance.value);
     }
 }
 
@@ -126,27 +127,27 @@ export class GreenScreenBlock extends DisableableShaderBlock {
     /**
      * The input connection point.
      */
-    public readonly input = this._registerInput(uniforms.input, ConnectionPointType.Texture);
+    public readonly input = this._registerInput(Uniforms.input, ConnectionPointType.Texture);
 
     /**
      * The background connection point.
      */
-    public readonly background = this._registerInput(uniforms.background, ConnectionPointType.Texture);
+    public readonly background = this._registerInput(Uniforms.background, ConnectionPointType.Texture);
 
     /**
      * The reference connection point.
      */
-    public readonly reference = this._registerInput(uniforms.reference, ConnectionPointType.Color3);
+    public readonly reference = this._registerInput(Uniforms.reference, ConnectionPointType.Color3);
 
     /**
      * The distance connection point.
      */
-    public readonly distance = this._registerInput(uniforms.distance, ConnectionPointType.Float);
+    public readonly distance = this._registerInput(Uniforms.distance, ConnectionPointType.Float);
 
     /**
      * The shader program (vertex and fragment code) to use to render the block
      */
-    public static override ShaderCode = shaderProgram;
+    public static override ShaderCode = BlockShaderProgram;
 
     /**
      * Instantiates a new GreenScreenBlock.

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

@@ -1,14 +1,14 @@
-export * from "./blackAndWhiteBlock.block.js";
-export * from "./blurBlock.js";
-export * from "./compositionBlock.js";
-export * from "./contrastBlock.block.js";
-export * from "./desaturateBlock.block.js";
-export * from "./directionalBlurBlock.js";
-export * from "./exposureBlock.block.js";
-export * from "./greenScreenBlock.block.js";
-export * from "./kaleidoscopeBlock.js";
-export * from "./maskBlock.block.js";
-export * from "./pixelateBlock.block.js";
-export * from "./posterizeBlock.block.js";
-export * from "./spritesheetBlock.js";
-export * from "./tintBlock.js";
+export * from "./blackAndWhiteBlock.block.js";
+export * from "./blurBlock.js";
+export * from "./compositionBlock.js";
+export * from "./contrastBlock.block.js";
+export * from "./desaturateBlock.block.js";
+export * from "./directionalBlurBlock.js";
+export * from "./exposureBlock.block.js";
+export * from "./greenScreenBlock.block.js";
+export * from "./kaleidoscopeBlock.js";
+export * from "./maskBlock.block.js";
+export * from "./pixelateBlock.block.js";
+export * from "./posterizeBlock.block.js";
+export * from "./spritesheetBlock.js";
+export * from "./tintBlock.js";

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

@@ -1,192 +1,188 @@
-import type { Effect } from "@babylonjs/core/Materials/effect";
-
-import {
-    type ShaderProgram,
-    DisableableShaderBinding,
-    type RuntimeData,
-    ConnectionPointType,
-    type IDisableableBlock,
-    DisableableShaderBlock,
-    type SmartFilter,
-    BlockDisableStrategy,
-} from "@babylonjs/smart-filters";
-
-import { kaleidoscopeBlockType } from "../../../blockTypes.js";
-import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
-
-/**
- * This block uses a custom vertex shader, so it defines the ShaderProgram inline
- */
-const shaderProgram: ShaderProgram = {
-    vertex: `
-        // Attributes
-        attribute vec2 position;
-        
-        // Output
-        varying vec2 vUV;
-        
-        void main(void) {
-            vUV = position;
-            gl_Position = vec4(position, 0.0, 1.0);
-        }
-    `,
-
-    fragment: {
-        uniform: `
-            uniform sampler2D _input_;
-            uniform float _time_;
-            uniform bool _disabled_;
-            `,
-
-        const: `
-            const float _width_ = 200.;
-            const float _height_ = 300.;
-            const vec2 _imageRatio_ =  vec2(700. / _width_, 1024. / _height_);
-            const vec2 _imageRelativeSize_ = 1. / _imageRatio_;
-            const float _halfDiag_ = sqrt(_imageRelativeSize_.x * _imageRelativeSize_.x + _imageRelativeSize_.y * _imageRelativeSize_.y) * 0.5;
-            
-            const float _radius_ = 0.9;
-            const float _radius2_ = 0.4;
-            
-            const float _segments_ = 6.;
-            const float _segmentArc_ = (2. * 3.1415926535897932384626433832795 / _segments_);
-            `,
-
-        mainFunctionName: "_kaleidoscope_",
-
-        mainInputTexture: "_input_",
-
-        functions: [
-            {
-                name: "_kaleidoscope_",
-                code: `
-                vec4 _kaleidoscope_(vec2 vUV) {
-                    if (_disabled_) return texture2D(_input_, vUV);
-                    
-                    float distanceToCircle = abs(length(vUV) - _radius_);
-                    vec4 result = vec4(0., 0., 0., 0.);
-                
-                    if (distanceToCircle < _halfDiag_ * 10000.) {
-                        float pointTheta = atan(vUV.y, vUV.x);
-                        pointTheta += _time_;
-                        for (float i = -1.; i < 2.; i += 1.) {
-                            float chunk = floor(pointTheta / _segmentArc_) + i;
-                            float chunkStart = -_time_ + chunk * _segmentArc_ + _segmentArc_ * 0.5;
-                            vec2 chunkStartCenter = vec2(cos(chunkStart), sin(chunkStart)) * _radius_;
-                            vec2 chunkStartPoint = vUV - chunkStartCenter;
-                            chunkStartPoint *= _imageRatio_;
-                            chunkStartPoint *= vec2(0.5, 0.5);
-                            chunkStartPoint += vec2(0.5, 0.5);
-                
-                            if (chunkStartPoint.x > 0. && chunkStartPoint.x < 1. && chunkStartPoint.y > 0. && chunkStartPoint.y < 1.) {
-                                result = texture2D(_input_, chunkStartPoint);
-                            }
-                        }
-                
-                        for (float i = -1.; i < 2.; i += 1.) {
-                            float chunk = floor(pointTheta / _segmentArc_) + i;
-                            float chunkStart = -_time_ + chunk * _segmentArc_ + _segmentArc_ * 0.5;
-                            vec2 chunkStartCenter = vec2(cos(chunkStart), sin(chunkStart)) * _radius2_;
-                            vec2 chunkStartPoint = vUV - chunkStartCenter;
-                            chunkStartPoint *= _imageRatio_;
-                            chunkStartPoint *= vec2(0.5, 0.5);
-                            chunkStartPoint += vec2(0.5, 0.5);
-                
-                            if (chunkStartPoint.x > 0. && chunkStartPoint.x < 1. && chunkStartPoint.y > 0. && chunkStartPoint.y < 1.) {
-                                vec4 top = texture2D(_input_, chunkStartPoint);
-                                result = mix(result, top, (result.a <= 0.) ? 1. : top.a);
-                            }
-                        }
-                    }
-                
-                    return result;
-                }
-            `,
-            },
-        ],
-    },
-};
-
-/**
- * The shader bindings for the Kaleidoscope block.
- */
-export class KaleidoscopeShaderBinding extends DisableableShaderBinding {
-    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
-    private readonly _time: RuntimeData<ConnectionPointType.Float>;
-
-    /**
-     * Creates a new shader binding instance for the Kaleidoscope block.
-     * @param parentBlock - The parent block
-     * @param inputTexture - the input texture
-     * @param time - the time
-     */
-    constructor(
-        parentBlock: IDisableableBlock,
-        inputTexture: RuntimeData<ConnectionPointType.Texture>,
-        time: RuntimeData<ConnectionPointType.Float>
-    ) {
-        super(parentBlock);
-        this._inputTexture = inputTexture;
-        this._time = time;
-    }
-
-    /**
-     * 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("input"), this._inputTexture.value);
-        effect.setFloat(this.getRemappedName("time"), this._time.value);
-    }
-}
-
-/**
- * A block performing a Kaleidoscope looking like effect.
- */
-export class KaleidoscopeBlock extends DisableableShaderBlock {
-    /**
-     * The class name of the block.
-     */
-    public static override ClassName = kaleidoscopeBlockType;
-
-    /**
-     * 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.
-     */
-    public readonly time = this._registerInput("time", ConnectionPointType.Float);
-
-    /**
-     * 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 time = this._confirmRuntimeDataSupplied(this.time);
-
-        return new KaleidoscopeShaderBinding(this, input, time);
-    }
-}
+import type { Effect } from "core/Materials/effect.js";
+
+import {
+    type ShaderProgram,
+    DisableableShaderBinding,
+    type RuntimeData,
+    ConnectionPointType,
+    type IDisableableBlock,
+    DisableableShaderBlock,
+    type SmartFilter,
+    BlockDisableStrategy,
+} from "smart-filters";
+
+import { kaleidoscopeBlockType } from "../../../blockTypes.js";
+import { babylonDemoEffectsNamespace } from "../../../blockNamespaces.js";
+
+/**
+ * This block uses a custom vertex shader, so it defines the ShaderProgram inline
+ */
+const ShaderProgram: ShaderProgram = {
+    vertex: `
+        // Attributes
+        attribute vec2 position;
+
+        // Output
+        varying vec2 vUV;
+
+        void main(void) {
+            vUV = position;
+            gl_Position = vec4(position, 0.0, 1.0);
+        }
+    `,
+
+    fragment: {
+        uniform: `
+            uniform sampler2D _input_;
+            uniform float _time_;
+            uniform bool _disabled_;
+            `,
+
+        const: `
+            const float _width_ = 200.;
+            const float _height_ = 300.;
+            const vec2 _imageRatio_ =  vec2(700. / _width_, 1024. / _height_);
+            const vec2 _imageRelativeSize_ = 1. / _imageRatio_;
+            const float _halfDiag_ = sqrt(_imageRelativeSize_.x * _imageRelativeSize_.x + _imageRelativeSize_.y * _imageRelativeSize_.y) * 0.5;
+
+            const float _radius_ = 0.9;
+            const float _radius2_ = 0.4;
+
+            const float _segments_ = 6.;
+            const float _segmentArc_ = (2. * 3.1415926535897932384626433832795 / _segments_);
+            `,
+
+        mainFunctionName: "_kaleidoscope_",
+
+        mainInputTexture: "_input_",
+
+        functions: [
+            {
+                name: "_kaleidoscope_",
+                code: `
+                vec4 _kaleidoscope_(vec2 vUV) {
+                    if (_disabled_) return texture2D(_input_, vUV);
+
+                    float distanceToCircle = abs(length(vUV) - _radius_);
+                    vec4 result = vec4(0., 0., 0., 0.);
+
+                    if (distanceToCircle < _halfDiag_ * 10000.) {
+                        float pointTheta = atan(vUV.y, vUV.x);
+                        pointTheta += _time_;
+                        for (float i = -1.; i < 2.; i += 1.) {
+                            float chunk = floor(pointTheta / _segmentArc_) + i;
+                            float chunkStart = -_time_ + chunk * _segmentArc_ + _segmentArc_ * 0.5;
+                            vec2 chunkStartCenter = vec2(cos(chunkStart), sin(chunkStart)) * _radius_;
+                            vec2 chunkStartPoint = vUV - chunkStartCenter;
+                            chunkStartPoint *= _imageRatio_;
+                            chunkStartPoint *= vec2(0.5, 0.5);
+                            chunkStartPoint += vec2(0.5, 0.5);
+
+                            if (chunkStartPoint.x > 0. && chunkStartPoint.x < 1. && chunkStartPoint.y > 0. && chunkStartPoint.y < 1.) {
+                                result = texture2D(_input_, chunkStartPoint);
+                            }
+                        }
+
+                        for (float i = -1.; i < 2.; i += 1.) {
+                            float chunk = floor(pointTheta / _segmentArc_) + i;
+                            float chunkStart = -_time_ + chunk * _segmentArc_ + _segmentArc_ * 0.5;
+                            vec2 chunkStartCenter = vec2(cos(chunkStart), sin(chunkStart)) * _radius2_;
+                            vec2 chunkStartPoint = vUV - chunkStartCenter;
+                            chunkStartPoint *= _imageRatio_;
+                            chunkStartPoint *= vec2(0.5, 0.5);
+                            chunkStartPoint += vec2(0.5, 0.5);
+
+                            if (chunkStartPoint.x > 0. && chunkStartPoint.x < 1. && chunkStartPoint.y > 0. && chunkStartPoint.y < 1.) {
+                                vec4 top = texture2D(_input_, chunkStartPoint);
+                                result = mix(result, top, (result.a <= 0.) ? 1. : top.a);
+                            }
+                        }
+                    }
+
+                    return result;
+                }
+            `,
+            },
+        ],
+    },
+};
+
+/**
+ * The shader bindings for the Kaleidoscope block.
+ */
+export class KaleidoscopeShaderBinding extends DisableableShaderBinding {
+    private readonly _inputTexture: RuntimeData<ConnectionPointType.Texture>;
+    private readonly _time: RuntimeData<ConnectionPointType.Float>;
+
+    /**
+     * Creates a new shader binding instance for the Kaleidoscope block.
+     * @param parentBlock - The parent block
+     * @param inputTexture - the input texture
+     * @param time - the time
+     */
+    constructor(parentBlock: IDisableableBlock, inputTexture: RuntimeData<ConnectionPointType.Texture>, time: RuntimeData<ConnectionPointType.Float>) {
+        super(parentBlock);
+        this._inputTexture = inputTexture;
+        this._time = time;
+    }
+
+    /**
+     * 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("input"), this._inputTexture.value);
+        effect.setFloat(this.getRemappedName("time"), this._time.value);
+    }
+}
+
+/**
+ * A block performing a Kaleidoscope looking like effect.
+ */
+export class KaleidoscopeBlock extends DisableableShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = kaleidoscopeBlockType;
+
+    /**
+     * 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.
+     */
+    public readonly time = this._registerInput("time", ConnectionPointType.Float);
+
+    /**
+     * 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 time = this._confirmRuntimeDataSupplied(this.time);
+
+        return new KaleidoscopeShaderBinding(this, input, time);
+    }
+}

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

@@ -8,7 +8,7 @@
 // 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 type { Effect } from "core/Materials/effect.js";
 
 import {
     DisableableShaderBinding,
@@ -18,12 +18,12 @@ import {
     DisableableShaderBlock,
     type ShaderProgram,
     type IDisableableBlock,
-    BlockDisableStrategy} from "@babylonjs/smart-filters";
+    BlockDisableStrategy} from "smart-filters";
 
 /**
  * The shader program for the block.
  */
-const shaderProgram: ShaderProgram = {
+const BlockShaderProgram: ShaderProgram = {
     vertex: undefined,
     fragment: {
         uniform: `
@@ -53,11 +53,12 @@ const shaderProgram: ShaderProgram = {
  * The uniform names for this shader, to be used in the shader binding so
  * that the names are always in sync.
  */
-const uniforms = {
+const Uniforms = {
     input: "input",
     mask: "mask",
 };
 
+
 /**
  * The shader binding for the MaskBlock, used by the runtime
  */
@@ -87,8 +88,8 @@ class MaskBlockShaderBinding extends DisableableShaderBinding {
      */
     public override bind(effect: Effect): void {
         super.bind(effect);
-        effect.setTexture(this.getRemappedName(uniforms.input), this._input.value);
-        effect.setTexture(this.getRemappedName(uniforms.mask), this._mask.value);
+        effect.setTexture(this.getRemappedName(Uniforms.input), this._input.value);
+        effect.setTexture(this.getRemappedName(Uniforms.mask), this._mask.value);
     }
 }
 
@@ -109,17 +110,17 @@ export class MaskBlock extends DisableableShaderBlock {
     /**
      * The input connection point.
      */
-    public readonly input = this._registerInput(uniforms.input, ConnectionPointType.Texture);
+    public readonly input = this._registerInput(Uniforms.input, ConnectionPointType.Texture);
 
     /**
      * The mask connection point.
      */
-    public readonly mask = this._registerInput(uniforms.mask, ConnectionPointType.Texture);
+    public readonly mask = this._registerInput(Uniforms.mask, ConnectionPointType.Texture);
 
     /**
      * The shader program (vertex and fragment code) to use to render the block
      */
-    public static override ShaderCode = shaderProgram;
+    public static override ShaderCode = BlockShaderProgram;
 
     /**
      * Instantiates a new MaskBlock.

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

@@ -8,7 +8,7 @@
 // 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 type { Effect } from "core/Materials/effect.js";
 
 import {
     ShaderBinding,
@@ -17,12 +17,12 @@ import {
     type SmartFilter,
     ShaderBlock,
     type ShaderProgram,
-    createStrongRef} from "@babylonjs/smart-filters";
+    createStrongRef} from "smart-filters";
 
 /**
  * The shader program for the block.
  */
-const shaderProgram: ShaderProgram = {
+const BlockShaderProgram: ShaderProgram = {
     vertex: undefined,
     fragment: {
         uniform: `
@@ -59,13 +59,14 @@ const shaderProgram: ShaderProgram = {
  * The uniform names for this shader, to be used in the shader binding so
  * that the names are always in sync.
  */
-const uniforms = {
+const Uniforms = {
     input: "input",
     intensity: "intensity",
     disabled: "disabled",
     aspect: "aspect",
 };
 
+
 /**
  * The shader binding for the PixelateBlock, used by the runtime
  */
@@ -98,10 +99,10 @@ class PixelateBlockShaderBinding extends ShaderBinding {
      * @param height - defines the height of the output
      */
     public override bind(effect: Effect, width: number, height: number): void {
-        effect.setTexture(this.getRemappedName(uniforms.input), this._input.value);
-        effect.setFloat(this.getRemappedName(uniforms.intensity), this._intensity.value);
-        effect.setBool(this.getRemappedName(uniforms.disabled), this._disabled.value);
-        effect.setFloat2(this.getRemappedName(uniforms.aspect), width / height, height / width);
+        effect.setTexture(this.getRemappedName(Uniforms.input), this._input.value);
+        effect.setFloat(this.getRemappedName(Uniforms.intensity), this._intensity.value);
+        effect.setBool(this.getRemappedName(Uniforms.disabled), this._disabled.value);
+        effect.setFloat2(this.getRemappedName(Uniforms.aspect), width / height, height / width);
     }
 }
 
@@ -122,7 +123,7 @@ export class PixelateBlock extends ShaderBlock {
     /**
      * The input connection point.
      */
-    public readonly input = this._registerInput(uniforms.input, ConnectionPointType.Texture);
+    public readonly input = this._registerInput(Uniforms.input, ConnectionPointType.Texture);
 
     /**
     /**
@@ -147,7 +148,7 @@ export class PixelateBlock extends ShaderBlock {
     /**
      * The shader program (vertex and fragment code) to use to render the block
      */
-    public static override ShaderCode = shaderProgram;
+    public static override ShaderCode = BlockShaderProgram;
 
     /**
      * Instantiates a new PixelateBlock.