@babylonjs/smart-filters 0.7.12-alpha → 0.7.14-alpha

package/src/command/commandBufferDebugger.ts

@@ -1,3 +1,4 @@
+import { Logger } from "@babylonjs/core/Misc/logger.js";
 import type { CommandBuffer } from "./commandBuffer";
 
 /**
@@ -5,9 +6,9 @@ import type { CommandBuffer } from "./commandBuffer";
  * @param commandBuffer - The command buffer to log
  */
 export function logCommands(commandBuffer: Readonly<CommandBuffer>) {
-    console.log("----- Command buffer commands -----");
+    Logger.Log("----- Command buffer commands -----");
     commandBuffer.visitCommands((command) => {
-        console.log(`  Owner: ${command.owner.blockType} (${command.owner.name}) - Command: ${command.name}`);
+        Logger.Log(`  Owner: ${command.owner.blockType} (${command.owner.name}) - Command: ${command.name}`);
     });
-    console.log("-----------------------------------");
+    Logger.Log("-----------------------------------");
 }

package/src/index.ts

@@ -10,3 +10,6 @@ export * from "./utils/index.js";
 export { type IDisposable } from "./IDisposable.js";
 export { SmartFilter, type InitializationData } from "./smartFilter.js";
 export * from "./version.js";
+
+// So that users of the Smart Filters core can easily modify the logger settings (e.g. to change the logging level)
+export { Logger } from "@babylonjs/core/Misc/logger.js";

package/src/optimization/dependencyGraph.ts

@@ -1,3 +1,5 @@
+import { Logger } from "@babylonjs/core/Misc/logger.js";
+
 /**
  * Implementation of a dependency graph.
  */
@@ -87,7 +89,7 @@ export class DependencyGraph<T> {
         }
 
         if (this._list.size > 0) {
-            console.error(this._list);
+            Logger.Error(JSON.stringify(this._list));
             throw new Error("Circular dependency detected!");
         }
     }

package/src/optimization/smartFilterOptimizer.ts

@@ -1,4 +1,5 @@
 import type { Nullable } from "@babylonjs/core/types";
+import { Logger } from "@babylonjs/core/Misc/logger.js";
 
 import type { ConnectionPoint } from "../connection/connectionPoint";
 import type { ShaderBinding } from "../runtime/shaderRuntime";
