Polyhaven Web Patches for EXR (#33)

* Start patching 3d and content preview to get PNG vs EXR.
Still need to patch bad MTLX references based on downloaded images...

* Preview of content okay now.
- Download is using original mtlx.

* Fix 3d preview.

* Cleanup. Restore cache usage.

* Places image before doc in content preview.
Add few snapshots.

* Add Mac preview snap.

Author: kwokcb

documents/images/PolyHaven_EXR_JS.png

@@ -92,7 +92,9 @@ class JsPolyHavenAPILoader {
                 throw new Error(`Failed to fetch MaterialX data for ${materialId}`);
             }
 
-            return await response.json();
+            const result = await response.json();
+            console.log(`Fetched MaterialX files for ${materialId}:`, result);
+            return result;
         } catch (error) {
             console.error(`Error fetching material files for ${materialId}:`, error);
             throw error;
@@ -114,7 +116,9 @@ class JsPolyHavenAPILoader {
                 throw new Error('Failed to download MaterialX file');
             }
 
-            return await response.text();
+            const result = await response.text();
+            // Find 
+            return result;
         } catch (error) {
             console.error('Error downloading MaterialX content:', error);
             throw error;
@@ -135,6 +139,9 @@ class JsPolyHavenAPILoader {
             if (!response.ok) {
                 throw new Error(`Failed to download texture from ${url}`);
             }
+            else {
+                console.log(`>  Successfully downloaded texture from ${url}`);
+            }
 
             return await response.blob();
         } catch (error) {
@@ -176,6 +183,7 @@ class JsPolyHavenAPILoader {
             // Fetch MaterialX files data
             const filesData = await this.fetchMaterialFiles(material.id);
             const mtlxData = filesData.mtlx?.[resolution]?.mtlx;
+            console.log('> createMaterialXPackage - fetched MaterialX data:', mtlxData);
 
             if (!mtlxData) {
                 throw new Error(`No MaterialX files found for ${resolution} resolution`);
@@ -185,14 +193,36 @@ class JsPolyHavenAPILoader {
             const zip = new JSZip();
 
             // 1. Download and add the main MaterialX file
-            const mtlxContent = await this.downloadMaterialXContent(mtlxData.url);
-            zip.file(`${material.id}.mtlx`, mtlxContent);
-            console.log(`Added MaterialX file to ZIP: ${material.id}.mtlx, ${mtlxContent}`);
+            let mtlxContent = await this.downloadMaterialXContent(mtlxData.url);
 
             // 2. Download and add all included texture files
             const textureFiles = mtlxData.include || {};
+            let texturePaths = [];
+            
             const texturePromises = Object.entries(textureFiles).map(async ([path, fileData]) => {
                 try {
+                    console.log(`Processing texture: ${path} from URL: ${fileData.url}`);
+
+                    let isEXR = path.toLowerCase().endsWith('.exr')
+                    // Try changing extension to .png.
+                    if (isEXR) {
+                        const prevPath = path;
+                        path = path.replace(/\.exr$/i, '.png');
+                        // Replace /exr/ with /png/
+                        fileData.url = fileData.url.replace(/\/exr\//i, '/png/');
+                        // Replace .exr with .png extension
+                        fileData.url = fileData.url.replace('.exr', '.png');
+                        // Replace .exr with .png in mtlxContent if present
+                        const previousMtlxContent = mtlxContent;
+                        mtlxContent = previousMtlxContent.replace(prevPath, path);
+
+                        console.log(`EXR file detected. Path: ${prevPath} -> ${path}, URL: ${fileData.url}`);
+                        if (previousMtlxContent !== mtlxContent) {
+                            console.log(`Updated MaterialX content to replace .exr with .png for texture: ${path}`);
+                        }
+
+                    }
+
                     const textureBlob = await this.downloadTexture(fileData.url);
 
                     // Maintain the folder structure from the include paths
@@ -211,15 +241,20 @@ class JsPolyHavenAPILoader {
                         console.warn(`EXR file present which may not be supported by MaterialX texture loader: ${path}`);
                     }
                     else {
-                        console.log(`Added texture to ZIP: ${path}`);
+                        console.log(`Added texture ${path} to ZIP from URL: ${fileData.url}`);
+                        zip.file(path, textureBlob);
                     }
+
+                    texturePaths.push(path);
+
                 } catch (error) {
                     console.error(`Error downloading texture ${path}:`, error);
                     // Add placeholder file if download fails
                     zip.file(path, `Failed to download: ${fileData.url}`);
                 }
             });
 
+            
             // 3. Download and add thumbnail
             if (material.thumb_url) {
                 try {
@@ -236,15 +271,30 @@ class JsPolyHavenAPILoader {
             // Wait for all downloads to complete
             await Promise.all(texturePromises);
 
-            // Add README file
+            for (const textureName of texturePaths) {
+                // Patch bad MTLX references in original file
+                const extenson = textureName.split('.').pop();
+                const exrName = textureName.replace(`.${extenson}`, `.exr`);
+                if (mtlxContent.includes(exrName)) {
+                    console.log(`Replace ${exrName} with ${textureName} in MaterialX content for preview`);
+                    mtlxContent = mtlxContent.replace(exrName, textureName);
+                }
+            }
+
+            // Add Materialx document to ZIP. 
+            // This must be done after texture processing which may
+            // modify the MTLX image references.
+            zip.file(`${material.id}.mtlx`, mtlxContent);
+            console.log(`Added MaterialX file to ZIP: ${material.id}.mtlx`); //, ${mtlxContent}`);
+
+            // Add README file, and thumbnail to root of ZIP
             zip.file("README.txt",
                 `Material: ${material.name}\n` +
                 `Resolution: ${resolution}\n` +
                 `Source: https://polyhaven.com/a/${material.id}\n` +
                 `Downloaded: ${new Date().toISOString()}\n\n` +
                 `Contains the following files:\n` +
                 `- ${material.id}.mtlx\n` +
-                Object.keys(textureFiles).map(path => `- ${path}`).join('\n') +
                 (material.thumb_url ? `\n- ${material.id}_thumbnail.png` : '')
             );
 

documents/images/PolyHaven_EXR_JS_2.png

@@ -105,6 +105,8 @@ document.addEventListener('DOMContentLoaded', function () {
 async function downloadMaterial() {
     if (!currentSelectedMaterial || !polyHavenAPI) return;
 
+    console.log(`Preparing download for material: ${currentSelectedMaterial.name} (ID: ${currentSelectedMaterial.id})`);
+
     const resolution = document.getElementById('materialResolution').value;
     const materialName = currentSelectedMaterial.name.replace(/[^a-z0-9]/gi, '_').toLowerCase();
 
@@ -343,14 +345,15 @@ async function loadMaterialContent(materialId) {
 
         // Create preview content
         const previewContainer = document.getElementById('contentPreview');
+        let mtlxContent = contentData.mtlxContent || '';
         previewContainer.innerHTML = `
             <div class="mt-4">
-                <b>MaterialX Document</b>
-                <textarea id="mtlxEditor">${contentData.mtlxContent}</textarea>
+                <b>Content</b>
                 <div class="mt-2">
                     <b>Textures</b>
                     <div id="textureGallery" class="row g-2"></div>
                 </div>
+                <textarea id="mtlxEditor">${mtlxContent}</textarea>
             </div>
         `;
 
@@ -373,11 +376,26 @@ async function loadMaterialContent(materialId) {
         const textureFiles = contentData.textureFiles;
         const galleryContainer = document.getElementById('textureGallery');
         galleryContainer.innerHTML = '';
+        
+        let textureNames = [];
 
-        const createTextureCard = (textureName, textureUrl) => {
+        const createTextureCard = (textureName, textureUrl) => 
+        {
             const card = document.createElement('div');
             card.className = 'col-6 col-md-4 col-lg-3 mb-3';
 
+            // If textureURL ends with exr replace with png for preview
+            if (textureUrl.toLowerCase().endsWith('.exr')) {
+                console.log(`> EXR file detected for preview, attempting to use PNG version: ${textureUrl}`);
+                textureUrl = textureUrl.replace(/\.exr$/i, '.png').replace(/\/exr\//i, '/png/');
+                let textureName_before = textureName;
+                textureName = textureName_before.replace(/\.exr$/i, '.png');
+                console.log(`Replace ${textureName_before} with ${textureName} in MaterialX content for preview`);
+                mtlxContent = mtlxContent.replace(textureName_before, textureName);
+            }   
+
+            textureNames.push(textureName);
+
             card.innerHTML = `
                     <div class="card h-100">
                         <div class="ratio ratio-1x1 bg-light">
@@ -395,13 +413,30 @@ async function loadMaterialContent(materialId) {
             return card;
         };
 
+
         // Create gallery items
         for (const [path, fileData] of Object.entries(textureFiles)) {
-            const textureName = path.split('/').pop();
-            const card = createTextureCard(textureName, fileData.url);
+            const textureURI = path.split('/').pop();
+            let card = createTextureCard(textureURI, fileData.url);
             galleryContainer.appendChild(card);
         }
 
+        // Set mtlxContent to editor
+        if (codeMirrorEditor) {
+            // Patch bad MTLX references in original file
+            for (const textureName of textureNames) {
+                extenson = textureName.split('.').pop();
+                exrName = textureName.replace(`.${extenson}`, `.exr`);
+                if (mtlxContent.includes(exrName)) {
+                    console.log(`Replace ${exrName} with ${textureName} in MaterialX content for preview`);
+                    mtlxContent = mtlxContent.replace(exrName, textureName);
+                }
+            }
+
+            console.log('Setting MaterialX content in CodeMirror editor:', mtlxContent);
+            codeMirrorEditor.setValue(mtlxContent);
+        }
+
     } catch (error) {
         console.error('Error loading content:', error);
         document.getElementById('contentPreview').innerHTML += `