@babylonjs/smart-filters 1.0.12 → 8.18.0

package/src/utils/buildTools/watchShaders.ts

@@ -1,42 +1,44 @@
-/* eslint-disable no-console */
-/**
- * Watches all .glsl files under <shaderPath> and rebuilds them when changed.
- * @param shaderPath - The path to the shaders to watch
- * @param importPath - The path to import the converted shaders
- * @example node watchShaders.js <shaderPath> <importPath>
- */
-
-import { watch } from "chokidar";
-import { extname } from "path";
-import { convertShader } from "./convertShaders.js";
-
-const externalArguments = process.argv.slice(2);
-if (externalArguments.length >= 2 && externalArguments[0] && externalArguments[1]) {
-    const shaderPath = externalArguments[0];
-    const importPath = externalArguments[1];
-
-    watch(shaderPath).on("all", (event, file) => {
-        // Only process file changes and added files
-        if (event !== "change" && event !== "add") {
-            return;
-        }
-
-        // Only process .glsl files
-        if (extname(file) !== ".glsl") {
-            return;
-        }
-
-        console.log(`Change detected. Starting conversion...`);
-
-        // Wrap in try-catch to prevent the watcher from crashing
-        // if the new shader changes are invalid
-        try {
-            convertShader(file, importPath);
-            console.log(`Successfully updated shader ${file}`);
-        } catch (error) {
-            console.error(`Failed to convert shader ${file}: ${error}`);
-        }
-
-        console.log(`Watching for changes in ${shaderPath}...`);
-    });
-}
+/* eslint-disable no-console */
+/**
+ * Watches all .glsl files under <shaderPath> and rebuilds them when changed.
+ * @param shaderPath - The path to the shaders to watch
+ * @param smartFiltersCorePath - The path to import the Smart Filters core from
+ * @param babylonCorePath - The path to import the Babylon core from (optional)
+ * @example node watchShaders.js <shaderPath> @babylonjs/smart-filters
+ */
+
+import { watch } from "chokidar";
+import { extname } from "path";
+import { ConvertShader } from "./convertShaders.js";
+
+const ExternalArguments = process.argv.slice(2);
+if (ExternalArguments.length >= 2 && ExternalArguments[0] && ExternalArguments[1]) {
+    const shaderPath = ExternalArguments[0];
+    const smartFiltersCorePath = ExternalArguments[1];
+    const babylonCorePath = ExternalArguments[2];
+
+    watch(shaderPath).on("all", (event, file) => {
+        // Only process file changes and added files
+        if (event !== "change" && event !== "add") {
+            return;
+        }
+
+        // Only process .glsl files
+        if (extname(file) !== ".glsl") {
+            return;
+        }
+
+        console.log(`Change detected. Starting conversion...`);
+
+        // Wrap in try-catch to prevent the watcher from crashing
+        // if the new shader changes are invalid
+        try {
+            ConvertShader(file, smartFiltersCorePath, babylonCorePath);
+            console.log(`Successfully updated shader ${file}`);
+        } catch (error) {
+            console.error(`Failed to convert shader ${file}: ${error}`);
+        }
+
+        console.log(`Watching for changes in ${shaderPath}...`);
+    });
+}

package/src/utils/index.ts

@@ -1,2 +1,4 @@
-export * from "./textureLoaders.js";
-export { type ShaderProgram } from "./shaderCodeUtils.js";
+export * from "./textureLoaders.js";
+// Back compat for when camelCase was used
+export { CreateImageTexture as createImageTexture } from "./textureLoaders.js";
+export { type ShaderProgram } from "./shaderCodeUtils.js";

package/src/utils/renderTargetUtils.ts

