@needle-tools/materialx 1.0.0 → 1.0.1-next.19d0723

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+All notable changes to this package will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## [1.0.1] - 2025-07-08
+- Initial release

package/README.md

@@ -1 +1,25 @@
+# Needle MaterialX
+
+Load and display MaterialX materials in Needle Engine
+
+## Installation
+`npm i @needle-tools/materialx`  
+
+## How to use
+
+To use with Needle Engine simply import the module
+
+```ts
+import "@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/codegen/register_types.ts

@@ -2,5 +2,9 @@
 import { TypeStore } from "@needle-tools/engine"
 
 // Import types
+import { MaterialXMaterial } from "../src/materialx.material.js";
+import { MaterialXUniformUpdate } from "../src/loader/loader.needle.js";
 
 // Register types
+TypeStore.add("MaterialXMaterial", MaterialXMaterial);
+TypeStore.add("MaterialXUniformUpdate", MaterialXUniformUpdate);

package/index.ts

@@ -2,4 +2,4 @@ import { registerNeedleLoader } from "./src/loader/loader.needle.js";
 
 registerNeedleLoader();
 
-export { initializeMaterialX, getMaterialXEnvironment } from "./src/index.js";
+export { ready, getMaterialXEnvironment } from "./src/index.js";

package/package.json

@@ -1,20 +1,42 @@
 {
   "name": "@needle-tools/materialx",
-  "version": "1.0.0",
+  "version": "1.0.1-next.19d0723",
   "type": "module",
   "main": "index.ts",
-  "dependencies": {},
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "require": "./index.js"
+    },
+    "./package.json": "./package.json",
+    "./codegen/register_types.ts": {
+      "import": "./codegen/register_types.ts",
+      "require": "./codegen/register_types.js"
+    }
+  },
   "peerDependencies": {
     "@needle-tools/engine": "4.x",
     "three": "npm:@needle-tools/three@^0.169.5"
   },
   "devDependencies": {
     "@needle-tools/engine": "4.x",
+    "@types/three": "0.169.0",
     "three": "npm:@needle-tools/three@^0.169.5",
-    "@types/three": "0.169.0"
+    "vite": "^7.0.3"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
-  }
+  },
+  "keywords": [
+    "needle",
+    "materialx",
+    "material",
+    "shader",
+    "threejs",
+    "three.js",
+    "webgl",
+    "mtlx",
+    "rendering"
+  ]
 }

package/src/index.ts

@@ -1,5 +1,5 @@
-import { initializeMaterialX, state } from "./materialx.js";
+import { ready, state } from "./materialx.js";
 
 const getMaterialXEnvironment = () => state.materialXEnvironment;
 
-export { initializeMaterialX, getMaterialXEnvironment };
+export { ready, getMaterialXEnvironment };

package/src/loader/loader.needle.ts

@@ -6,32 +6,21 @@ import type { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import type { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";
 import { MaterialXLoader } from "./loader.three.js";
 import { debug } from "../utils.js";
-import { state } from "../materialx.js";
+import { MaterialXEnvironment, state } from "../materialx.js";
+import { MaterialXMaterial } from "../materialx.material.js";
 
 //@dont-generate-component
 export class MaterialXUniformUpdate extends Component {
 
-    static updateMaterial(mat: Material | Material[], object: Object3D, camera: Camera) {
-        if (Array.isArray(mat)) {
-            mat.forEach(m => {
-                if (m.userData?.updateUniforms) {
-                    m.userData.updateUniforms(object, camera);
-                }
-            });
-        } else if (mat.userData?.updateUniforms) {
-            mat.userData.updateUniforms(object, camera);
-        }
-    }
-
     onEnable(): void {
-        this.context.addBeforeRenderListener(this.gameObject, this._onBeforeRender);
+        this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
     }
 
     onDisable(): void {
-        this.context.removeBeforeRenderListener(this.gameObject, this._onBeforeRender);
+        this.context.removeBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
     }
 
-    _onBeforeRender = () => {
+    onBeforeRenderThree = () => {
         // Update uniforms or perform any pre-render logic here
         const gameObject = this.gameObject as any as Mesh;
         const material = gameObject?.material;
@@ -39,22 +28,24 @@ export class MaterialXUniformUpdate extends Component {
         const camera = this.context.mainCamera;
         if (!camera) return;
 
-        MaterialXUniformUpdate.updateMaterial(material, gameObject, camera);
+        const env = state.materialXEnvironment;
 
-        // If this is a Group, we need to update all direct children
-        if ((gameObject as any as Group).isGroup) {
-            gameObject.children.forEach((child: Object3D) => {
-                if (child instanceof Mesh && child.material)
-                    MaterialXUniformUpdate.updateMaterial(child.material, child, camera);
-            });
+        if (Array.isArray(material)) {
+            for (const entry of material) {
+                if (entry && entry instanceof MaterialXMaterial) {
+                    entry.updateUniforms(this.context, env, this.gameObject, camera);
+                }
+            }
+        } else if (material instanceof MaterialXMaterial) {
+            material.updateUniforms(this.context, env, this.gameObject, camera);
         }
     }
 }
 
 export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
-    name = "MaterialXLoaderPlugin";
+    readonly name = "MaterialXLoaderPlugin";
 
-    mtlxLoader: MaterialXLoader | null = null;
+    private loader: MaterialXLoader | null = null;
 
     onImport = (loader: GLTFLoader, url: string, context: Context) => {
         if (debug) console.log("MaterialXLoaderPlugin: Registering MaterialX extension for", url);
@@ -62,14 +53,18 @@ export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
         // Register the MaterialX loader extension
         // Environment initialization is now handled in the MaterialXLoader constructor
         loader.register(p => {
-            this.mtlxLoader = new MaterialXLoader(p, context);
-            return this.mtlxLoader;
+            this.loader = new MaterialXLoader(p, context);
+            return this.loader;
         });
     };
 
     onLoaded = (url: string, gltf: GLTF, _context: Context) => {
-        if (debug) console.log("MaterialXLoaderPlugin: glTF loaded", url, gltf.scene);
+        if (debug) console.log("[MaterialX] MaterialXLoaderPlugin: glTF loaded", { url, scene: gltf.scene, materialX_root_data: this.loader?.materialX_root_data });
 
+        // If we don't have MaterialX data in the loaded glTF we don't need to do anything else here
+        if (!this.loader?.materialX_root_data) {
+            return;
+        }
         // Set up onBeforeRender callbacks for objects with MaterialX materials
         // This ensures uniforms are updated properly during rendering
         gltf.scene.traverse((child) => {
@@ -77,26 +72,18 @@ export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
                 const mesh = child as Mesh;
                 const material = mesh.material as Material;
 
-                if (material?.userData?.updateUniforms) {
-                    if (debug) console.log("Adding MaterialX uniform update component to:", child.name);
+                if (material instanceof MaterialXMaterial) {
+                    if (debug) console.log("[MaterialX] Adding MaterialX uniform update component to:", child.name);
                     child.addComponent(MaterialXUniformUpdate);
                 }
             }
         });
 
-        if (debug) console.log("Loaded: ", this.mtlxLoader);
-
-        // Initialize MaterialX lighting system with scene data
-        const environment = state.materialXEnvironment;
-        environment.initializeFromContext().then(() => {
-            if (this.mtlxLoader) {
-                this.mtlxLoader.updateLightingFromEnvironment(environment);
-            }
-        });
+        if (debug) console.log("[MaterialX] Loaded: ", this.loader);
     };
 
     onExport = (_exporter: GLTFExporter, _context: Context) => {
-        console.log("TODO: MaterialXLoaderPlugin: Setting up export extensions");
+        console.log("[MaterialX] TODO: MaterialXLoaderPlugin: Setting up export extensions");
         // TODO: Add MaterialX export functionality if needed
     };
 }