@needle-tools/materialx 1.0.1-next.19d0723 → 1.0.1-next.2ca9014

package/README.md

@@ -1,9 +1,7 @@
 # Needle MaterialX
 
-Load and display MaterialX materials in Needle Engine
-
 ## Installation
-`npm i @needle-tools/materialx`  
+`npm i @needle-tools/materialx@stable`  
 
 ## How to use
 

package/codegen/register_types.ts

@@ -2,9 +2,5 @@
 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/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/materialx",
-  "version": "1.0.1-next.19d0723",
+  "version": "1.0.1-next.2ca9014",
   "type": "module",
   "main": "index.ts",
   "exports": {
@@ -8,11 +8,7 @@
       "import": "./index.ts",
       "require": "./index.js"
     },
-    "./package.json": "./package.json",
-    "./codegen/register_types.ts": {
-      "import": "./codegen/register_types.ts",
-      "require": "./codegen/register_types.js"
-    }
+    "./package.json": "./package.json"
   },
   "peerDependencies": {
     "@needle-tools/engine": "4.x",

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,27 +280,36 @@ 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);
     }
     return lights;
 }
 
-let lightTypesBound = {};
-
 /**
  * Register lights in shader generation context
- * @param {MaterialX.MODULE} mx MaterialX Module
+ * @param {Object} mx MaterialX Module
+ * @param {Array.<mx.Node>} lights Light nodes
  * @param {mx.GenContext} genContext Shader generation context
+ * @returns {Array.<mx.Node>}
  */