@@ -1,35 +1,30 @@
-import { createCommand } from "../command/command.js";
-import type { BaseBlock } from "../blockFoundation/baseBlock.js";
-import type { ShaderRuntime } from "../runtime/shaderRuntime";
-import type { InternalSmartFilterRuntime } from "../runtime/smartFilterRuntime";
-import type { OutputBlock } from "../blockFoundation/outputBlock.js";
-
-/**
- * Registers the final command of the command queue - the one that draws to either the canvas or
- * renderTargetTexture.
- * @param outputBlock - The output block.
- * @param runtime - The smart filter runtime to use.
- * @param commandOwner - The owner of the command.
- * @param shaderBlockRuntime - The shader block runtime to use.
- */
-export function registerFinalRenderCommand(
-    outputBlock: OutputBlock,
-    runtime: InternalSmartFilterRuntime,
-    commandOwner: BaseBlock,
-    shaderBlockRuntime: ShaderRuntime
-): void {
-    const commandOwnerBlockType = commandOwner.blockType;
-    if (outputBlock.renderTargetWrapper) {
-        runtime.registerCommand(
-            createCommand(`${commandOwnerBlockType}.renderToFinalTexture`, commandOwner, () => {
-                shaderBlockRuntime.renderToTargetWrapper(outputBlock);
-            })
-        );
-    } else {
-        runtime.registerCommand(
-            createCommand(`${commandOwnerBlockType}.renderToCanvas`, commandOwner, () => {
-                shaderBlockRuntime.renderToCanvas();
-            })
-        );
-    }
-}
+import { CreateCommand } from "../command/command.js";
+import type { BaseBlock } from "../blockFoundation/baseBlock.js";
+import type { ShaderRuntime } from "../runtime/shaderRuntime.js";
+import type { InternalSmartFilterRuntime } from "../runtime/smartFilterRuntime.js";
+import type { OutputBlock } from "../blockFoundation/outputBlock.js";
+
+/**
+ * Registers the final command of the command queue - the one that draws to either the canvas or
+ * renderTargetTexture.
+ * @param outputBlock - The output block.
+ * @param runtime - The smart filter runtime to use.
+ * @param commandOwner - The owner of the command.
+ * @param shaderBlockRuntime - The shader block runtime to use.
+ */
+export function RegisterFinalRenderCommand(outputBlock: OutputBlock, runtime: InternalSmartFilterRuntime, commandOwner: BaseBlock, shaderBlockRuntime: ShaderRuntime): void {
+    const commandOwnerBlockType = commandOwner.blockType;
+    if (outputBlock.renderTargetWrapper) {
+        runtime.registerCommand(
+            CreateCommand(`${commandOwnerBlockType}.renderToFinalTexture`, commandOwner, () => {
+                shaderBlockRuntime.renderToTargetWrapper(outputBlock);
+            })
+        );
+    } else {
+        runtime.registerCommand(
+            CreateCommand(`${commandOwnerBlockType}.renderToCanvas`, commandOwner, () => {
+                shaderBlockRuntime.renderToCanvas();
+            })
+        );
+    }
+}

package/src/utils/shaderCodeUtils.ts

