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

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,94 +71,140 @@ function fromMatrix(matrix, dimension)
     return vec;
 }
 
+
+export type Loaders = {
+    /**
+     * Cache key for the loaders, used to identify and reuse textures
+     */
+    readonly cacheKey: string;
+    /**
+     * Get a texture by path
+     * @param {string} path - The path to the texture
+     * @return {Promise<THREE.Texture>} - A promise that resolves to the texture
+     */
+    readonly getTexture: (path: string) => Promise<THREE.Texture>;
+}
+
+const defaultTexture = new THREE.Texture();
+defaultTexture.needsUpdate = true;
+defaultTexture.image = new Image();
+defaultTexture.image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAANQTFRFr6+vGqg52AAAAAxJREFUeJxjZGBEgQAAWAAJLpjsTQAAAABJRU5ErkJggg=="
+// defaultTexture.image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAB5QTFRFAAAABAQEw8PD////v7+/vb29Xl5eQEBA+/v7PDw8GPBYkgAAAB1JREFUeJxjZGBgYFQSABIUMlxgDGMGBtaIAnIZAKwQCSDYUEZEAAAAAElFTkSuQmCC";
+// defaultTexture.wrapS = THREE.RepeatWrapping;
+// defaultTexture.wrapT = THREE.RepeatWrapping;
+// defaultTexture.minFilter = THREE.NearestFilter;
+// defaultTexture.magFilter = THREE.NearestFilter;
+// defaultTexture.repeat = new THREE.Vector2(100, 100);
+
+
+const defaultNormalTexture = new THREE.Texture();
+defaultNormalTexture.needsUpdate = true;
+defaultNormalTexture.image = new Image();
+defaultNormalTexture.image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIBAMAAAA2IaO4AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABJQTFRFgYH4gIH4gYH3gIH3gIH5gID4m94ORAAAADFJREFUeJxjZBBkfMdo9P/BB0aBj/8FGB0ufghgFGT4r8wo+P8rD2Pgo3sMjIz8jAwAMLoN0ZjS5hgAAAAASUVORK5CYII=";
+
+
+function tryGetFromCache(key: string): any {
+    const wasEnabled = THREE.Cache.enabled;
+    THREE.Cache.enabled = true;
+    const value = THREE.Cache.get(key);
+    THREE.Cache.enabled = wasEnabled;
+    return value;
+}
+function addToCache(key: string, value: any): void {
+    const wasEnabled = THREE.Cache.enabled;
+    THREE.Cache.enabled = true;
+    THREE.Cache.add(key, value);
+    THREE.Cache.enabled = wasEnabled;
+    if (debug) console.log('[MaterialX] Added to cache:', key, value);
+}
+
 /**
  * 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 {string} searchPath
- * @param {boolean} flipY
  */
