Add watch support for GLSL files (#22)

Monitor for new GLSL files and changes to existing ones so that their corresponding shader programs can be re-generated

packages/core/package.json

@@ -43,8 +43,10 @@
         "build": "npm run build:buildTools && npm run build:runTools && npm run build:core",
         "build:core": "tsc -p ./tsconfig.build.json",
         "build:buildTools": "tsc -p ./tsconfig.buildTools.build.json",
-        "build:runTools": "node buildTools/shaderConverter.js ./src/blocks ../utils/shaderCodeUtils",
-        "watch": "tsc -p ./tsconfig.build.json --watch",
+        "build:runTools": "node buildTools/buildShaders.js ./src/blocks ../utils/shaderCodeUtils",
+        "watch": "concurrently \"npm run watch:core\" \"npm run watch:shaders\"",
+        "watch:core": "tsc -p ./tsconfig.build.json --watch",
+        "watch:shaders": "node buildTools/watchShaders.js ./src/blocks ../utils/shaderCodeUtils",
         "test": "echo \"Error: run test from the root of the monorepo\" && exit 1"
     },
     "peerDependencies": {

packages/core/src/utils/buildTools/buildShaders.ts

@@ -0,0 +1,13 @@
+/**
+ * Builds all .glsl files under <shaderPath>.
+ * @param shaderPath - The path to the shaders to watch
+ * @param importPath - The path to import the converted shaders
+ * @example node buildShaders.js <shaderPath> <importPath>
+ */
+
+import { convertShaders } from "./shaderConverter.js";
+
+const externalArguments = process.argv.slice(2);
+if (externalArguments.length >= 2 && externalArguments[0] && externalArguments[1]) {
+    convertShaders(externalArguments[0], externalArguments[1]);
+}

packages/core/src/utils/buildTools/shaderConverter.ts

@@ -63,7 +63,7 @@ const GetFunctionNamesRegEx = /\S*\w+\s+(\w+)\s*\(/g;
  * @param fragmentShaderPath - The path to the fragment file for the shader
  * @param importPath - The path to import the ShaderProgram type from
  */
-function convertShader(fragmentShaderPath: string, importPath: string): void {
+export function convertShader(fragmentShaderPath: string, importPath: string): void {
     console.log(`Processing fragment shader: ${fragmentShaderPath}`);
 
     // See if there is a corresponding vertex shader
@@ -376,7 +376,7 @@ function removeFunctionBodies(input: string): string {
  * @param shaderPath - The path to the .glsl files to convert.
  * @param importPath - The path to import the ShaderProgram type from.
  */
-function convertShaders(shaderPath: string, importPath: string) {
+export function convertShaders(shaderPath: string, importPath: string) {
     // Get all files in the path
     const allFiles = fs.readdirSync(shaderPath, { withFileTypes: true, recursive: true });
 
@@ -391,9 +391,4 @@ function convertShaders(shaderPath: string, importPath: string) {
     }
 }
 
-const externalArguments = process.argv.slice(2);
-if (externalArguments.length >= 2 && externalArguments[0] && externalArguments[1]) {
-    convertShaders(externalArguments[0], externalArguments[1]);
-}
-
 // TODO: simple copy from shader file to .ts, get it to build (including import trick)

packages/core/src/utils/buildTools/watchShaders.ts

@@ -0,0 +1,40 @@
+/* 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 { convertShader } from "./shaderConverter.js";
+import { watch } from "chokidar";
+import { extname } from "path";
+
+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;
+        }
+
+        // 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 shader changes in ${shaderPath}`);
+}

packages/demo/package.json

@@ -21,9 +21,12 @@
     "license": "MIT",
     "scripts": {
         "build": "npm run build:runTools && webpack --env=prod",
-        "build:runTools": "node ../../node_modules/@babylonjs/smart-filters/dist/utils/buildTools/shaderConverter.js ./src/configuration/blocks @babylonjs/smart-filters",
+        "build:runTools": "node ../../node_modules/@babylonjs/smart-filters/dist/utils/buildTools/buildShaders.js ./src/configuration/blocks @babylonjs/smart-filters",
+        "watch": "concurrently \"npm run watch:demo\" \"npm run watch:shaders\" \"npm run watch:shaders -w @babylonjs/smart-filters\"",
+        "watch:demo": "npx webpack-dev-server",
+        "watch:shaders": "node ../../node_modules/@babylonjs/smart-filters/dist/utils/buildTools/watchShaders.js ./src/configuration/blocks @babylonjs/smart-filters",
         "clean": "rimraf .temp && rimraf www/scripts",
-        "start": "npx webpack-dev-server",
+        "start": "npm run watch",
         "analyze": "webpack --profile --json > www/scripts/stats.json && npx webpack-bundle-analyzer www/scripts/stats.json"
     },
     "devDependencies": {