@needle-tools/materialx 1.0.1-next.df0e959 → 1.0.1

package/README.md

@@ -1,10 +1,5 @@
 # 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

package/codegen/register_types.ts

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

package/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/materialx",
-  "version": "1.0.1-next.df0e959",
+  "version": "1.0.1",
   "type": "module",
   "main": "index.ts",
   "exports": {
@@ -8,11 +8,7 @@
       "import": "./index.ts",
       "require": "./index.js"
     },
-    "./package.json": "./package.json",
-    "./codegen/register_types.ts": {
-      "import": "./codegen/register_types.ts",
-      "require": "./codegen/register_types.js"
-    }
+    "./package.json": "./package.json"
   },
   "peerDependencies": {
     "@needle-tools/engine": "4.x",
@@ -27,16 +23,5 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
-  },
-  "keywords": [
-    "needle",
-    "materialx",
-    "material",
-    "shader",
-    "threejs",
-    "three.js",
-    "webgl",
-    "mtlx",
-    "rendering"
-  ]
-}
+  }
+}

package/src/helper.js

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-import { getParam, getWorldDirection } from '@needle-tools/engine';
+import { getParam } from '@needle-tools/engine';
 import * as THREE from 'three';
 
 const debug = getParam("debugmaterialx");
@@ -88,7 +88,7 @@ function fromMatrix(matrix, dimension)
  * @param {mx.Uniform.value} value
  * @param {mx.Uniform.name} name
  * @param {mx.Uniforms} uniforms
- * @param {THREE.TextureLoader} textureLoader
+ * @param {THREE.textureLoader} textureLoader
  * @param {string} searchPath
  * @param {boolean} flipY
  */
