@archvisioninc/canvas 3.0.0 → 3.1.0

package/dist/helpers/canvasUpdateHelpers.js

@@ -142,26 +142,32 @@ const applyUVSettings = args => {
 
 // TODO: Future uses should support red, green, blue, and alpha channels with defaults for each
 const combineMetallicRoughnessTextures = (metallicImage, roughnessImage) => {
-  const roughnessHeight = roughnessImage.naturalHeight;
-  const roughnessWidth = roughnessImage.naturalWidth;
-  const metallicHeight = metallicImage.naturalHeight;
-  const metallicWidth = metallicImage.naturalWidth;
-  const maxHeight = Math.max(roughnessHeight, metallicHeight);
-  const maxWidth = Math.max(roughnessWidth, metallicWidth);
+  const roughnessHeight = roughnessImage?.naturalHeight ?? 0;
+  const roughnessWidth = roughnessImage?.naturalWidth ?? 0;
+  const metallicHeight = metallicImage?.naturalHeight ?? 0;
+  const metallicWidth = metallicImage?.naturalWidth ?? 0;
+  let roughnessData;
+  let metallicData;
+  const maxHeight = Math.max(...[roughnessHeight, metallicHeight, 1024]);
+  const maxWidth = Math.max(...[roughnessWidth, metallicWidth, 1024]);
   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   canvas.width = maxWidth;
   canvas.height = maxHeight;
-  ctx.drawImage(roughnessImage, 0, 0, maxWidth, maxHeight);
-  const roughnessData = ctx.getImageData(0, 0, maxWidth, maxHeight).data;
-  ctx.drawImage(metallicImage, 0, 0, maxWidth, maxHeight);
-  const metallicData = ctx.getImageData(0, 0, maxWidth, maxHeight).data;
+  if (roughnessImage) {
+    ctx.drawImage(roughnessImage, 0, 0, maxWidth, maxHeight);
+    roughnessData = ctx.getImageData(0, 0, maxWidth, maxHeight).data;
+  }
+  if (metallicImage) {
+    ctx.drawImage(metallicImage, 0, 0, maxWidth, maxHeight);
+    metallicData = ctx.getImageData(0, 0, maxWidth, maxHeight).data;
+  }
   const combinedImageData = ctx.createImageData(maxWidth, maxHeight);
   const combinedData = combinedImageData.data;
   for (let i = 0; i < combinedData.length; i += 4) {
     combinedData[i] = 255;
-    combinedData[i + 1] = roughnessData[i + 1];
-    combinedData[i + 2] = metallicData[i + 2];
+    combinedData[i + 1] = roughnessData ? roughnessData[i + 1] : 255;
+    combinedData[i + 2] = metallicData ? metallicData[i + 2] : 255;
     combinedData[i + 3] = 255;
   }
   ctx.putImageData(combinedImageData, 0, 0);
@@ -170,22 +176,28 @@ const combineMetallicRoughnessTextures = (metallicImage, roughnessImage) => {
 
 // eslint-disable-next-line
 const loadImage = async file => {
-  return new Promise((resolve, reject) => {
+  return new Promise(resolve => {
     const reader = new FileReader();
     reader.onload = event => {
       const img = new Image();
-      img.onload = () => {
-        resolve(img);
+      img.onload = () => resolve(img);
+      img.onerror = () => {
+        resolve(null);
       };
-      img.onerror = reject;
       img.src = event.target.result;
     };
-    reader.onerror = reject;
+    reader.onerror = () => {
+      resolve(null);
+    };
     reader.readAsDataURL(file);
   });
 };
-const textureToImage = (texture, textureName) => {
-  return new Promise((resolve, reject) => {
+const textureToImage = texture => {
+  return new Promise(resolve => {
+    if (!texture.readPixels()) {
+      resolve(null);
+      return;
+    }
     texture.readPixels().then(pixels => {
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d');
@@ -202,11 +214,12 @@ const textureToImage = (texture, textureName) => {
       img.onload = () => {
         resolve(img);
       };
-      img.onerror = event => {
-        console.log(`Error loading image: ${textureName}`);
-        reject(event);
+      img.onerror = () => {
+        resolve(null);
       };
       img.src = canvas.toDataURL();
+    }).catch(() => {
+      resolve(null);
     });
   });
 };
@@ -255,6 +268,9 @@ export const updateMaterial = inboundData => {
     metallicTexture,
     roughness,
     roughnessTexture,
+    ambientColor,
+    ambientTextureStrength,
+    ambientTexture,
     microSurfaceTexture,
     emissiveColor,
     emissiveIntensity,
@@ -363,10 +379,11 @@ export const updateMaterial = inboundData => {
       let currentTexture = material.metallicTexture;
       if (!currentTexture) {
         material.metallicTexture = newTexture();
+        material.metallicTexture.name = `${material.name} (Metallic-Roughness)`;
         currentTexture = material.metallicTexture;
       }
       const metallicBlob = dataUrlToBlob(texture.url);
-      Promise.all([loadImage(metallicBlob), textureToImage(currentTexture, 'metallic')]).then(data => {
+      Promise.all([loadImage(metallicBlob), textureToImage(currentTexture)]).then(data => {
         const [metallicImage, currentImage] = data;
         const combinedTexture = combineMetallicRoughnessTextures(metallicImage, currentImage);
         currentTexture.updateURL(combinedTexture);
@@ -375,7 +392,14 @@ export const updateMaterial = inboundData => {
           texture: material.metallicTexture,
           material
         });
-      }).catch(() => console.log(`Error updating the metallic texture of material: ${material.name}`));
+        newMetaDataEntry('materials', buildMaterialsArray());
+        newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
+      }).catch(err => {
+        console.log(`Error updating the roughness texture of material: ${material.name}`);
+        console.log({
+          err
+        });
+      });
     }
 
     // Roughness
@@ -394,10 +418,11 @@ export const updateMaterial = inboundData => {
       let currentTexture = material.metallicTexture;
       if (!currentTexture) {
         material.metallicTexture = newTexture();
+        material.metallicTexture.name = `${material.name} (Metallic-Roughness)`;
         currentTexture = material.metallicTexture;
       }
       const roughnessBlob = dataUrlToBlob(texture.url);
-      Promise.all([loadImage(roughnessBlob), textureToImage(currentTexture, 'metallic')]).then(data => {
+      Promise.all([loadImage(roughnessBlob), textureToImage(currentTexture)]).then(data => {
         const [roughnessImage, metallicImage] = data;
         const combinedTexture = combineMetallicRoughnessTextures(metallicImage, roughnessImage);
         currentTexture.updateURL(combinedTexture);
@@ -406,7 +431,26 @@ export const updateMaterial = inboundData => {
           texture: material.metallicTexture,
           material
         });
-      }).catch(() => console.log(`Error updating the roughness texture of material: ${material.name}`));
+        newMetaDataEntry('materials', buildMaterialsArray());
+        newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
+      }).catch(err => {
+        console.log(`Error updating the roughness texture of material: ${material.name}`);
+        console.log({
+          err
+        });
+      });
+    }
+
+    // Ambient
+    if (ambientColor) material.ambientColor = newColor(emissiveColor);
+    if (ambientTextureStrength !== undefined) material.ambientTextureStrength = ambientTextureStrength;
+    if (!_.isEmpty(ambientTexture?.src || ambientTexture?.url)) {
+      material.ambientTexture = newTexture(ambientTexture?.src || ambientTexture?.url);
+      material.ambientTexture.name = ambientTexture.name;
+      applyUVSettings({
+        texture: material.ambientTexture,
+        material
+      });
     }
 
     // Emissive

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archvisioninc/canvas",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "private": false,
   "main": "dist/Canvas.js",
   "module": "dist/Canvas.js",

package/src/package/helpers/canvasUpdateHelpers.js

@@ -179,13 +179,16 @@ const applyUVSettings = args => {
 
 // TODO: Future uses should support red, green, blue, and alpha channels with defaults for each
 const combineMetallicRoughnessTextures = (metallicImage, roughnessImage) => {
-    const roughnessHeight = roughnessImage.naturalHeight;
-    const roughnessWidth = roughnessImage.naturalWidth;
-    const metallicHeight = metallicImage.naturalHeight;
-    const metallicWidth = metallicImage.naturalWidth;
+    const roughnessHeight = roughnessImage?.naturalHeight ?? 0;
+    const roughnessWidth = roughnessImage?.naturalWidth ?? 0;
+    const metallicHeight = metallicImage?.naturalHeight ?? 0;
+    const metallicWidth = metallicImage?.naturalWidth ?? 0;
 
-    const maxHeight = Math.max(roughnessHeight, metallicHeight);
-    const maxWidth = Math.max(roughnessWidth, metallicWidth);
+    let roughnessData;
+    let metallicData;
+
+    const maxHeight = Math.max(...[ roughnessHeight, metallicHeight, 1024 ]);
+    const maxWidth = Math.max(...[ roughnessWidth, metallicWidth, 1024 ]);
 
     const canvas = document.createElement('canvas');
 
@@ -194,19 +197,23 @@ const combineMetallicRoughnessTextures = (metallicImage, roughnessImage) => {
     canvas.width = maxWidth;
     canvas.height = maxHeight;
 
-    ctx.drawImage(roughnessImage, 0, 0, maxWidth, maxHeight);
-    const roughnessData = ctx.getImageData(0, 0, maxWidth, maxHeight).data;
+    if (roughnessImage) {
+        ctx.drawImage(roughnessImage, 0, 0, maxWidth, maxHeight);
+        roughnessData = ctx.getImageData(0, 0, maxWidth, maxHeight).data;
+    }
 
-    ctx.drawImage(metallicImage, 0, 0, maxWidth, maxHeight);
-    const metallicData = ctx.getImageData(0, 0, maxWidth, maxHeight).data;
+    if (metallicImage) {
+        ctx.drawImage(metallicImage, 0, 0, maxWidth, maxHeight);
+        metallicData = ctx.getImageData(0, 0, maxWidth, maxHeight).data;
+    }
 
     const combinedImageData = ctx.createImageData(maxWidth, maxHeight);
     const combinedData = combinedImageData.data;
 
     for (let i = 0; i < combinedData.length; i += 4) {
         combinedData[i] = 255;
-        combinedData[i + 1] = roughnessData[i + 1];
-        combinedData[i + 2] = metallicData[i + 2];
+        combinedData[i + 1] = roughnessData ? roughnessData[i + 1] : 255;
+        combinedData[i + 2] = metallicData ? metallicData[i + 2] : 255;
         combinedData[i + 3] = 255;
     }
 
@@ -218,23 +225,29 @@ const combineMetallicRoughnessTextures = (metallicImage, roughnessImage) => {
 
 // eslint-disable-next-line
 const loadImage = async file => {
-    return new Promise((resolve, reject) => {
+    return new Promise(resolve => {
         const reader = new FileReader();
         reader.onload = event => {
             const img = new Image();
-            img.onload = () => {
-                resolve(img);
+            img.onload = () => resolve(img);
+            img.onerror = () => {
+                resolve(null);
             };
-            img.onerror = reject;
             img.src = event.target.result;
         };
-        reader.onerror = reject;
+        reader.onerror = () => {
+            resolve(null);
+        };
         reader.readAsDataURL(file);
     });
 };
 
-const textureToImage = (texture, textureName) => {
-    return new Promise((resolve, reject) => {
+const textureToImage = texture => {
+    return new Promise(resolve => {
+        if (!texture.readPixels()) {
+            resolve(null);
+            return;
+        }
         texture.readPixels()
         .then(pixels => {
             const canvas = document.createElement('canvas');
@@ -254,13 +267,15 @@ const textureToImage = (texture, textureName) => {
                 resolve(img);
             };
 
-            img.onerror = event => {
-                console.log(`Error loading image: ${textureName}`);
-                reject(event);
+            img.onerror = () => {
+                resolve(null);
             };
 
 
             img.src = canvas.toDataURL();
+        })
+        .catch(() => {
+            resolve(null);
         });
 
     });
@@ -308,6 +323,9 @@ export const updateMaterial = inboundData => {
     metallicTexture,
     roughness,
       roughnessTexture,
+      ambientColor,
+      ambientTextureStrength,
+      ambientTexture,
     microSurfaceTexture,
     emissiveColor,
     emissiveIntensity,
@@ -412,12 +430,16 @@ export const updateMaterial = inboundData => {
           let currentTexture = material.metallicTexture;
           if (!currentTexture) {
               material.metallicTexture = newTexture();
+              material.metallicTexture.name = `${material.name} (Metallic-Roughness)`;
               currentTexture = material.metallicTexture;
           }
 
           const metallicBlob = dataUrlToBlob(texture.url);
 
-          Promise.all([ loadImage(metallicBlob), textureToImage(currentTexture, 'metallic') ])
+          Promise.all([
+              loadImage(metallicBlob),
+              textureToImage(currentTexture),
+          ])
           .then(data => {
               const [ metallicImage, currentImage ] = data;
               const combinedTexture = combineMetallicRoughnessTextures(metallicImage, currentImage);
@@ -425,8 +447,13 @@ export const updateMaterial = inboundData => {
 
               texture.dispose();
               applyUVSettings({ texture: material.metallicTexture, material });
+              newMetaDataEntry('materials', buildMaterialsArray());
+              newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
           })
-          .catch(() => console.log(`Error updating the metallic texture of material: ${material.name}`));
+            .catch(err => {
+                console.log(`Error updating the roughness texture of material: ${material.name}`);
+                console.log({ err });
+            });
     }
 
     // Roughness
@@ -444,12 +471,13 @@ export const updateMaterial = inboundData => {
           let currentTexture = material.metallicTexture;
           if (!currentTexture) {
               material.metallicTexture = newTexture();
+              material.metallicTexture.name = `${material.name} (Metallic-Roughness)`;
               currentTexture = material.metallicTexture;
           }
 
           const roughnessBlob = dataUrlToBlob(texture.url);
 
-          Promise.all([ loadImage(roughnessBlob), textureToImage(currentTexture, 'metallic') ])
+          Promise.all([ loadImage(roughnessBlob), textureToImage(currentTexture) ])
           .then(data => {
               const [ roughnessImage, metallicImage ] = data;
               const combinedTexture = combineMetallicRoughnessTextures(metallicImage, roughnessImage);
@@ -457,8 +485,24 @@ export const updateMaterial = inboundData => {
 
               texture.dispose();
               applyUVSettings({ texture: material.metallicTexture, material });
+              newMetaDataEntry('materials', buildMaterialsArray());
+              newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
           })
-          .catch(() => console.log(`Error updating the roughness texture of material: ${material.name}`));
+          .catch(err => {
+              console.log(`Error updating the roughness texture of material: ${material.name}`);
+              console.log({ err });
+          });
+
+      }
+
+      // Ambient
+      if (ambientColor) material.ambientColor = newColor(emissiveColor);
+      if (ambientTextureStrength !== undefined) material.ambientTextureStrength = ambientTextureStrength;
+      if (!_.isEmpty(ambientTexture?.src || ambientTexture?.url)) {
+          material.ambientTexture = newTexture(ambientTexture?.src || ambientTexture?.url);
+          material.ambientTexture.name = ambientTexture.name;
+
+          applyUVSettings({ texture: material.ambientTexture, material });
 
       }
 

package/src/scenes/App/App.js

@@ -143,7 +143,10 @@ const App = () => {
         const file = e.currentTarget.files[0];
         const reader = new FileReader();
         reader.readAsDataURL(file);
-        reader.onload = () => onImageLoad({ name: file.name, src: reader.result });
+        reader.onload = () => onImageLoad({
+            name: file.name,
+            src: reader.result,
+        });
     };
 
   useEffect(() => {
@@ -207,7 +210,11 @@ const App = () => {
           Import material
         </Button>
 
-      <input type={'file'} onChange={handleUpload} accept={'image/*'} />
+      <input
+        type={'file'}
+        onChange={handleUpload}
+        accept={'image/*'}
+      />
 
         <Button
           theme={theme}