@needle-tools/materialx 1.0.6 → 1.1.0-next.bc1b608

package/index.ts

@@ -1,5 +1,2 @@
-import { registerNeedleLoader } from "./src/loader/loader.needle.js";
-
-registerNeedleLoader();
-
-export * from "./src/index.js";
+export * from "./src/index.js";
+export { addPluginForThree } from "./src/loader/loader.three.js";

package/needle.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/materialx",
-  "version": "1.0.6",
+  "version": "1.1.0-next.bc1b608",
   "type": "module",
   "main": "index.ts",
   "exports": {
@@ -12,6 +12,10 @@
     "./codegen/register_types.ts": {
       "import": "./codegen/register_types.ts",
       "require": "./codegen/register_types.js"
+    },
+    "./needle": {
+      "import": "./needle.ts",
+      "require": "./needle.js"
     }
   },
   "peerDependencies": {
@@ -38,4 +42,4 @@
     "mtlx",
     "rendering"
   ]
-}
+}

package/src/index.ts

@@ -1,4 +1,3 @@
 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,11 +1,11 @@
-
-
-import { Context, GLTF, addCustomExtensionPlugin, INeedleGLTFExtensionPlugin } from "@needle-tools/engine";
+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 { MaterialXLoader } from "./loader.three.js";
+import { addPluginForThree, MaterialXLoader } from "./loader.three.js";
 import { debug } from "../utils.js";
 
+
 export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
     readonly name = "MaterialXLoaderPlugin";
 
