@needle-tools/materialx 1.0.4-next.8713311 → 1.0.4-next.a95b900

package/index.ts

@@ -2,4 +2,4 @@ import { registerNeedleLoader } from "./src/loader/loader.needle.js";
 
 registerNeedleLoader();
 
-export { ready, getMaterialXEnvironment } from "./src/index.js";
+export * from "./src/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/materialx",
-  "version": "1.0.4-next.8713311",
+  "version": "1.0.4-next.a95b900",
   "type": "module",
   "main": "index.ts",
   "exports": {

package/src/index.ts

@@ -1,5 +1,4 @@
-import { ready, state } from "./materialx.js";
-
-const getMaterialXEnvironment = () => state.materialXEnvironment;
-
-export { ready, getMaterialXEnvironment };
+export { ready, type MaterialXContext } from "./materialx.js";
+export { MaterialXMaterial } from "./materialx.material.js";
+export { MaterialXLoader } from "./loader/loader.three.js";
+export { registerNeedleLoader } from "./loader/loader.needle.js";

package/src/loader/loader.needle.ts

@@ -1,46 +1,10 @@
 
 
-import { Group, Camera, Material, Mesh, Object3D } from "three";
-import { Context, GLTF, addCustomExtensionPlugin, Component, INeedleGLTFExtensionPlugin } from "@needle-tools/engine";
+import { Context, GLTF, addCustomExtensionPlugin, 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 { MaterialXLoader } from "./loader.three.js";
 import { debug } from "../utils.js";
-import { MaterialXEnvironment, state } from "../materialx.js";
-import { MaterialXMaterial } from "../materialx.material.js";
-
-//@dont-generate-component
-export class MaterialXUniformUpdate extends Component {
-
-    onEnable(): void {
-        this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
-    }
-
-    onDisable(): void {
-        this.context.removeBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
-    }
-
-    onBeforeRenderThree = () => {
-        // Update uniforms or perform any pre-render logic here
-        const gameObject = this.gameObject as any as Mesh;
-        const material = gameObject?.material;
-
-        const camera = this.context.mainCamera;
-        if (!camera) return;
-
-        const env = state.materialXEnvironment;
-
-        if (Array.isArray(material)) {
-            for (const entry of material) {
-                if (entry && entry instanceof MaterialXMaterial) {
-                    entry.updateUniforms(this.context, env, this.gameObject, camera);
-                }
-            }
-        } else if (material instanceof MaterialXMaterial) {
-            material.updateUniforms(this.context, env, this.gameObject, camera);
-        }
-    }
-}
 
 export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
     readonly name = "MaterialXLoaderPlugin";
@@ -53,7 +17,12 @@ 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, url, {
+                getTime: () => context.time.time,
+                getFrame: ()=> context.time.frame,
+                getScene: () => context.scene,
+                getRenderer: () => context.renderer,
+            });
             return this.loader;
         });
     };
@@ -65,25 +34,14 @@ export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
         if (!this.loader?.materialX_root_data) {
             return;
         }
-        // Set up onBeforeRender callbacks for objects with MaterialX materials
-        // This ensures uniforms are updated properly during rendering
-        gltf.scene.traverse((child) => {
-            if ((child as any).isMesh) {
-                const mesh = child as Mesh;
-                const material = mesh.material as Material;
-
-                if (material instanceof MaterialXMaterial) {
-                    if (debug) console.log("[MaterialX] Adding MaterialX uniform update component to:", child.name);
-                    child.addComponent(MaterialXUniformUpdate);
-                }
-            }
-        });
 
         if (debug) console.log("[MaterialX] Loaded: ", this.loader);
+
+
     };
 
     onExport = (_exporter: GLTFExporter, _context: Context) => {
-        console.log("[MaterialX] TODO: MaterialXLoaderPlugin: Setting up export extensions");
+        console.warn("[MaterialX] Export is not supported");
         // TODO: Add MaterialX export functionality if needed
     };
 }

package/src/loader/loader.three.ts

@@ -1,7 +1,6 @@
-import { Context } from "@needle-tools/engine";
-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 { Material, MeshStandardMaterial, DoubleSide, FrontSide } from "three";
+import { 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";
 
@@ -52,7 +51,7 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
      * @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 url: string, 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,12 +68,6 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
         return this._loadMaterialAsync(materialIndex);
     }
 
