@needle-tools/materialx 1.2.0 → 1.2.1-next.2cdc46a

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.2.1] - 2025-07-23
+- Fix: error caused by scene.environment being null 
+
 ## [1.2.0] - 2025-07-23
 - Add: Support to load raw MaterialX materials (from mtlx as XML)
 - Fix: Warn if tangents are missing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/materialx",
-  "version": "1.2.0",
+  "version": "1.2.1-next.2cdc46a",
   "type": "module",
   "main": "index.js",
   "types": "index.d.ts",
@@ -56,4 +56,4 @@
     "mtlx",
     "rendering"
   ]
-}
+}

package/src/index.d.ts

@@ -1,4 +1,4 @@
-export { ready, type MaterialXContext } from "./materialx.js";
+export { ready, type MaterialXContext, preloadWasm } from "./materialx.js";
 export { MaterialXMaterial } from "./materialx.material.js";
 export { MaterialXLoader } from "./loader/loader.three.js";
 
@@ -9,3 +9,4 @@ declare const Experimental_API: {
 };
 
 export { Experimental_API };
+

package/src/index.js

@@ -1,11 +1,16 @@
-export { ready } from "./materialx.js";
+import { createMaterialXMaterial } from "./loader/loader.three.js";
+
+export { ready, preloadWasm } from "./materialx.js";
 export { MaterialXMaterial } from "./materialx.material.js";
 export { MaterialXLoader } from "./loader/loader.three.js";
 
-import { createMaterialXMaterial } from "./loader/loader.three.js";
 
+/**
+ * Experimental API for creating MaterialX materials.
+ */
 const Experimental_API = {
     createMaterialXMaterial
-}
+};
+
+export { Experimental_API };
 
-export { Experimental_API }

package/src/loader/loader.needle.js

@@ -1,6 +1,7 @@
 import { addCustomExtensionPlugin, Context } from "@needle-tools/engine";
 import { useNeedleMaterialX as _useNeedleMaterialX } from "./loader.three.js";
 import { debug } from "../utils.js";
+import { preloadWasm } from "../materialx.js";
 
 /**
  * @typedef {import("@needle-tools/engine").INeedleGLTFExtensionPlugin} INeedleGLTFExtensionPlugin
@@ -58,5 +59,6 @@ export class MaterialXLoaderPlugin {
  * @returns {Promise<void>}
  */
 export async function useNeedleMaterialX() {
+    preloadWasm("network_idle");
     addCustomExtensionPlugin(new MaterialXLoaderPlugin());
 }

package/src/materialx.d.ts

@@ -1,6 +1,8 @@
 import { Light, Scene, Texture, WebGLRenderer } from "three";
 import type { MaterialX as MX } from "./materialx.types.js";
 
