@needle-tools/materialx 1.0.1-next.64f3b67 → 1.0.1-next.7bd39cb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/materialx",
-  "version": "1.0.1-next.64f3b67",
+  "version": "1.0.1-next.7bd39cb",
   "type": "module",
   "main": "index.ts",
   "exports": {

package/src/loader/loader.needle.ts

@@ -53,7 +53,7 @@ export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
         // Register the MaterialX loader extension
         // Environment initialization is now handled in the MaterialXLoader constructor
         loader.register(p => {
-            this.loader = new MaterialXLoader(p, context);
+            this.loader = new MaterialXLoader(p, url, context);
             return this.loader;
         });
     };

package/src/loader/loader.three.ts

@@ -1,5 +1,5 @@
 import { Context } from "@needle-tools/engine";
-import { Material, MeshStandardMaterial, Texture, NearestFilter, CompressedTexture } from "three";
+import { Material, MeshStandardMaterial, Texture, NearestFilter, CompressedTexture, DoubleSide, FrontSide } from "three";
 import { GLTF, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { ready, MaterialXEnvironment, state } from "../materialx.js";
 import { debug } from "../utils.js";
@@ -13,12 +13,22 @@ export type MaterialX_root_extension = {
     name: string;
     /** MaterialX xml content */
     mtlx: string;
+    /** MaterialX texture pointers */
+    textures: Array<{ name: string, pointer: string }>;
 }
 
 export type MaterialX_material_extension = {
     name: string; // Material name reference
 }
 
+type MaterialDefinition = {
+    name?: string; // Optional name for the material
+    doubleSided?: boolean; // Whether the material is double-sided
+    extensions?: {
+        [key: string]: any; // Extensions for the material, including MaterialX
+    },
+}
+
 // MaterialX loader extension for js GLTFLoader
 export class MaterialXLoader implements GLTFLoaderPlugin {
     readonly name = "NEEDLE_materials_mtlx";
@@ -36,7 +46,13 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
         return this._generatedMaterials;
     }
 
-    constructor(private parser: GLTFParser, private context: Context) {
+    /**
+     * MaterialXLoader constructor
+     * @param parser The GLTFParser instance
+     * @param url The URL of the GLTF file
+     * @param context The context for the GLTF loading process
+     */
+    constructor(private parser: GLTFParser, private url: string, private context: Context) {
         if (debug) console.log("MaterialXLoader created for parser");
         // Start loading of MaterialX environment if the root extension exists
         if (this.materialX_root_data) {
@@ -92,15 +108,14 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
 
     private async _loadMaterialAsync(materialIndex: number): Promise<Material> {
 
-        const materialDef = this.parser.json.materials?.[materialIndex];
-        if (debug) console.log("[MaterialX] extension found in material:", materialDef.extensions[this.name]);
+        const materialDef = this.parser.json.materials?.[materialIndex] as MaterialDefinition;
+        if (debug) console.log("[MaterialX] extension found in material:", materialDef.extensions?.[this.name]);
 
         // Handle different types of MaterialX data
-        const dataIndex = materialDef.extensions[this.name] as MaterialX_material_extension;
+        const ext = materialDef.extensions?.[this.name] as MaterialX_material_extension;
 
-        if (dataIndex) {
-            // Create a new material and process MaterialX - AWAIT THIS!
-            return await this._createMaterialXMaterial(dataIndex);
+        if (ext) {
+            return this._createMaterialXMaterial(materialDef, ext);
         }
 
         // Return fallback material instead of null
@@ -109,7 +124,7 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
         return fallbackMaterial;
     }
 
-    private async _createMaterialXMaterial(material_extension: MaterialX_material_extension): Promise<Material> {
+    private async _createMaterialXMaterial(material_def: MaterialDefinition, material_extension: MaterialX_material_extension): Promise<Material> {
         try {
             if (debug) console.log(`Creating MaterialX material: ${material_extension.name}`);
 
@@ -221,60 +236,45 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
                 name: material_extension.name,
                 shader,
                 transparent: isTransparent,
+                side: material_def.doubleSided ? DoubleSide : FrontSide,
                 loaders: {
-                    getTexture: url => {
-                        // Return a checkerboard texture for now
-                        const defaultTexture = new Texture();
-                        defaultTexture.image = new Image();
-                        defaultTexture.image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAG0lEQVR4nGJqWH9q9e8XjA/VrL8UfQIEAAD//zn2CCX5UcsdAAAAAElFTkSuQmCC";
-                        defaultTexture.needsUpdate = true;
-                        // Pixelated filtering
-                        defaultTexture.magFilter = NearestFilter;
-                        defaultTexture.minFilter = NearestFilter;
-                        new Promise(() => {
-                            // Find the index of the texture in the parser
-                            const filenameWithoutExt = url.split('/').pop()?.split('.').shift() || '';
-
-                            // Find in the root extension; there's the textures dictionary:
-                            // a mapping from the texture name used in MaterialX to the glTF texture index
-                            const ext = this.parser.json.extensions?.["NEEDLE_materials_mtlx"];
-                            const textures = ext?.textures || [];
-
-                            const index = textures.findIndex(tex => {
-                                if (debug) console.log("[MaterialX] Checking texture:", tex.name, "against URL:", filenameWithoutExt);
-                                return tex.name === filenameWithoutExt;
-                            });
+                    cacheKey: this.url,
+                    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;
                             }
-                            this.parser.getDependency("texture", index).then(tex => {
-                                if (debug) console.log("[MaterialX] Texture loaded:", tex);
-                                console.log(tex, " -> ", defaultTexture)
-
-                                // update the checkerboard texture with the loaded texture
-                                defaultTexture.image = tex.image;
-                                defaultTexture.needsUpdate = true;
-                                defaultTexture.userData = tex.userData || {}; // needed for LODs
-                                defaultTexture.format = tex.format;
-                                defaultTexture.source = tex.source || defaultTexture.source;
-                                defaultTexture.type = tex.type;
-                                defaultTexture.format = tex.format;
-                                defaultTexture.magFilter = tex.magFilter;
-                                defaultTexture.minFilter = tex.minFilter;
-                                defaultTexture.wrapS = tex.wrapS;
-                                defaultTexture.wrapT = tex.wrapT;
-                                defaultTexture.generateMipmaps = tex.generateMipmaps;
-                                defaultTexture.mipmaps = tex.mipmaps || defaultTexture.mipmaps;
-                                defaultTexture.unpackAlignment = tex.unpackAlignment;
-
-                                if (tex instanceof CompressedTexture) {
-                                    defaultTexture.isCompressedTexture = true;
-                                }
+                            return this.parser.getDependency("texture", index).then(tex => {
+                                if (debug) console.log("[MaterialX] Texture loaded:" + tex.name, tex);
+                                return tex;
                             });
-                        });
-                        return defaultTexture;
+                        }
+                        return null;
                     }
                 }
             });

package/src/materialx.helper.ts

@@ -73,95 +73,162 @@ function fromMatrix(matrix: MaterialX.Matrix, dimension: MaterialX.Matrix["size"
 
 
 export type Loaders = {
-    getTexture: (path: string) => THREE.Texture;
+    /**
+     * Cache key for the loaders, used to identify and reuse textures
+     */
+    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>;
+}
+
+const defaultTexture = new THREE.Texture();
+defaultTexture.needsUpdate = true;
+defaultTexture.image = new Image();
+defaultTexture.image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAANQTFRFr6+vGqg52AAAAAxJREFUeJxjZGBEgQAAWAAJLpjsTQAAAABJRU5ErkJggg=="
+// defaultTexture.image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAB5QTFRFAAAABAQEw8PD////v7+/vb29Xl5eQEBA+/v7PDw8GPBYkgAAAB1JREFUeJxjZGBgYFQSABIUMlxgDGMGBtaIAnIZAKwQCSDYUEZEAAAAAElFTkSuQmCC";
+// defaultTexture.wrapS = THREE.RepeatWrapping;
+// defaultTexture.wrapT = THREE.RepeatWrapping;
+// defaultTexture.minFilter = THREE.NearestFilter;
+// defaultTexture.magFilter = THREE.NearestFilter;
+// defaultTexture.repeat = new THREE.Vector2(100, 100);
+
+
+const defaultNormalTexture = new THREE.Texture();
+defaultNormalTexture.needsUpdate = true;
+defaultNormalTexture.image = new Image();
+defaultNormalTexture.image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIBAMAAAA2IaO4AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABJQTFRFgYH4gIH4gYH3gIH3gIH5gID4m94ORAAAADFJREFUeJxjZBBkfMdo9P/BB0aBj/8FGB0ufghgFGT4r8wo+P8rD2Pgo3sMjIz8jAwAMLoN0ZjS5hgAAAAASUVORK5CYII=";
+
+
+function tryGetFromCache(key: string): any {
+    const wasEnabled = THREE.Cache.enabled;
+    THREE.Cache.enabled = true;
+    const value = THREE.Cache.get(key);
+    THREE.Cache.enabled = wasEnabled;
+    return value;
+}
+function addToCache(key: string, value: any): void {
+    const wasEnabled = THREE.Cache.enabled;
+    THREE.Cache.enabled = true;
+    THREE.Cache.add(key, value);
+    THREE.Cache.enabled = wasEnabled;
+    if (debug) console.log('[MaterialX] Added to cache:', key, value);
 }
 
 /**
  * Get Three uniform from MaterialX value
- * @param {mx.Uniform.type} type
- * @param {mx.Uniform.value} value
- * @param {mx.Uniform.name} name
- * @param {mx.Uniforms} uniforms
- * @param {Loaders} loaders
- * @param {string} searchPath
- * @param {boolean} flipY
  */
-function toThreeUniform(type: string, value: any, name: string, uniforms: any, loaders: Loaders, searchPath, flipY: boolean) {
+function toThreeUniform(uniforms: any, type: string, value: any, name: string, loaders: Loaders, searchPath: string): THREE.Uniform {
+
+    const uniform = new THREE.Uniform<any>(null);
 
     switch (type) {
         case 'float':
         case 'integer':
         case 'boolean':
-            return value;
+            uniform.value = value;
             break;
         case 'vector2':
-            return fromVector(value, 2);
+            uniform.value = fromVector(value, 2);
             break;
         case 'vector3':
         case 'color3':
-            return fromVector(value, 3);
+            uniform.value = fromVector(value, 3);
+            break;
         case 'vector4':
         case 'color4':
-            return fromVector(value, 4);
+            uniform.value = fromVector(value, 4);
+            break;
         case 'matrix33':
-            return fromMatrix(value, 9);
+            uniform.value = fromMatrix(value, 9);
+            break;
         case 'matrix44':
-            return fromMatrix(value, 16);
+            uniform.value = fromMatrix(value, 16);
+            break;
         case 'filename':
             if (value) {
                 // Cache / reuse texture to avoid reload overhead.
                 // Note: that data blobs and embedded data textures are not cached as they are transient data.
-                let checkCache = false;
+                let checkCache = true;
                 let texturePath = searchPath + IMAGE_PATH_SEPARATOR + value;
                 if (value.startsWith('blob:')) {
                     texturePath = value;
-                    if (debug) console.log('Load blob URL:', texturePath);
                     checkCache = false;
                 }
-                else if (value.startsWith('http')) {
-                    texturePath = value;
-                    if (debug) console.log('Load HTTP URL:', texturePath);
-                }
                 else if (value.startsWith('data:')) {
                     texturePath = value;
                     checkCache = false;
-                    if (debug) console.log('Load data URL:', texturePath);
                 }
-                const cachedTexture = checkCache && THREE.Cache.get(texturePath);
-                if (cachedTexture) {
-                    if (debug) console.log('Use cached texture: ', texturePath, cachedTexture);
-                    return cachedTexture;
+                else if (value.startsWith('http')) {
+                    texturePath = value;
+                    checkCache = true;
+                }
+
+                const cacheKey = `${loaders.cacheKey}-${texturePath}`;
+                const cacheValue = checkCache ? tryGetFromCache(cacheKey) : null;
+                if (cacheValue) {
+                    if (debug) console.log('[MaterialX] Use cached texture: ', cacheKey, cacheValue);
+                    if (cacheValue instanceof Promise) {
+                        cacheValue.then(res => {
+                            if (res) uniform.value = res;
+                            else console.warn(`[MaterialX] Failed to load texture ${name} '${texturePath}'`);
+                        });
+                    }
+                    else {
+                        uniform.value = cacheValue;
+                    }
                 }
                 else {
-                    const texture = loaders.getTexture(texturePath);
-                    if (checkCache) THREE.Cache.add(texturePath, texture);
-                    // Set address & filtering mode
-                    if (texture) setTextureParameters(texture, name, uniforms, flipY);
-                    return texture;
+                    if (name.toLowerCase().includes("normal")) {
+                        uniform.value = defaultNormalTexture;
+                    }
+                    else {
+                        uniform.value = defaultTexture;
+                    }
+
+                    if (debug) console.log('[MaterialX] Load texture:', texturePath);
+                    // Save the loading promise in the cache
+                    const promise = loaders.getTexture(texturePath).then(res => {
+                        if (res) {
+                            res.colorSpace = THREE.LinearSRGBColorSpace;
+                            setTextureParameters(res, name, uniforms);
+                        }
+                        return res;
+                    });
+                    if (checkCache) {
+                        addToCache(cacheKey, promise);
+                    }
+                    promise.then(res => {
+                        if (res) uniform.value = res;
+                        else console.warn(`[MaterialX] Failed to load texture ${name} '${texturePath}'`);
+                    });
                 }
             }
             break;
         case 'samplerCube':
         case 'string':
-            return null;
+            break;
         default:
             const key = type + ':' + name;
             if (!valueTypeWarningMap.has(key)) {
                 valueTypeWarningMap.set(key, true);
                 console.warn('MaterialX: Unsupported uniform type: ' + type + ' for uniform: ' + name, value);
             }
-            return null;
+            break;
     }
+
+    return uniform;
 }
 
 const valueTypeWarningMap = new Map<string, boolean>();
 
 /**
  * Get Three wrapping mode
- * @param {mx.TextureFilter.wrap} mode
- * @returns {THREE.Wrapping}
  */
-function getWrapping(mode) {
+function getWrapping(mode: number): THREE.Wrapping {
     let wrap;
     switch (mode) {
         case 1:
@@ -180,36 +247,14 @@ function getWrapping(mode) {
     return wrap;
 }
 
-/**
- * Get Three minification filter
- * @param {mx.TextureFilter.minFilter} type
- * @param {mx.TextureFilter.generateMipmaps} generateMipmaps
- */
-function getMinFilter(type, generateMipmaps) {
-    let filterType: THREE.TextureFilter = generateMipmaps ? THREE.LinearMipMapLinearFilter : THREE.LinearFilter;
-    if (type === 0) {
-        filterType = generateMipmaps ? THREE.NearestMipMapNearestFilter : THREE.NearestFilter;
-    }
-    return filterType;
-}
 
 /**
  * Set Three texture parameters
- * @param {THREE.Texture} texture
- * @param {mx.Uniform.name} name
- * @param {mx.Uniforms} uniforms
- * @param {mx.TextureFilter.generateMipmaps} generateMipmaps
  */
-function setTextureParameters(texture, name, uniforms, flipY = true, generateMipmaps = true) {
+function setTextureParameters(texture: THREE.Texture, name: string, uniforms: any, generateMipmaps = true) {
     const idx = name.lastIndexOf(IMAGE_PROPERTY_SEPARATOR);
     const base = name.substring(0, idx) || name;
 
-    // texture.generateMipmaps = generateMipmaps;
-    // texture.wrapS = THREE.RepeatWrapping;
-    // texture.wrapT = THREE.RepeatWrapping;
-    // texture.magFilter = THREE.LinearFilter;
-    // texture.flipY = flipY;
-
     if (uniforms.find(base + UADDRESS_MODE_SUFFIX)) {
         const uaddressmode = uniforms.find(base + UADDRESS_MODE_SUFFIX).getValue().getData();
         texture.wrapS = getWrapping(uaddressmode);
@@ -220,8 +265,12 @@ function setTextureParameters(texture, name, uniforms, flipY = true, generateMip
         texture.wrapT = getWrapping(vaddressmode);
     }
 
-    const filterType = uniforms.find(base + FILTER_TYPE_SUFFIX) ? uniforms.get(base + FILTER_TYPE_SUFFIX).value : -1;
-    texture.minFilter = getMinFilter(filterType, generateMipmaps);
+    const mxFilterType = uniforms.find(base + FILTER_TYPE_SUFFIX) ? uniforms.get(base + FILTER_TYPE_SUFFIX).value : -1;
+    let minFilter: THREE.TextureFilter = generateMipmaps ? THREE.LinearMipMapLinearFilter : THREE.LinearFilter;
+    if (mxFilterType === 0) {
+        minFilter = generateMipmaps ? THREE.NearestMipMapNearestFilter : THREE.NearestFilter;
+    }
+    texture.minFilter = minFilter;
 }
 
 /**
@@ -405,7 +454,7 @@ export function getLightData(lights: any, genContext: any): { lightData: LightDa
 /**
  * Get uniform values for a shader
  */
-export function getUniformValues(shaderStage: MaterialX.ShaderStage, loaders: Loaders, searchPath: string, flipY: boolean) {
+export function getUniformValues(shaderStage: MaterialX.ShaderStage, loaders: Loaders, searchPath: string) {
     const threeUniforms = {};
 
     const uniformBlocks = shaderStage.getUniformBlocks()
@@ -418,9 +467,8 @@ export function getUniformValues(shaderStage: MaterialX.ShaderStage, loaders: Lo
                 const variable = uniforms.get(i);
                 const value = variable.getValue()?.getData();
                 const name = variable.getVariable();
-                if (debug) console.log("Adding uniform", { path: variable.getPath(), name, value, type: variable.getType().getName() });
-                threeUniforms[name] = new THREE.Uniform(toThreeUniform(variable.getType().getName(), value, name, uniforms,
-                    loaders, searchPath, flipY));
+                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);;
             }
         }
     }

package/src/materialx.material.ts

@@ -1,6 +1,6 @@
-import { Camera, DoubleSide, FrontSide, GLSL3, Matrix3, Matrix4, Mesh, Object3D, ShaderMaterial, Texture, Vector3 } from "three";
+import { Camera, DoubleSide, FrontSide, GLSL3, MaterialParameters, Matrix3, Matrix4, Object3D, ShaderMaterial, Texture, Vector3 } from "three";
 import { debug } from "./utils.js";
-import { MaterialXEnvironment, state } from "./materialx.js";
+import { MaterialXEnvironment } from "./materialx.js";
 import { getUniformValues, Loaders } from "./materialx.helper.js";
 import { Context } from "@needle-tools/engine";
 
@@ -16,6 +16,7 @@ declare type MaterialXMaterialInitParameters = {
     shader: any,
     loaders: Loaders,
     transparent?: boolean,
+    side?: MaterialParameters['side'],
 }
 
 export class MaterialXMaterial extends ShaderMaterial {
@@ -97,26 +98,22 @@ export class MaterialXMaterial extends ShaderMaterial {
     #include <colorspace_fragment>`);
 
         const searchPath = ""; // Could be derived from the asset path if needed
-        const flipV = false; // Set based on your geometry requirements
         const isTransparent = init.transparent ?? false;
         super({
             name: init.name,
-            uniforms: {
-                ...getUniformValues(init.shader.getStage('vertex'), init.loaders, searchPath, flipV),
-                ...getUniformValues(init.shader.getStage('pixel'), init.loaders, searchPath, flipV),
-            },
+            uniforms: {},
             vertexShader: vertexShader,
             fragmentShader: fragmentShader,
             glslVersion: GLSL3,
             transparent: isTransparent,
-            side: FrontSide,
+            side: init.side ? init.side : FrontSide,
             depthTest: true,
             depthWrite: !isTransparent,
         });
 
-
-
         Object.assign(this.uniforms, {
+            ...getUniformValues(init.shader.getStage('vertex'), init.loaders, searchPath),
+            ...getUniformValues(init.shader.getStage('pixel'), init.loaders, searchPath),
             u_envMatrix: { value: new Matrix4() },
             u_envRadiance: { value: null, type: 't' },
             u_envRadianceMips: { value: 8, type: 'i' },
@@ -145,8 +142,6 @@ export class MaterialXMaterial extends ShaderMaterial {
 
         const uniforms = this.uniforms;
 
-        if (!uniforms) return;
-
         // TODO remove. Not sure why this is needed, but without it
         // we currently get some "swimming" where matrices are not up to date.
         camera.updateMatrixWorld(true);
@@ -193,20 +188,15 @@ export class MaterialXMaterial extends ShaderMaterial {
         const lightCount = environment.lightCount || 0;
         const textures = environment.getTextures(this) || null;
 
-        // Update each generated material's lighting uniforms
-        if (!this.uniforms) return;
-
         // Update light count
         if (this.uniforms.u_numActiveLightSources && lightCount >= 0) {
             this.uniforms.u_numActiveLightSources.value = lightCount;
         }
 
-        // Update light data if we have lights
+        // Update light data
         if (lightData) {
             this.uniforms.u_lightData.value = lightData;
-            if (debug) console.log("[MaterialX] Updated light data for material", this.name, lightData, this.uniforms,);
         }
-        else if (debug) console.warn("[MaterialX] No light data available to update uniforms for material", this.name);
 
         // Update environment uniforms
         if (this.uniforms.u_envMatrix) {