@@ -13,39 +13,29 @@ export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
 
     onImport = (loader: GLTFLoader, url: string, context: Context) => {
         if (debug) console.log("MaterialXLoaderPlugin: Registering MaterialX extension for", url);
-
-        // Register the MaterialX loader extension
-        // Environment initialization is now handled in the MaterialXLoader constructor
-        loader.register(p => {
-            this.loader = new MaterialXLoader(p, url, {
-                getTime: () => context.time.time,
-                getFrame: ()=> context.time.frame,
-                getScene: () => context.scene,
-                getRenderer: () => context.renderer,
-            });
-            return this.loader;
+        addPluginForThree(loader, {
+            getTime: () => context.time.time,
+            getFrame: () => context.time.frame,
+            getScene: () => context.scene,
+            getRenderer: () => context.renderer,
+        }, {
+            cacheKey: url
         });
     };
 
     onLoaded = (url: string, gltf: GLTF, _context: Context) => {
         if (debug) console.log("[MaterialX] MaterialXLoaderPlugin: glTF loaded", { url, scene: gltf.scene, materialX_root_data: this.loader?.materialX_root_data });
-
-        // If we don't have MaterialX data in the loaded glTF we don't need to do anything else here
-        if (!this.loader?.materialX_root_data) {
-            return;
-        }
-
-        if (debug) console.log("[MaterialX] Loaded: ", this.loader);
-
-
     };
 
     onExport = (_exporter: GLTFExporter, _context: Context) => {
         console.warn("[MaterialX] Export is not supported");
-        // TODO: Add MaterialX export functionality if needed
     };
 }
 
-export function registerNeedleLoader() {
+
+/**
+ * Add the MaterialXLoaderPlugin to the Needle Engine.
+ */
+export async function addPluginForNeedleEngine() {
     addCustomExtensionPlugin(new MaterialXLoaderPlugin());
-}
+}

package/src/loader/loader.three.ts

@@ -1,5 +1,5 @@
 import { Material, MeshStandardMaterial, DoubleSide, FrontSide } from "three";
-import { GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader.js";
+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";
@@ -48,10 +48,10 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
     /**
      * MaterialXLoader constructor
      * @param parser The GLTFParser instance
-     * @param url The URL of the GLTF file
+     * @param cacheKey The URL of the GLTF file
      * @param context The context for the GLTF loading process
      */
-    constructor(private parser: GLTFParser, private url: string, private context: MaterialXContext) {
+    constructor(private parser: GLTFParser, private cacheKey: 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) {
@@ -59,6 +59,7 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
         }
     }
 
+
     loadMaterial(materialIndex: number): Promise<Material> | null {
         const materialDef = this.parser.json.materials?.[materialIndex];
         if (!materialDef?.extensions?.[this.name]) {
@@ -233,7 +234,7 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
                 side: material_def.doubleSided ? DoubleSide : FrontSide,
                 context: this.context,
                 loaders: {
-                    cacheKey: this.url,
+                    cacheKey: this.cacheKey,
                     getTexture: async url => {
                         // Find the index of the texture in the parser
                         const filenameWithoutExt = url.split('/').pop()?.split('.').shift() || '';
@@ -292,3 +293,14 @@ export class MaterialXLoader implements GLTFLoaderPlugin {
         }
     }
 }
+
+
+/**
+ * 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;
+    });
+}

package/src/materialx.helper.ts

@@ -2,11 +2,9 @@
 // Copyright Contributors to the MaterialX Project
 // SPDX-License-Identifier: Apache-2.0
 //
-
-import { getWorldDirection } from '@needle-tools/engine';
 import * as THREE from 'three';
-import { debug, debugUpdate } from './utils';
-import { MaterialX } from './materialx.types';
+import { debug, debugUpdate } from './utils.js';
+import { MaterialX } from './materialx.types.js';
 
 const IMAGE_PROPERTY_SEPARATOR = "_";
 const UADDRESS_MODE_SUFFIX = IMAGE_PROPERTY_SEPARATOR + "uaddressmode";
@@ -384,14 +382,14 @@ export type LightData = {
 /**
  * Update light data for shader uniforms
  */
-export function getLightData(lights: any, genContext: any): { lightData: LightData[], lightCount: number } {
+export function getLightData(lights: Array<THREE.Light>, genContext: any): { lightData: LightData[], lightCount: number } {
     const lightData = new Array();
     const maxLightCount = genContext.getOptions().hwMaxActiveLightSources;
 
     // Three.js lights
     for (let light of lights) {
         // Skip if light is not a Three.js light
-        if (!light.isLight) continue;
+        if (!light?.isLight) continue;
 
         // Types in MaterialX: point_light, directional_light, spot_light
 
@@ -401,7 +399,8 @@ export function getLightData(lights: any, genContext: any): { lightData: LightDa
             console.error("MaterialX: Light type not registered in context. Make sure to register light types before using them.", lightDefinitionName);
 
         const wp = light.getWorldPosition(new THREE.Vector3());
-        const wd = getWorldDirection(light, new THREE.Vector3(0, 0, -1));
+        const wq = light.getWorldQuaternion(new THREE.Quaternion());
+        const wd = new THREE.Vector3(0, 0, -1).applyQuaternion(wq);
 
         // Shader math from the generated MaterialX shader:
         // float low = min(light.inner_angle, light.outer_angle);
@@ -409,8 +408,8 @@ export function getLightData(lights: any, genContext: any): { lightData: LightDa
         // float cosDir = dot(result.direction, -light.direction);
         // float spotAttenuation = smoothstep(low, high, cosDir);
 
-        const outerAngleRad = light.angle;
-        const innerAngleRad = outerAngleRad * (1 - light.penumbra);
+        const outerAngleRad = (light as THREE.SpotLight).angle;
+        const innerAngleRad = outerAngleRad * (1 - (light as THREE.SpotLight).penumbra);
         const inner_angle = Math.cos(innerAngleRad);
         const outer_angle = Math.cos(outerAngleRad);
 
@@ -421,7 +420,7 @@ export function getLightData(lights: any, genContext: any): { lightData: LightDa
             color: new THREE.Color().fromArray(light.color.toArray()),
             // Luminous efficacy for converting radiant power in watts (W) to luminous flux in lumens (lm) at a wavelength of 555 nm.
             // Also, three.js lights don't have PI scale baked in, but MaterialX does, so we need to divide by PI for point and spot lights.
-            intensity: light.intensity * (light.isPointLight ? 683.0 / 3.1415 : light.isSpotLight ? 683.0 / 3.1415 : 1.0),
+            intensity: light.intensity * ((light as THREE.PointLight).isPointLight ? 683.0 / 3.1415 : (light as THREE.SpotLight).isSpotLight ? 683.0 / 3.1415 : 1.0),
             decay_rate: 2.0,
             // Approximations for testing – the relevant light has 61.57986...129.4445 as inner/outer spot angle
             inner_angle: inner_angle,

package/src/materialx.material.ts

@@ -160,8 +160,7 @@ export class MaterialXMaterial extends ShaderMaterial {
 
         this._context = init.context;
 
-        // if (debug) 
-        {
+        if (debug) {
             // Get lighting and environment data from MaterialX environment
             console.group("[MaterialX]: ", this.name);
             console.log(`Vertex shader length: ${vertexShader.length}\n`, vertexShader);

package/src/textureHelper.ts

@@ -1,5 +1,5 @@
 import { WebGLRenderer, Scene, WebGLRenderTarget, PlaneGeometry, OrthographicCamera, ShaderMaterial, RGBAFormat, FloatType, LinearFilter, Mesh, EquirectangularReflectionMapping, RepeatWrapping, LinearMipMapLinearFilter, Texture, WebGLUtils } from 'three';
-import { getParam } from '@needle-tools/engine';
+import { getParam } from './utils.js';
 
 const debug = getParam("debugmaterialx");
 

package/src/utils.ts

@@ -1,5 +1,10 @@
-import { Context, getParam } from "@needle-tools/engine";
-import { Mesh } from "three";
+export function getParam(name: string) {
+    const urlParams = new URLSearchParams(window.location.search);
+    const param = urlParams.get(name);
+    if (param == null || param === "0" || param === "false") return false;
+    if (param === "") return true;
+    return param;
+}
 
 export const debug = getParam("debugmaterialx");
 export const debugUpdate = debug === "update";
@@ -12,83 +17,63 @@ export const debugUpdate = debug === "update";
 
 // 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 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 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 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 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);
-    };
+//     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);
+//     };
 
-    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 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();
 
-
-// TODO doesn't actually reset yet...
-function resetShaders(ctx: Context) {
-    const scene = ctx.scene;
-    const gl = ctx.renderer;
-    console.log(gl.properties, gl.info)
-    scene.traverse(object => {
-        if ((object as Mesh).isMesh) {
-            const mesh = object as Mesh;
-            if (Array.isArray(mesh.material)) {
-                mesh.material.forEach(mat => gl.properties.remove(mat));
-            }
-            else {
-                gl.properties.remove(mesh.material);
-            }
-        }
-    })
-    if (gl.info?.programs)
-        gl.info.programs.length = 0;
-}