-    afterRoot = async (_gltf: GLTF) => {
-        // Initialize MaterialX lighting system with scene data
-        const environment = state.materialXEnvironment;
-        environment.initialize(this.context);
-    }
-
     // Parse the MaterialX document once and cache it
     private async _materialXDocumentReady(): Promise<any> {
         if (this._documentReadyPromise) {
@@ -238,6 +231,7 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
                 shader,
                 transparent: isTransparent,
                 side: material_def.doubleSided ? DoubleSide : FrontSide,
+                context: this.context,
                 loaders: {
                     cacheKey: this.url,
                     getTexture: async url => {

package/src/materialx.helper.ts

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-import { getParam, getWorldDirection } from '@needle-tools/engine';
+import { getWorldDirection } from '@needle-tools/engine';
 import * as THREE from 'three';
 import { debug, debugUpdate } from './utils';
 import { MaterialX } from './materialx.types';

package/src/materialx.material.ts

@@ -1,8 +1,7 @@
-import { Camera, DoubleSide, FrontSide, GLSL3, IUniform, MaterialParameters, Matrix3, Matrix4, Object3D, ShaderMaterial, Texture, Vector3 } from "three";
+import { BufferGeometry, Camera, FrontSide, GLSL3, Group, IUniform, MaterialParameters, Matrix3, Matrix4, Object3D, Scene, ShaderMaterial, Texture, Vector3, WebGLRenderer } from "three";
 import { debug } from "./utils.js";
-import { MaterialXEnvironment } from "./materialx.js";
-import { getLightData, getUniformValues, Loaders } from "./materialx.helper.js";
-import { Context } from "@needle-tools/engine";
+import { MaterialXContext, MaterialXEnvironment } from "./materialx.js";
+import { getUniformValues, Loaders } from "./materialx.helper.js";
 
 
 // Add helper matrices for uniform updates (similar to MaterialX example)
@@ -17,21 +16,20 @@ declare type MaterialXMaterialInitParameters = {
     loaders: Loaders,
     transparent?: boolean,
     side?: MaterialParameters['side'],
+    context: MaterialXContext,
 }
 
 type Uniforms = Record<string, IUniform & { needsUpdate?: boolean }>;
 
 export class MaterialXMaterial extends ShaderMaterial {
 
-    // copy(source: MaterialXMaterial): this {
-    //     super.copy(source);
-    //     this.name = source.name;
-    //     this.uniforms = { ...source.uniforms }; // Shallow copy of uniforms
-    //     this.envMapIntensity = source.envMapIntensity;
-    //     this.envMap = source.envMap;
-    //     this.updateUniforms = source.updateUniforms; // Copy the update function
-    //     return this;
-    // }
+    copy(source: MaterialXMaterial): this {
+        super.copy(source);
+        this._context = source._context;
+        return this;
+    }
+
+    private _context: MaterialXContext | null = null;
 
     constructor(init?: MaterialXMaterialInitParameters) {
 
@@ -133,6 +131,8 @@ 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;
+
         if (debug) {
             // Get lighting and environment data from MaterialX environment
             console.group("[MaterialX]: ", name);
@@ -140,13 +140,22 @@ export class MaterialXMaterial extends ShaderMaterial {
             console.log("Fragment shader length:", fragmentShader.length, fragmentShader);
             console.groupEnd();
         }
+    }
 
+    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);
+            }
+        }
     }
 
 
     envMapIntensity: number = 1.0; // Default intensity for environment map
     envMap: Texture | null = null; // Environment map texture, can be set externally
-    updateUniforms = (context: Context, environment: MaterialXEnvironment, object: Object3D, camera: Camera) => {
+    updateUniforms = (environment: MaterialXEnvironment, object: Object3D, camera: Camera) => {
 
         const uniforms = this.uniforms as Uniforms;
 
@@ -176,11 +185,13 @@ export class MaterialXMaterial extends ShaderMaterial {
         }
 
         // Update time uniforms
-        if (uniforms.u_time) {
-            uniforms.u_time.value = context.time.time;
-        }
-        if (uniforms.u_frame) {
-            uniforms.u_frame.value = context.time.frame;
+        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();
+            }
         }
 
         // Update light uniforms

package/src/materialx.ts

@@ -1,12 +1,18 @@
-import { Context, delay, isDevEnvironment, ObjectUtils, GameObject, onBeforeRender } from "@needle-tools/engine";
 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 { Light, Material, MeshBasicMaterial, Object3D, PMREMGenerator, Texture } from "three";
+import { Light, Object3D, 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,
+}
+
 
 export const state = new class {
     materialXModule: MX.MODULE | null = null;
@@ -14,16 +20,12 @@ export const state = new class {
     materialXGenContext: any = null;
     materialXStdLib: any = null;
     materialXInitPromise: Promise<void> | null = null;
-
-    // Global MaterialX environment instance
-    private _materialXEnvironment: MaterialXEnvironment | null = null;
-    get materialXEnvironment() {
-        this._materialXEnvironment ??= new MaterialXEnvironment();
-        return this._materialXEnvironment;
-    }
 }
 
-/** Initialize the MaterialX module. Must be awaited before trying to create materials */
+
+/** 
+ * Wait for the MaterialX WASM module to be ready.
+ */
 export async function ready(): Promise<void> {
     if (state.materialXInitPromise) {
         return state.materialXInitPromise;
@@ -111,93 +113,72 @@ type EnvironmentTextureSet = {
     irradianceTexture: Texture | null;
 }
 
-// MaterialX Environment Manager - handles lighting and environment setup
+
+
+type EnvironmentContext = Pick<MaterialXContext, "getRenderer" | "getScene">;
+/**
+ * MaterialXEnvironment manages the environment settings for MaterialX materials.
+ */
 export class MaterialXEnvironment {
-    private _context: Context | null = null;
+
+    static get(context: EnvironmentContext): MaterialXEnvironment | null {
+        return this.getEnvironment(context);
+    }
+    private static _environments: WeakMap<EnvironmentContext, MaterialXEnvironment> = new Map();
+    private static getEnvironment(context: EnvironmentContext): MaterialXEnvironment {
+        if (this._environments.has(context)) {
+            return this._environments.get(context)!;
+        }
+        const env = new MaterialXEnvironment(context);
+        this._environments.set(context, env);
+        return env;
+    }
+
+
     private _lights: Array<Light> = [];
     private _lightData: null | LightData[] = null;
     private _lightCount: number = 0;
-    private _initializePromise: Promise<boolean> | null = null;
 
-    private _unsubscribehook: (() => void) | null = null;
+    private _initializePromise: Promise<boolean> | null = null;
+    private _isInitialized: boolean = false;
+    private _lastUpdateFrame: number = -1;
 
-    constructor() {
+    constructor(private _context: EnvironmentContext) {
         if (debug) console.log("[MaterialX] Environment created");
     }
 
     // Initialize with Needle Engine context
-    async initialize(context: Context): Promise<boolean> {
+    async initialize(): Promise<boolean> {
         if (this._initializePromise) {
             return this._initializePromise;
         }
-        return this._initializePromise = this._initialize(context);
+        this._initializePromise = this._initialize();
+        return this._initializePromise;
     }
 
-    get lightData() {
-        // if (this._lightData === null) {
-        //     if(debug) console.warn("[MaterialX] Light data is not initialized, updating lighting");
-        //     this.updateLighting(true);
-        // }
-        return this._lightData;
-    }
-    get lightCount() { return this._lightCount || 0; }
-    getTextures(material: MaterialXMaterial) {
-        if (material.envMap) {
-            // If the material has its own envMap, we don't use the irradiance texture
-            return this._getTextures(material.envMap);
+    update(frame: number, scene: Scene) {
+        if (!this._initializePromise) {
+            this.initialize();
+            return;
         }
-        return this._getTextures(this._context?.scene.environment);
-    }
-
-    private _pmremGenerator: PMREMGenerator | null = null;
-    private readonly _texturesCache: Map<Texture | null, EnvironmentTextureSet> = new Map();
-
-    private _initialize: (context: Context) => Promise<boolean> = async (context: Context) => {
-
-        this._context = context;
-        this._pmremGenerator = new PMREMGenerator(context.renderer);
-
-        this._unsubscribehook?.();
-        this._unsubscribehook = onBeforeRender(() => {
-            this.updateLighting(false);
-            this._getTextures(context.scene.environment);
-        })
-
-        // TODO remove this delay; we should wait for the scene lighting to be ready
-        // and then update the uniforms
-        while (!context.scene.environment) {
-            await delay(5);
+        if (!this._isInitialized) {
+            return;
         }
-        this._getTextures(context.scene.environment);
-
-        // if (debug) {
-        //     console.log({ radiance: this._radianceTexture, irradiance: this._irradianceTexture });
-        //     // Show both of them on cubes in the scene
-        //     const unlitMat = new MeshBasicMaterial();
-        //     unlitMat.side = 2;
-        //     const radianceMat = unlitMat.clone();
-        //     radianceMat.map = this._radianceTexture;
-        //     const radianceCube = ObjectUtils.createPrimitive("Quad", { material: radianceMat });
-        //     const irradianceMat = unlitMat.clone();
-        //     irradianceMat.map = this._irradianceTexture;
-        //     const irradianceCube = ObjectUtils.createPrimitive("Quad", { material: irradianceMat });
-        //     context.scene.add(radianceCube);
-        //     context.scene.add(irradianceCube);
-        //     radianceCube.position.set(2, 0, 0);
-        //     irradianceCube.position.set(-2, 0, 0);
-        //     console.log("[MaterialX] environment initialized from Needle context", this, this._context.scene);
-        // }
-
-        this.updateLighting(true);
-
-        // Mark as initialized
-        return true;
+        if (this._lastUpdateFrame === frame) {
+            // Already updated this frame
+            return;
+        }
+        this._lastUpdateFrame = frame;
+        this.updateLighting(false);
+        this._getTextures(scene.environment);
     }
 
     // Reset the environment to allow re-initialization
     reset() {
         if (debug) console.log("[MaterialX] Resetting environment");
         this._initializePromise = null;
+        this._isInitialized = false;
+        this._lastUpdateFrame = -1;
         this._lights = [];
         this._lightData = null;
         this._lightCount = 0;
@@ -208,16 +189,35 @@ export class MaterialXEnvironment {
             textureSet.irradianceTexture?.dispose();
         }
         this._texturesCache.clear();
+    }
+
+    get lightData() {
+        return this._lightData;
+    }
+    get lightCount() { return this._lightCount || 0; }
+    getTextures(material: MaterialXMaterial) {
+        if (material.envMap) {
+            // 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);
+    }
+
+    private _pmremGenerator: PMREMGenerator | null = null;
+    private readonly _texturesCache: Map<Texture | null, EnvironmentTextureSet> = new Map();
 
-        this._unsubscribehook?.();
-        this._unsubscribehook = null;
+    private async _initialize(): Promise<boolean> {
+        this._isInitialized = false;
+        this._pmremGenerator = new PMREMGenerator(this._context.getRenderer());
+        this.updateLighting(true);
+        this._isInitialized = true;
+        return true;
     }
 
     private _getTextures(texture: Texture | null | undefined): {
         radianceTexture: Texture | null,
         irradianceTexture: Texture | null
     } {
-
         let res: EnvironmentTextureSet | undefined = this._texturesCache.get(texture || null);
         if (res) {
             return res;
@@ -225,10 +225,9 @@ export class MaterialXEnvironment {
 
         if (this._context && this._pmremGenerator && texture) {
             if (debug) console.log("[MaterialX] Generating environment textures", texture.name);
-
             const target = this._pmremGenerator.fromEquirectangular(texture);
-            const radianceRenderTarget = renderPMREMToEquirect(this._context.renderer, target.texture, 0.0, 1024, 512, target.height);
-            const irradianceRenderTarget = renderPMREMToEquirect(this._context.renderer, target.texture, 1.0, 32, 16, target.height);
+            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);
             target.dispose();
             res = {
                 radianceTexture: radianceRenderTarget.texture,
@@ -247,12 +246,11 @@ export class MaterialXEnvironment {
 
     private updateLighting = (collectLights: boolean = false) => {
         if (!this._context) return;
-
         // Find lights in scene
         if (collectLights) {
             const lights = new Array<Light>();
-            this._context.scene.traverse((object: Object3D) => {
-                if ((object as Light).isLight && GameObject.isActiveInHierarchy(object))
+            this._context.getScene().traverse((object: Object3D) => {
+                if ((object as Light).isLight && object.visible)
                     lights.push(object as Light);
             });
             this._lights = lights;