@needle-tools/materialx 1.1.0-next.bc1b608 → 1.1.1-next.044ea68

package/CHANGELOG.md

@@ -4,6 +4,9 @@ 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.1.0] - 2025-07-15
+- Add: `useNeedleMaterialX` hooks for vanilla three.js and Needle Engine
+
 ## [1.0.6] - 2025-07-15
 - Fix: texture/environment sampling on some Android devices
 

package/README.md

@@ -1,18 +1,32 @@
 # Needle MaterialX
 
-Web runtime support to load and display MaterialX materials in Needle Engine
+Web runtime support to load and display MaterialX materials in Needle Engine and three.js
 
 ## Installation
 `npm i @needle-tools/materialx`  
 
+## Examples
+- [three.js Example on Stackblitz](https://stackblitz.com/edit/needle-materialx-example?file=main.js,package.json,index.html)
+
 ## How to use
 
-To use with Needle Engine simply import the module
+### Use with Needle Engine
+
+```ts
+import { useNeedleMaterialX } from "@needle-tools/materialx/needle";
+// Simply call this function in global scope as soon as possible
+useNeedleMaterialX();
+```
+
+### Use with three.js
 
 ```ts
-import "@needle-tools/materialx"
+import { useNeedleMaterialX } from "@needle-tools/materialx";
+// Call the function with your GLTFLoader instance
+useNeedleMaterialX(<yourGltfLoaderInstance>);
 ```
 
+
 <br />
 
 # Contact ✒️

package/index.ts

@@ -1,2 +1,2 @@
 export * from "./src/index.js";
-export { addPluginForThree } from "./src/loader/loader.three.js";
+export { useNeedleMaterialX } from "./src/loader/loader.three.js";

package/needle.ts

@@ -1,2 +1,2 @@
 export * from "./src/index.js";
-export { addPluginForNeedleEngine } from "./src/loader/loader.needle.js";
+export { useNeedleMaterialX } from "./src/loader/loader.needle.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/materialx",
-  "version": "1.1.0-next.bc1b608",
+  "version": "1.1.1-next.044ea68",
   "type": "module",
   "main": "index.ts",
   "exports": {
@@ -20,7 +20,7 @@
   },
   "peerDependencies": {
     "@needle-tools/engine": "4.x || ^4.6.0-0",
-    "three": "npm:@needle-tools/three@^0.169.5"
+    "three": ">=0.169.0"
   },
   "devDependencies": {
     "@needle-tools/engine": "4.x",

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.needle.ts

@@ -2,8 +2,9 @@ import { addCustomExtensionPlugin } from "@needle-tools/engine";
 import { Context, GLTF, INeedleGLTFExtensionPlugin } from "@needle-tools/engine";
 import type { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import type { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";
-import { addPluginForThree, MaterialXLoader } from "./loader.three.js";
+import { useNeedleMaterialX as _useNeedleMaterialX, MaterialXLoader } from "./loader.three.js";
 import { debug } from "../utils.js";
+import { MaterialParameters } from "three";
 
 
 export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
@@ -13,13 +14,14 @@ export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
 
     onImport = (loader: GLTFLoader, url: string, context: Context) => {
         if (debug) console.log("MaterialXLoaderPlugin: Registering MaterialX extension for", url);
-        addPluginForThree(loader, {
+        _useNeedleMaterialX(loader, {
+            cacheKey: url,
+            parameters: {
+                precision: context.renderer.capabilities.getMaxPrecision("highp") as MaterialParameters["precision"],
+            }
+        }, {
             getTime: () => context.time.time,
             getFrame: () => context.time.frame,
-            getScene: () => context.scene,
-            getRenderer: () => context.renderer,
-        }, {
-            cacheKey: url
         });
     };
 
@@ -36,6 +38,6 @@ export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
 /**
  * Add the MaterialXLoaderPlugin to the Needle Engine.
  */
-export async function addPluginForNeedleEngine() {
+export async function useNeedleMaterialX() {
     addCustomExtensionPlugin(new MaterialXLoaderPlugin());
 }

package/src/loader/loader.three.ts

@@ -1,8 +1,9 @@
-import { Material, MeshStandardMaterial, DoubleSide, FrontSide } from "three";
+import { Material, MeshStandardMaterial, DoubleSide, FrontSide, MaterialParameters } from "three";
 import { GLTFLoader, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader.js";
 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 = {
@@ -14,10 +15,19 @@ export type MaterialX_root_extension = {
     mtlx: string;
     /** MaterialX texture pointers */
     textures: Array<{ name: string, pointer: string }>;
+    shaders?: Array<{
+        /** The materialx node name */
+        name: string,
+        /** The original name of the shader */
+        originalName: string,
+    }>,
 }
 
 export type MaterialX_material_extension = {
-    name: string; // Material name reference
+    /** The MaterialX material name */
+    name: string;
+    /** The index of the shader in the shaders array of the root extension. */
+    shader?: number;
 }
 
 type MaterialDefinition = {
@@ -28,6 +38,14 @@ type MaterialDefinition = {
     },
 }
 
+// init.context.getRenderer().capabilities.getMaxPrecision("highp")
+export type MaterialXLoaderOptions = {
+    /** The URL of the GLTF file being loaded */
+    cacheKey?: string;
+    /** Parameters for the MaterialX loader */
+    parameters?: Pick<MaterialParameters, "precision">;
+}
+
 // MaterialX loader extension for js GLTFLoader
 export class MaterialXLoader implements GLTFLoaderPlugin {
     readonly name = "NEEDLE_materials_mtlx";
@@ -51,7 +69,11 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
      * @param cacheKey The URL of the GLTF file
      * @param context The context for the GLTF loading process
      */
-    constructor(private parser: GLTFParser, private cacheKey: string, private context: MaterialXContext) {
+    constructor(
+        private parser: GLTFParser,
+        private options: MaterialXLoaderOptions,
+        private context: MaterialXContext
+    ) {
         if (debug) console.log("MaterialXLoader created for parser");
         // Start loading of MaterialX environment if the root extension exists
         if (this.materialX_root_data) {
@@ -69,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> {
 
@@ -108,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
@@ -118,189 +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 shaderMaterial = new MaterialXMaterial({
-                name: material_extension.name,
-                shader,
-                transparent: isTransparent,
-                side: material_def.doubleSided ? DoubleSide : FrontSide,
-                context: this.context,
-                loaders: {
-                    cacheKey: this.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
-                        const ext = this.materialX_root_data;
-                        if (ext) {
-                            const textures = ext.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 MaterialXLoaderPlugin to the Needle Engine.
- */
-export function addPluginForThree(loader: GLTFLoader, context: MaterialXContext, options: { cacheKey?: string } = {}) {
-    loader.register(p => {
-        const loader = new MaterialXLoader(p, options.cacheKey || "", 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()
@@ -466,12 +468,62 @@ export function getUniformValues(shaderStage: MaterialX.ShaderStage, loaders: Lo
             for (let i = 0; i < uniforms.size(); ++i) {
                 const variable = uniforms.get(i);
                 const value = variable.getValue()?.getData();
-                const name = variable.getVariable();
-                if (debug) console.log("Adding uniform", { path: variable.getPath(), name: name, value: value, type: variable.getType().getName() });
-                threeUniforms[name] = toThreeUniform(uniforms, variable.getType().getName(), value, name, loaders, searchPath);
+                const uniformName = variable.getVariable();
+                const type = variable.getType().getName();
+                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], },);
             }
         }
     }
 
     return threeUniforms;
 }
+
+export function generateMaterialPropertiesForUniforms(material: THREE.ShaderMaterial, shaderStage: MaterialX.ShaderStage) {
+
+    const uniformBlocks = shaderStage.getUniformBlocks()
+    for (const [blockName, uniforms] of Object.entries(uniformBlocks)) {
+        // Seems struct uniforms (like in LightData) end up here as well, we should filter those out.
+        if (blockName === "LightData") continue;
+
+        if (!uniforms.empty()) {
+            for (let i = 0; i < uniforms.size(); ++i) {
+                const variable = uniforms.get(i);
+                const uniformName = variable.getVariable();
+                let key = variable.getPath().split('/').pop();
+                switch (key) {
+                    case "_Color":
+                        key = "color";
+                        break;
+                    case "_Roughness":
+                        key = "roughness";
+                        break;
+                    case "_Metallic":
+                        key = "metalness";
+                        break;
+                }
+                if (key) {
+                    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;
+                            }
+                        });
+                    }
+                }
+            }
+        }
+    }
+}

package/src/materialx.material.ts

@@ -1,22 +1,23 @@
 import { BufferGeometry, Camera, FrontSide, GLSL3, Group, IUniform, MaterialParameters, Matrix3, Matrix4, Object3D, Scene, ShaderMaterial, Texture, Vector3, WebGLRenderer } from "three";
-import { debug } from "./utils.js";
+import { debug, getFrame, getTime } from "./utils.js";
 import { MaterialXContext, MaterialXEnvironment } from "./materialx.js";
-import { getUniformValues, Loaders } from "./materialx.helper.js";
+import { generateMaterialPropertiesForUniforms, getUniformValues, Callbacks } from "./materialx.helper.js";
+import { cloneUniforms, cloneUniformsGroups } from "three/src/renderers/shaders/UniformsUtils.js";
 
 
 // Add helper matrices for uniform updates (similar to MaterialX example)
-const identityMatrix = new Matrix4();
 const normalMat = new Matrix3();
-const viewProjMat = new Matrix4();
 const worldViewPos = new Vector3();
 
 declare type MaterialXMaterialInitParameters = {
     name: string,
+    shaderName?: string | null, // Optional name of the shader
     shader: any,
-    loaders: Loaders,
-    transparent?: boolean,
-    side?: MaterialParameters['side'],
+    loaders: Callbacks,
     context: MaterialXContext,
+    // Optional parameters
+    parameters?: MaterialParameters,
+    debug?: boolean,
 }
 
 type Uniforms = Record<string, IUniform & { needsUpdate?: boolean }>;
@@ -24,13 +25,26 @@ type Precision = "highp" | "mediump" | "lowp";
 
 export class MaterialXMaterial extends ShaderMaterial {
 
+    /** The original name of the shader */
+    readonly shaderName: string | null = null;
+
     copy(source: MaterialXMaterial): this {
         super.copy(source);
         this._context = source._context;
+        this._shader = source._shader;
+        this.uniforms = cloneUniforms(source.uniforms) as Uniforms;
+        this.uniformsGroups = cloneUniformsGroups(source.uniformsGroups);
+        this.envMapIntensity = source.envMapIntensity;
+        this.envMap = source.envMap;
+        generateMaterialPropertiesForUniforms(this, this._shader.getStage('pixel'));
+        generateMaterialPropertiesForUniforms(this, this._shader.getStage('vertex'));
+        this.needsUpdate = true;
         return this;
     }
 
     private _context: MaterialXContext | null = null;
+    private _shader: any;
+    private _needsTangents: boolean = false;
 
     constructor(init?: MaterialXMaterialInitParameters) {
 
@@ -63,7 +77,8 @@ export class MaterialXMaterial extends ShaderMaterial {
         vertexShader = vertexShader.replace(/\bi_color_0\b/g, 'color');
 
         // Patch fragmentShader
-        const precision = init.context.getRenderer().capabilities.getMaxPrecision("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`);
 
@@ -76,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, '');
@@ -93,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;
@@ -124,19 +146,22 @@ export class MaterialXMaterial extends ShaderMaterial {
         if (hasColor) defines['USE_COLOR'] = '';
 
         const searchPath = ""; // Could be derived from the asset path if needed
-        const isTransparent = init.transparent ?? false;
+        const isTransparent = init.parameters?.transparent ?? false;
         super({
             name: init.name,
             uniforms: {},
             vertexShader: vertexShader,
             fragmentShader: fragmentShader,
             glslVersion: GLSL3,
-            transparent: isTransparent,
-            side: init.side ? init.side : FrontSide,
             depthTest: true,
             depthWrite: !isTransparent,
             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._needsTangents = vertexShader.includes('in vec4 tangent;') || vertexShader.includes('in vec3 tangent;');
 
         Object.assign(this.uniforms, {
             ...getUniformValues(init.shader.getStage('vertex'), init.loaders, searchPath),
@@ -147,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' },
@@ -158,9 +186,11 @@ export class MaterialXMaterial extends ShaderMaterial {
             u_lightData: { value: [], needsUpdate: false }, // Array of light data. We need to set needsUpdate to false until we actually update it
         });
 
-        this._context = init.context;
+        generateMaterialPropertiesForUniforms(this, init.shader.getStage('pixel'));
+        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);
@@ -169,20 +199,28 @@ export class MaterialXMaterial extends ShaderMaterial {
         }
     }
 
-    onBeforeRender(_renderer: WebGLRenderer, _scene: Scene, camera: Camera, _geometry: BufferGeometry, object: Object3D, _group: Group): void {
-        if (this._context) {
-            const env = MaterialXEnvironment.get(this._context);
-            if (env) {
-                env.update(this._context.getFrame(), this._context.getScene());
-                this.updateUniforms(env, object, camera);
+    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, 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) => {
+    updateUniforms = (environment: MaterialXEnvironment, renderer: WebGLRenderer, object: Object3D, camera: Camera, time?: number, frame?: number) => {
 
         const uniforms = this.uniforms as Uniforms;
 
@@ -197,24 +235,32 @@ 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 (this._context) {
-            if (uniforms.u_time) {
-                uniforms.u_time.value = this._context.getTime();
-            }
-            if (uniforms.u_frame) {
-                uniforms.u_frame.value = this._context.getFrame();
-            }
+        if (uniforms.u_time) {
+            if (time === undefined) time = getTime();
+            uniforms.u_time.value = time;
+        }
+        if (uniforms.u_frame) {
+            if (frame === undefined) frame = getFrame();
+            uniforms.u_frame.value = frame;
         }
 
         // Update light uniforms

package/src/materialx.ts

@@ -1,16 +1,14 @@
 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";
 
 export type MaterialXContext = {
-    getTime(): number,
-    getFrame(): number,
-    getScene(): Scene,
-    getRenderer(): WebGLRenderer,
+    getTime?(): number,
+    getFrame?(): number,
 }
 
 
@@ -97,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);
 
@@ -114,23 +114,21 @@ type EnvironmentTextureSet = {
 }
 
 
-
-type EnvironmentContext = Pick<MaterialXContext, "getRenderer" | "getScene">;
 /**
  * MaterialXEnvironment manages the environment settings for MaterialX materials.
  */
 export class MaterialXEnvironment {
 
-    static get(context: EnvironmentContext): MaterialXEnvironment | null {
-        return this.getEnvironment(context);
+    static get(scene: Scene): MaterialXEnvironment | null {
+        return this.getEnvironment(scene);
     }
-    private static _environments: WeakMap<EnvironmentContext, MaterialXEnvironment> = new Map();
-    private static getEnvironment(context: EnvironmentContext): MaterialXEnvironment {
-        if (this._environments.has(context)) {
-            return this._environments.get(context)!;
+    private static _environments: WeakMap<Scene, MaterialXEnvironment> = new Map();
+    private static getEnvironment(scene: Scene): MaterialXEnvironment {
+        if (this._environments.has(scene)) {
+            return this._environments.get(scene)!;
         }
-        const env = new MaterialXEnvironment(context);
-        this._environments.set(context, env);
+        const env = new MaterialXEnvironment(scene);
+        this._environments.set(scene, env);
         return env;
     }
 
@@ -143,22 +141,22 @@ export class MaterialXEnvironment {
     private _isInitialized: boolean = false;
     private _lastUpdateFrame: number = -1;
 
-    constructor(private _context: EnvironmentContext) {
+    constructor(private _scene: Scene) {
         if (debug) console.log("[MaterialX] Environment created");
     }
 
     // Initialize with Needle Engine context
-    async initialize(): Promise<boolean> {
+    async initialize(renderer: WebGLRenderer): Promise<boolean> {
         if (this._initializePromise) {
             return this._initializePromise;
         }
-        this._initializePromise = this._initialize();
+        this._initializePromise = this._initialize(renderer);
         return this._initializePromise;
     }
 
-    update(frame: number, scene: Scene) {
+    update(frame: number, scene: Scene, renderer: WebGLRenderer): void {
         if (!this._initializePromise) {
-            this.initialize();
+            this.initialize(renderer);
             return;
         }
         if (!this._isInitialized) {
@@ -183,13 +181,15 @@ export class MaterialXEnvironment {
             const radianceCube = new Mesh(planeGeometry, radianceMat);
             const irradianceMat = unlitMat.clone();
             irradianceMat.map = textures.irradianceTexture;
-            const irradianceCube = new Mesh(planeGeometry, radianceMat);
+            const irradianceCube = new Mesh(planeGeometry, irradianceMat);
             scene.add(radianceCube);
             scene.add(irradianceCube);
             radianceCube.name = "MaterialXRadianceCube";
-            radianceCube.position.set(.6, 1, 0);
+            radianceCube.position.set(.8, 1, .01);
+            radianceCube.scale.set(1.5, 1, 1);
             irradianceCube.name = "MaterialXIrradianceCube";
-            irradianceCube.position.set(-.6, 1, 0);
+            irradianceCube.position.set(-.8, 1, -.01);
+            irradianceCube.scale.set(1.5, 0.98, 1);
             console.log("[MaterialX] environment initialized from Needle context", { textures, radianceCube, irradianceCube });
         }
     }
@@ -205,6 +205,7 @@ export class MaterialXEnvironment {
         this._lightCount = 0;
         this._pmremGenerator?.dispose();
         this._pmremGenerator = null;
+        this._renderer = null;
         for (const textureSet of this._texturesCache.values()) {
             textureSet.radianceTexture?.dispose();
             textureSet.irradianceTexture?.dispose();
@@ -212,6 +213,9 @@ export class MaterialXEnvironment {
         this._texturesCache.clear();
     }
 
+    get lights() {
+        return this._lights;
+    }
     get lightData() {
         return this._lightData;
     }
@@ -221,15 +225,17 @@ export class MaterialXEnvironment {
             // If the material has its own envMap, we don't use the irradiance texture
             return this._getTextures(material.envMap);
         }
-        return this._getTextures(this._context?.getScene().environment);
+        return this._getTextures(this._scene.environment);
     }
 
     private _pmremGenerator: PMREMGenerator | null = null;
+    private _renderer: WebGLRenderer | null = null;
     private readonly _texturesCache: Map<Texture | null, EnvironmentTextureSet> = new Map();
 
-    private async _initialize(): Promise<boolean> {
+    private async _initialize(renderer: WebGLRenderer): Promise<boolean> {
         this._isInitialized = false;
-        this._pmremGenerator = new PMREMGenerator(this._context.getRenderer());
+        this._pmremGenerator = new PMREMGenerator(renderer);
+        this._renderer = renderer;
         this.updateLighting(true);
         this._isInitialized = true;
         return true;
@@ -244,11 +250,11 @@ export class MaterialXEnvironment {
             return res;
         }
 
-        if (this._context && this._pmremGenerator && texture) {
+        if (this._scene && this._pmremGenerator && this._renderer && texture) {
             if (debug) console.log("[MaterialX] Generating environment textures", texture.name);
             const target = this._pmremGenerator.fromEquirectangular(texture);
-            const radianceRenderTarget = renderPMREMToEquirect(this._context.getRenderer(), target.texture, 0.0, 1024, 512, target.height);
-            const irradianceRenderTarget = renderPMREMToEquirect(this._context.getRenderer(), target.texture, 1.0, 32, 16, target.height);
+            const radianceRenderTarget = renderPMREMToEquirect(this._renderer, target.texture, 0.0, 1024, 512, target.height);
+            const irradianceRenderTarget = renderPMREMToEquirect(this._renderer, target.texture, 1.0, 32, 16, target.height);
             target.dispose();
             res = {
                 radianceTexture: radianceRenderTarget.texture,
@@ -266,11 +272,11 @@ export class MaterialXEnvironment {
     }
 
     private updateLighting = (collectLights: boolean = false) => {
-        if (!this._context) return;
+        if (!this._scene) return;
         // Find lights in scene
         if (collectLights) {
             const lights = new Array<Light>();
-            this._context.getScene().traverse((object: Object3D) => {
+            this._scene.traverse((object: Object3D) => {
                 if ((object as Light).isLight && object.visible)
                     lights.push(object as Light);
             });

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);
@@ -10,70 +14,20 @@ export const debug = getParam("debugmaterialx");
 export const debugUpdate = debug === "update";
 
 
-/**
- * =====================================
- * Unused
- */
-
-// Patch WebGL2 methods for debugging purposes
-
-// const patchWebGL2 = () => {
-//     const getUniformLocation = WebGL2RenderingContext.prototype.getUniformLocation;
-//     const programAndNameToUniformLocation = new WeakMap<WebGLUniformLocation, { program: WebGLProgram, name: string }>();
-//     WebGL2RenderingContext.prototype.getUniformLocation = function (program: WebGLProgram, name: string) {
-//         const location = getUniformLocation.call(this, program, name);
-//         if (location) {
-//             programAndNameToUniformLocation.set(location, { program, name });
-//         }
-//         return location;
-//     };
-
-//     const uniform4fv = WebGL2RenderingContext.prototype.uniform4fv;
-//     WebGL2RenderingContext.prototype.uniform4fv = function (location: WebGLUniformLocation | null, v: Float32Array | number[]) {
-//         if (location) {
-//             const uniformName = programAndNameToUniformLocation.get(location);
-//             if (true) console.log("Calling uniform4fv", { location, v, name: uniformName?.name });
-//         }
-//         return uniform4fv.call(this, location, v);
-//     };
-
-//     const uniform3fv = WebGL2RenderingContext.prototype.uniform3fv;
-//     WebGL2RenderingContext.prototype.uniform3fv = function (location: WebGLUniformLocation | null, v: Float32Array | number[]) {
-//         if (location) {
-//             const uniformName = programAndNameToUniformLocation.get(location);
-//             if (true) console.log("Calling uniform3fv", { location, v, name: uniformName?.name });
-//         }
-//         return uniform3fv.call(this, location, v);
-//     };
-
-//     const uniform3iv = WebGL2RenderingContext.prototype.uniform3iv;
-//     WebGL2RenderingContext.prototype.uniform3iv = function (location: WebGLUniformLocation | null, v: Int32Array | number[]) {
-//         if (location) {
-//             const uniformName = programAndNameToUniformLocation.get(location);
-//             if (true) console.log("Calling uniform3iv", { location, v, name: uniformName?.name });
-//         }
-//         return uniform3iv.call(this, location, v);
-//     };
-
-//     const uniform3uiv = WebGL2RenderingContext.prototype.uniform3uiv;
-//     WebGL2RenderingContext.prototype.uniform3uiv = function (location: WebGLUniformLocation | null, v: Uint32Array | number[]) {
-//         if (location) {
-//             const uniformName = programAndNameToUniformLocation.get(location);
-//             if (true) console.log("Calling uniform3uiv", { location, v, name: uniformName?.name });
-//         }
-//         return uniform3uiv.call(this, location, v);
-//     };
+let time = 0;
+export function getTime() {
+    return time;
+}
+let frame = 0;
+export function getFrame() {
+    return frame;
+}
 
-//     const uniform3f = WebGL2RenderingContext.prototype.uniform3f;
-//     WebGL2RenderingContext.prototype.uniform3f = function (location: WebGLUniformLocation
-//         | null, x: number, y: number, z: number) {
-//         if (location) {
-//             const uniformName = programAndNameToUniformLocation.get(location);
-//             if (uniformName?.name !== "diffuse")
-//                 if (true) console.log("Calling uniform3f", { location, x, y, z, name: uniformName?.name });
-//         }
-//         return uniform3f.call(this, location, x, y, z);
-//     };
-// };
-// // patchWebGL2();
+const performance = window.performance || (window as any).webkitPerformance || (window as any).mozPerformance;
+function updateTime() {
+    time = performance.now() / 1000; // Convert to seconds
+    frame++;
+    window.requestAnimationFrame(updateTime);
+}
+window.requestAnimationFrame(updateTime);