-function toThreeUniform(type, value, name, uniforms, textureLoader, searchPath, flipY)
-{
-    let outValue = null;
-    switch (type)
-    {
+function toThreeUniform(uniforms: any, type: string, value: any, name: string, loaders: Loaders, searchPath: string): THREE.Uniform {
+
+    const uniform = new THREE.Uniform<any>(null);
+
+    switch (type) {
         case 'float':
         case 'integer':
         case 'boolean':
-            outValue = value;
+            uniform.value = value;
             break;
         case 'vector2':
-            outValue = fromVector(value, 2);
+            uniform.value = fromVector(value, 2);
             break;
         case 'vector3':
         case 'color3':
-            outValue = fromVector(value, 3);
+            uniform.value = fromVector(value, 3);
             break;
         case 'vector4':
         case 'color4':
-            outValue = fromVector(value, 4);
+            uniform.value = fromVector(value, 4);
             break;
         case 'matrix33':
-            outValue = fromMatrix(value, 9);
+            uniform.value = fromMatrix(value, 9);
             break;
         case 'matrix44':
-            outValue = fromMatrix(value, 16);
+            uniform.value = 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 checkCache = true;
                 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('data:')) {
                     texturePath = value;
-                    if (debug) console.log('Load HTTP URL:', texturePath);
+                    checkCache = false;
                 }
-                else if (value.startsWith('data:'))
-                {
+                else if (value.startsWith('http')) {
                     texturePath = value;
-                    checkCache = false;
-                    if (debug) console.log('Load data URL:', texturePath);
+                    checkCache = true;
                 }
-                const cachedTexture = checkCache && THREE.Cache.get(texturePath);
-                if (cachedTexture)
-                {
-                    // Get texture from cache
-                    outValue = cachedTexture;
-                    if (debug) console.log('Use cached texture: ', texturePath, outValue);
+
+                const cacheKey = `${loaders.cacheKey}-${texturePath}`;
+                const cacheValue = checkCache ? tryGetFromCache(cacheKey) : null;
+                if (cacheValue) {
+                    if (debug) console.log('[MaterialX] Use cached texture: ', cacheKey, cacheValue);
+                    if (cacheValue instanceof Promise) {
+                        cacheValue.then(res => {
+                            if (res) uniform.value = res;
+                            else console.warn(`[MaterialX] Failed to load texture ${name} '${texturePath}'`);
+                        });
+                    }
+                    else {
+                        uniform.value = cacheValue;
+                    }
                 }
-                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 (outValue)
-                        setTextureParameters(outValue, name, uniforms, flipY);
+                else {
+                    if (name.toLowerCase().includes("normal")) {
+                        uniform.value = defaultNormalTexture;
+                    }
+                    else {
+                        uniform.value = defaultTexture;
+                    }
+
+                    if (debug) console.log('[MaterialX] Load texture:', texturePath);
+                    // Save the loading promise in the cache
+                    const promise = loaders.getTexture(texturePath).then(res => {
+                        if (res) {
+                            res.colorSpace = THREE.LinearSRGBColorSpace;
+                            setTextureParameters(res, name, uniforms);
+                        }
+                        return res;
+                    });
+                    if (checkCache) {
+                        addToCache(cacheKey, promise);
+                    }
+                    promise.then(res => {
+                        if (res) uniform.value = res;
+                        else console.warn(`[MaterialX] Failed to load texture ${name} '${texturePath}'`);
+                    });
                 }
             }
             break;
@@ -178,29 +213,24 @@ function toThreeUniform(type, value, name, uniforms, textureLoader, searchPath,
             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);
             }
-            outValue = null;
+            break;
     }
 
-    return outValue;
+    return uniform;
 }
 
-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: number): THREE.Wrapping {
     let wrap;
-    switch (mode)
-    {
+    switch (mode) {
         case 1:
             wrap = THREE.ClampToEdgeWrapping;
             break;
@@ -217,61 +247,36 @@ function getWrapping(mode)
     return wrap;
 }
 
-/**
- * Get Three minification filter
- * @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)
-    {
-        filterType = generateMipmaps ? THREE.NearestMipMapNearestFilter : THREE.NearestFilter;
-    }
-    return filterType;
-}
 
 /**
  * Set Three texture parameters
- * @param {THREE.Texture} texture
- * @param {mx.Uniform.name} name
- * @param {mx.Uniforms} uniforms
- * @param {mx.TextureFilter.generateMipmaps} generateMipmaps
  */
-function setTextureParameters(texture, name, uniforms, flipY = true, generateMipmaps = true)
-{
+function setTextureParameters(texture: THREE.Texture, name: string, uniforms: any, 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;
-
-    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);
     }
 
-    const filterType = uniforms.find(base + FILTER_TYPE_SUFFIX) ? uniforms.get(base + FILTER_TYPE_SUFFIX).value : -1;
-    texture.minFilter = getMinFilter(filterType, generateMipmaps);
+    const mxFilterType = uniforms.find(base + FILTER_TYPE_SUFFIX) ? uniforms.get(base + FILTER_TYPE_SUFFIX).value : -1;
+    let minFilter: THREE.TextureFilter = generateMipmaps ? THREE.LinearMipMapLinearFilter : THREE.LinearFilter;
+    if (mxFilterType === 0) {
+        minFilter = generateMipmaps ? THREE.NearestMipMapNearestFilter : THREE.NearestFilter;
+    }
+    texture.minFilter = minFilter;
 }
 
 /**
  * Return the global light rotation matrix
  */
-export function getLightRotation()
-{
+export function getLightRotation() {
     return new THREE.Matrix4().makeRotationY(Math.PI / 2);
 }
 
@@ -280,11 +285,9 @@ 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);
     }
@@ -295,19 +298,14 @@ let lightTypesBound = {};
 
 /**
  * Register lights in shader generation context
- * @param {Object} mx MaterialX Module
+ * @param {MaterialX.MODULE} mx MaterialX Module
  * @param {mx.GenContext} genContext Shader generation context
- * @returns {Array.<mx.Node>}
  */
-export async function registerLights(mx, genContext)
-{
+export async function registerLights(mx: MaterialX.MODULE, genContext: any): Promise<void> {
     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">
@@ -325,30 +323,27 @@ export async function registerLights(mx, 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);
     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;
@@ -374,16 +369,22 @@ 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(mx, lights, genContext)
-{
-    const lightData = [];
+export function getLightData(lights: any, genContext: any): { lightData: LightData[], lightCount: number } {
+    const lightData = new Array();
     const maxLightCount = genContext.getOptions().hwMaxActiveLightSources;
 
     // Three.js lights
@@ -399,9 +400,18 @@ export function getLightData(mx, lights, 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));
 
-        // console.log("Registering light", light.penumbra);
+        // 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],
@@ -410,11 +420,11 @@ export function getLightData(mx, lights, genContext)
             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: 0.9,
-            outer_angle: 0.4,
+            inner_angle: inner_angle,
+            outer_angle: outer_angle,
         });
     }
 
@@ -422,8 +432,7 @@ export function getLightData(mx, lights, genContext)
     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),
@@ -437,38 +446,32 @@ export function getLightData(mx, lights, genContext)
         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)
-{
+export function getUniformValues(shaderStage: MaterialX.ShaderStage, loaders: Loaders, searchPath: string) {
     const threeUniforms = {};
 
-    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 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", { name, value, type: variable.getType().getName() });
-                threeUniforms[name] = new THREE.Uniform(toThreeUniform(variable.getType().getName(), value, name, uniforms,
-                    textureLoader, searchPath, flipY));
+                if (debug) console.log("Adding uniform", { path: variable.getPath(), name: name, value: value, type: variable.getType().getName() });
+                threeUniforms[name] = toThreeUniform(uniforms, variable.getType().getName(), value, name, loaders, searchPath);;
             }
         }
-    });
+    }
 
     return threeUniforms;
 }