@needle-tools/materialx 1.0.1-next.31390e3 → 1.0.1-next.64f3b67

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

@@ -5,8 +5,8 @@
 
 import { getParam, getWorldDirection } from '@needle-tools/engine';
 import * as THREE from 'three';
-
-const debug = getParam("debugmaterialx");
+import { debug, debugUpdate } from './utils';
+import { MaterialX } from './materialx.types';
 
 const IMAGE_PROPERTY_SEPARATOR = "_";
 const UADDRESS_MODE_SUFFIX = IMAGE_PROPERTY_SEPARATOR + "uaddressmode";
@@ -20,8 +20,7 @@ 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();
@@ -39,15 +38,12 @@ 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);
@@ -58,23 +54,16 @@ function fromVector(value, dimension)
 
 /**
  * Get Three uniform from MaterialX matrix
- * @param {mx.matrix} matrix
- * @param {mx.matrix.size} dimension
  */
-function fromMatrix(matrix, dimension)
-{
-    let vec = [];
-    if (matrix)
-    {
-        for (let i = 0; i < matrix.numRows(); ++i)
-        {
-            for (let k = 0; k < matrix.numColumns(); ++k)
-            {
+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) {
                 vec.push(matrix.getItem(i, k));
             }
         }
-    } else
-    {
+    } else {
         for (let i = 0; i < dimension; ++i)
             vec.push(0.0);
     }
@@ -82,125 +71,99 @@ function fromMatrix(matrix, dimension)
     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 {THREE.textureLoader} textureLoader
+ * @param {Loaders} loaders
  * @param {string} searchPath
  * @param {boolean} flipY
  */
-function toThreeUniform(type, value, name, uniforms, textureLoader, searchPath, flipY)
-{
-    let outValue = null;
-    switch (type)
-    {
+function toThreeUniform(type: string, value: any, name: string, uniforms: any, loaders: Loaders, searchPath, flipY: boolean) {
+
+    switch (type) {
         case 'float':
         case 'integer':
         case 'boolean':
-            outValue = value;
+            return value;
             break;
         case 'vector2':
-            outValue = fromVector(value, 2);
+            return fromVector(value, 2);
             break;
         case 'vector3':
         case 'color3':
-            outValue = fromVector(value, 3);
-            break;
+            return fromVector(value, 3);
         case 'vector4':
         case 'color4':
-            outValue = fromVector(value, 4);
-            break;
+            return fromVector(value, 4);
         case 'matrix33':
-            outValue = fromMatrix(value, 9);
-            break;
+            return fromMatrix(value, 9);
         case 'matrix44':
-            outValue = fromMatrix(value, 16);
-            break;
+            return fromMatrix(value, 16);
         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)
-                {
-                    // Get texture from cache
-                    outValue = cachedTexture;
-                    if (debug) console.log('Use cached texture: ', texturePath, outValue);
+                if (cachedTexture) {
+                    if (debug) console.log('Use cached texture: ', texturePath, cachedTexture);
+                    return cachedTexture;
                 }
-                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);
-                        });     
-
+                else {
+                    const texture = loaders.getTexture(texturePath);
+                    if (checkCache) THREE.Cache.add(texturePath, texture);
                     // Set address & filtering mode
-                    if (outValue)
-                        setTextureParameters(outValue, name, uniforms, flipY);
+                    if (texture) setTextureParameters(texture, name, uniforms, flipY);
+                    return texture;
                 }
             }
             break;
         case 'samplerCube':
         case 'string':
-            break;
+            return null;
         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);
             }
-            outValue = null;
+            return null;
     }
-
-    return outValue;
 }
 
-const valueTypeWarningMap = new Map();
+const valueTypeWarningMap = new Map<string, boolean>();
 
 /**
  * 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;
@@ -222,12 +185,9 @@ function getWrapping(mode)
  * @param {mx.TextureFilter.minFilter} type
  * @param {mx.TextureFilter.generateMipmaps} generateMipmaps
  */
