@needle-tools/materialx 1.0.1-next.b9467c8 → 1.0.1-next.c1bbe8d

package/codegen/register_types.ts

@@ -2,9 +2,7 @@
 import { TypeStore } from "@needle-tools/engine"
 
 // Import types
-import { MaterialXMaterial } from "../src/materialx.material.js";
 import { MaterialXUniformUpdate } from "../src/loader/loader.needle.js";
 
 // Register types
-TypeStore.add("MaterialXMaterial", MaterialXMaterial);
 TypeStore.add("MaterialXUniformUpdate", MaterialXUniformUpdate);

package/package.json

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

package/src/{materialx.helper.ts → helper.js}

@@ -5,8 +5,8 @@
 
 import { getParam, getWorldDirection } from '@needle-tools/engine';
 import * as THREE from 'three';
-import { debug, debugUpdate } from './utils';
-import { MaterialX } from './materialx.types';
+
+const debug = getParam("debugmaterialx");
 
 const IMAGE_PROPERTY_SEPARATOR = "_";
 const UADDRESS_MODE_SUFFIX = IMAGE_PROPERTY_SEPARATOR + "uaddressmode";
@@ -20,7 +20,8 @@ const IMAGE_PATH_SEPARATOR = "/";
  * @param {Object} capabilities
  * @returns {THREE.Texture}
  */