+export function preloadWasm(trigger: "immediately" | "network_idle"): Promise<void>;
+
 export type MaterialXContext = {
     getTime?(): number;
     getFrame?(): number;

package/src/materialx.js

@@ -1,8 +1,26 @@
 import MaterialX from "../bin/JsMaterialXGenShader.js";
-import { debug } from "./utils.js";
+import { debug, waitForNetworkIdle } from "./utils.js";
 import { renderPMREMToEquirect } from "./utils.texture.js";
 import { Light, Mesh, MeshBasicMaterial, Object3D, PlaneGeometry, PMREMGenerator, Scene, Texture, WebGLRenderer } from "three";
 import { registerLights, getLightData } from "./materialx.helper.js";
+import { whiteTexture } from "./utils.texture.js";
+
+
+/**
+ * Preloads the MaterialX WebAssembly module.
+ * @type {import("./materialx.js").preloadWasm}
+ */
+export async function preloadWasm(trigger) {
+    if (trigger === "immediately") {
+        // Load the WASM module immediately
+        return ready();
+    } else if (trigger === "network_idle") {
+        // Wait for network to be idle before loading
+        return waitForNetworkIdle().then(ready);
+    }
+}
+
+
 
 export const state = new class {
     /** @type {import("./materialx.types.js").MaterialX.MODULE | null} */
@@ -113,8 +131,9 @@ export async function ready() {
  */
 
 /**
- * MaterialXEnvironment manages the environment settings for MaterialX materials.
+ * MaterialXEnvironment manages the environment settings for MaterialX materials. 
  */
+// @dont-generate-component
 export class MaterialXEnvironment {
 
     /**
@@ -256,7 +275,14 @@ 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._scene.environment);
+
+        // Use the scene background for lighting if no environment is available
+        // If we don't do this we don't see the correct lighting for scenes exported with 'Environment Lighting: Color' and 'Environment Reflections: Skybox'  
+        const skybox = this._scene.environment || this._scene.background;
+        if (skybox instanceof Texture) {
+            return this._getTextures(skybox);
+        }
+        return this._getTextures(null);
     }
 
     /** @type {PMREMGenerator | null} */
@@ -284,6 +310,12 @@ export class MaterialXEnvironment {
      * @returns {{radianceTexture: Texture | null, irradianceTexture: Texture | null}}
      */
     _getTextures(texture) {
+
+        // Fallback to white texture if no texture is provided
+        if (!texture) {
+            texture = whiteTexture;
+        }
+
         /** @type {EnvironmentTextureSet | undefined} */
         let res = this._texturesCache.get(texture || null);
         if (res) {
@@ -322,7 +354,7 @@ export class MaterialXEnvironment {
             const lights = new Array();
             this._scene.traverse((/** @type {Object3D} */ object) => {
                 if ((/** @type {Light} */ (object)).isLight && object.visible)
-                    lights.push(/** @type {Light} */ (object));
+                    lights.push(/** @type {Light} */(object));
             });
             this._lights = lights;
         }

package/src/materialx.material.js

@@ -23,6 +23,7 @@ const worldViewPos = new Vector3();
  * @typedef {"highp" | "mediump" | "lowp"} Precision
  */
 
+// @dont-generate-component
 export class MaterialXMaterial extends ShaderMaterial {
 
     /** The original name of the shader 
@@ -90,6 +91,7 @@ export class MaterialXMaterial extends ShaderMaterial {
         // Patch fragmentShader
         const precision = init.parameters?.precision || "highp";
         vertexShader = vertexShader.replace(/precision mediump float;/g, `precision ${precision} float;`);
+        vertexShader = vertexShader.replace(/#define M_FLOAT_EPS 1e-8/g, precision === "highp" ? `#define M_FLOAT_EPS 1e-8` : `#define M_FLOAT_EPS 1e-3`);
         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`);
 
@@ -258,21 +260,25 @@ export class MaterialXMaterial extends ShaderMaterial {
         // Update standard transformation matrices
         if (uniforms.u_worldMatrix) {
             uniforms.u_worldMatrix.value = object.matrixWorld;
+            // @ts-ignore
             uniforms.u_worldMatrix.needsUpdate = true;
         }
 
         if (uniforms.u_viewProjectionMatrix) {
             uniforms.u_viewProjectionMatrix.value.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+            // @ts-ignore
             uniforms.u_viewProjectionMatrix.needsUpdate = true;
         }
 
         if (uniforms.u_worldInverseTransposeMatrix) {
             uniforms.u_worldInverseTransposeMatrix.value.setFromMatrix3(normalMat.getNormalMatrix(object.matrixWorld));
+            // @ts-ignore
             uniforms.u_worldInverseTransposeMatrix.needsUpdate = true;
         }
 
         if (uniforms.u_viewPosition) {
             uniforms.u_viewPosition.value.copy(camera.getWorldPosition(worldViewPos));
+            // @ts-ignore
             uniforms.u_viewPosition.needsUpdate = true;
         }
 
@@ -294,10 +300,10 @@ export class MaterialXMaterial extends ShaderMaterial {
             uniforms.u_frame.value = frame;
         }
 
+        this.uniformsNeedUpdate = true;
+
         // Update light uniforms
         this.updateEnvironmentUniforms(environment);
-
-        this.uniformsNeedUpdate = true;
     }
 
     /**
@@ -331,6 +337,7 @@ export class MaterialXMaterial extends ShaderMaterial {
         if (uniforms.u_envRadiance) {
             const prev = uniforms.u_envRadiance.value;
             uniforms.u_envRadiance.value = textures.radianceTexture;
+            // @ts-ignore
             if (prev != textures.radianceTexture) uniforms.u_envRadiance.needsUpdate = true;
         }
         if (uniforms.u_envRadianceMips) {
@@ -339,6 +346,7 @@ export class MaterialXMaterial extends ShaderMaterial {
         if (uniforms.u_envIrradiance) {
             const prev = uniforms.u_envIrradiance.value;
             uniforms.u_envIrradiance.value = textures.irradianceTexture;
+            // @ts-ignore
             if (prev != textures.irradianceTexture) uniforms.u_envIrradiance.needsUpdate = true;
         }
 

package/src/utils.d.ts

@@ -15,3 +15,6 @@ export function getTime(): number;
  * Get current frame number
  */
 export function getFrame(): number;
+
+
+export function waitForNetworkIdle(): Promise<void>;

package/src/utils.js

@@ -44,3 +44,16 @@ function updateTime() {
 }
 
 window.requestAnimationFrame(updateTime);
+
+
+
+
+export async function waitForNetworkIdle() {
+    if (typeof requestIdleCallback !== "undefined") {
+        return new Promise(res => requestIdleCallback(res));
+    }
+    else {
+        console.debug("[MaterialX] Can not wait for network idle, using fallback");
+        return new Promise(res => setTimeout(res, 100)); // Fallback to a short delay
+    }
+}

package/src/utils.texture.d.ts

@@ -1,5 +1,7 @@
 import { WebGLRenderer, WebGLRenderTarget, Texture } from 'three';
 
+export const whiteTexture: Texture;
+
 /**
  * Renders a PMREM environment map to an equirectangular texture with specified roughness
  */

package/src/utils.texture.js

@@ -3,6 +3,13 @@ import { getParam } from './utils.js';
 
 const debug = getParam("debugmaterialx");
 
+export const whiteTexture = new Texture();
+whiteTexture.needsUpdate = true;
+whiteTexture.image = new Image();
+whiteTexture.image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAANQTFRFr6+vGqg52AAAAAxJREFUeJxjZGBEgQAAWAAJLpjsTQAAAABJRU5ErkJggg=="
+
+
+
 /**
  * Renders a PMREM environment map to an equirectangular texture with specified roughness
  * @param {WebGLRenderer} renderer - Three.js WebGL renderer