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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/materialx",
-  "version": "1.0.1-next.7bd39cb",
+  "version": "1.0.1-next.b9467c8",
   "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, url, context);
+            this.loader = new MaterialXLoader(p, 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, DoubleSide, FrontSide } from "three";
+import { Material, MeshStandardMaterial, Texture, NearestFilter, CompressedTexture } 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";
@@ -21,14 +21,6 @@ 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";
@@ -46,13 +38,7 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
         return this._generatedMaterials;
     }
 
-    /**
-     * 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) {
+    constructor(private parser: GLTFParser, 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) {
@@ -108,14 +94,15 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
 
     private async _loadMaterialAsync(materialIndex: number): Promise<Material> {
 
-        const materialDef = this.parser.json.materials?.[materialIndex] as MaterialDefinition;
-        if (debug) console.log("[MaterialX] extension found in material:", materialDef.extensions?.[this.name]);
+        const materialDef = this.parser.json.materials?.[materialIndex];
+        if (debug) console.log("[MaterialX] extension found in material:", materialDef.extensions[this.name]);
 
         // Handle different types of MaterialX data
-        const ext = materialDef.extensions?.[this.name] as MaterialX_material_extension;
+        const dataIndex = materialDef.extensions[this.name] as MaterialX_material_extension;
 
-        if (ext) {
-            return this._createMaterialXMaterial(materialDef, ext);
+        if (dataIndex) {
+            // Create a new material and process MaterialX - AWAIT THIS!
+            return await this._createMaterialXMaterial(dataIndex);
         }
 
         // Return fallback material instead of null
@@ -124,7 +111,7 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
         return fallbackMaterial;
     }
 
-    private async _createMaterialXMaterial(material_def: MaterialDefinition, material_extension: MaterialX_material_extension): Promise<Material> {
+    private async _createMaterialXMaterial(material_extension: MaterialX_material_extension): Promise<Material> {
         try {
             if (debug) console.log(`Creating MaterialX material: ${material_extension.name}`);
 
@@ -236,45 +223,72 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
                 name: material_extension.name,
                 shader,
                 transparent: isTransparent,
-                side: material_def.doubleSided ? DoubleSide : FrontSide,
                 loaders: {
-                    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);
+                    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() || '';
+
+                            // 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;
+                                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.name, tex);
+
+                                    // update the default 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 (!(defaultTexture instanceof CompressedTexture) && tex instanceof CompressedTexture) {
+                                        (defaultTexture as any).isCompressedTexture = true;
+                                    }
+                                });
                             }
-                            return this.parser.getDependency("texture", index).then(tex => {
-                                if (debug) console.log("[MaterialX] Texture loaded:" + tex.name, tex);
-                                return tex;
-                            });
-                        }
-                        return null;
+                        });
+                        return defaultTexture;
                     }
                 }
             });

package/src/materialx.helper.ts

@@ -73,162 +73,95 @@ function fromMatrix(matrix: MaterialX.Matrix, dimension: MaterialX.Matrix["size"
 
 
 export type Loaders = {
-    /**
-     * 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);
+    getTexture: (path: string) => THREE.Texture;
 }
 
 /**
  * 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(uniforms: any, type: string, value: any, name: string, loaders: Loaders, searchPath: string): THREE.Uniform {
-
-    const uniform = new THREE.Uniform<any>(null);
+function toThreeUniform(type: string, value: any, name: string, uniforms: any, loaders: Loaders, searchPath, flipY: boolean) {
 
     switch (type) {
         case 'float':
         case 'integer':
         case 'boolean':
-            uniform.value = value;
+            return value;
             break;
         case 'vector2':
-            uniform.value = fromVector(value, 2);
+            return fromVector(value, 2);
             break;
         case 'vector3':
         case 'color3':
-            uniform.value = fromVector(value, 3);
-            break;
+            return fromVector(value, 3);
         case 'vector4':
         case 'color4':
-            uniform.value = fromVector(value, 4);
-            break;
+            return fromVector(value, 4);
         case 'matrix33':
-            uniform.value = fromMatrix(value, 9);
-            break;
+            return fromMatrix(value, 9);
         case 'matrix44':
-            uniform.value = fromMatrix(value, 16);
-            break;
+            return fromMatrix(value, 16);
         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 = true;
+                let checkCache = false;
                 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('data:')) {
+                else if (value.startsWith('http')) {
                     texturePath = value;
-                    checkCache = false;
+                    if (debug) console.log('Load HTTP URL:', texturePath);
                 }
-                else if (value.startsWith('http')) {
+                else if (value.startsWith('data:')) {
                     texturePath = value;
-                    checkCache = true;
+                    checkCache = false;
+                    if (debug) console.log('Load data URL:', texturePath);
                 }
-
-                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;
-                    }
+                const cachedTexture = checkCache && THREE.Cache.get(texturePath);
+                if (cachedTexture) {
+                    if (debug) console.log('Use cached texture: ', texturePath, cachedTexture);
+                    return cachedTexture;
                 }
                 else {
-                    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}'`);
-                    });
+                    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;
                 }
             }
             break;
         case 'samplerCube':
         case 'string':
-            break;
+            return null;
         default:
             const key = type + ':' + name;
             if (!valueTypeWarningMap.has(key)) {
                 valueTypeWarningMap.set(key, true);
                 console.warn('MaterialX: Unsupported uniform type: ' + type + ' for uniform: ' + name, value);
             }
-            break;
+            return null;
     }
-
-    return uniform;
 }
 
 const valueTypeWarningMap = new Map<string, boolean>();
 
 /**
  * Get Three wrapping mode
+ * @param {mx.TextureFilter.wrap} mode
+ * @returns {THREE.Wrapping}
  */
