Texture caching enhancements for Web Viewer (AcademySoftwareFoundatio…

…n#1891) - Add in texture cache reuse using ThreeJS cache. - Handle http/blob/data encodings properly. ( This will allow support for interactive image assignment to existing shaders. )
sideeffects · Sep 16, 2024 · d377d0e · d377d0e
1 parent 4fd38f0
commit d377d0e
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 12 deletions.
diff --git a/javascript/MaterialXView/source/helper.js b/javascript/MaterialXView/source/helper.js
@@ -89,7 +89,7 @@ function fromMatrix(matrix, dimension)
  */
 function toThreeUniform(type, value, name, uniforms, textureLoader, searchPath, flipY)
 {
-    let outValue;
+    let outValue = null;
     switch (type)
     {
         case 'float':
@@ -117,18 +117,63 @@ function toThreeUniform(type, value, name, uniforms, textureLoader, searchPath,
         case 'filename':
             if (value)
             {
-                let fullPath = searchPath + IMAGE_PATH_SEPARATOR + value;
-                const texture = textureLoader.load(fullPath);
-                // Set address & filtering mode
-                if (texture)
-                    setTextureParameters(texture, name, uniforms, flipY);
-                outValue = texture;
+                // 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 = true;
+                let texturePath = searchPath + IMAGE_PATH_SEPARATOR + value;
+                if (value.startsWith('blob:'))   
+                {
+                    texturePath = value;
+                    console.log('Load blob URL:', texturePath);
+                    checkCache = false;
+                }
+                else if (value.startsWith('http'))
+                {
+                    texturePath = value;
+                    console.log('Load HTTP URL:', texturePath);
+                }
+                else if (value.startsWith('data:'))
+                {
+                    texturePath = value;
+                    checkCache = false;
+                    console.log('Load data URL:', texturePath);
+                }
+                const cachedTexture = checkCache && THREE.Cache.get(texturePath);
+                if (cachedTexture)
+                {
+                    // Get texture from cache
+                    outValue = cachedTexture;
+                    console.log('Use cached texture: ', texturePath, outValue);
+                }
+                else
+                {
+                    outValue = textureLoader.load(
+                        texturePath, 
+                        function (texture) {
+                            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);
+                }
             }
             break;
         case 'samplerCube':
         case 'string':
-        default:
             break;
+        default:
+            console.log('Value type not supported: ' + type);
+            outValue = null;
     }
 
     return outValue;

diff --git a/javascript/MaterialXView/source/viewer.js b/javascript/MaterialXView/source/viewer.js
@@ -221,9 +221,14 @@ export class Scene
         orbitControls.update();
     }
 
-    setUpdateTransforms()
+    setUpdateTransforms(val=true)
     {
-        this.#_updateTransforms = true;
+        this.#_updateTransforms = val;
+    }
+
+    getUpdateTransforms()
+    {
+        return this.#_updateTransforms;
     }
 
     updateTransforms()
@@ -235,7 +240,7 @@ export class Scene
         {
             return;
         }
-        this.#_updateTransforms = false;
+        this.setUpdateTransforms(false);
 
         const scene = this.getScene();
         const camera = this.getCamera();
@@ -622,7 +627,12 @@ export class Material
 
         // Load material
         if (mtlxMaterial)
-            await mx.readFromXmlString(doc, mtlxMaterial, searchPath);
+            try {                
+                await mx.readFromXmlString(doc, mtlxMaterial, searchPath);
+            }
+            catch (error) {
+                console.log('Error loading material file: ', error);
+            }
         else
             Material.createFallbackMaterial(doc);