@@ -1,207 +1,192 @@
-import type { Effect } from "@babylonjs/core/Materials/effect";
-import type { ShaderCode } from "./buildTools/shaderCode.types";
-
-/**
- * The shader code decorator.
- * Used to decorate the names of uniform, function and const variables for easier parsing.
- */
-export const decorateChar = "_";
-
-/**
- * Describes a shader program.
- */
-export type ShaderProgram = {
-    /**
-     * The vertex shader code.
-     */
-    vertex?: string | undefined;
-
-    /**
-     * The fragment shader code.
-     */
-    fragment: ShaderCode;
-};
-
-/**
- * The list of options required to create a shader block.
- * It mainly contains the shader code to execute and its associated parameters.
- */
-export type ShaderCreationOptions = {
-    /**
-     * A friendly name for the shader visible in Spector or in logs.
-     */
-    name: string;
-    /**
-     * Fragment shader source code.
-     */
-    fragmentShader: string;
-    /**
-     * Vertex shader source code.
-     */
-    vertexShader?: string;
-    /**
-     * Attributes to use in the shader
-     */
-    attributeNames?: Array<string>;
-    /**
-     * Uniforms to use in the shader
-     */
-    uniformNames?: Array<string>;
-    /**
-     * Texture sampler names to use in the shader
-     */
-    samplerNames?: Array<string>;
-    /**
-     * Defines to use in the shader
-     */
-    defines?: Array<string>;
-    /**
-     * Callback when the effect is compiled
-     */
-    onCompiled?: (effect: Effect) => void;
-};
-
-export const AutoDisableMainInputColorName = "autoMainInputColor";
-export const DisableUniform = "disabled";
-
-/**
- * Injects the disable uniform and adds a check for it at the beginning of the main function
- * @param shaderProgram - The shader program to inject the disable feature into
- */
-export function injectAutoSampleDisableCode(shaderProgram: ShaderProgram) {
-    const shaderFragment = shaderProgram.fragment;
-
-    // Inject the disable uniform
-    shaderFragment.uniform += `\nuniform bool ${decorateSymbol(DisableUniform)};`;
-
-    // Find the main function
-    const mainFunction = shaderFragment.functions.find((f) => f.name === shaderFragment.mainFunctionName);
-    if (!mainFunction) {
-        throw new Error(
-            `Main function not found when trying to inject auto disable into ${shaderFragment.mainFunctionName}`
-        );
-    }
-
-    // Ensure the shader has a main input texture
-    if (!shaderFragment.mainInputTexture) {
-        throw new Error(
-            `Main input texture not found when trying to inject auto disable into ${shaderFragment.mainFunctionName}`
-        );
-    }
-
-    // Inject the code
-    const autoDisableVariableName = decorateSymbol(AutoDisableMainInputColorName);
-    mainFunction.code = mainFunction.code.replace(
-        "{",
-        `{\n    vec4 ${autoDisableVariableName} = texture2D(${shaderFragment.mainInputTexture}, vUV);\n
-                if (${decorateSymbol(DisableUniform)}) return ${autoDisableVariableName};\n`
-    );
-}
-
-/**
- * Gets the shader fragment code.
- * @param shaderProgram - The shader program to extract the code from.
- * @param mainCodeOnly - If true, only the main function code will be returned.
- * @returns The shader fragment code.
- */
-export function getShaderFragmentCode(shaderProgram: ShaderProgram, mainCodeOnly = false): string {
-    const shaderFragment = shaderProgram.fragment;
-
-    const declarations =
-        (shaderFragment.const ?? "") +
-        "\n" +
-        shaderFragment.uniform +
-        "\n" +
-        (shaderFragment.uniformSingle ?? "") +
-        "\n";
-
-    let mainFunctionCode = "";
-    let otherFunctionsCode = "";
-    for (let i = 0; i < shaderFragment.functions.length; ++i) {
-        const func = shaderFragment.functions[i]!;
-        if (func.name === shaderFragment.mainFunctionName) {
-            mainFunctionCode += func.code + "\n";
-            if (mainCodeOnly) {
-                break;
-            }
-        } else {
-            otherFunctionsCode += func.code + "\n";
-        }
-    }
-
-    return mainCodeOnly ? mainFunctionCode : declarations + otherFunctionsCode + mainFunctionCode;
-}
-
-/**
- * Gets the shader creation options from a shader program.
- * @param shaderProgram - The shader program to build the create options from.
- * @returns The shader creation options.
- */
-export function getShaderCreateOptions(shaderProgram: ShaderProgram): ShaderCreationOptions {
-    const shaderFragment = shaderProgram.fragment;
-
-    let code = getShaderFragmentCode(shaderProgram);
-
-    const uniforms = shaderFragment.uniform + "\n" + (shaderFragment.uniformSingle ?? "");
-    const uniformNames = [];
-    const samplerNames = [];
-
-    const rx = new RegExp(`uniform\\s+(\\S+)\\s+(\\w+)\\s*;`, "g");
-
-    let match = rx.exec(uniforms);
-    while (match !== null) {
-        const varType = match[1]!;
-        const varName = match[2]!;
-
-        if (varType === "sampler2D" || varType === "sampler3D") {
-            samplerNames.push(varName);
-        } else {
-            uniformNames.push(varName);
-        }
-
-        match = rx.exec(uniforms);
-    }
-
-    code =
-        "varying vec2 vUV;\n" +
-        code +
-        "\nvoid main(void) {\ngl_FragColor = " +
-        shaderFragment.mainFunctionName +
-        "(vUV);\n}";
-
-    const options: ShaderCreationOptions = {
-        name: shaderFragment.mainFunctionName,
-        fragmentShader: code,
-        uniformNames: uniformNames,
-        samplerNames: samplerNames,
-        defines: shaderFragment.defines,
-    };
-
-    if (shaderProgram.vertex) {
-        options.vertexShader = shaderProgram.vertex;
-    }
-
-    return options;
-}
-
-/**
- * Decorates a symbol (uniform, function or const) name.
- * @param symbol - The symbol to decorate.
- * @returns The decorated symbol.
- */
-export function decorateSymbol(symbol: string): string {
-    return decorateChar + symbol + decorateChar;
-}
-
-/**
- * Undecorates a symbol (uniform, function or const) name.
- * @param symbol - The symbol to undecorate.
- * @returns The undecorated symbol. Throws an error if the symbol is not decorated.
- */
-export function undecorateSymbol(symbol: string): string {
-    if (symbol.charAt(0) !== decorateChar || symbol.charAt(symbol.length - 1) !== decorateChar) {
-        throw new Error(`undecorateSymbol: Invalid symbol name "${symbol}"`);
-    }
-
-    return symbol.substring(1, symbol.length - 1);
-}
+import type { Effect } from "core/Materials/effect.js";
+import type { ShaderCode } from "./buildTools/shaderCode.types.js";
+
+/**
+ * The shader code decorator.
+ * Used to decorate the names of uniform, function and const variables for easier parsing.
+ */
+export const DecorateChar = "_";
+
+/**
+ * Describes a shader program.
+ */
+export type ShaderProgram = {
+    /**
+     * The vertex shader code.
+     */
+    vertex?: string | undefined;
+
+    /**
+     * The fragment shader code.
+     */
+    fragment: ShaderCode;
+};
+
+/**
+ * The list of options required to create a shader block.
+ * It mainly contains the shader code to execute and its associated parameters.
+ */
+export type ShaderCreationOptions = {
+    /**
+     * A friendly name for the shader visible in Spector or in logs.
+     */
+    name: string;
+    /**
+     * Fragment shader source code.
+     */
+    fragmentShader: string;
+    /**
+     * Vertex shader source code.
+     */
+    vertexShader?: string;
+    /**
+     * Attributes to use in the shader
+     */
+    attributeNames?: Array<string>;
+    /**
+     * Uniforms to use in the shader
+     */
+    uniformNames?: Array<string>;
+    /**
+     * Texture sampler names to use in the shader
+     */
+    samplerNames?: Array<string>;
+    /**
+     * Defines to use in the shader
+     */
+    defines?: Array<string>;
+    /**
+     * Callback when the effect is compiled
+     */
+    onCompiled?: (effect: Effect) => void;
+};
+
+export const AutoDisableMainInputColorName = "autoMainInputColor";
+export const DisableUniform = "disabled";
+
+/**
+ * Injects the disable uniform and adds a check for it at the beginning of the main function
+ * @param shaderProgram - The shader program to inject the disable feature into
+ */
+export function InjectAutoSampleDisableCode(shaderProgram: ShaderProgram) {
+    const shaderFragment = shaderProgram.fragment;
+
+    // Inject the disable uniform
+    shaderFragment.uniform += `\nuniform bool ${DecorateSymbol(DisableUniform)};`;
+
+    // Find the main function
+    const mainFunction = shaderFragment.functions.find((f) => f.name === shaderFragment.mainFunctionName);
+    if (!mainFunction) {
+        throw new Error(`Main function not found when trying to inject auto disable into ${shaderFragment.mainFunctionName}`);
+    }
+
+    // Ensure the shader has a main input texture
+    if (!shaderFragment.mainInputTexture) {
+        throw new Error(`Main input texture not found when trying to inject auto disable into ${shaderFragment.mainFunctionName}`);
+    }
+
+    // Inject the code
+    const autoDisableVariableName = DecorateSymbol(AutoDisableMainInputColorName);
+    mainFunction.code = mainFunction.code.replace(
+        "{",
+        `{\n    vec4 ${autoDisableVariableName} = texture2D(${shaderFragment.mainInputTexture}, vUV);\n
+                if (${DecorateSymbol(DisableUniform)}) return ${autoDisableVariableName};\n`
+    );
+}
+
+/**
+ * Gets the shader fragment code.
+ * @param shaderProgram - The shader program to extract the code from.
+ * @param mainCodeOnly - If true, only the main function code will be returned.
+ * @returns The shader fragment code.
+ */
+export function GetShaderFragmentCode(shaderProgram: ShaderProgram, mainCodeOnly = false): string {
+    const shaderFragment = shaderProgram.fragment;
+
+    const declarations = (shaderFragment.const ?? "") + "\n" + shaderFragment.uniform + "\n" + (shaderFragment.uniformSingle ?? "") + "\n";
+
+    let mainFunctionCode = "";
+    let otherFunctionsCode = "";
+    for (let i = 0; i < shaderFragment.functions.length; ++i) {
+        const func = shaderFragment.functions[i]!;
+        if (func.name === shaderFragment.mainFunctionName) {
+            mainFunctionCode += func.code + "\n";
+            if (mainCodeOnly) {
+                break;
+            }
+        } else {
+            otherFunctionsCode += func.code + "\n";
+        }
+    }
+
+    return mainCodeOnly ? mainFunctionCode : declarations + otherFunctionsCode + mainFunctionCode;
+}
+
+/**
+ * Gets the shader creation options from a shader program.
+ * @param shaderProgram - The shader program to build the create options from.
+ * @returns The shader creation options.
+ */
+export function GetShaderCreateOptions(shaderProgram: ShaderProgram): ShaderCreationOptions {
+    const shaderFragment = shaderProgram.fragment;
+
+    let code = GetShaderFragmentCode(shaderProgram);
+
+    const uniforms = shaderFragment.uniform + "\n" + (shaderFragment.uniformSingle ?? "");
+    const uniformNames = [];
+    const samplerNames = [];
+
+    const rx = new RegExp(`uniform\\s+(\\S+)\\s+(\\w+)\\s*;`, "g");
+
+    let match = rx.exec(uniforms);
+    while (match !== null) {
+        const varType = match[1]!;
+        const varName = match[2]!;
+
+        if (varType === "sampler2D" || varType === "sampler3D") {
+            samplerNames.push(varName);
+        } else {
+            uniformNames.push(varName);
+        }
+
+        match = rx.exec(uniforms);
+    }
+
+    code = "varying vec2 vUV;\n" + code + "\nvoid main(void) {\ngl_FragColor = " + shaderFragment.mainFunctionName + "(vUV);\n}";
+
+    const options: ShaderCreationOptions = {
+        name: shaderFragment.mainFunctionName,
+        fragmentShader: code,
+        uniformNames: uniformNames,
+        samplerNames: samplerNames,
+        defines: shaderFragment.defines,
+    };
+
+    if (shaderProgram.vertex) {
+        options.vertexShader = shaderProgram.vertex;
+    }
+
+    return options;
+}
+
+/**
+ * Decorates a symbol (uniform, function or const) name.
+ * @param symbol - The symbol to decorate.
+ * @returns The decorated symbol.
+ */
+export function DecorateSymbol(symbol: string): string {
+    return DecorateChar + symbol + DecorateChar;
+}
+
+/**
+ * Undecorates a symbol (uniform, function or const) name.
+ * @param symbol - The symbol to undecorate.
+ * @returns The undecorated symbol. Throws an error if the symbol is not decorated.
+ */
+export function UndecorateSymbol(symbol: string): string {
+    if (symbol.charAt(0) !== DecorateChar || symbol.charAt(symbol.length - 1) !== DecorateChar) {
+        throw new Error(`undecorateSymbol: Invalid symbol name "${symbol}"`);
+    }
+
+    return symbol.substring(1, symbol.length - 1);
+}