-function getWrapping(mode: number): THREE.Wrapping {
+function getWrapping(mode) {
     let wrap;
     switch (mode) {
         case 1:
@@ -247,14 +180,36 @@ function getWrapping(mode: number): THREE.Wrapping {
     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: THREE.Texture, name: string, uniforms: any, generateMipmaps = true) {
+function setTextureParameters(texture, name, uniforms, flipY = true, 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);
@@ -265,12 +220,8 @@ function setTextureParameters(texture: THREE.Texture, name: string, uniforms: an
         texture.wrapT = getWrapping(vaddressmode);
     }
 
-    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;
+    const filterType = uniforms.find(base + FILTER_TYPE_SUFFIX) ? uniforms.get(base + FILTER_TYPE_SUFFIX).value : -1;
+    texture.minFilter = getMinFilter(filterType, generateMipmaps);
 }
 
 /**
@@ -454,7 +405,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) {
+export function getUniformValues(shaderStage: MaterialX.ShaderStage, loaders: Loaders, searchPath: string, flipY: boolean) {
     const threeUniforms = {};
 
     const uniformBlocks = shaderStage.getUniformBlocks()
@@ -467,8 +418,9 @@ 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: name, value: value, type: variable.getType().getName() });
-                threeUniforms[name] = toThreeUniform(uniforms, variable.getType().getName(), value, name, loaders, searchPath);;
+                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));
             }
         }
     }

package/src/materialx.material.ts

@@ -1,6 +1,6 @@
-import { Camera, DoubleSide, FrontSide, GLSL3, MaterialParameters, Matrix3, Matrix4, Object3D, ShaderMaterial, Texture, Vector3 } from "three";
+import { Camera, DoubleSide, FrontSide, GLSL3, Matrix3, Matrix4, Mesh, Object3D, ShaderMaterial, Texture, Vector3 } from "three";
 import { debug } from "./utils.js";
-import { MaterialXEnvironment } from "./materialx.js";
+import { MaterialXEnvironment, state } from "./materialx.js";
 import { getUniformValues, Loaders } from "./materialx.helper.js";
 import { Context } from "@needle-tools/engine";
 
@@ -16,7 +16,6 @@ declare type MaterialXMaterialInitParameters = {
     shader: any,
     loaders: Loaders,
     transparent?: boolean,
-    side?: MaterialParameters['side'],
 }
 
 export class MaterialXMaterial extends ShaderMaterial {
@@ -98,22 +97,26 @@ 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: {},
+            uniforms: {
+                ...getUniformValues(init.shader.getStage('vertex'), init.loaders, searchPath, flipV),
+                ...getUniformValues(init.shader.getStage('pixel'), init.loaders, searchPath, flipV),
+            },
             vertexShader: vertexShader,
             fragmentShader: fragmentShader,
             glslVersion: GLSL3,
             transparent: isTransparent,
-            side: init.side ? init.side : FrontSide,
+            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' },
@@ -142,6 +145,8 @@ 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);
@@ -188,15 +193,20 @@ 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
+        // Update light data if we have lights
         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) {