@@ -301,14 +301,10 @@ export function findLights(doc)
 export async function registerLights(mx, lights, genContext)
 {
     mx.HwShaderGenerator.unbindLightShaders(genContext);
-    // TODO Remove, not sure why we need that – something resets the value inbetween calls to registerLights
-    genContext.getOptions().hwMaxActiveLightSources = 4;
 
     const lightTypesBound = {};
     const lightData = [];
     let lightId = 1;
-    let lightCount = 0;
-    const maxLightCount = genContext.getOptions().hwMaxActiveLightSources;
 
     // All light types so that we have NodeDefs for them
     const defaultLightRigXml = `<?xml version="1.0"?>
@@ -335,9 +331,6 @@ export async function registerLights(mx, lights, genContext)
     const defaultLights = findLights(document);
     if (debug) console.log("Default lights in MaterialX document", defaultLights);
 
-    // Loading a document seems to reset this option for some reason, so we set it again
-    genContext.getOptions().hwMaxActiveLightSources = maxLightCount;
-
     // Register types only – we get these from the default light rig XML above
     // This is needed to ensure that the light shaders are bound for each light type
     for (let light of defaultLights)
@@ -421,44 +414,18 @@ export async function registerLights(mx, lights, genContext)
             mx.HwShaderGenerator.bindLightShader(nodeDef, lightId++, genContext);
         }
 
-        const wp = light.getWorldPosition(new THREE.Vector3());
-        const wd = getWorldDirection(light, new THREE.Vector3(0,0,-1));
         lightData.push({
             type: lightTypesBound[lightDefinitionName],
-            position: wp.clone(),
-            direction: wd.clone(),
+            direction: light.direction?.clone() || new THREE.Vector3(0, -1, 0),
             color: new THREE.Vector3().fromArray(light.color.toArray()),
-            intensity: light.intensity, // Scale intensity for spot lights
-            decay_rate: 2.0, // physically-based default decay rate
-            inner_angle: 1.0,
-            outer_angle: 2.0,
+            intensity: light.intensity,
         });
     }
 
-    // Count the number of lights that are not empty
-    lightCount = lightData.length;
-
-    // If we don't have enough entries in lightData, fill with empty lights
-    if (lightData.length < maxLightCount)
-    {
-        const emptyLight = {
-            type: 0, // Default light type
-            position: new THREE.Vector3(0, 0, 0),
-            direction: new THREE.Vector3(0, 0, -1),
-            color: new THREE.Vector3(0, 0, 0),
-            intensity: 0,
-            decay_rate: 2,
-            inner_angle: 0,
-            outer_angle: 0,
-        };
-        while (lightData.length < maxLightCount) {
-            lightData.push(emptyLight);
-        }
-    }
-
-    if (debug) console.log("Registered lights in MaterialX context", lightTypesBound, lightData);
+    // Make sure max light count is large enough
+    genContext.getOptions().hwMaxActiveLightSources = Math.max(genContext.getOptions().hwMaxActiveLightSources, lightData.length);
 
-    return { lightData, lightCount };
+    return lightData;
 }
 
 /**

package/src/index.ts

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

package/src/loader/loader.needle.ts

@@ -52,9 +52,9 @@ export class MaterialXUniformUpdate extends Component {
 }
 
 export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
-    readonly name = "MaterialXLoaderPlugin";
+    name = "MaterialXLoaderPlugin";
 
-    private loader: MaterialXLoader | null = null;
+    mtlxLoader: MaterialXLoader | null = null;
 
     onImport = (loader: GLTFLoader, url: string, context: Context) => {
         if (debug) console.log("MaterialXLoaderPlugin: Registering MaterialX extension for", url);
@@ -62,13 +62,13 @@ export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
         // Register the MaterialX loader extension
         // Environment initialization is now handled in the MaterialXLoader constructor
         loader.register(p => {
-            this.loader = new MaterialXLoader(p, context);
-            return this.loader;
+            this.mtlxLoader = new MaterialXLoader(p, context);
+            return this.mtlxLoader;
         });
     };
 
-    onLoaded = (url: string, gltf: GLTF, context: Context) => {
-        if (debug) console.log("[MaterialX] MaterialXLoaderPlugin: glTF loaded", url, gltf.scene);
+    onLoaded = (url: string, gltf: GLTF, _context: Context) => {
+        if (debug) console.log("MaterialXLoaderPlugin: glTF loaded", url, gltf.scene);
 
         // Set up onBeforeRender callbacks for objects with MaterialX materials
         // This ensures uniforms are updated properly during rendering
@@ -78,23 +78,25 @@ export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
                 const material = mesh.material as Material;
 
                 if (material?.userData?.updateUniforms) {
-                    if (debug) console.log("[MaterialX] Adding MaterialX uniform update component to:", child.name);
+                    if (debug) console.log("Adding MaterialX uniform update component to:", child.name);
                     child.addComponent(MaterialXUniformUpdate);
                 }
             }
         });
 
-        if (debug) console.log("[MaterialX] Loaded: ", this.loader);
+        if (debug) console.log("Loaded: ", this.mtlxLoader);
 
         // Initialize MaterialX lighting system with scene data
         const environment = state.materialXEnvironment;
-        environment.initializeFromContext(context).then(() => {
-            this.loader?.updateLightingFromEnvironment(environment);
+        environment.initializeFromContext().then(() => {
+            if (this.mtlxLoader) {
+                this.mtlxLoader.updateLightingFromEnvironment(environment);
+            }
         });
     };
 
     onExport = (_exporter: GLTFExporter, _context: Context) => {
-        console.log("[MaterialX] TODO: MaterialXLoaderPlugin: Setting up export extensions");
+        console.log("TODO: MaterialXLoaderPlugin: Setting up export extensions");
         // TODO: Add MaterialX export functionality if needed
     };
 }

package/src/loader/loader.three.ts

@@ -1,34 +1,31 @@
 import { Context } from "@needle-tools/engine";
-import { ShaderMaterial, Material, MeshStandardMaterial, LoadingManager, TextureLoader, Texture, NearestFilter, Matrix4, GLSL3, AddEquation, OneMinusSrcAlphaFactor, SrcAlphaFactor, DoubleSide, Matrix3, Vector3, Object3D, Camera } from "three";
+import { RawShaderMaterial, Material, MeshStandardMaterial, LoadingManager, TextureLoader, Texture, NearestFilter, Matrix4, GLSL3, AddEquation, OneMinusSrcAlphaFactor, SrcAlphaFactor, DoubleSide, Matrix3, Vector3, Object3D, Camera } from "three";
 import { GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { getUniformValues } from "../helper.js";
-import { ready, MaterialXEnvironment, state } from "../materialx.js";
+import { initializeMaterialX, MaterialXEnvironment, state } from "../materialx.js";
 import { debug } from "../utils.js";
 
 // TypeScript interfaces matching the C# data structures
-interface MaterialX_root_extension {
-    /** e.g. 1.39 */
-    version: string;
-    /** e.g. "Material" */
-    name: string;
-    /** MaterialX xml content */
-    mtlx: string;
+interface MaterialXData {
+    version: string; // e.g. "1.39"
+    name: string;    // e.g. "Material"
+    mtlx: string;    // MaterialX XML content
 }
 
-interface MaterialX_material_extension {
-    name: string; // Material name reference
+interface MaterialXDataIndex {
+    name: string;    // Material name reference
 }
 
 // MaterialX loader extension for js GLTFLoader
 export class MaterialXLoader implements GLTFLoaderPlugin {
     name = "NEEDLE_materials_mtlx";
 
-    private rootMaterialXData: MaterialX_root_extension | null = null;
+    private rootMaterialXData: MaterialXData | null = null;
     private parsedDocument: any = null;
     private documentParsePromise: Promise<any> | null = null;
     private rootDataInitialized = false;
     private environmentInitialized = false;
-    private generatedMaterials: ShaderMaterial[] = [];
+    private generatedMaterials: RawShaderMaterial[] = [];
 
     constructor(private parser: GLTFParser, private context: Context) {
         if (debug) console.log("MaterialXLoader created for parser");
@@ -40,20 +37,22 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
     private async initializeEnvironment(): Promise<void> {
         if (this.environmentInitialized) return;
 
-        if (debug) console.log("[MaterialX] MaterialXLoader: Initializing MaterialX environment...");
+        if (debug) console.log("MaterialXLoader: Initializing MaterialX environment...");
 
         // Ensure MaterialX is initialized first
-        await ready();
+        await initializeMaterialX();
 
         // Set up environment with context
         const environment = state.materialXEnvironment;
+        environment.setContext(this.context);
+
         // Initialize the environment from context (properly awaited)
         try {
-            await environment.initializeFromContext(this.context);
+            await environment.initializeFromContext();
             this.environmentInitialized = true;
-            if (debug) console.log("[MaterialX] MaterialXLoader: Environment initialized successfully");
+            if (debug) console.log("MaterialXLoader: Environment initialized successfully");
         } catch (error) {
-            console.warn("[MaterialX] MaterialXLoader: Failed to initialize MaterialX environment:", error);
+            console.warn("MaterialXLoader: Failed to initialize MaterialX environment:", error);
         }
     }
 
@@ -63,10 +62,10 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
 
         const gltfExtensions = this.parser.json.extensions;
         if (gltfExtensions?.[this.name]) {
-            if (debug) console.log("[MaterialX] extension found in root:", gltfExtensions[this.name]);
+            if (debug) console.log("MaterialX extension found in root:", gltfExtensions[this.name]);
 
             const materialXExtension = gltfExtensions[this.name];
-            this.rootMaterialXData = materialXExtension as MaterialX_root_extension;
+            this.rootMaterialXData = materialXExtension as MaterialXData;
         }
         this.rootDataInitialized = true;
     }
@@ -80,13 +79,13 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
         this.documentParsePromise = (async () => {
             if (this.parsedDocument) return this.parsedDocument;
 
-            if (debug) console.log("[MaterialX] Parsing MaterialX root document...");
+            if (debug) console.log("Parsing MaterialX root document...");
 
             // Ensure MaterialX is initialized
-            await ready();
+            await initializeMaterialX();
 
             if (!state.materialXModule) {
-                throw new Error("[MaterialX] module failed to initialize");
+                throw new Error("MaterialX module failed to initialize");
             }
 
             // Create MaterialX document and parse ALL the XML data from root
@@ -95,11 +94,11 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
 
             // Parse all MaterialX XML strings from the root data
             if (this.rootMaterialXData) {
-                if (debug) console.log(`[MaterialX] Parsing XML for: ${this.rootMaterialXData.name}`);
+                if (debug) console.log(`Parsing MaterialX XML for: ${this.rootMaterialXData.name}`);
                 await state.materialXModule.readFromXmlString(doc, this.rootMaterialXData.mtlx, "");
             }
 
-            if (debug) console.log("[MaterialX] root document parsed successfully");
+            if (debug) console.log("MaterialX root document parsed successfully");
 
             this.parsedDocument = doc;
             return doc;
@@ -123,10 +122,10 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
         this.initializeRootData();
 
         const materialDef = this.parser.json.materials?.[materialIndex];
-        if (debug) console.log("[MaterialX] extension found in material:", materialDef.extensions[this.name]);
+        if (debug) console.log("MaterialX extension found in material:", materialDef.extensions[this.name]);
 
         // Handle different types of MaterialX data
-        const dataIndex = materialDef.extensions[this.name] as MaterialX_material_extension;
+        const dataIndex = materialDef.extensions[this.name] as MaterialXDataIndex;
 
         if (dataIndex) {
             // Create a new material and process MaterialX - AWAIT THIS!
@@ -140,12 +139,12 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
     }
 
     private rootDocument: Promise<any> | null = null;
-    private async createMaterialXMaterial(materialXData: MaterialX_material_extension): Promise<Material> {
+    private async createMaterialXMaterial(materialXData: MaterialXDataIndex): Promise<Material> {
         try {
             if (debug) console.log(`Creating MaterialX material: ${materialXData.name}`);
 
             // Ensure MaterialX is initialized and document is parsed
-            await ready();
+            await initializeMaterialX();
 
             if (!this.rootDocument) {
                 this.rootDocument = this.parseRootDocument();
@@ -153,7 +152,7 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
             const doc = await this.rootDocument;
 
             if (!state.materialXModule || !state.materialXGenerator || !state.materialXGenContext) {
-                console.warn("[MaterialX] WASM module not ready, returning fallback material");
+                console.warn("MaterialX WASM module not ready, returning fallback material");
                 const fallbackMaterial = new MeshStandardMaterial();
                 fallbackMaterial.userData.materialX = materialXData;
                 fallbackMaterial.name = `MaterialX_Fallback_${materialXData.name}`;
@@ -164,11 +163,11 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
             let renderableElement = null;
             let foundRenderable = false;
 
-            if (debug) console.log("[MaterialX] document", doc);
+            if (debug) console.log("Mtlx doc", doc);
 
             // Search for material nodes first (following the reference pattern)
             const materialNodes = doc.getMaterialNodes();
-            if (debug) console.log(`[MaterialX] Found ${materialNodes.length} material nodes in document`, materialNodes);
+            if (debug) console.log(`Found ${materialNodes.length} material nodes in document`, materialNodes);
 
             // Handle both array and vector-like APIs
             const materialNodesLength = materialNodes.length;
@@ -176,13 +175,13 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
                 const materialNode = materialNodes[i];
                 if (materialNode) {
                     const materialName = materialNode.getNamePath();
-                    if (debug) console.log('[MaterialX] Scan material: ', i, materialName);
+                    if (debug) console.log('Scan material: ', i, materialName);
 
                     // Find the matching material
                     if (materialName == materialXData.name) {
                         renderableElement = materialNode;
                         foundRenderable = true;
-                        if (debug) console.log('[MaterialX] -- add material: ', materialName);
+                        if (debug) console.log('-- add material: ', materialName);
                         break;
                     }
                 }
@@ -236,35 +235,35 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
             */
 
             if (!renderableElement) {
-                console.warn("[MaterialX] No renderable element found in MaterialX document");
+                console.warn("No renderable element found in MaterialX document");
                 const fallbackMaterial = new MeshStandardMaterial();
                 fallbackMaterial.userData.materialX = materialXData;
                 fallbackMaterial.name = `MaterialX_NoRenderable_${materialXData.name}`;
                 return fallbackMaterial;
             }
 
-            if (debug) console.log("[MaterialX] Using renderable element for shader generation");
+            if (debug) console.log("Using renderable element for shader generation");
 
             // Check transparency and set context options like the reference
             let isTransparent = state.materialXModule.isTransparentSurface(renderableElement, state.materialXGenerator.getTarget());
             state.materialXGenContext.getOptions().hwTransparency = isTransparent;
+            state.materialXGenContext.getOptions().shaderInterfaceType = state.materialXModule.ShaderInterfaceType.SHADER_INTERFACE_COMPLETE;
+            state.materialXGenContext.getOptions().hwSrgbEncodeOutput = true; // Like the reference
 
             // Generate shaders using the element's name path
-            if (debug) console.log("[MaterialX] Generating MaterialX shaders...");
+            if (debug) console.log("Generating MaterialX shaders...");
             const elementName = (renderableElement as any).getNamePath ? (renderableElement as any).getNamePath() : (renderableElement as any).getName();
 
             const shader = state.materialXGenerator.generate(elementName, renderableElement, state.materialXGenContext);
 
-            // Get vertex and fragment shader source, and remove #version directive for newer js. 
-            // It's added by three.js glslVersion.
+            // Get vertex and fragment shader source
+            // Remove #version directive for newer js. It's added by RawShaderMaterial glslVersion.
             let vertexShader = shader.getSourceCode("vertex").replace(/^#version.*$/gm, '').trim();
             let fragmentShader = shader.getSourceCode("pixel").replace(/^#version.*$/gm, '').trim();
 
             // MaterialX uses different attribute names than js defaults,
             // so we patch the MaterialX shaders to match the js standard names.
-            // Otherwise, we'd have to modify the mesh attributes (see original MaterialX for reference).
-
-            // Patch vertexShader
+            // Otherwise, we'd have to modify the mesh attributes (see below).
             vertexShader = vertexShader.replace(/\bi_position\b/g, 'position');
             vertexShader = vertexShader.replace(/\bi_normal\b/g, 'normal');
             vertexShader = vertexShader.replace(/\bi_texcoord_0\b/g, 'uv');
@@ -272,7 +271,6 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
             vertexShader = vertexShader.replace(/\bi_tangent\b/g, 'tangent');
             vertexShader = vertexShader.replace(/\bi_color_0\b/g, 'color');
 
-            // Patch fragmentShader
             fragmentShader = fragmentShader.replace(/\bi_position\b/g, 'position');
             fragmentShader = fragmentShader.replace(/\bi_normal\b/g, 'normal');
             fragmentShader = fragmentShader.replace(/\bi_texcoord_0\b/g, 'uv');
@@ -280,30 +278,19 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
             fragmentShader = fragmentShader.replace(/\bi_tangent\b/g, 'tangent');
             fragmentShader = fragmentShader.replace(/\bi_color_0\b/g, 'color');
 
-            // Remove `in vec3 position;` and so on since they're already declared by ShaderMaterial
-            vertexShader = vertexShader.replace(/in\s+vec3\s+position;/g, '');
-            vertexShader = vertexShader.replace(/in\s+vec3\s+normal;/g, '');
-            vertexShader = vertexShader.replace(/in\s+vec3\s+uv;/g, '');
-            vertexShader = vertexShader.replace(/in\s+vec3\s+uv1;/g, '');
-            vertexShader = vertexShader.replace(/in\s+vec4\s+tangent;/g, '');
-            vertexShader = vertexShader.replace(/in\s+vec4\s+color;/g, '');
-
-            // Patch uv 2-component to 3-component (`texcoord_0 = uv;` needs to be replaced with `texcoord_0 = vec3(uv, 0.0);`)
-            // TODO what if we actually have a 3-component UV? Not sure what three.js does then
-            vertexShader = vertexShader.replace(/texcoord_0 = uv;/g, 'texcoord_0 = vec3(uv, 0.0);');
-
-            // Add tonemapping and colorspace handling
-            // Replace `out vec4 out1;` with `out vec4 gl_FragColor;`
-            fragmentShader = fragmentShader.replace(/out\s+vec4\s+out1;/, 'layout(location = 0) out vec4 pc_fragColor;\n#define gl_FragColor pc_fragColor');
-            // Replace `out1 = vec4(<CAPTURE>)` with `gl_FragColor = vec4(<CAPTURE>)` and tonemapping/colorspace handling
-            fragmentShader = fragmentShader.replace(/^\s*out1\s*=\s*vec4\((.*)\);/gm,
-                `
-    gl_FragColor = vec4($1);
-    #include <tonemapping_fragment>
-    #include <colorspace_fragment>`);
+            // From the original code:
+
+            /* PATCHING THE SHADER IS BETTER – THIS IS JUST FOR REFERENCE 
+            // Use default MaterialX naming convention.
+            var startStreamTime = performance.now();
+            child.geometry.attributes.i_position = child.geometry.attributes.position;
+            child.geometry.attributes.i_normal = child.geometry.attributes.normal;
+            child.geometry.attributes.i_tangent = child.geometry.attributes.tangent;
+            child.geometry.attributes.i_texcoord_0 = child.geometry.attributes.uv;
+            */
 
             if (debug) {
-                console.group("[MaterialX]: ", materialXData.name);
+                console.group("Material: ", materialXData.name);
                 console.log("Vertex shader length:", vertexShader.length, vertexShader);
                 console.log("Fragment shader length:", fragmentShader.length, fragmentShader);
                 console.groupEnd();
@@ -342,17 +329,17 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
                     const textures = ext?.textures || [];
 
                     const index = textures.findIndex(tex => {
-                        if (debug) console.log("[MaterialX] Checking texture:", tex.name, "against URL:", filenameWithoutExt);
+                        if (debug) console.log("Checking texture:", tex.name, "against URL:", filenameWithoutExt);
                         return tex.name === filenameWithoutExt;
                     });
 
                     if (index < 0) {
-                        console.warn("[MaterialX] Texture not found in parser:", filenameWithoutExt, this.parser.json);
+                        console.warn("Texture not found in parser:", filenameWithoutExt, this.parser.json);
                         onError?.(new Error(`Texture not found: ${filenameWithoutExt}`));
                         return;
                     }
                     this.parser.getDependency("texture", index).then(tex => {
-                        if (debug) console.log("[MaterialX] Texture loaded:", tex);
+                        if (debug) console.log("Texture loaded:", tex);
                         // update the checkerboard texture with the loaded texture
                         checkerboardTexture.image = tex.image;
                         checkerboardTexture.needsUpdate = true;
@@ -397,7 +384,7 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
             }
 
             const mips = Math.trunc(Math.log2(Math.max(radianceTexture?.width ?? 0, radianceTexture?.height ?? 0))) + 1;
-            if (debug) console.log("[MaterialX] Radiance texture mips:", mips, "for texture size:", radianceTexture?.width, "x", radianceTexture?.height);
+            if (debug) console.log("Radiance texture mips:", mips, "for texture size:", radianceTexture?.width, "x", radianceTexture?.height);
             Object.assign(uniforms, {
                 u_envMatrix: { value: getLightRotation() },
                 u_envRadiance: { value: radianceTexture, type: 't' },
@@ -415,7 +402,7 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
             // console.log("Generated fragment shader:", fragmentShader.substring(0, 500) + "...");
 
             // Create js RawShaderMaterial (with GLSL3 for MaterialX compatibility)
-            const shaderMaterial = new ShaderMaterial({
+            const shaderMaterial = new RawShaderMaterial({
                 uniforms: uniforms,
                 vertexShader: vertexShader,
                 fragmentShader: fragmentShader,
@@ -486,7 +473,7 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
             shaderMaterial.name = `MaterialX_Generated_${materialXData.name}`;
 
             // Add debugging to see if the material compiles correctly
-            if (debug) console.log("[MaterialX]  material created successfully:", shaderMaterial.name);
+            if (debug) console.log("MaterialX material created successfully:", shaderMaterial.name);
             // if (debug) console.log("Material uniforms keys:", Object.keys(shaderMaterial.uniforms || {}));
             // if (debug) console.log("Material transparent:", shaderMaterial.transparent);
             // if (debug) console.log("Material side:", shaderMaterial.side);
@@ -498,7 +485,7 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
 
         } catch (error) {
             // This is a wasm error (an int) that we need to resolve
-            console.error("[MaterialX] Error creating MaterialX material:", error);
+            console.error("Error creating MaterialX material:", error);
             // Return a fallback material with stored MaterialX data
             const fallbackMaterial = new MeshStandardMaterial();
             fallbackMaterial.userData.materialX = materialXData;
@@ -512,12 +499,12 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
     updateLightingFromEnvironment(environment: MaterialXEnvironment): void {
 
         // Get lighting data from environment
+        // const lights = environment.getLights() || [];
         const lightData = environment.getLightData() || null;
-        const lightCount = environment.getLightCount() || 0;
         const radianceTexture = environment.getRadianceTexture() || null;
         const irradianceTexture = environment.getIrradianceTexture() || null;
 
-        if (debug) console.log(`[MaterialX] Updating lighting for ${this.generatedMaterials.length} MaterialX materials`, {
+        if (debug) console.log(`Updating lighting for ${this.generatedMaterials.length} MaterialX materials`, {
             lightData, radianceTexture, irradianceTexture,
         });
 
@@ -526,8 +513,8 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
             if (!material.uniforms) return;
 
             // Update light count
-            if (material.uniforms.u_numActiveLightSources && lightCount >= 0) {
-                material.uniforms.u_numActiveLightSources.value = lightCount;
+            if (material.uniforms.u_numActiveLightSources && lightData) {
+                material.uniforms.u_numActiveLightSources.value = lightData.length;
             }
 
             // Update light data if we have lights
@@ -536,9 +523,7 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
                     material.uniforms.u_lightData = { value: null };
                 }
                 material.uniforms.u_lightData.value = lightData;
-                if (debug) console.log("[MaterialX] Updated light data for material", material.name, lightData, material.uniforms,);
             }
-            else if(debug) console.warn("[MaterialX] No light data available to update uniforms for material", material.name);
 
             // Update environment uniforms
             if (material.uniforms.u_envMatrix) {

package/src/materialx.ts

@@ -1,13 +1,14 @@
-import { Context, delay, isDevEnvironment, ObjectUtils, GameObject } from "@needle-tools/engine";
+import { Context, delay, isDevEnvironment, ObjectUtils } from "@needle-tools/engine";
 import MaterialX from "../bin/JsMaterialXGenShader.js";
 import { debug } from "./utils.js";
 import { renderPMREMToEquirect } from "./textureHelper.js";
-import { Light, MeshBasicMaterial, Object3D, PMREMGenerator, Texture } from "three";
+import { Light, MeshBasicMaterial, Object3D, PMREMGenerator } from "three";
 import { registerLights } from "./helper.js";
 
 
+// Global MaterialX module instance - initialized lazily
 export const state = new class {
-    materialXModule: typeof MaterialX | null = null;
+    materialXModule: any = null;
     materialXGenerator: any = null;
     materialXGenContext: any = null;
     materialXStdLib: any = null;
@@ -21,14 +22,14 @@ export const state = new class {
     }
 }
 
-/** Initialize the MaterialX module. Must be awaited before trying to create materials */
-export async function ready(): Promise<void> {
+// Initialize MaterialX WASM module lazily
+export async function initializeMaterialX(): Promise<void> {
     if (state.materialXInitPromise) {
         return state.materialXInitPromise;
     }
     return state.materialXInitPromise = (async () => {
         if (state.materialXModule) return; // Already initialized
-        if (debug) console.log("[MaterialX] Initializing WASM module...");
+        if (debug) console.log("Initializing MaterialX WASM module...");
         try {
 
             const urls: Array<string> = await Promise.all([
@@ -43,7 +44,7 @@ export async function ready(): Promise<void> {
 
             const module = await MaterialX({
                 locateFile: (path: string, scriptDirectory: string) => {
-                    if (debug) console.debug("[MaterialX]  locateFile called:", { path, scriptDirectory });
+                    if (debug) console.debug("MaterialX locateFile called:", { path, scriptDirectory });
 
                     if (path.includes("JsMaterialXCore.wasm")) {
                         return JsMaterialXCore; // Use the URL for the core WASM file
@@ -58,7 +59,7 @@ export async function ready(): Promise<void> {
                     return scriptDirectory + path;
                 },
             });
-            if (debug) console.log("[MaterialX] module loaded", module);
+            if (debug) console.log("MaterialXLoader module loaded", module);
             state.materialXModule = module;
 
             // Initialize shader generator and context
@@ -70,36 +71,23 @@ export async function ready(): Promise<void> {
             state.materialXStdLib = module.loadStandardLibraries(state.materialXGenContext);
             tempDoc.setDataLibrary(state.materialXStdLib);
 
-            // TODO ShaderInterfaceType.SHADER_INTERFACE_REDUCED would be better, but doesn't actually seem to be supported in the MaterialX javascript bindings
-            const options = state.materialXGenContext.getOptions();
-            state.materialXGenContext.getOptions().shaderInterfaceType = state.materialXModule.ShaderInterfaceType.SHADER_INTERFACE_COMPLETE;
-
-            // SPECULAR_ENVIRONMENT_NONE: Do not use specular environment maps.
-            // SPECULAR_ENVIRONMENT_FIS: Use Filtered Importance Sampling for specular environment/indirect lighting.
-            // SPECULAR_ENVIRONMENT_PREFILTER: Use pre-filtered environment maps for specular environment/indirect lighting.
-            state.materialXGenContext.getOptions().hwSpecularEnvironmentMethod = state.materialXModule.HwSpecularEnvironmentMethod.SPECULAR_ENVIRONMENT_FIS;
-
-            // TRANSMISSION_REFRACTION: Use a refraction approximation for transmission rendering.
-            // TRANSMISSION_OPACITY: Use opacity for transmission rendering.
-            // state.materialXGenContext.getOptions().hwTransmissionRenderMethod = state.materialXModule.HwTransmissionRenderMethod.TRANSMISSION_REFRACTION;
-
-            // Turned off because we're doing color space conversion the three.js way
-            state.materialXGenContext.getOptions().hwSrgbEncodeOutput = false;
-
-            // Enables the generation of a prefiltered environment map.
-            // TODO Would be great to use but requires setting more uniforms (like u_envPrefilterMip).
-            // When set to true, the u_envRadiance map is expected to be a prefiltered environment map.
-            // state.materialXGenContext.getOptions().hwWriteEnvPrefilter = true;
-
-            // Set a reasonable default for max active lights
-            state.materialXGenContext.getOptions().hwMaxActiveLightSources = 4;
+            // 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>`;
 
             // This prewarms the shader generation context to have all light types
             await registerLights(state.materialXModule, [], state.materialXGenContext);
 
-            if (debug) console.log("[MaterialX]  generator initialized successfully");
+            if (debug) console.log("MaterialX generator initialized successfully");
         } catch (error) {
-            console.error("[MaterialX] Failed to load MaterialX module:", error);
+            console.error("Failed to load MaterialX module:", error);
             throw error;
         }
     })();
@@ -107,79 +95,67 @@ export async function ready(): Promise<void> {
 
 // MaterialX Environment Manager - handles lighting and environment setup
 export class MaterialXEnvironment {
-    private _context: Context | null = null;
-    private _lightData: any = null;
-    private _lightCount: number = 0;
-    private _radianceTexture: Texture | null = null;
-    private _irradianceTexture: Texture | null = null;
-    private _initializePromise: Promise<boolean> | null = null;
+    private lights: any[] = [];
+    private lightData: any = null;
+    private radianceTexture: any = null;
+    private irradianceTexture: any = null;
+    private context: Context | null = null;
+    private initialized: boolean = false;
 
     constructor() {
-        if (debug) console.log("[MaterialX] Environment created");
+        if (debug) console.log("MaterialX Environment created");
     }
 
-    // Initialize with Needle Engine context
-    async initializeFromContext(context: Context): Promise<boolean> {
+    setContext(context: Context) {
+        this.context = context;
+    }
 
-        // Prevent multiple initializations
-        if (this._initializePromise) {
-            if (debug) console.log("[MaterialX] environment already initialized, skipping");
-            return this._initializePromise;
+    /*
+    // Initialize MaterialX lighting system based on the reference implementation
+    async initializeLighting(lightRigXml: string, renderer?: any, radianceTexture?: any, irradianceTexture?: any): Promise<void> {
+        if (!materialXModule || !materialXGenContext) {
+            console.warn("MaterialX module not initialized, skipping lighting setup");
+            return;
         }
 
-        return this._initializePromise = this._initialize(context);
+        registerLights(materialXModule, this.lights, materialXGenContext);
     }
+    */
 
-    getLightData() { return this._lightData; }
-    getLightCount() { return this._lightCount; }
-    
-    setRadianceTexture(texture: Texture) { this._radianceTexture = texture; }
-    getRadianceTexture() { return this._radianceTexture; }
-
-    getIrradianceTexture() { return this._irradianceTexture; }
-    setIrradianceTexture(texture: Texture) { this._irradianceTexture = texture; }
-
-    // Reset the environment to allow re-initialization
-    reset() {
-        if (debug) console.log("[MaterialX] Resetting environment");
-        if (this._radianceTexture) {
-            this._radianceTexture.dispose();
-            this._radianceTexture = null;
-        }
-        if (this._irradianceTexture) {
-            this._irradianceTexture.dispose();
-            this._irradianceTexture = null;
+    // Initialize with Needle Engine context
+    async initializeFromContext(): Promise<void> {
+        if (!this.context) {
+            console.warn("No Needle context available for MaterialX environment initialization");
+            return;
         }
-        this._initializePromise = null;
-        // this.lights = [];
-        this._lightData = null;
-    }
-
-    private _initialize: (context: Context) => Promise<boolean> = async (context: Context) => {
 
-        this._context = context;
+        // Prevent multiple initializations
+        if (this.initialized) {
+            if (debug) console.log("MaterialX environment already initialized, skipping");
+            return;
+        }
 
         // Clean up previous textures if they exist
-        if (this._radianceTexture) {
-            if (debug) console.log("[MaterialX] Disposing previous radiance texture");
-            this._radianceTexture.dispose();
-            this._radianceTexture = null;
+        if (this.radianceTexture) {
+            if (debug) console.log("Disposing previous radiance texture");
+            this.radianceTexture.dispose();
+            this.radianceTexture = null;
         }
-        if (this._irradianceTexture) {
-            if (debug) console.log("[MaterialX] Disposing previous irradiance texture");
-            this._irradianceTexture.dispose();
-            this._irradianceTexture = null;
+        if (this.irradianceTexture) {
+            if (debug) console.log("Disposing previous irradiance texture");
+            this.irradianceTexture.dispose();
+            this.irradianceTexture = null;
         }
 
         // Get renderer from context
-        const renderer = this._context.renderer;
+        const renderer = this.context.renderer;
 
         // TODO remove this delay; we should wait for the scene lighting to be ready
         // and then update the uniforms
-        let envMap = this._context.scene.environment;
+        let envMap = this.context.scene.environment;
         while (!envMap) {
             await delay(200);
-            envMap = this._context.scene.environment;
+            envMap = this.context.scene.environment;
         }
         var pmrem = new PMREMGenerator(renderer);
         const target = pmrem.fromEquirectangular(envMap);
@@ -187,42 +163,66 @@ export class MaterialXEnvironment {
         const radianceRenderTarget = renderPMREMToEquirect(renderer, target.texture, 0.0, 1024, 512, target.height);
         const irradianceRenderTarget = renderPMREMToEquirect(renderer, target.texture, 1.0, 32, 16, target.height);
 
-        this._radianceTexture = radianceRenderTarget.texture;
-        this._irradianceTexture = irradianceRenderTarget.texture;
+        this.radianceTexture = radianceRenderTarget.texture;
+        this.irradianceTexture = irradianceRenderTarget.texture;
 
         // Clean up PMREM generator and its render target
         target.dispose();
         pmrem.dispose();
 
         if (debug) {
-            console.log({ radiance: this._radianceTexture, irradiance: this._irradianceTexture });
+            console.log({ radiance: this.radianceTexture, irradiance: this.irradianceTexture });
             // Show both of them on cubes in the scene
             const unlitMat = new MeshBasicMaterial();
-            unlitMat.side = 2;
             const radianceMat = unlitMat.clone();
-            radianceMat.map = this._radianceTexture;
-            const radianceCube = ObjectUtils.createPrimitive("Quad", { material: radianceMat });
+            radianceMat.map = this.radianceTexture;
+            const radianceCube = ObjectUtils.createPrimitive("Cube", { material: radianceMat });
             const irradianceMat = unlitMat.clone();
-            irradianceMat.map = this._irradianceTexture;
-            const irradianceCube = ObjectUtils.createPrimitive("Quad", { material: irradianceMat });
-            this._context.scene.add(radianceCube);
-            this._context.scene.add(irradianceCube);
+            irradianceMat.map = this.irradianceTexture;
+            const irradianceCube = ObjectUtils.createPrimitive("Cube", { material: irradianceMat });
+            this.context.scene.add(radianceCube);
+            this.context.scene.add(irradianceCube);
             radianceCube.position.set(2, 0, 0);
+            radianceCube.scale.y = 0.00001;
             irradianceCube.position.set(-2, 0, 0);
+            irradianceCube.scale.y = 0.00001;
             // await this.initializeLighting(defaultLightRigXml, renderer);
-            console.log("[MaterialX] environment initialized from Needle context", this, this._context.scene);
+            console.log("MaterialX environment initialized from Needle context", this, this.context.scene);
         }
 
         // Find lights in scene
         let lights = new Array<Light>();
-        this._context.scene.traverse((object: Object3D) => {
-            if ((object as Light).isLight && GameObject.isActiveInHierarchy(object))
-                lights.push(object as Light);
+        this.context.scene.traverse((object: Object3D) => {
+            if ((object as Light).isLight) lights.push(object as Light);
         });
 
-        const { lightData, lightCount } = await registerLights(state.materialXModule, lights, state.materialXGenContext);
-        this._lightData = lightData;
-        this._lightCount = lightCount;
-        return true;
+        this.lightData = await registerLights(state.materialXModule, lights, state.materialXGenContext);
+
+        // Mark as initialized
+        this.initialized = true;
+    }
+
+    // getLights() { return this.lights; }
+    getLightData() { return this.lightData; }
+    getRadianceTexture() { return this.radianceTexture; }
+    getIrradianceTexture() { return this.irradianceTexture; }
+
+    setRadianceTexture(texture: any) { this.radianceTexture = texture; }
+    setIrradianceTexture(texture: any) { this.irradianceTexture = texture; }
+
+    // Reset the environment to allow re-initialization
+    reset() {
+        if (debug) console.log("Resetting MaterialX environment");
+        if (this.radianceTexture) {
+            this.radianceTexture.dispose();
+            this.radianceTexture = null;
+        }
+        if (this.irradianceTexture) {
+            this.irradianceTexture.dispose();
+            this.irradianceTexture = null;
+        }
+        this.initialized = false;
+        // this.lights = [];
+        this.lightData = null;
     }
 }