@needle-tools/materialx 1.1.1-next.623fc20 → 1.1.1-next.714bc32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/materialx",
-  "version": "1.1.1-next.623fc20",
+  "version": "1.1.1-next.714bc32",
   "type": "module",
   "main": "index.ts",
   "exports": {

package/src/index.ts

@@ -1,3 +1,13 @@
 export { ready, type MaterialXContext } from "./materialx.js";
 export { MaterialXMaterial } from "./materialx.material.js";
 export { MaterialXLoader } from "./loader/loader.three.js";
+
+
+import { createMaterialXMaterial } from "./loader/loader.three.js";
+
+const Experimental_API = {
+    createMaterialXMaterial
+}
+
+
+export { Experimental_API }

package/src/loader/loader.three.ts

@@ -3,6 +3,7 @@ import { GLTFLoader, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loa
 import { ready, state, MaterialXContext } from "../materialx.js";
 import { debug } from "../utils.js";
 import { MaterialXMaterial } from "../materialx.material.js";
+import { Callbacks as callbacks } from "../materialx.helper.js";
 
 // TypeScript interfaces matching the C# data structures
 export type MaterialX_root_extension = {
@@ -90,36 +91,6 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
         return this._loadMaterialAsync(materialIndex);
     }
 
-    // Parse the MaterialX document once and cache it
-    private async _materialXDocumentReady(): Promise<any> {
-        if (this._documentReadyPromise) {
-            return this._documentReadyPromise;
-        }
-        return this._documentReadyPromise = (async () => {
-            if (debug) console.log("[MaterialX] Parsing MaterialX root document...");
-
-            // Ensure MaterialX is initialized
-            await ready();
-
-            if (!state.materialXModule) {
-                throw new Error("[MaterialX] module failed to initialize");
-            }
-
-            // Create MaterialX document and parse ALL the XML data from root
-            const doc = state.materialXModule.createDocument();
-            doc.setDataLibrary(state.materialXStdLib);
-
-            // Parse all MaterialX XML strings from the root data
-            const root = this.materialX_root_data
-            if (root) {
-                if (debug) console.log(`[MaterialX] Parsing XML for: ${root.name}`);
-                await state.materialXModule.readFromXmlString(doc, root.mtlx, "");
-            }
-
-            if (debug) console.log("[MaterialX] root document parsed successfully");
-            return doc;
-        })();
-    }
 
     private async _loadMaterialAsync(materialIndex: number): Promise<Material> {
 
@@ -129,8 +100,61 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
         // Handle different types of MaterialX data
         const ext = materialDef.extensions?.[this.name] as MaterialX_material_extension;
 
-        if (ext) {
-            return this._createMaterialXMaterial(materialDef, ext);
+        const mtlx = this.materialX_root_data?.mtlx;
+
+        if (ext && mtlx) {
+
+            const materialOptions: MaterialXMaterialOptions = {
+                ...this.options,
+            }
+
+            if (!materialOptions.parameters) materialOptions.parameters = {};
+
+            if (materialOptions.parameters?.side === undefined && materialDef.doubleSided !== undefined) {
+                materialOptions.parameters.side = materialDef.doubleSided ? DoubleSide : FrontSide;
+            }
+
+            return createMaterialXMaterial(mtlx, ext.name, {
+                cacheKey: this.options.cacheKey || "",
+                getTexture: async url => {
+                    // Find the index of the texture in the parser
+                    const filenameWithoutExt = url.split('/').pop()?.split('.').shift() || '';
+
+                    // Resolve the texture from the MaterialX root extension
+                    if (this.materialX_root_data) {
+                        const textures = this.materialX_root_data.textures || [];
+                        let index = -1;
+                        for (const texture of textures) {
+                            // Find the texture by name and use the pointer string to get the index
+                            if (texture.name === filenameWithoutExt) {
+                                const ptr = texture.pointer;
+                                const indexStr = ptr.substring("/textures/".length);
+                                index = parseInt(indexStr);
+
+                                if (isNaN(index) || index < 0) {
+                                    console.error("[MaterialX] Invalid texture index in pointer:", ptr);
+                                    return;
+                                }
+                                else {
+                                    if (debug) console.log("[MaterialX] Texture index found:", index, "for", filenameWithoutExt);
+                                }
+                            }
+                        }
+
+                        if (index < 0) {
+                            console.error("[MaterialX] Texture not found in parser:", filenameWithoutExt, this.parser.json);
+                            return;
+                        }
+                        return this.parser.getDependency("texture", index);
+                    }
+                    return null;
+                }
+            }, materialOptions, this.context)
+                // Cache and return the generated material
+                .then(mat => {
+                    if (mat instanceof MaterialXMaterial) this._generatedMaterials.push(mat);
+                    return mat;
+                })
         }
 
         // Return fallback material instead of null
@@ -139,199 +163,179 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
         return fallbackMaterial;
     }
 
-    private async _createMaterialXMaterial(material_def: MaterialDefinition, material_extension: MaterialX_material_extension): Promise<Material> {
-        try {
-            if (debug) console.log(`Creating MaterialX material: ${material_extension.name}`);
+}
 
-            const doc = await this._materialXDocumentReady();
 
-            if (!state.materialXModule || !state.materialXGenerator || !state.materialXGenContext) {
-                console.warn("[MaterialX] WASM module not ready, returning fallback material");
-                const fallbackMaterial = new MeshStandardMaterial();
-                fallbackMaterial.userData.materialX = material_extension;
-                fallbackMaterial.name = `MaterialX_Fallback_${material_extension.name}`;
-                return fallbackMaterial;
-            }
+type MaterialXMaterialOptions = {
+    parameters?: MaterialParameters;
+}
 
-            // Find the renderable element following MaterialX example pattern exactly
-            let renderableElement: any = null;
-            let foundRenderable = false;
-
-            if (debug) console.log("[MaterialX] document", 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);
-
-            // Handle both array and vector-like APIs
-            const materialNodesLength = materialNodes.length;
-            for (let i = 0; i < materialNodesLength; ++i) {
-                const materialNode = materialNodes[i];
-                if (materialNode) {
-                    const materialName = materialNode.getNamePath();
-                    if (debug) console.log('[MaterialX] Scan material: ', i, materialName);
-
-                    // Find the matching material
-                    if (materialName == material_extension.name) {
-                        renderableElement = materialNode;
-                        foundRenderable = true;
-                        if (debug) console.log('[MaterialX] -- add material: ', materialName);
-                        break;
-                    }
+/**
+ * Add the MaterialXLoader to the GLTFLoader instance.
+ */
+export function useNeedleMaterialX(loader: GLTFLoader, options?: MaterialXLoaderOptions, context?: MaterialXContext) {
+    loader.register(p => {
+        const loader = new MaterialXLoader(p, options || {}, context || {});
+        return loader;
+    });
+}
+
+
+
+
+// Parse the MaterialX document once and cache it
+async function load(mtlx: string): Promise<any> {
+    // Ensure MaterialX is initialized
+    await ready();
+    if (!state.materialXModule) {
+        throw new Error("[MaterialX] module failed to initialize");
+    }
+    // Create MaterialX document and parse ALL the XML data from root
+    const doc = state.materialXModule.createDocument();
+    doc.setDataLibrary(state.materialXStdLib);
+    // Parse all MaterialX XML strings from the root data
+    await state.materialXModule.readFromXmlString(doc, mtlx, "");
+    if (debug) console.log("[MaterialX] root document parsed successfully");
+    return doc;
+}
+
+export async function createMaterialXMaterial(mtlx: string, materialNodeName: string, loaders: callbacks, options?: MaterialXLoaderOptions, context?: MaterialXContext): Promise<Material> {
+    try {
+        if (debug) console.log(`Creating MaterialX material: ${materialNodeName}`);
+
+        const doc = await load(mtlx);
+
+        if (!state.materialXModule || !state.materialXGenerator || !state.materialXGenContext) {
+            console.warn("[MaterialX] WASM module not ready, returning fallback material");
+            const fallbackMaterial = new MeshStandardMaterial();
+            fallbackMaterial.name = `MaterialX_Fallback_${materialNodeName}`;
+            return fallbackMaterial;
+        }
+
+        // Find the renderable element following MaterialX example pattern exactly
+        let renderableElement: any = null;
+        let foundRenderable = false;
+
+        if (debug) console.log("[MaterialX] document", 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);
+
+        // Handle both array and vector-like APIs
+        for (let i = 0; i < materialNodes.length; ++i) {
+            const materialNode = materialNodes[i];
+            if (materialNode) {
+                const name = materialNode.getNamePath();
+                if (debug) console.log(`[MaterialX] Scan material[${i}]: ${name}`);
+
+                // Find the matching material
+                if (materialNodes.length === 1 || name == materialNodeName) {
+                    materialNodeName = name;
+                    renderableElement = materialNode;
+                    foundRenderable = true;
+                    if (debug) console.log(`[MaterialX] Use material node: '${name}'`);
+                    break;
                 }
             }
+        }
 
-            /*
-            // If no material nodes found, search nodeGraphs
-            if (!foundRenderable) {
-                const nodeGraphs = doc.getNodeGraphs();
-                console.log(`Found ${nodeGraphs.length} node graphs in document`);
-                const nodeGraphsLength = nodeGraphs.length;
-                for (let i = 0; i < nodeGraphsLength; ++i) {
-                    const nodeGraph = nodeGraphs[i];
-                    if (nodeGraph) {
-                        // Skip any nodegraph that has nodedef or sourceUri
-                        if ((nodeGraph as any).hasAttribute('nodedef') || (nodeGraph as any).hasSourceUri()) {
-                            continue;
-                        }
-                        // Skip any nodegraph that is connected to something downstream
-                        if ((nodeGraph as any).getDownstreamPorts().length > 0) {
-                            continue;
-                        }
-                        const outputs = (nodeGraph as any).getOutputs();
-                        for (let j = 0; j < outputs.length; ++j) {
-                            const output = outputs[j];
-                            if (output && !foundRenderable) {
-                                renderableElement = output;
-                                foundRenderable = true;
-                                break;
-                            }
+        /*
+        // If no material nodes found, search nodeGraphs
+        if (!foundRenderable) {
+            const nodeGraphs = doc.getNodeGraphs();
+            console.log(`Found ${nodeGraphs.length} node graphs in document`);
+            const nodeGraphsLength = nodeGraphs.length;
+            for (let i = 0; i < nodeGraphsLength; ++i) {
+                const nodeGraph = nodeGraphs[i];
+                if (nodeGraph) {
+                    // Skip any nodegraph that has nodedef or sourceUri
+                    if ((nodeGraph as any).hasAttribute('nodedef') || (nodeGraph as any).hasSourceUri()) {
+                        continue;
+                    }
+                    // Skip any nodegraph that is connected to something downstream
+                    if ((nodeGraph as any).getDownstreamPorts().length > 0) {
+                        continue;
+                    }
+                    const outputs = (nodeGraph as any).getOutputs();
+                    for (let j = 0; j < outputs.length; ++j) {
+                        const output = outputs[j];
+                        if (output && !foundRenderable) {
+                            renderableElement = output;
+                            foundRenderable = true;
+                            break;
                         }
-                        if (foundRenderable) break;
                     }
+                    if (foundRenderable) break;
                 }
             }
-            
-            // If still no element found, search document outputs
-            if (!foundRenderable) {
-                const outputs = doc.getOutputs();
-                console.log(`Found ${outputs.length} output nodes in document`);
-                const outputsLength = outputs.length;
-                for (let i = 0; i < outputsLength; ++i) {
-                    const output = outputs[i];
-                    if (output && !foundRenderable) {
-                        renderableElement = output;
-                        foundRenderable = true;
-                        break;
-                    }
+        }
+         
+        // If still no element found, search document outputs
+        if (!foundRenderable) {
+            const outputs = doc.getOutputs();
+            console.log(`Found ${outputs.length} output nodes in document`);
+            const outputsLength = outputs.length;
+            for (let i = 0; i < outputsLength; ++i) {
+                const output = outputs[i];
+                if (output && !foundRenderable) {
+                    renderableElement = output;
+                    foundRenderable = true;
+                    break;
                 }
             }
-            */
-
-            if (!renderableElement) {
-                console.warn(`[MaterialX] No renderable element found in MaterialX document (${material_extension.name})`);
-                const fallbackMaterial = new MeshStandardMaterial();
-                fallbackMaterial.color.set(0xff00ff);
-                fallbackMaterial.userData.materialX = material_extension;
-                fallbackMaterial.name = `MaterialX_NoRenderable_${material_extension.name}`;
-                return fallbackMaterial;
-            }
-
-            if (debug) console.log("[MaterialX] Using renderable element for shader generation");
-
-            // Check transparency and set context options like the reference
-            const isTransparent = state.materialXModule.isTransparentSurface(renderableElement, state.materialXGenerator.getTarget());
-            state.materialXGenContext.getOptions().hwTransparency = isTransparent;
-
-            // Generate shaders using the element's name path
-            if (debug) console.log("[MaterialX] 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);
-
-            const rootExtension = this.materialX_root_data;
-
-            const shaderInfo = rootExtension && material_extension.shader !== undefined && material_extension.shader >= 0
-                ? rootExtension.shaders?.[material_extension.shader]
-                : null;
-
-            const shaderMaterial = new MaterialXMaterial({
-                name: material_extension.name,
-                shaderName: shaderInfo?.originalName || shaderInfo?.name || null,
-                shader,
-                context: this.context,
-                parameters: {
-                    transparent: isTransparent,
-                    side: material_def.doubleSided ? DoubleSide : FrontSide,
-                    ...this.options.parameters,
-                },
-                loaders: {
-                    cacheKey: this.options.cacheKey || "",
-                    getTexture: async url => {
-                        // Find the index of the texture in the parser
-                        const filenameWithoutExt = url.split('/').pop()?.split('.').shift() || '';
-
-                        // Resolve the texture from the MaterialX root extension
-                        if (rootExtension) {
-                            const textures = rootExtension.textures || [];
-                            let index = -1;
-                            for (const texture of textures) {
-                                // Find the texture by name and use the pointer string to get the index
-                                if (texture.name === filenameWithoutExt) {
-                                    const ptr = texture.pointer;
-                                    const indexStr = ptr.substring("/textures/".length);
-                                    index = parseInt(indexStr);
-
-                                    if (isNaN(index) || index < 0) {
-                                        console.error("[MaterialX] Invalid texture index in pointer:", ptr);
-                                        return;
-                                    }
-                                    else {
-                                        if (debug) console.log("[MaterialX] Texture index found:", index, "for", filenameWithoutExt);
-                                    }
-                                }
-                            }
+        }
+        */
 
-                            if (index < 0) {
-                                console.error("[MaterialX] Texture not found in parser:", filenameWithoutExt, this.parser.json);
-                                return;
-                            }
-                            return this.parser.getDependency("texture", index).then(tex => {
-                                if (debug) console.log("[MaterialX] Texture loaded:" + tex.name, tex);
-                                return tex;
-                            });
-                        }
-                        return null;
-                    }
-                }
-            });
-            // Track this material for later lighting updates
-            this._generatedMaterials.push(shaderMaterial);
-
-            // Add debugging to see if the material compiles correctly
-            if (debug) console.log("[MaterialX]  material created:", shaderMaterial.name);
-            return shaderMaterial;
-
-        } catch (error) {
-            // This is a wasm error (an int) that we need to resolve
-            console.error(`[MaterialX] Error creating MaterialX material (${material_extension.name}):`, error);
-            // Return a fallback material with stored MaterialX data
+        if (!renderableElement) {
+            console.warn(`[MaterialX] No renderable element found in MaterialX document (${name})`);
             const fallbackMaterial = new MeshStandardMaterial();
             fallbackMaterial.color.set(0xff00ff);
-            fallbackMaterial.userData.materialX = material_extension;
-            fallbackMaterial.name = `MaterialX_Error_${material_extension.name}`;
+            fallbackMaterial.name = `MaterialX_NoRenderable_${name}`;
             return fallbackMaterial;
         }
-    }
-}
 
+        if (debug) console.log("[MaterialX] Using renderable element for shader generation");
 
-/**
- * Add the MaterialXLoader to the GLTFLoader instance.
- */
-export function useNeedleMaterialX(loader: GLTFLoader, options?: MaterialXLoaderOptions, context?: MaterialXContext) {
-    loader.register(p => {
-        const loader = new MaterialXLoader(p, options || {}, context || {});
-        return loader;
-    });
+        // Check transparency and set context options like the reference
+        const isTransparent = state.materialXModule.isTransparentSurface(renderableElement, state.materialXGenerator.getTarget());
+        state.materialXGenContext.getOptions().hwTransparency = isTransparent;
+
+        // Generate shaders using the element's name path
+        if (debug) console.log("[MaterialX] 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);
+
+        // const rootExtension = this.materialX_root_data;
+
+        // const shaderInfo = rootExtension && material_extension.shader !== undefined && material_extension.shader >= 0
+        //     ? rootExtension.shaders?.[material_extension.shader]
+        //     : null;
+
+        const shaderMaterial = new MaterialXMaterial({
+            name: materialNodeName,
+            shaderName: null, //shaderInfo?.originalName || shaderInfo?.name || null,
+            shader,
+            context: context || {},
+            parameters: {
+                transparent: isTransparent,
+                ...options?.parameters,
+            },
+            loaders: loaders,
+        });
+
+        // Add debugging to see if the material compiles correctly
+        if (debug) console.log("[MaterialX]  material created:", shaderMaterial.name);
+        return shaderMaterial;
+
+    } catch (error) {
+        // This is a wasm error (an int) that we need to resolve
+        console.error(`[MaterialX] Error creating MaterialX material (${name}):`, error);
+        // Return a fallback material with stored MaterialX data
+        const fallbackMaterial = new MeshStandardMaterial();
+        fallbackMaterial.color.set(0xff00ff);
+        fallbackMaterial.name = `MaterialX_Error_${name}`;
+        return fallbackMaterial;
+    }
 }

package/src/materialx.helper.ts

@@ -70,17 +70,17 @@ function fromMatrix(matrix: MaterialX.Matrix, dimension: MaterialX.Matrix["size"
 }
 
 
-export type Loaders = {
+export type Callbacks = {
     /**
      * Cache key for the loaders, used to identify and reuse textures
      */
-    readonly cacheKey: string;
+    readonly cacheKey?: string;
     /**
      * Get a texture by path
      * @param {string} path - The path to the texture
      * @return {Promise<THREE.Texture>} - A promise that resolves to the texture
      */
-    readonly getTexture: (path: string) => Promise<THREE.Texture>;
+    readonly getTexture: (path: string) => Promise<THREE.Texture | null | void>;
 }
 
 const defaultTexture = new THREE.Texture();
@@ -119,7 +119,7 @@ function addToCache(key: string, value: any): void {
 /**
  * Get Three uniform from MaterialX value
  */
-function toThreeUniform(uniforms: any, type: string, value: any, name: string, loaders: Loaders, searchPath: string): THREE.Uniform {
+function toThreeUniform(uniforms: any, type: string, value: any, name: string, loaders: Callbacks, searchPath: string): THREE.Uniform {
 
     const uniform = new THREE.Uniform<any>(null);
 
@@ -165,7 +165,7 @@ function toThreeUniform(uniforms: any, type: string, value: any, name: string, l
                     checkCache = true;
                 }
 
-                const cacheKey = `${loaders.cacheKey}-${texturePath}`;
+                const cacheKey = loaders.cacheKey?.length ? `${loaders.cacheKey}-${texturePath}` : texturePath;
                 const cacheValue = checkCache ? tryGetFromCache(cacheKey) : null;
                 if (cacheValue) {
                     if (debug) console.log('[MaterialX] Use cached texture: ', cacheKey, cacheValue);
@@ -180,27 +180,29 @@ function toThreeUniform(uniforms: any, type: string, value: any, name: string, l
                     }
                 }
                 else {
-                    if (name.toLowerCase().includes("normal")) {
-                        uniform.value = defaultNormalTexture;
-                    }
-                    else {
-                        uniform.value = defaultTexture;
-                    }
-
                     if (debug) console.log('[MaterialX] Load texture:', texturePath);
+
+                    if (name.toLowerCase().includes("normal")) uniform.value = defaultNormalTexture;
+                    else uniform.value = defaultTexture;
+                    const defaultValue = uniform.value;
                     // Save the loading promise in the cache
-                    const promise = loaders.getTexture(texturePath).then(res => {
-                        if (res) {
-                            res = res.clone(); // we need to clone the texture once to avoid colorSpace issues with other materials
-                            res.colorSpace = THREE.LinearSRGBColorSpace;
-                            setTextureParameters(res, name, uniforms);
-                        }
-                        return res;
-                    });
-                    if (checkCache) {
-                        addToCache(cacheKey, promise);
-                    }
-                    promise.then(res => {
+                    const promise = loaders.getTexture(texturePath)
+                        ?.then(res => {
+                            if (res) {
+                                res = res.clone(); // we need to clone the texture once to avoid colorSpace issues with other materials
+                                res.colorSpace = THREE.LinearSRGBColorSpace;
+                                setTextureParameters(res, name, uniforms);
+                            }
+                            return res;
+                        })
+                        .catch(err => {
+                            console.error(`[MaterialX] Failed to load texture ${name} '${texturePath}'`, err);
+                            return defaultValue;
+                        });
+
+                    if (checkCache) addToCache(cacheKey, promise);
+                    
+                    promise?.then(res => {
                         if (res) uniform.value = res;
                         else console.warn(`[MaterialX] Failed to load texture ${name} '${texturePath}'`);
                     });
@@ -454,7 +456,7 @@ export function getLightData(lights: Array<THREE.Light>, genContext: any): { lig
 /**
  * Get uniform values for a shader
  */
-export function getUniformValues(shaderStage: MaterialX.ShaderStage, loaders: Loaders, searchPath: string) {
+export function getUniformValues(shaderStage: MaterialX.ShaderStage, loaders: Callbacks, searchPath: string) {
     const threeUniforms = {};
 
     const uniformBlocks = shaderStage.getUniformBlocks()
@@ -468,8 +470,8 @@ export function getUniformValues(shaderStage: MaterialX.ShaderStage, loaders: Lo
                 const value = variable.getValue()?.getData();
                 const uniformName = variable.getVariable();
                 const type = variable.getType().getName();
-                if (debug) console.log("Adding uniform", { path: variable.getPath(), name: uniformName, value: value, type: type });
                 threeUniforms[uniformName] = toThreeUniform(uniforms, type, value, uniformName, loaders, searchPath);
+                if (debug) console.log("Adding uniform", { path: variable.getPath(), type: type, name: uniformName, value: threeUniforms[uniformName], },);
             }
         }
     }
@@ -501,22 +503,27 @@ export function generateMaterialPropertiesForUniforms(material: THREE.ShaderMate
                         break;
                 }
                 if (key) {
-                    Object.defineProperty(material, key, {
-                        get: function () {
-                            return this.uniforms?.[uniformName].value
-                        },
-                        set: function (v) {
-                            const uniforms = this.uniforms;
-                            if (!uniforms || !uniforms[uniformName]) {
-                                console.warn(`[MaterialX] Uniform ${uniformName} not found in ${this.name} uniforms`);
-                                return;
+                    if (material.hasOwnProperty(key)) {
+                        if (debug) console.warn(`[MaterialX] Uniform ${uniformName} already exists in material as property ${key}, skipping.`);
+                    }
+                    else {
+                        Object.defineProperty(material, key, {
+                            get: function () {
+                                return this.uniforms?.[uniformName].value
+                            },
+                            set: function (v) {
+                                const uniforms = this.uniforms;
+                                if (!uniforms || !uniforms[uniformName]) {
+                                    console.warn(`[MaterialX] Uniform ${uniformName} not found in ${this.name} uniforms`);
+                                    return;
+                                }
+                                this.uniforms[uniformName].value = v;
+                                this.uniformsNeedUpdate = true;
                             }
-                            this.uniforms[uniformName].value = v;
-                            this.uniformsNeedUpdate = true;
-                        }
-                    });
+                        });
+                    }
                 }
             }
         }
     }
-}
+}

package/src/materialx.material.ts

@@ -1,7 +1,7 @@
 import { BufferGeometry, Camera, FrontSide, GLSL3, Group, IUniform, MaterialParameters, Matrix3, Matrix4, Object3D, Scene, ShaderMaterial, Texture, Vector3, WebGLRenderer } from "three";
 import { debug, getFrame, getTime } from "./utils.js";
 import { MaterialXContext, MaterialXEnvironment } from "./materialx.js";
-import { generateMaterialPropertiesForUniforms, getUniformValues, Loaders } from "./materialx.helper.js";
+import { generateMaterialPropertiesForUniforms, getUniformValues, Callbacks } from "./materialx.helper.js";
 import { cloneUniforms, cloneUniformsGroups } from "three/src/renderers/shaders/UniformsUtils.js";
 
 
@@ -13,10 +13,11 @@ declare type MaterialXMaterialInitParameters = {
     name: string,
     shaderName?: string | null, // Optional name of the shader
     shader: any,
-    loaders: Loaders,
+    loaders: Callbacks,
     context: MaterialXContext,
     // Optional parameters
     parameters?: MaterialParameters,
+    debug?: boolean,
 }
 
 type Uniforms = Record<string, IUniform & { needsUpdate?: boolean }>;
@@ -25,7 +26,7 @@ type Precision = "highp" | "mediump" | "lowp";
 export class MaterialXMaterial extends ShaderMaterial {
 
     /** The original name of the shader */
-    readonly shaderName : string | null = null;
+    readonly shaderName: string | null = null;
 
     copy(source: MaterialXMaterial): this {
         super.copy(source);
@@ -43,6 +44,7 @@ export class MaterialXMaterial extends ShaderMaterial {
 
     private _context: MaterialXContext | null = null;
     private _shader: any;
+    private _needsTangents: boolean = false;
 
     constructor(init?: MaterialXMaterialInitParameters) {
 
@@ -75,7 +77,8 @@ export class MaterialXMaterial extends ShaderMaterial {
         vertexShader = vertexShader.replace(/\bi_color_0\b/g, 'color');
 
         // Patch fragmentShader
-        const precision = init.parameters?.precision || "highp" as Precision;
+        const precision: Precision = init.parameters?.precision || "highp" as Precision;
+        vertexShader = vertexShader.replace(/precision mediump float;/g, `precision ${precision} float;`);
         fragmentShader = fragmentShader.replace(/precision mediump float;/g, `precision ${precision} float;`);
         fragmentShader = fragmentShader.replace(/#define M_FLOAT_EPS 1e-8/g, precision === "highp" ? `#define M_FLOAT_EPS 1e-8` : `#define M_FLOAT_EPS 1e-3`);
 
@@ -88,9 +91,16 @@ export class MaterialXMaterial extends ShaderMaterial {
         fragmentShader = fragmentShader.replace(/\bi_tangent\b/g, 'tangent');
         fragmentShader = fragmentShader.replace(/\bi_color_0\b/g, 'color');
 
+        // Capture some vertex shader properties
+        const uv_is_vec2 = vertexShader.includes('in vec2 uv;'); // check if uv is vec2; e.g. https://matlib.gpuopen.com/main/materials/all?material=da6ec531-f5c1-4790-ac14-8a5c51d0314e
+        const uv1_is_vec2 = vertexShader.includes('in vec2 uv1;');
+        const uv2_is_vec2 = vertexShader.includes('in vec2 uv2;');
+        const uv3_is_vec2 = vertexShader.includes('in vec2 uv3;');
+
         // 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+vec2\s+uv;/g, '');
         vertexShader = vertexShader.replace(/in\s+vec3\s+uv;/g, '');
         var hasUv1 = vertexShader.includes('in vec3 uv1;');
         vertexShader = vertexShader.replace(/in\s+vec3\s+uv1;/g, '');
@@ -105,10 +115,10 @@ export class MaterialXMaterial extends ShaderMaterial {
 
         // 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);');
-        vertexShader = vertexShader.replace(/texcoord_1 = uv1;/g, 'texcoord_1 = vec3(uv1, 0.0);');
-        vertexShader = vertexShader.replace(/texcoord_2 = uv2;/g, 'texcoord_2 = vec3(uv2, 0.0);');
-        vertexShader = vertexShader.replace(/texcoord_3 = uv3;/g, 'texcoord_3 = vec3(uv3, 0.0);');
+        if (!uv_is_vec2) vertexShader = vertexShader.replace(/texcoord_0 = uv;/g, 'texcoord_0 = vec3(uv, 0.0);');
+        if (!uv1_is_vec2) vertexShader = vertexShader.replace(/texcoord_1 = uv1;/g, 'texcoord_1 = vec3(uv1, 0.0);');
+        if (!uv2_is_vec2) vertexShader = vertexShader.replace(/texcoord_2 = uv2;/g, 'texcoord_2 = vec3(uv2, 0.0);');
+        if (!uv3_is_vec2) vertexShader = vertexShader.replace(/texcoord_3 = uv3;/g, 'texcoord_3 = vec3(uv3, 0.0);');
 
         // Patch units – seems MaterialX uses different units and we end up with wrong light values?
         // result.direction = light.position - position;
@@ -148,9 +158,10 @@ export class MaterialXMaterial extends ShaderMaterial {
             defines: defines,
             ...init.parameters, // Spread any additional parameters passed to the material
         });
+        this.shaderName = init.shaderName || null;
         this._context = init.context;
         this._shader = init.shader;
-        this.shaderName = init.shaderName || null;
+        this._needsTangents = vertexShader.includes('in vec4 tangent;') || vertexShader.includes('in vec3 tangent;');
 
         Object.assign(this.uniforms, {
             ...getUniformValues(init.shader.getStage('vertex'), init.loaders, searchPath),
@@ -161,6 +172,9 @@ export class MaterialXMaterial extends ShaderMaterial {
             u_viewPosition: { value: new Vector3() },
             u_worldInverseTransposeMatrix: { value: new Matrix4() },
 
+            // u_shadowMatrix: { value: new Matrix4() },
+            // u_shadowMap: { value: null, type: 't' }, // Shadow map
+
             u_envMatrix: { value: new Matrix4() },
             u_envRadiance: { value: null, type: 't' },
             u_envRadianceMips: { value: 8, type: 'i' },
@@ -176,7 +190,7 @@ export class MaterialXMaterial extends ShaderMaterial {
         generateMaterialPropertiesForUniforms(this, init.shader.getStage('vertex'));
 
 
-        if (debug) {
+        if (debug || init.debug) {
             // Get lighting and environment data from MaterialX environment
             console.group("[MaterialX]: ", this.name);
             console.log(`Vertex shader length: ${vertexShader.length}\n`, vertexShader);
@@ -185,20 +199,28 @@ export class MaterialXMaterial extends ShaderMaterial {
         }
     }
 
-    onBeforeRender(_renderer: WebGLRenderer, _scene: Scene, camera: Camera, _geometry: BufferGeometry, object: Object3D, _group: Group): void {
+    private _missingTangentsWarned: boolean = false;
+    onBeforeRender(renderer: WebGLRenderer, _scene: Scene, camera: Camera, geometry: BufferGeometry, object: Object3D, _group: Group): void {
+        if (this._needsTangents && !geometry.attributes.tangent) {
+            if (!this._missingTangentsWarned) {
+                this._missingTangentsWarned = true;
+                console.warn(`[MaterialX] Tangents are required for this material (${this.name}) but not present in the geometry.`);
+                // TODO: can we compute tangents here?
+            }
+        }
         const time = this._context?.getTime?.() || getTime();
         const frame = this._context?.getFrame?.() || getFrame();
         const env = MaterialXEnvironment.get(_scene);
         if (env) {
-            env.update(frame, _scene, _renderer);
-            this.updateUniforms(env, object, camera, time, frame);
+            env.update(frame, _scene, renderer);
+            this.updateUniforms(env, renderer, object, camera, time, frame);
         }
     }
 
 
     envMapIntensity: number = 1.0; // Default intensity for environment map
     envMap: Texture | null = null; // Environment map texture, can be set externally
-    updateUniforms = (environment: MaterialXEnvironment, object: Object3D, camera: Camera, time?: number, frame?: number) => {
+    updateUniforms = (environment: MaterialXEnvironment, renderer: WebGLRenderer, object: Object3D, camera: Camera, time?: number, frame?: number) => {
 
         const uniforms = this.uniforms as Uniforms;
 
@@ -213,15 +235,23 @@ export class MaterialXMaterial extends ShaderMaterial {
             uniforms.u_viewProjectionMatrix.needsUpdate = true;
         }
 
+        if (uniforms.u_worldInverseTransposeMatrix) {
+            uniforms.u_worldInverseTransposeMatrix.value.setFromMatrix3(normalMat.getNormalMatrix(object.matrixWorld));
+            uniforms.u_worldInverseTransposeMatrix.needsUpdate = true;
+        }
+
         if (uniforms.u_viewPosition) {
             uniforms.u_viewPosition.value.copy(camera.getWorldPosition(worldViewPos));
             uniforms.u_viewPosition.needsUpdate = true;
         }
 
-        if (uniforms.u_worldInverseTransposeMatrix) {
-            uniforms.u_worldInverseTransposeMatrix.value.setFromMatrix3(normalMat.getNormalMatrix(object.matrixWorld));
-            uniforms.u_worldInverseTransposeMatrix.needsUpdate = true;
-        }
+        // if (uniforms.u_shadowMap) {
+        //     const light = environment.lights?.[2] || null;
+        //     uniforms.u_shadowMatrix.value = light?.shadow?.matrix.clone().premultiply(object.matrixWorld.clone()).invert();
+        //     uniforms.u_shadowMap.value = light.shadow?.map || null;
+        //     uniforms.u_shadowMap.needsUpdate = true;
+        //     console.log("[MaterialX] Renderer shadow map updated", light);
+        // }
 
         // Update time uniforms
         if (uniforms.u_time) {

package/src/materialx.ts

@@ -1,7 +1,7 @@
 import type { MaterialX as MX } from "./materialx.types.js";
 import MaterialX from "../bin/JsMaterialXGenShader.js";
 import { debug } from "./utils.js";
-import { renderPMREMToEquirect } from "./textureHelper.js";
+import { renderPMREMToEquirect } from "./utils.texture.js";
 import { Light, Mesh, MeshBasicMaterial, Object3D, PlaneGeometry, PMREMGenerator, Scene, Texture, WebGLRenderer } from "three";
 import { registerLights, getLightData, LightData } from "./materialx.helper.js";
 import type { MaterialXMaterial } from "./materialx.material.js";
@@ -95,6 +95,8 @@ export async function ready(): Promise<void> {
             // Set a reasonable default for max active lights
             state.materialXGenContext.getOptions().hwMaxActiveLightSources = 4;
 
+            // state.materialXGenContext.getOptions().hwShadowMap = true;
+
             // This prewarms the shader generation context to have all light types
             await registerLights(state.materialXModule, state.materialXGenContext);
 
@@ -209,6 +211,9 @@ export class MaterialXEnvironment {
         this._texturesCache.clear();
     }
 
+    get lights() {
+        return this._lights;
+    }
     get lightData() {
         return this._lightData;
     }

package/src/utils.ts

@@ -1,3 +1,7 @@
+// import { BufferGeometry } from 'three';
+// import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+
+
 export function getParam(name: string) {
     const urlParams = new URLSearchParams(window.location.search);
     const param = urlParams.get(name);