-function getMinFilter(type, generateMipmaps)
-{
-    /** @type {THREE.TextureFilter} */
-    let filterType = generateMipmaps ? THREE.LinearMipMapLinearFilter : THREE.LinearFilter;
-    if (type === 0)
-    {
+function getMinFilter(type, generateMipmaps) {
+    let filterType: THREE.TextureFilter = generateMipmaps ? THREE.LinearMipMapLinearFilter : THREE.LinearFilter;
+    if (type === 0) {
         filterType = generateMipmaps ? THREE.NearestMipMapNearestFilter : THREE.NearestFilter;
     }
     return filterType;
@@ -240,25 +200,22 @@ 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);
     }
@@ -270,8 +227,7 @@ 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);
 }
 
@@ -280,36 +236,27 @@ export function getLightRotation()
  * @param {mx.Document} doc 
  * @returns {Array.<mx.Node>}
  */
-export function findLights(doc)
-{
-    let lights = [];
-    for (let node of doc.getNodes())
-    {
+export function findLights(doc: MaterialX.Document) {
+    let lights = new Array<any>;
+    for (let node of doc.getNodes()) {
         if (node.getType() === "lightshader")
             lights.push(node);
     }
     return lights;
 }
 
+let lightTypesBound = {};
+
 /**
  * Register lights in shader generation context
- * @param {Object} mx MaterialX Module
- * @param {Array.<mx.Node>} lights Light nodes
+ * @param {MaterialX.MODULE} mx MaterialX Module
  * @param {mx.GenContext} genContext Shader generation context
- * @returns {Array.<mx.Node>}
  */
-export async function registerLights(mx, lights, genContext)
-{
+export async function registerLights(mx: MaterialX.MODULE, genContext: any): Promise<void> {
+    lightTypesBound = {};
+    const maxLightCount = genContext.getOptions().hwMaxActiveLightSources;
     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">
@@ -327,7 +274,7 @@ export async function registerLights(mx, lights, genContext)
 
     // 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);
@@ -340,16 +287,14 @@ export async function registerLights(mx, lights, genContext)
 
     // 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;
@@ -358,52 +303,40 @@ export async function registerLights(mx, lights, genContext)
     }
 
     if (debug) console.log("Light types bound in MaterialX context", lightTypesBound);
+}
 
-    // 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,
-        });
+// 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
     }
+};
+
+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
+}
 
-    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);
+/**
+ * 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;
 
     // Three.js lights
     for (let light of lights) {
@@ -415,76 +348,82 @@ export async function registerLights(mx, lights, genContext)
         const lightDefinitionName = threeLightTypeToMaterialXNodeName(light.type);
 
         if (!lightTypesBound[lightDefinitionName])
-        {
-            lightTypesBound[lightDefinitionName] = lightId;
-            const nodeDef = null;
-            mx.HwShaderGenerator.bindLightShader(nodeDef, lightId++, genContext);
-        }
+            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 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);
+
         lightData.push({
             type: lightTypesBound[lightDefinitionName],
             position: wp.clone(),
             direction: wd.clone(),
-            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,
+            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,
         });
     }
 
     // Count the number of lights that are not empty
-    lightCount = lightData.length;
+    const lightCount = lightData.length;
 
     // If we don't have enough entries in lightData, fill with empty lights
-    if (lightData.length < maxLightCount)
-    {
+    while (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.Vector3(0, 0, 0),
-            intensity: 0,
-            decay_rate: 2,
-            inner_angle: 0,
-            outer_angle: 0,
+            color: new THREE.Color(0, 0, 0),
+            intensity: 0.0,
+            decay_rate: 2.0,
+            inner_angle: 0.0,
+            outer_angle: 0.0,
         };
-        while (lightData.length < maxLightCount) {
-            lightData.push(emptyLight);
-        }
+        lightData.push(emptyLight);
     }
 
-    if (debug) console.log("Registered lights in MaterialX context", lightTypesBound, lightData);
+    if (debugUpdate) 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, 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)
-            {
+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) {
                 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,
-                    textureLoader, searchPath, flipY));
+                    loaders, searchPath, flipY));
             }
         }
-    });
+    }
 
     return threeUniforms;
 }