@needle-tools/materialx 1.0.1 → 1.0.2-next.c468cd8

package/CHANGELOG.md

@@ -4,5 +4,10 @@ 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.2] - 2025-07-10
+- Add: Material extension `doubleSided` support
+- Improved lighting support
+- Improved texture loading and fix bug where glTF texture index was not resolved properly
+
 ## [1.0.1] - 2025-07-08
 - Initial release

package/README.md

@@ -1,5 +1,10 @@
 # Needle MaterialX
 
+Web runtime support to 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

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,6 +1,6 @@
 {
   "name": "@needle-tools/materialx",
-  "version": "1.0.1",
+  "version": "1.0.2-next.c468cd8",
   "type": "module",
   "main": "index.ts",
   "exports": {
@@ -8,7 +8,11 @@
       "import": "./index.ts",
       "require": "./index.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./codegen/register_types.ts": {
+      "import": "./codegen/register_types.ts",
+      "require": "./codegen/register_types.js"
+    }
   },
   "peerDependencies": {
     "@needle-tools/engine": "4.x",
@@ -23,5 +27,16 @@
   "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, url, 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
     };
 }