@needle-tools/materialx 1.0.0-next.4880afa → 1.0.0-next.8019dc2

package/README.md

@@ -1 +1,27 @@
+# Needle MaterialX
+
+## Usage
+
+### Vite
+
+Make sure to disable `optimizeDeps` in your vite.config.js
+```js
+// config:
+{
+    optimizeDeps: {
+		exclude: ['@needle-tools/materialx']
+	},
+}
+```
+
+
+<br />
+
+# Contact ✒️
+<b>[🌵 Needle](https://needle.tools)</b> • 
+[Github](https://github.com/needle-tools) • 
+[Twitter](https://twitter.com/NeedleTools) • 
+[Discord](https://discord.needle.tools) • 
+[Forum](https://forum.needle.tools) • 
+[Youtube](https://www.youtube.com/@needle-tools)
 

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@needle-tools/materialx",
-  "version": "1.0.0-next.4880afa",
+  "version": "1.0.0-next.8019dc2",
   "type": "module",
   "main": "index.ts",
   "exports": {
     ".": {
-      "import": "./src/index.ts",
-      "require": "./src/index.js"
+      "import": "./index.ts",
+      "require": "./index.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./vite": {
+      "import": "./src/vite/index.js",
+      "require": "./src/vite/index.js"
+    }
   },
   "peerDependencies": {
     "@needle-tools/engine": "4.x",

package/src/index.ts

@@ -2,4 +2,5 @@
 
 const getMaterialXEnvironment = () => state.materialXEnvironment;
 
-export { initializeMaterialX, getMaterialXEnvironment };
+export { initializeMaterialX, getMaterialXEnvironment };
+export { needleMaterialX } from "./vite/index.js";

package/src/materialx.ts

@@ -5,44 +5,6 @@ import { renderPMREMToEquirect } from "./textureHelper.js";
 import { Light, MeshBasicMaterial, Object3D, PMREMGenerator } from "three";
 import { registerLights } from "./helper.js";
 
-const coreWasmUrl = new URL('../bin/JsMaterialXCore.wasm', import.meta.url).href;
-const shaderDataUrl = new URL('../bin/JsMaterialXGenShader.data', import.meta.url).href;
-const shaderWasmUrl = new URL('../bin/JsMaterialXGenShader.wasm', import.meta.url).href;
-
-// const moduleUrls = import.meta.glob('../bin/JsMaterialXCore.wasm', {
-//   query: '?url',
-//   import: 'default',
-// })
-// import jsMaterialCoreUrl from "../bin/JsMaterialXCore.wasm?url";
-
-// Configure MaterialX with the correct path for its data files
-const materialXConfig = {
-    locateFile: (path: string, scriptDirectory: string) => {
-        if (debug) console.debug("MaterialX locateFile called:", { path, scriptDirectory });
-
-        // Return the correct path for MaterialX data files
-        if (path.endsWith('.data') || path.endsWith('.wasm')) {
-            if(path.includes("JsMaterialXCore.wasm")) {
-                return coreWasmUrl; // Use the URL for the core WASM file
-            }
-            else if (path.includes("JsMaterialXGenShader.data")) {
-                return shaderDataUrl; // Use the URL for the shader data file
-            }
-            else if (path.includes("JsMaterialXGenShader.wasm")) {
-                return shaderWasmUrl; // Use the URL for the shader WASM file
-            }
-            // For Vite dev server, we need to use the correct module path
-            const url = new URL(`../bin/${path}?url`, import.meta.url);
-            const correctPath = url.href;
-            if (debug) console.debug("MaterialX locateFile resolved:", correctPath, { url, meta_url: import.meta.url });
-            return correctPath;
-        }
-        return scriptDirectory + path;
-    },
-    // Add buffer allocation to handle the data file properly
-    wasmBinary: null,
-    wasmMemory: null
-};
 
 // Global MaterialX module instance - initialized lazily
 export const state = new class {
@@ -60,7 +22,6 @@ export const state = new class {
     }
 }
 
-
 // Initialize MaterialX WASM module lazily
 export async function initializeMaterialX(): Promise<void> {
     if (state.materialXInitPromise) {
@@ -70,7 +31,34 @@ export async function initializeMaterialX(): Promise<void> {
         if (state.materialXModule) return; // Already initialized
         if (debug) console.log("Initializing MaterialX WASM module...");
         try {
-            const module = await MaterialX(materialXConfig);
+
+            const urls: Array<string> = await Promise.all([
+                /** @ts-ignore */
+                import(`../bin/JsMaterialXCore.wasm?url`).then(m => m.default || m),
+                /** @ts-ignore */
+                import(`../bin/JsMaterialXGenShader.wasm?url`).then(m => m.default || m),
+                /** @ts-ignore */
+                import(`../bin/JsMaterialXGenShader.data?url`).then(m => m.default || m),
+            ]);
+            const [JsMaterialXCore, JsMaterialXGenShader, JsMaterialXGenShader_data] = urls;
+
+            const module = await MaterialX({
+                locateFile: (path: string, scriptDirectory: string) => {
+                    if (debug) console.debug("MaterialX locateFile called:", { path, scriptDirectory });
+
+                    if (path.includes("JsMaterialXCore.wasm")) {
+                        return JsMaterialXCore; // Use the URL for the core WASM file
+                    }
+                    else if (path.includes("JsMaterialXGenShader.wasm")) {
+                        return JsMaterialXGenShader; // Use the URL for the shader WASM file
+                    }
+                    else if (path.includes("JsMaterialXGenShader.data")) {
+                        return JsMaterialXGenShader_data; // Use the URL for the shader data file
+                    }
+
+                    return scriptDirectory + path;
+                },
+            });
             if (debug) console.log("MaterialXLoader module loaded", module);
             state.materialXModule = module;
 
@@ -84,15 +72,15 @@ export async function initializeMaterialX(): Promise<void> {
             tempDoc.setDataLibrary(state.materialXStdLib);
 
             // Initialize basic lighting with default light rig
-            const defaultLightRigXml = `<?xml version="1.0"?>
-<materialx version="1.39">
-  <!-- Default directional light -->
-  <directional_light name="default_light" type="lightshader">
-    <input name="direction" type="vector3" value="0.0, -1.0, -0.5" />
-    <input name="color" type="color3" value="1.0, 1.0, 1.0" />
-    <input name="intensity" type="float" value="1.0" />
-  </directional_light>
-</materialx>`;
+            //             const defaultLightRigXml = `<?xml version="1.0"?>
+            // <materialx version="1.39">
+            //   <!-- Default directional light -->
+            //   <directional_light name="default_light" type="lightshader">
+            //     <input name="direction" type="vector3" value="0.0, -1.0, -0.5" />
+            //     <input name="color" type="color3" value="1.0, 1.0, 1.0" />
+            //     <input name="intensity" type="float" value="1.0" />
+            //   </directional_light>
+            // </materialx>`;
 
             // This prewarms the shader generation context to have all light types
             await registerLights(state.materialXModule, [], state.materialXGenContext);

package/src/vite/index.js

@@ -0,0 +1,18 @@
+/**
+ * Vite plugin to exclude the @needle-tools/materialx package from dependency optimization.
+ * @returns {import('vite').Plugin} The Vite plugin configuration.
+ */
+export function needleMaterialX() {
+    return {
+        name: "needle-materialx",
+        config: (config, _env) => {
+            config.optimizeDeps ??= {};
+            config.optimizeDeps.exclude ??= [];
+            // to make .data files work
+            if (!config.optimizeDeps.exclude.includes("@needle-tools/materialx")) {
+                config.optimizeDeps.exclude.push("@needle-tools/materialx");
+            }
+            return config;
+        }
+    }
+}