package/src/utils/textureLoaders.ts

@@ -1,43 +1,31 @@
-import { ThinTexture } from "@babylonjs/core/Materials/Textures/thinTexture.js";
-import { type ThinEngine } from "@babylonjs/core/Engines/thinEngine.js";
-import type { Nullable } from "@babylonjs/core/types";
-
-/**
- * Helper that takes in a URL to an image and returns a ThinTexture
- * @param engine - defines the engine to use to create the texture
- * @param url - defines a value which contains one of the following:
- * * A conventional http URL, e.g. 'http://...' or 'file://...'
- * * A base64 string of in-line texture data, e.g. 'data:image/jpg;base64,/...'
- * @param flipY - Indicates if the Y axis should be flipped
- * @param samplingMode - The sampling mode to use
- * @param forcedExtension - defines the extension to use to pick the right loader
- * @returns A ThinTexture of the image
- */
-export function createImageTexture(
-    engine: ThinEngine,
-    url: string,
-    flipY: Nullable<boolean> = null,
-    samplingMode: number | undefined = undefined,
-    forcedExtension: string | null = null
-): ThinTexture {
-    const internalTexture = engine.createTexture(
-        url,
-        true,
-        flipY ?? true,
-        null,
-        samplingMode,
-        null,
-        null,
-        null,
-        null,
-        null,
-        forcedExtension
-    );
-    return new ThinTexture(internalTexture);
-}
-
-/*
-    Future util ideas:
-        HtmlElementTexture
-        WebCamTexture
-*/
+import { ThinTexture } from "core/Materials/Textures/thinTexture.js";
+import { type ThinEngine } from "core/Engines/thinEngine.js";
+import type { Nullable } from "core/types.js";
+
+/**
+ * Helper that takes in a URL to an image and returns a ThinTexture
+ * @param engine - defines the engine to use to create the texture
+ * @param url - defines a value which contains one of the following:
+ * * A conventional http URL, e.g. 'http://...' or 'file://...'
+ * * A base64 string of in-line texture data, e.g. 'data:image/jpg;base64,/...'
+ * @param flipY - Indicates if the Y axis should be flipped
+ * @param samplingMode - The sampling mode to use
+ * @param forcedExtension - defines the extension to use to pick the right loader
+ * @returns A ThinTexture of the image
+ */
+export function CreateImageTexture(
+    engine: ThinEngine,
+    url: string,
+    flipY: Nullable<boolean> = null,
+    samplingMode: number | undefined = undefined,
+    forcedExtension: string | null = null
+): ThinTexture {
+    const internalTexture = engine.createTexture(url, true, flipY ?? true, null, samplingMode, null, null, null, null, null, forcedExtension);
+    return new ThinTexture(internalTexture);
+}
+
+/*
+    Future util ideas:
+        HtmlElementTexture
+        WebCamTexture
+*/