-export function prepareEnvTexture(texture, capabilities) {
+export function prepareEnvTexture(texture, capabilities)
+{
     let newTexture = new THREE.DataTexture(texture.image.data, texture.image.width, texture.image.height, texture.format, texture.type);
     newTexture.wrapS = THREE.RepeatWrapping;
     newTexture.anisotropy = capabilities.getMaxAnisotropy();
@@ -38,12 +39,15 @@ export function prepareEnvTexture(texture, capabilities) {
  * @param {any} dimension
  * @returns {THREE.Uniform}
  */
-function fromVector(value, dimension) {
+function fromVector(value, dimension)
+{
     let outValue;
-    if (value) {
+    if (value)
+    {
         outValue = [...value.data()];
     }
-    else {
+    else
+    {
         outValue = [];
         for (let i = 0; i < dimension; ++i)
             outValue.push(0.0);
@@ -54,16 +58,23 @@ function fromVector(value, dimension) {
 
 /**
  * Get Three uniform from MaterialX matrix
+ * @param {mx.matrix} matrix
+ * @param {mx.matrix.size} dimension
  */
-function fromMatrix(matrix: MaterialX.Matrix, dimension: MaterialX.Matrix["size"]) {
-    const vec = new Array(dimension);
-    if (matrix) {
-        for (let i = 0; i < matrix.numRows(); ++i) {
-            for (let k = 0; k < matrix.numColumns(); ++k) {
+function fromMatrix(matrix, dimension)
+{
+    let vec = [];
+    if (matrix)
+    {
+        for (let i = 0; i < matrix.numRows(); ++i)
+        {
+            for (let k = 0; k < matrix.numColumns(); ++k)
+            {
                 vec.push(matrix.getItem(i, k));
             }
         }
-    } else {
+    } else
+    {
         for (let i = 0; i < dimension; ++i)
             vec.push(0.0);
     }
@@ -71,99 +82,125 @@ function fromMatrix(matrix: MaterialX.Matrix, dimension: MaterialX.Matrix["size"
     return vec;
 }
 
-
-export type Loaders = {
-    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 {THREE.TextureLoader} textureLoader
  * @param {string} searchPath
  * @param {boolean} flipY
  */
-function toThreeUniform(type: string, value: any, name: string, uniforms: any, loaders: Loaders, searchPath, flipY: boolean) {
-
-    switch (type) {
+function toThreeUniform(type, value, name, uniforms, textureLoader, searchPath, flipY)
+{
+    let outValue = null;
+    switch (type)
+    {
         case 'float':
         case 'integer':
         case 'boolean':
-            return value;
+            outValue = value;
             break;
         case 'vector2':
-            return fromVector(value, 2);
+            outValue = fromVector(value, 2);
             break;
         case 'vector3':
         case 'color3':
-            return fromVector(value, 3);
+            outValue = fromVector(value, 3);
+            break;
         case 'vector4':
         case 'color4':
-            return fromVector(value, 4);
+            outValue = fromVector(value, 4);
+            break;
         case 'matrix33':
-            return fromMatrix(value, 9);
+            outValue = fromMatrix(value, 9);
+            break;
         case 'matrix44':
-            return fromMatrix(value, 16);
+            outValue = fromMatrix(value, 16);
+            break;
         case 'filename':
-            if (value) {
+            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 texturePath = searchPath + IMAGE_PATH_SEPARATOR + value;
-                if (value.startsWith('blob:')) {
+                if (value.startsWith('blob:'))   
+                {
                     texturePath = value;
                     if (debug) console.log('Load blob URL:', texturePath);
                     checkCache = false;
                 }
-                else if (value.startsWith('http')) {
+                else if (value.startsWith('http'))
+                {
                     texturePath = value;
                     if (debug) console.log('Load HTTP URL:', texturePath);
                 }
-                else if (value.startsWith('data:')) {
+                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;
+                if (cachedTexture)
+                {
+                    // Get texture from cache
+                    outValue = cachedTexture;
+                    if (debug) console.log('Use cached texture: ', texturePath, outValue);
                 }
-                else {
-                    const texture = loaders.getTexture(texturePath);
-                    if (checkCache) THREE.Cache.add(texturePath, texture);
+                else
+                {
+                    outValue = textureLoader.load(
+                        texturePath, 
+                        function (texture) {
+                            if (debug) console.log('Load new texture: ' + texturePath, texture);
+                            outValue = texture;
+
+                            // Add texture to ThreeJS cache
+                            if (checkCache)
+                                THREE.Cache.add(texturePath, texture);
+                        },
+                        undefined,
+                        function (error) {
+                            console.error('Error loading texture: ', error);
+                        });     
+
                     // Set address & filtering mode
-                    if (texture) setTextureParameters(texture, name, uniforms, flipY);
-                    return texture;
+                    if (outValue)
+                        setTextureParameters(outValue, name, uniforms, flipY);
                 }
             }
             break;
         case 'samplerCube':
         case 'string':
-            return null;
+            break;
         default:
             const key = type + ':' + name;
-            if (!valueTypeWarningMap.has(key)) {
+            if (!valueTypeWarningMap.has(key))
+            {
                 valueTypeWarningMap.set(key, true);
                 console.warn('MaterialX: Unsupported uniform type: ' + type + ' for uniform: ' + name, value);
             }
-            return null;
+            outValue = null;
     }
+
+    return outValue;
 }
 
-const valueTypeWarningMap = new Map<string, boolean>();
+const valueTypeWarningMap = new Map();
 
 /**
  * Get Three wrapping mode
  * @param {mx.TextureFilter.wrap} mode
  * @returns {THREE.Wrapping}
  */
-function getWrapping(mode) {
+function getWrapping(mode)
+{
     let wrap;
-    switch (mode) {
+    switch (mode)
+    {
         case 1:
             wrap = THREE.ClampToEdgeWrapping;
             break;
@@ -185,9 +222,12 @@ function getWrapping(mode) {
  * @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) {
+function getMinFilter(type, generateMipmaps)
+{
+    /** @type {THREE.TextureFilter} */
+    let filterType = generateMipmaps ? THREE.LinearMipMapLinearFilter : THREE.LinearFilter;
+    if (type === 0)
+    {
         filterType = generateMipmaps ? THREE.NearestMipMapNearestFilter : THREE.NearestFilter;
     }
     return filterType;
@@ -200,22 +240,25 @@ function getMinFilter(type, generateMipmaps) {
  * @param {mx.Uniforms} uniforms
  * @param {mx.TextureFilter.generateMipmaps} generateMipmaps
  */
-function setTextureParameters(texture, name, uniforms, flipY = true, 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;
+    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)) {
+    if (uniforms.find(base + UADDRESS_MODE_SUFFIX))
+    {
         const uaddressmode = uniforms.find(base + UADDRESS_MODE_SUFFIX).getValue().getData();
         texture.wrapS = getWrapping(uaddressmode);
     }
 
-    if (uniforms.find(base + VADDRESS_MODE_SUFFIX)) {
+    if (uniforms.find(base + VADDRESS_MODE_SUFFIX))
+    {
         const vaddressmode = uniforms.find(base + VADDRESS_MODE_SUFFIX).getValue().getData();
         texture.wrapT = getWrapping(vaddressmode);
     }
@@ -227,7 +270,8 @@ function setTextureParameters(texture, name, uniforms, flipY = true, generateMip
 /**
  * Return the global light rotation matrix
  */
-export function getLightRotation() {
+export function getLightRotation()
+{
     return new THREE.Matrix4().makeRotationY(Math.PI / 2);
 }
 
@@ -236,9 +280,11 @@ export function getLightRotation() {
  * @param {mx.Document} doc 
  * @returns {Array.<mx.Node>}
  */
-export function findLights(doc: MaterialX.Document) {
-    let lights = new Array<any>;
-    for (let node of doc.getNodes()) {
+export function findLights(doc)
+{
+    let lights = [];
+    for (let node of doc.getNodes())
+    {
         if (node.getType() === "lightshader")
             lights.push(node);
     }
@@ -249,14 +295,19 @@ let lightTypesBound = {};
 
 /**
  * Register lights in shader generation context
- * @param {MaterialX.MODULE} mx MaterialX Module
+ * @param {Object} mx MaterialX Module
  * @param {mx.GenContext} genContext Shader generation context
+ * @returns {Array.<mx.Node>}
  */
-export async function registerLights(mx: MaterialX.MODULE, genContext: any): Promise<void> {
+export async function registerLights(mx, genContext)
+{
     lightTypesBound = {};
     const maxLightCount = genContext.getOptions().hwMaxActiveLightSources;
+
     mx.HwShaderGenerator.unbindLightShaders(genContext);
+
     let lightId = 1;
+
     // All light types so that we have NodeDefs for them
     const defaultLightRigXml = `<?xml version="1.0"?>
 <materialx version="1.39">
@@ -274,27 +325,30 @@ export async function registerLights(mx: MaterialX.MODULE, genContext: any): Pro
 
     // Load default light rig XML to ensure we have all light types available
     const lightRigDoc = mx.createDocument();
-    await mx.readFromXmlString(lightRigDoc, defaultLightRigXml, "");
+    await mx.readFromXmlString(lightRigDoc, defaultLightRigXml);
     const document = mx.createDocument();
     const stdlib = mx.loadStandardLibraries(genContext);
     document.setDataLibrary(stdlib);
     document.importLibrary(lightRigDoc);
     const defaultLights = findLights(document);
-    if (debug) console.log("Default lights in MaterialX document", defaultLights);
+    // if (debug) 
+        console.log("Default lights in MaterialX document", defaultLights);
 
     // Loading a document seems to reset this option for some reason, so we set it again
     genContext.getOptions().hwMaxActiveLightSources = maxLightCount;
 
     // Register types only – we get these from the default light rig XML above
     // This is needed to ensure that the light shaders are bound for each light type
-    for (let light of defaultLights) {
+    for (let light of defaultLights)
+    {
         const lightDef = light.getNodeDef();
         if (debug) console.log("Default light node definition", lightDef);
         if (!lightDef) continue;
 
         const lightName = lightDef.getName();
         if (debug) console.log("Registering default light", { lightName, lightDef });
-        if (!lightTypesBound[lightName]) {
+        if (!lightTypesBound[lightName])
+        {
             // TODO check if we need to bind light shader for each three.js light instead of once per type
             if (debug) console.log("Bind light shader for node", { lightName, lightId, lightDef });
             lightTypesBound[lightName] = lightId;
@@ -320,22 +374,16 @@ function threeLightTypeToMaterialXNodeName(threeLightType) {
     }
 };
 
-type LightData = {
-    type: number, // Light type ID
-    position: THREE.Vector3, // Position in world space
-    direction: THREE.Vector3, // Direction in world space
-    color: THREE.Color, // Color of the light
-    intensity: number, // Intensity of the light
-    decay_rate: number, // Decay rate for point and spot lights
-    inner_angle: number, // Inner angle for spot lights
-    outer_angle: number, // Outer angle for spot lights
-}
-
 /**
  * Update light data for shader uniforms
+ * @param {Object} mx MaterialX Module
+ * @param {Array.<mx.Node>} lights Light nodes
+ * @param {mx.GenContext} genContext Shader generation context
+ * @returns {{ lightData: Array<any>, lightCount: number }}
  */
-export function getLightData(lights: any, genContext: any): { lightData: LightData[], lightCount: number } {
-    const lightData = new Array();
+export function getLightData(mx, lights, genContext)
+{
+    const lightData = [];
     const maxLightCount = genContext.getOptions().hwMaxActiveLightSources;
 
     // Three.js lights
@@ -351,18 +399,9 @@ 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));
-
-        // Shader math from the generated MaterialX shader:
-        // float low = min(light.inner_angle, light.outer_angle);
-        // float high = light.inner_angle;
-        // float cosDir = dot(result.direction, -light.direction);
-        // float spotAttenuation = smoothstep(low, high, cosDir);
+        const wd = getWorldDirection(light, new THREE.Vector3(0,0,-1));
 
-        const outerAngleRad = light.angle;
-        const innerAngleRad = outerAngleRad * (1 - light.penumbra);
-        const inner_angle = Math.cos(innerAngleRad);
-        const outer_angle = Math.cos(outerAngleRad);
+        // console.log("Registering light", light.penumbra);
 
         lightData.push({
             type: lightTypesBound[lightDefinitionName],
@@ -371,11 +410,11 @@ 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.isPointLight ? 683.0 / 3.1415 : light.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,
-            outer_angle: outer_angle,
+            inner_angle: 0.9,
+            outer_angle: 0.4,
         });
     }
 
@@ -383,7 +422,8 @@ export function getLightData(lights: any, genContext: any): { lightData: LightDa
     const lightCount = lightData.length;
 
     // If we don't have enough entries in lightData, fill with empty lights
-    while (lightData.length < maxLightCount) {
+    while (lightData.length < maxLightCount) 
+    {
         const emptyLight = {
             type: 0, // Default light type
             position: new THREE.Vector3(0, 0, 0),
@@ -397,33 +437,38 @@ export function getLightData(lights: any, genContext: any): { lightData: LightDa
         lightData.push(emptyLight);
     }
 
-    if (debugUpdate) console.log("Registered lights in MaterialX context", lightTypesBound, lightData);
+    if (debug) 
+        console.log("Registered lights in MaterialX context", lightTypesBound, lightData);
 
     return { lightData, lightCount };
 }
 
 /**
  * Get uniform values for a shader
+ * @param {mx.shaderStage} shaderStage
+ * @param {THREE.TextureLoader} textureLoader
  */
-export function getUniformValues(shaderStage: MaterialX.ShaderStage, loaders: Loaders, searchPath: string, flipY: boolean) {
+export function getUniformValues(shaderStage, textureLoader, searchPath, flipY)
+{
     const threeUniforms = {};
 
-    const uniformBlocks = shaderStage.getUniformBlocks()
-    for (const [blockName, uniforms] of Object.entries(uniformBlocks)) {
-        // Seems struct uniforms (like in LightData) end up here as well, we should filter those out.
-        if (blockName === "LightData") continue;
-
-        if (!uniforms.empty()) {
-            for (let i = 0; i < uniforms.size(); ++i) {
+    const uniformBlocks = Object.values(shaderStage.getUniformBlocks());
+    uniformBlocks.forEach(uniforms =>
+    {
+        // TODO Seems struct uniforms (like in LightData) end up here as well, we should filter those out.
+        if (!uniforms.empty())
+        {
+            for (let i = 0; i < uniforms.size(); ++i)
+            {
                 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() });
+                if (debug) console.log("Adding uniform", { name, value, type: variable.getType().getName() });
                 threeUniforms[name] = new THREE.Uniform(toThreeUniform(variable.getType().getName(), value, name, uniforms,
-                    loaders, searchPath, flipY));
+                    textureLoader, searchPath, flipY));
             }
         }
-    }
+    });
 
     return threeUniforms;
 }

package/src/loader/loader.needle.ts

@@ -6,39 +6,40 @@ 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";
+import { state } from "../materialx.js";
 
 //@dont-generate-component
 export class MaterialXUniformUpdate extends Component {
 
+    static updateMaterial(mat: Material | Material[], object: Object3D, camera: Camera) {
+        if (Array.isArray(mat)) {
+            mat.forEach(m => {
+                if (m.userData?.updateUniforms) {
+                    m.userData.updateUniforms(object, camera);
+                }
+            });
+        } else if (mat.userData?.updateUniforms) {
+            mat.userData.updateUniforms(object, camera);
+        }
+    }
+
     onEnable(): void {
-        this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
+        this.context.addBeforeRenderListener(this.gameObject, this._onBeforeRender);
     }
 
     onDisable(): void {
-        this.context.removeBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
+        this.context.removeBeforeRenderListener(this.gameObject, this._onBeforeRender);
     }
 
-    onBeforeRenderThree = () => {
+    _onBeforeRender = () => {
         // 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);
-        }
+        
+        MaterialXUniformUpdate.updateMaterial(material, gameObject, camera);
     }
 }
 
@@ -58,13 +59,9 @@ export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
         });
     };
 
-    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 });
+    onLoaded = (url: string, gltf: GLTF, context: Context) => {
+        if (debug) console.log("[MaterialX] MaterialXLoaderPlugin: glTF loaded", url, gltf.scene);
 
-        // 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;
-        }
         // Set up onBeforeRender callbacks for objects with MaterialX materials
         // This ensures uniforms are updated properly during rendering
         gltf.scene.traverse((child) => {
@@ -72,7 +69,7 @@ export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
                 const mesh = child as Mesh;
                 const material = mesh.material as Material;
 
-                if (material instanceof MaterialXMaterial) {
+                if (material?.userData?.updateUniforms) {
                     if (debug) console.log("[MaterialX] Adding MaterialX uniform update component to:", child.name);
                     child.addComponent(MaterialXUniformUpdate);
                 }
@@ -80,6 +77,13 @@ export class MaterialXLoaderPlugin implements INeedleGLTFExtensionPlugin {
         });
 
         if (debug) console.log("[MaterialX] Loaded: ", this.loader);
+
+        // Initialize MaterialX lighting system with scene data
+        const environment = state.materialXEnvironment;
+        environment.initializeFromContext(context).then(() => {
+            console.warn("[MaterialX] Environment initialized...");
+            this.loader?.updateLightingFromEnvironment(environment);
+        });
     };
 
     onExport = (_exporter: GLTFExporter, _context: Context) => {