@@ -690,12 +691,12 @@ export class SmartFilterOptimizer {
             code = code!.replace(/\r/g, "");
             code = code!.replace(/\n(\n)*/g, "\n");
 
-            console.log(`=================== BLOCK (forceUnoptimized=${this._forceUnoptimized}) ===================`);
-            console.log(codeUniforms);
-            console.log(codeConsts);
-            console.log(code);
-            console.log("remappedSymbols=", this._remappedSymbols);
-            console.log("samplers=", samplers);
+            Logger.Log(`=================== BLOCK (forceUnoptimized=${this._forceUnoptimized}) ===================`);
+            Logger.Log(codeUniforms);
+            Logger.Log(codeConsts);
+            Logger.Log(code);
+            Logger.Log(`remappedSymbols=${this._remappedSymbols}`);
+            Logger.Log(`samplers=${samplers}`);
         }
 
         optimizedBlock.setShaderProgram({

package/src/serialization/importCustomBlockDefinition.ts

@@ -54,35 +54,10 @@ function importAnnotatedGlsl(fragmentShader: string): SerializedShaderBlockDefin
     // Calculate the input connection points
     const inputConnectionPoints: SerializedInputConnectionPointV1[] = [];
     for (const uniform of fragmentShaderInfo.uniforms) {
-        // Convert to ConnectionPointType
-        let type: ConnectionPointType;
-        switch (uniform.type) {
-            case "float":
-                type = ConnectionPointType.Float;
-                break;
-            case "sampler2D":
-                type = ConnectionPointType.Texture;
-                break;
-            case "vec3":
-                type = ConnectionPointType.Color3;
-                break;
-            case "vec4":
-                type = ConnectionPointType.Color4;
-                break;
-            case "bool":
-                type = ConnectionPointType.Boolean;
-                break;
-            case "vec2":
-                type = ConnectionPointType.Vector2;
-                break;
-            default:
-                throw new Error(`Unsupported uniform type: '${uniform.type}'`);
-        }
-
         // Add to input connection point list
         const inputConnectionPoint: SerializedInputConnectionPointV1 = {
             name: uniform.name,
-            type,
+            type: uniform.type,
             autoBind: uniform.properties?.autoBind as InputAutoBindV1,
         };
         if (inputConnectionPoint.type !== ConnectionPointType.Texture && uniform.properties?.default !== undefined) {

package/src/utils/buildTools/buildShaders.ts

@@ -5,7 +5,7 @@
  * @example node buildShaders.js <shaderPath> <importPath>
  */
 
-import { convertShaders } from "./convertShaderForHardcodedBlock.js";
+import { convertShaders } from "./convertShaders.js";
 
 const externalArguments = process.argv.slice(2);
 if (externalArguments.length >= 2 && externalArguments[0] && externalArguments[1]) {

package/src/utils/buildTools/convertGlslIntoBlock.ts

@@ -0,0 +1,251 @@
+import * as fs from "fs";
+import { extractShaderProgramFromGlsl } from "./convertGlslIntoShaderProgram.js";
+import { ConnectionPointType } from "../../connection/connectionPointType.js";
+
+const SHADER_PROGRAM = "@SHADER_PROGRAM@";
+const BLOCK_NAME = "@BLOCK_NAME@";
+const NAMESPACE = "@NAMESPACE@";
+const SHADER_BINDING_PRIVATE_VARIABLES = "@SHADER_BINDING_PRIVATE_VARIABLES@";
+const CAMEL_CASE_UNIFORM = "@CAMEL_CASE_UNIFORM@";
+const CONNECTION_POINT_TYPE = "@CONNECTION_POINT_TYPE@";
+const SHADER_BINDING_CTOR_DOCSTRING_PARAMS = "@SHADER_BINDING_CTOR_DOCSTRING_PARAMS@";
+const SHADER_BINDING_CTOR_PARAMS = "@SHADER_CTOR_PARAMS@";
+const SHADER_BINDING_CTOR = "@SHADER_BINDING_CTOR@";
+const SHADER_BINDING_BIND = "@SHADER_BINDING_BIND@";
+const BLOCK_INPUT_PROPERTIES = "@BLOCK_INPUT_PROPERTIES@";
+const BLOCK_GET_SHADER_BINDING_VARS = "@BLOCK_SHADER_BINDING_BIND_VARS@";
+const BLOCK_GET_SHADER_PARAM_LIST = "@BLOCK_GET_SHADER_PARAM_LIST@";
+const EFFECT_SETTER = "@EFFECT_SETTER@";
+
+const ShaderBindingPrivateVariablesTemplate = `    private readonly _${CAMEL_CASE_UNIFORM}: RuntimeData<ConnectionPointType.${CONNECTION_POINT_TYPE}>;`;
+const ShaderBindingCtorDocstringParams = `     * @param ${CAMEL_CASE_UNIFORM} - The ${CAMEL_CASE_UNIFORM} runtime value`;
+const ShaderBindingCtorParams = `        ${CAMEL_CASE_UNIFORM}: RuntimeData<ConnectionPointType.${CONNECTION_POINT_TYPE}>`;
+const ShaderBindingCtor = `        this._${CAMEL_CASE_UNIFORM} = ${CAMEL_CASE_UNIFORM};`;
+const ShaderBindingBind = `        effect.${EFFECT_SETTER}(this.getRemappedName(uniforms.${CAMEL_CASE_UNIFORM}), this._${CAMEL_CASE_UNIFORM}.value);`;
+
+const BlockInputProperties = `    /**
+     * The ${CAMEL_CASE_UNIFORM} connection point.
+     */
+    public readonly ${CAMEL_CASE_UNIFORM} = this._registerInput(uniforms.${CAMEL_CASE_UNIFORM}, ConnectionPointType.${CONNECTION_POINT_TYPE});
+`;
+const BlockGetShaderBindingVars = `        const ${CAMEL_CASE_UNIFORM} = this._confirmRuntimeDataSupplied(this.${CAMEL_CASE_UNIFORM});`;
+
+const FileTemplate = `/* 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";${SHADER_PROGRAM}
+/**
+ * The shader binding for the ${BLOCK_NAME}, used by the runtime
+ */
+class ${BLOCK_NAME}ShaderBinding extends ShaderBinding {
+${SHADER_BINDING_PRIVATE_VARIABLES}
+
+    /**
+     * Creates a new shader binding instance for the block.
+${SHADER_BINDING_CTOR_DOCSTRING_PARAMS}
+     */
+    constructor(
+${SHADER_BINDING_CTOR_PARAMS}
+    ) {
+        super();
+${SHADER_BINDING_CTOR}
+    }
+
+    /**
+     * 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 {
+${SHADER_BINDING_BIND}
+    }
+}
+
+/**
+ * The implementation of the ${BLOCK_NAME}
+ */
+export class ${BLOCK_NAME} extends ShaderBlock {
+    /**
+     * The class name of the block.
+     */
+    public static override ClassName = "${BLOCK_NAME}";
+
+    /**
+     * The namespace of the block.
+     */
+    public static override Namespace = "${NAMESPACE}";
+
+${BLOCK_INPUT_PROPERTIES}
+    /**
+     * The shader program (vertex and fragment code) to use to render the block
+     */
+    public static override ShaderCode = shaderProgram;
+
+    /**
+     * Instantiates a new ${BLOCK_NAME}.
+     * @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);
+    }
+
+    /**
+     * 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 {
+${BLOCK_GET_SHADER_BINDING_VARS}
+
+        return new ${BLOCK_NAME}ShaderBinding(${BLOCK_GET_SHADER_PARAM_LIST});
+    }
+}
+
+`;
+
+/**
+ * Converts a single shader to a .ts file which exports a Smart Filter block
+ * @param fragmentShaderPath - The path to the fragment file for the shader
+ * @param importPath - The path to import the ShaderProgram type from
+ */
+export function convertGlslIntoBlock(fragmentShaderPath: string, importPath: string): void {
+    const { shaderProgramCode, fragmentShaderInfo } = extractShaderProgramFromGlsl(
+        fragmentShaderPath,
+        importPath,
+        false,
+        false
+    );
+
+    // Validation
+    if (!fragmentShaderInfo.blockType) {
+        throw new Error("The glsl file must contain a header comment with a smartFilterBlockType value");
+    }
+
+    // Generate shader binding private variables
+    const shaderBindingPrivateVariables = fragmentShaderInfo.uniforms.map((uniform) => {
+        return ShaderBindingPrivateVariablesTemplate.replace(CAMEL_CASE_UNIFORM, uniform.name).replace(
+            CONNECTION_POINT_TYPE,
+            getConnectionPointTypeString(uniform.type)
+        );
+    });
+
+    // Generate the shader binding constructor docstring params
+    const shaderBindingCtorDocstringParams = fragmentShaderInfo.uniforms.map((uniform) => {
+        return ShaderBindingCtorDocstringParams.replace(new RegExp(CAMEL_CASE_UNIFORM, "g"), uniform.name);
+    });
+
+    // Generate the shader binding constructor params
+    const shaderBindingCtorParams = fragmentShaderInfo.uniforms.map((uniform) => {
+        return ShaderBindingCtorParams.replace(CAMEL_CASE_UNIFORM, uniform.name).replace(
+            CONNECTION_POINT_TYPE,
+            getConnectionPointTypeString(uniform.type)
+        );
+    });
+
+    // Generate the shader binding constructor
+    const shaderBindingCtor = fragmentShaderInfo.uniforms.map((uniform) => {
+        return ShaderBindingCtor.replace(new RegExp(CAMEL_CASE_UNIFORM, "g"), uniform.name);
+    });
+
+    // Generate the shader binding bind
+    const shaderBindingBind = fragmentShaderInfo.uniforms.map((uniform) => {
+        return ShaderBindingBind.replace(new RegExp(CAMEL_CASE_UNIFORM, "g"), uniform.name).replace(
+            EFFECT_SETTER,
+            getEffectSetter(uniform.type)
+        );
+    });
+
+    // Generate the block input properties
+    const blockInputProperties = fragmentShaderInfo.uniforms.map((uniform) => {
+        return BlockInputProperties.replace(new RegExp(CAMEL_CASE_UNIFORM, "g"), uniform.name).replace(
+            CONNECTION_POINT_TYPE,
+            getConnectionPointTypeString(uniform.type)
+        );
+    });
+
+    // Generate the block get shader binding vars
+    const blockGetShaderBindingVars = fragmentShaderInfo.uniforms.map((uniform) => {
+        return BlockGetShaderBindingVars.replace(new RegExp(CAMEL_CASE_UNIFORM, "g"), uniform.name);
+    });
+
+    // Generate the block get shader param list
+    const blockGetShaderParamList = fragmentShaderInfo.uniforms.map((uniform) => {
+        return uniform.name;
+    });
+
+    // Generate final contents
+    const finalContents = FileTemplate.replace(SHADER_PROGRAM, shaderProgramCode)
+        .replace(new RegExp(BLOCK_NAME, "g"), fragmentShaderInfo.blockType)
+        .replace(NAMESPACE, fragmentShaderInfo.namespace || "Other")
+        .replace(SHADER_BINDING_PRIVATE_VARIABLES, shaderBindingPrivateVariables.join("\n"))
+        .replace(SHADER_BINDING_CTOR_DOCSTRING_PARAMS, shaderBindingCtorDocstringParams.join("\n"))
+        .replace(SHADER_BINDING_CTOR_PARAMS, shaderBindingCtorParams.join(",\n"))
+        .replace(SHADER_BINDING_CTOR, shaderBindingCtor.join("\n"))
+        .replace(SHADER_BINDING_BIND, shaderBindingBind.join("\n"))
+        .replace(BLOCK_INPUT_PROPERTIES, blockInputProperties.join("\n"))
+        .replace(BLOCK_GET_SHADER_BINDING_VARS, blockGetShaderBindingVars.join("\n"))
+        .replace(BLOCK_GET_SHADER_PARAM_LIST, blockGetShaderParamList.join(","));
+
+    // Write the block class TS file
+    const outputFullPathAndFileName = fragmentShaderPath.replace(".glsl", ".ts");
+    fs.writeFileSync(outputFullPathAndFileName, finalContents);
+}
+
+/**
+ * Get the string representation of a connection point type
+ * @param type - The connection point type
+ * @returns - The string representation of the connection point type
+ */
+function getConnectionPointTypeString(type: ConnectionPointType): string {
+    switch (type) {
+        case ConnectionPointType.Float:
+            return "Float";
+        case ConnectionPointType.Texture:
+            return "Texture";
+        case ConnectionPointType.Color3:
+            return "Color3";
+        case ConnectionPointType.Color4:
+            return "Color4";
+        case ConnectionPointType.Vector2:
+            return "Vector2";
+        case ConnectionPointType.Boolean:
+            return "Boolean";
+    }
+}
+
+/**
+ * Get the effect setter for a connection point type
+ * @param type - The connection point type
+ * @returns - The effect setter for the connection point type
+ */
+function getEffectSetter(type: ConnectionPointType): string {
+    switch (type) {
+        case ConnectionPointType.Float:
+            return "setFloat";
+        case ConnectionPointType.Texture:
+            return "setTexture";
+        case ConnectionPointType.Color3:
+            return "setColor3";
+        case ConnectionPointType.Color4:
+            return "setDirectColor4";
+        case ConnectionPointType.Vector2:
+            return "setVector2";
+        case ConnectionPointType.Boolean:
+            return "setBool";
+    }
+}

package/src/utils/buildTools/{convertShaderForHardcodedBlock.ts → convertGlslIntoShaderProgram.ts}

@@ -1,6 +1,6 @@
 import * as fs from "fs";
-import * as path from "path";
-import { parseFragmentShader } from "./shaderConverter.js";
+import { Logger } from "@babylonjs/core/Misc/logger.js";
+import { parseFragmentShader, type FragmentShaderInfo } from "./shaderConverter.js";
 
 const TYPE_IMPORT_PATH = "@TYPE_IMPORT_PATH@";
 const VERTEX_SHADER = "@VERTEX_SHADER@";
@@ -13,6 +13,8 @@ const FUNCTIONS = "@FUNCTIONS@";
 const FUNCTION_NAME = "@FUNCTION_NAME@";
 const FUNCTION_CODE = "@FUNCTION_CODE@";
 const UNIFORM_NAMES = "@UNIFORM_NAMES@";
+const EXPORT = "@EXPORT_SHADER_PROGRAM@";
+const IMPORTS = "@IMPORT@";
 
 const ConstsTemplate = `
         const: \`${CONSTS_VALUE}\`,`;
@@ -29,12 +31,13 @@ const CodeLinePrefix = "                    ";
 const UniformLinePrefix = "            ";
 const ConstLinePrefix = "            ";
 
-const ShaderTemplate = `import type { ShaderProgram } from "${TYPE_IMPORT_PATH}";
+const ImportTemplate = `import type { ShaderProgram } from "${TYPE_IMPORT_PATH}";`;
+const ShaderTemplate = `${IMPORTS}
 
 /**
  * The shader program for the block.
  */
-export const shaderProgram: ShaderProgram = {
+${EXPORT}const shaderProgram: ShaderProgram = {
     vertex: ${VERTEX_SHADER},
     fragment: {
         uniform: \`${UNIFORMS}\`,${CONSTS_PROPERTY}
@@ -49,7 +52,7 @@ export const shaderProgram: ShaderProgram = {
  * The uniform names for this shader, to be used in the shader binding so
  * that the names are always in sync.
  */
-export const uniforms = {
+${EXPORT}const uniforms = {
 ${UNIFORM_NAMES}
 };
 `;
@@ -57,29 +60,63 @@ ${UNIFORM_NAMES}
 const UniformNameLinePrefix = "    ";
 
 /**
- * Converts a single shader to a .ts file which can be imported by a hardcoded block
+ * Converts a single shader to a .ts file which exports a ShaderProgram which can be imported by a hardcoded block
  * @param fragmentShaderPath - The path to the fragment file for the shader
  * @param importPath - The path to import the ShaderProgram type from
  */
-export function convertShaderForHardcodedBlock(fragmentShaderPath: string, importPath: string): void {
-    console.log(`Processing fragment shader: ${fragmentShaderPath}`);
+export function convertGlslIntoShaderProgram(fragmentShaderPath: string, importPath: string): void {
+    const { shaderProgramCode } = extractShaderProgramFromGlsl(fragmentShaderPath, importPath, true, true);
+    const shaderFile = fragmentShaderPath.replace(".glsl", ".ts");
+    fs.writeFileSync(shaderFile, shaderProgramCode);
+}
 
+/**
+ * Extracts the shader program from a glsl file(s) and returns it as a string which can be written to a .ts file
+ * @param fragmentShaderPath - The path to the fragment file for the shader
+ * @param importPath - The path to import the ShaderProgram type from
+ * @param exportObjects - Whether to export the shaderProgram and uniforms objects
+ * @param includeImports - Whether to include the imports in the output
+ * @returns The string to write to the .ts file
+ */
+export function extractShaderProgramFromGlsl(
+    fragmentShaderPath: string,
+    importPath: string,
+    exportObjects: boolean,
+    includeImports: boolean
+): {
+    /**
+     * The shader program code
+     */
+    shaderProgramCode: string;
+
+    /**
+     * The FragmentShaderInfo
+     */
+    fragmentShaderInfo: FragmentShaderInfo;
+} {
     // See if there is a corresponding vertex shader
     let vertexShader: string | undefined = undefined;
-    const vertexShaderPath = fragmentShaderPath.replace(".fragment.glsl", ".vertex.glsl");
+    let extensionToFind: string;
+    if (fragmentShaderPath.endsWith(".block.glsl")) {
+        extensionToFind = ".block.glsl";
+    } else if (fragmentShaderPath.endsWith(".fragment.glsl")) {
+        extensionToFind = ".fragment.glsl";
+    } else {
+        throw new Error("The shader file must end with .fragment.glsl or .block.glsl");
+    }
+    const vertexShaderPath = fragmentShaderPath.replace(extensionToFind, ".vertex.glsl");
     if (fs.existsSync(vertexShaderPath)) {
         vertexShader = fs.readFileSync(vertexShaderPath, "utf8");
     }
     if (vertexShader) {
-        console.log("Found vertex shader");
+        Logger.Log("Found vertex shader");
     }
 
     // Read the fragment shader
     const fragmentShader = fs.readFileSync(fragmentShaderPath, "utf8");
     const fragmentShaderInfo = parseFragmentShader(fragmentShader);
 
-    // Write the shader TS file
-    const shaderFile = fragmentShaderPath.replace(".fragment.glsl", ".shader.ts");
+    // Generate the shader program code
     const functionsSection: string[] = [];
     for (const shaderFunction of fragmentShaderInfo.shaderCode.functions) {
         functionsSection.push(
@@ -89,11 +126,12 @@ export function convertShaderForHardcodedBlock(fragmentShaderPath: string, impor
             )
         );
     }
+    const imports = includeImports ? ImportTemplate.replace(TYPE_IMPORT_PATH, importPath) : "";
     const finalContents = ShaderTemplate.replace(VERTEX_SHADER, vertexShader ? `\`${vertexShader}\`` : "undefined")
-        .replace(TYPE_IMPORT_PATH, importPath)
+        .replace(IMPORTS, imports)
         .replace(UNIFORMS, "\n" + addLinePrefixes(fragmentShaderInfo.shaderCode.uniform || "", UniformLinePrefix))
         .replace(MAIN_FUNCTION_NAME, fragmentShaderInfo.shaderCode.mainFunctionName)
-        .replace(MAIN_INPUT_NAME, fragmentShaderInfo.shaderCode.mainInputTexture || '""')
+        .replace(MAIN_INPUT_NAME, fragmentShaderInfo.shaderCode.mainInputTexture || "")
         .replace(
             CONSTS_PROPERTY,
             fragmentShaderInfo.shaderCode.const
@@ -110,29 +148,13 @@ export function convertShaderForHardcodedBlock(fragmentShaderPath: string, impor
                 fragmentShaderInfo.uniforms.map((u) => `${u.name}: "${u.name}",`).join("\n"),
                 UniformNameLinePrefix
             )
-        );
-
-    fs.writeFileSync(shaderFile, finalContents);
-}
-
-/**
- * Converts .fragment.glsl and vertex.glsl file pairs into .shader.ts files which export a ShaderProgram object.
- * @param shaderPath - The path to the .glsl files to convert.
- * @param importPath - The path to import the ShaderProgram type from.
- */
-export function convertShaders(shaderPath: string, importPath: string) {
-    // Get all files in the path
-    const allFiles = fs.readdirSync(shaderPath, { withFileTypes: true, recursive: true });
-
-    // Find all fragment shaders (excluding the template)
-    const fragmentShaderFiles = allFiles.filter(
-        (file) => file.isFile() && file.name.endsWith(".fragment.glsl") && !file.name.endsWith("template.fragment.glsl")
-    );
+        )
+        .replace(new RegExp(EXPORT, "g"), exportObjects ? "export " : "");
 
-    // Convert all shaders
-    for (const fragmentShaderFile of fragmentShaderFiles) {
-        convertShaderForHardcodedBlock(path.join(fragmentShaderFile.path, fragmentShaderFile.name), importPath);
-    }
+    return {
+        shaderProgramCode: finalContents,
+        fragmentShaderInfo,
+    };
 }
 
 /**

package/src/utils/buildTools/convertShaders.ts

@@ -0,0 +1,43 @@
+import * as fs from "fs";
+import * as path from "path";
+import { Logger } from "@babylonjs/core/Misc/logger.js";
+import { convertGlslIntoShaderProgram } from "./convertGlslIntoShaderProgram.js";
+import { convertGlslIntoBlock } from "./convertGlslIntoBlock.js";
+
+/**
+ * Converts all GLSL files in a path into blocks for use in the build system.
+ * @param shaderPath - The path to the .glsl files to convert.
+ * @param importPath - The path to import the ShaderProgram type from.
+ */
+export function convertShaders(shaderPath: string, importPath: string) {
+    // Get all files in the path
+    const allFiles = fs.readdirSync(shaderPath, { withFileTypes: true, recursive: true });
+
+    // Find all shaders (files with .fragment.glsl or .block.glsl extensions)
+    const shaderFiles = allFiles.filter(
+        (file) => file.isFile() && (file.name.endsWith(".fragment.glsl") || file.name.endsWith(".block.glsl"))
+    );
+
+    // Convert all shaders
+    for (const shaderFile of shaderFiles) {
+        const fullPathAndFileName = path.join(shaderFile.path, shaderFile.name);
+        convertShader(fullPathAndFileName, importPath);
+    }
+}
+
+/**
+ * Converts a single GLSL file into a block class or a ShaderProgram for use in the build system.
+ * @param fullPathAndFileName - The full path and file name of the .glsl file to convert.
+ * @param importPath - The path to import the ShaderProgram type from.
+ */
+export function convertShader(fullPathAndFileName: string, importPath: string): void {
+    Logger.Log(`\nProcessing shader: ${fullPathAndFileName}`);
+
+    if (fullPathAndFileName.endsWith(".fragment.glsl")) {
+        Logger.Log("Generating a .ts file that exports a ShaderProgram.");
+        convertGlslIntoShaderProgram(fullPathAndFileName, importPath);
+    } else if (fullPathAndFileName.endsWith(".block.glsl")) {
+        Logger.Log("Generating a .ts file that exports the block as a class.");
+        convertGlslIntoBlock(fullPathAndFileName, importPath);
+    }
+}

package/src/utils/buildTools/determineVersion.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import type { Nullable } from "@babylonjs/core/types";
 import type { ExecException } from "child_process";
 

package/src/utils/buildTools/shaderConverter.ts

@@ -1,5 +1,7 @@
 import type { Nullable } from "@babylonjs/core/types";
+import { Logger } from "@babylonjs/core/Misc/logger.js";
 import type { ShaderCode, ShaderFunction } from "./shaderCode.types";
+import { ConnectionPointType } from "../../connection/connectionPointType.js";
 
 const GetFunctionNamesRegEx = /\S*\w+\s+(\w+)\s*\(/g;
 
@@ -31,7 +33,7 @@ export type UniformMetadata = {
     /**
      * The type string of the uniform
      */
-    type: string;
+    type: ConnectionPointType;
 
     /**
      * Optional properties of the uniform
@@ -106,9 +108,34 @@ export function parseFragmentShader(fragmentShader: string): FragmentShaderInfo
             throw new Error(`Uniforms must have a name: '${uniformLine}'`);
         }
 
+        // Convert to ConnectionPointType
+        let type: ConnectionPointType;
+        switch (uniformTypeString) {
+            case "float":
+                type = ConnectionPointType.Float;
+                break;
+            case "sampler2D":
+                type = ConnectionPointType.Texture;
+                break;
+            case "vec3":
+                type = ConnectionPointType.Color3;
+                break;
+            case "vec4":
+                type = ConnectionPointType.Color4;
+                break;
+            case "bool":
+                type = ConnectionPointType.Boolean;
+                break;
+            case "vec2":
+                type = ConnectionPointType.Vector2;
+                break;
+            default:
+                throw new Error(`Unsupported uniform type: '${uniformTypeString}'`);
+        }
+
         uniforms.push({
             name: uniformName,
-            type: uniformTypeString,
+            type,
             properties: annotationJSON ? JSON.parse(annotationJSON.replace("//", "").trim()) : undefined,
         });
 
@@ -123,13 +150,13 @@ export function parseFragmentShader(fragmentShader: string): FragmentShaderInfo
     // Collect uniform, const, and function names which need to be decorated
     // eslint-disable-next-line prettier/prettier
     const uniformNames = uniforms.map((uniform) => uniform.name);
-    console.log(`Uniforms found: ${JSON.stringify(uniforms)}`);
+    Logger.Log(`Uniforms found: ${JSON.stringify(uniforms)}`);
     const consts = [...fragmentShader.matchAll(/\S*const\s+\w*\s+(\w*)\s*=.*;/g)].map((match) => match[1]);
-    console.log(`Consts found: ${JSON.stringify(consts)}`);
+    Logger.Log(`Consts found: ${JSON.stringify(consts)}`);
     const functionNames = [...fragmentShaderWithNoFunctionBodies.matchAll(GetFunctionNamesRegEx)].map(
         (match) => match[1]
     );
-    console.log(`Functions found: ${JSON.stringify(functionNames)}`);
+    Logger.Log(`Functions found: ${JSON.stringify(functionNames)}`);
 
     // Decorate the uniforms, consts, and functions
     const symbolsToDecorate = [...uniformNames, ...consts, ...functionNames];
@@ -138,7 +165,7 @@ export function parseFragmentShader(fragmentShader: string): FragmentShaderInfo
         const regex = new RegExp(`(?<=\\W+)${symbol}(?=\\W+)`, "gs");
         fragmentShaderWithRenamedSymbols = fragmentShaderWithRenamedSymbols.replace(regex, `_${symbol}_`);
     }
-    console.log(`${symbolsToDecorate.length} symbol(s) renamed`);
+    Logger.Log(`${symbolsToDecorate.length} symbol(s) renamed`);
 
     // Extract all the uniforms
     const finalUniforms = [...fragmentShaderWithRenamedSymbols.matchAll(/^\s*(uniform\s.*)/gm)].map(
@@ -308,7 +335,7 @@ function removeFunctionBodies(input: string): string {
     }
 
     if (depth !== 0) {
-        console.error("Unbalanced curly braces in shader code");
+        Logger.Error("Unbalanced curly braces in shader code");
     }
 
     return output;

package/src/utils/buildTools/versionUp.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import * as fs from "fs";
 import { exec, type ExecException } from "child_process";
 import { compareVersions, determineVersion, getNpmVersion, type VersionType } from "./determineVersion.js";