-export async function registerLights(mx: MaterialX.MODULE, genContext: any): Promise<void> {
-    lightTypesBound = {};
-    const maxLightCount = genContext.getOptions().hwMaxActiveLightSources;
+export async function registerLights(mx, lights, genContext)
+{
     mx.HwShaderGenerator.unbindLightShaders(genContext);
+    // TODO Remove, not sure why we need that – something resets the value inbetween calls to registerLights
+    genContext.getOptions().hwMaxActiveLightSources = 4;
+
+    const lightTypesBound = {};
+    const lightData = [];
     let lightId = 1;
+    let lightCount = 0;
+    const maxLightCount = genContext.getOptions().hwMaxActiveLightSources;
+
     // All light types so that we have NodeDefs for them
     const defaultLightRigXml = `<?xml version="1.0"?>
 <materialx version="1.39">
@@ -274,7 +327,7 @@ 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);
@@ -287,14 +340,16 @@ export async function registerLights(mx: MaterialX.MODULE, genContext: any): Pro
 
     // 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;
@@ -303,40 +358,52 @@ export async function registerLights(mx: MaterialX.MODULE, genContext: any): Pro
     }
 
     if (debug) console.log("Light types bound in MaterialX context", lightTypesBound);
-}
 
-// Converts Three.js light type to MaterialX node name
-function threeLightTypeToMaterialXNodeName(threeLightType) {
-    switch (threeLightType) {
-        case 'PointLight':
-            return 'ND_point_light';
-        case 'DirectionalLight':
-            return 'ND_directional_light';
-        case 'SpotLight':
-            return 'ND_spot_light';
-        default:
-            console.warn('MaterialX: Unsupported light type: ' + threeLightType);
-            return 'ND_point_light'; // Default to point light
+    // MaterialX light nodes
+    for (let light of lights)
+    {
+        // Skip if light does not have a node definition
+        if (!("getNodeDef" in light)) continue;
+
+        let nodeDef = light.getNodeDef();
+        let nodeName = nodeDef.getName();
+        if (!lightTypesBound[nodeName])
+        {
+            if (debug) console.log("bind light shader for node", { nodeName, lightId, nodeDef });
+            lightTypesBound[nodeName] = lightId;
+            mx.HwShaderGenerator.bindLightShader(nodeDef, lightId++, genContext);
+        }
+
+        const lightDirection = light.getValueElement("direction").getValue().getData().data();
+        const lightColor = light.getValueElement("color").getValue().getData().data();
+        const lightIntensity = light.getValueElement("intensity").getValue().getData();
+
+        let rotatedLightDirection = new THREE.Vector3(...lightDirection)
+        rotatedLightDirection.transformDirection(getLightRotation())
+
+        lightData.push({
+            type: lightTypesBound[nodeName],
+            direction: rotatedLightDirection,
+            color: new THREE.Vector3(...lightColor),
+            intensity: lightIntensity,
+        });
     }
-};
-
-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
- */
-export function getLightData(lights: any, genContext: any): { lightData: LightData[], lightCount: number } {
-    const lightData = new Array();
-    const maxLightCount = genContext.getOptions().hwMaxActiveLightSources;
+    const threeLightTypeToMaterialXNodeName = (threeLightType) => {
+        switch (threeLightType) {
+            case 'PointLight':
+                return 'ND_point_light';
+            case 'DirectionalLight':
+                return 'ND_directional_light';
+            case 'SpotLight':
+                return 'ND_spot_light';
+            default:
+                console.warn('MaterialX: Unsupported light type: ' + threeLightType);
+                return 'ND_point_light'; // Default to point light
+        }
+    };
+
+    if (debug) console.log("Registering lights in MaterialX context", lights, lightData);
 
     // Three.js lights
     for (let light of lights) {
@@ -348,82 +415,76 @@ export function getLightData(lights: any, genContext: any): { lightData: LightDa
         const lightDefinitionName = threeLightTypeToMaterialXNodeName(light.type);
 
         if (!lightTypesBound[lightDefinitionName])
-            console.error("MaterialX: Light type not registered in context. Make sure to register light types before using them.", lightDefinitionName);
+        {
+            lightTypesBound[lightDefinitionName] = lightId;
+            const nodeDef = null;
+            mx.HwShaderGenerator.bindLightShader(nodeDef, lightId++, genContext);
+        }
 
         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 outerAngleRad = light.angle;
-        const innerAngleRad = outerAngleRad * (1 - light.penumbra);
-        const inner_angle = Math.cos(innerAngleRad);
-        const outer_angle = Math.cos(outerAngleRad);
-
+        const wd = getWorldDirection(light, new THREE.Vector3(0,0,-1));
         lightData.push({
             type: lightTypesBound[lightDefinitionName],
             position: wp.clone(),
             direction: wd.clone(),
-            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),
-            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,
+            color: new THREE.Vector3().fromArray(light.color.toArray()),
+            intensity: light.intensity, // Scale intensity for spot lights
+            decay_rate: 2.0, // physically-based default decay rate
+            inner_angle: 1.0,
+            outer_angle: 2.0,
         });
     }
 
     // Count the number of lights that are not empty
-    const lightCount = lightData.length;
+    lightCount = lightData.length;
 
     // If we don't have enough entries in lightData, fill with empty lights
-    while (lightData.length < maxLightCount) {
+    if (lightData.length < maxLightCount)
+    {
         const emptyLight = {
             type: 0, // Default light type
             position: new THREE.Vector3(0, 0, 0),
             direction: new THREE.Vector3(0, 0, -1),
-            color: new THREE.Color(0, 0, 0),
-            intensity: 0.0,
-            decay_rate: 2.0,
-            inner_angle: 0.0,
-            outer_angle: 0.0,
+            color: new THREE.Vector3(0, 0, 0),
+            intensity: 0,
+            decay_rate: 2,
+            inner_angle: 0,
+            outer_angle: 0,
         };
-        lightData.push(emptyLight);
+        while (lightData.length < maxLightCount) {
+            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) {
-    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) {
+export function getUniformValues(shaderStage, textureLoader, searchPath, flipY)
+{
+    let threeUniforms = {};
+
+    const uniformBlocks = Object.values(shaderStage.getUniformBlocks());
+    uniformBlocks.forEach(uniforms =>
+    {
+        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() });
                 threeUniforms[name] = new THREE.Uniform(toThreeUniform(variable.getType().getName(), value, name, uniforms,
-                    loaders, searchPath, flipY));
+                    textureLoader, searchPath, flipY));
             }
         }
-    }
+    });
 
     return threeUniforms;
 }

package/src/index.ts

@@ -1,5 +1,5 @@
-import { ready, state } from "./materialx.js";
+import { initializeMaterialX, state } from "./materialx.js";
 
 const getMaterialXEnvironment = () => state.materialXEnvironment;
 
-export { ready, getMaterialXEnvironment };
+export { initializeMaterialX, getMaterialXEnvironment };