@archvisioninc/canvas 3.0.0 → 3.1.1

package/dist/helpers/canvasRemoveHelpers.js

@@ -4,6 +4,62 @@ import { deleteSelected } from '../actions';
 import { TRANSPARENCY_MODES } from '../constants';
 import * as BABYLON from 'babylonjs';
 import _ from 'lodash';
+const removeChannelFromTexture = (image, channel) => {
+  const imageHeight = image?.naturalHeight ?? 0;
+  const imageWidth = image?.naturalWidth ?? 0;
+  let imageData;
+  const maxHeight = Math.max(...[imageHeight, 1024]);
+  const maxWidth = Math.max(...[imageWidth, 1024]);
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  canvas.width = maxWidth;
+  canvas.height = maxHeight;
+  if (image) {
+    ctx.drawImage(image, 0, 0, maxWidth, maxHeight);
+    imageData = 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] = channel === 'R' ? 255 : imageData[i];
+    combinedData[i + 1] = channel === 'G' ? 255 : imageData[i + 1];
+    combinedData[i + 2] = channel === 'B' ? 255 : imageData[i + 2];
+    combinedData[i + 3] = channel === 'A' ? 255 : imageData[i + 3];
+  }
+  ctx.putImageData(combinedImageData, 0, 0);
+  return canvas.toDataURL('image/png');
+};
+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');
+      const {
+        width,
+        height
+      } = texture.getSize();
+      canvas.width = width;
+      canvas.height = height;
+      const img = new Image();
+      const imageData = ctx.createImageData(width, height);
+      imageData.data.set(new Uint8ClampedArray(pixels));
+      ctx.putImageData(imageData, 0, 0);
+      img.onload = () => {
+        resolve(img);
+      };
+      img.onerror = () => {
+        resolve(null);
+      };
+      img.src = canvas.toDataURL();
+    }).catch(() => {
+      resolve(null);
+    });
+  });
+};
 export const removeFromMaterial = inboundData => {
   const {
     payload
@@ -15,7 +71,9 @@ export const removeFromMaterial = inboundData => {
     removeMicroSurfaceTexture,
     removeEmissiveTexture,
     removeBumpTexture,
-    removeOpacityTexture
+    removeOpacityTexture,
+    removeRoughnessTexture,
+    removeAmbientTexture
   } = payload;
   const material = scene.getMaterialByName(id, true);
   if (material) {
@@ -32,8 +90,16 @@ export const removeFromMaterial = inboundData => {
       material.albedoTexture = null;
     }
     if (removeMetallicTexture) {
-      material.metallicTexture?.dispose();
-      material.metallicTexture = null;
+      if (material.metallicTexture) {
+        textureToImage(material.metallicTexture).then(data => {
+          const updatedTexture = removeChannelFromTexture(data, 'B');
+          material.metallicTexture.updateURL(updatedTexture);
+          newMetaDataEntry('materials', buildMaterialsArray());
+          newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
+        }).catch(() => {
+          console.log('Failed to remove metallic texture');
+        });
+      }
     }
     if (removeMicroSurfaceTexture) {
       material.microSurfaceTexture?.dispose();
@@ -51,6 +117,22 @@ export const removeFromMaterial = inboundData => {
       material.opacityTexture?.dispose();
       material.opacityTexture = null;
     }
+    if (removeAmbientTexture) {
+      material.ambientTexture?.dispose();
+      material.opacityTexture = null;
+    }
+    if (removeRoughnessTexture) {
+      if (material.metallicTexture) {
+        textureToImage(material.metallicTexture).then(data => {
+          const updatedTexture = removeChannelFromTexture(data, 'G');
+          material.metallicTexture.updateURL(updatedTexture);
+          newMetaDataEntry('materials', buildMaterialsArray());
+          newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
+        }).catch(() => {
+          console.log('Failed to remove roughness texture');
+        });
+      }
+    }
     newMetaDataEntry('materials', buildMaterialsArray());
     newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
   }

package/dist/helpers/canvasUpdateHelpers.js

@@ -141,28 +141,42 @@ 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 updateTextureChannel = (imageToMaintain, newImage, channelToUpdate) => {
+  const maintainHeight = imageToMaintain?.naturalHeight ?? 0;
+  const maintainWidth = imageToMaintain?.naturalWidth ?? 0;
+  const newHeight = newImage?.naturalHeight ?? 0;
+  const newWidth = newImage?.naturalWidth ?? 0;
+  let maintainData;
+  let newData;
+  const maxHeight = Math.max(...[maintainHeight, newHeight, 1024]);
+  const maxWidth = Math.max(...[maintainWidth, newWidth, 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 (newImage) {
+    ctx.drawImage(newImage, 0, 0, maxWidth, maxHeight);
+    newData = ctx.getImageData(0, 0, maxWidth, maxHeight).data;
+  }
+  if (imageToMaintain) {
+    ctx.drawImage(imageToMaintain, 0, 0, maxWidth, maxHeight);
+    maintainData = 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 + 3] = 255;
+    const maintainRed = maintainData ? maintainData[i] : 255;
+    const maintainGreen = maintainData ? maintainData[i + 1] : 255;
+    const maintainBlue = maintainData ? maintainData[i + 2] : 255;
+    const maintainAlpha = maintainData ? maintainData[i + 3] : 255;
+    const newRed = newData ? newData[i] : 255;
+    const newGreen = newData ? newData[i + 1] : 255;
+    const newBlue = newData ? newData[i + 2] : 255;
+    const newAlpha = newData ? newData[i + 3] : 255;
+    combinedData[i] = channelToUpdate === 'R' ? newRed : maintainRed;
+    combinedData[i + 1] = channelToUpdate === 'G' ? newGreen : maintainGreen;
+    combinedData[i + 2] = channelToUpdate === 'B' ? newBlue : maintainBlue;
+    combinedData[i + 3] = channelToUpdate === 'A' ? newAlpha : maintainAlpha;
   }
   ctx.putImageData(combinedImageData, 0, 0);
   return canvas.toDataURL('image/png');
@@ -170,22 +184,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 +222,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 +276,9 @@ export const updateMaterial = inboundData => {
     metallicTexture,
     roughness,
     roughnessTexture,
+    ambientColor,
+    ambientTextureStrength,
+    ambientTexture,
     microSurfaceTexture,
     emissiveColor,
     emissiveIntensity,
@@ -363,19 +387,27 @@ 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);
+        const combinedTexture = updateTextureChannel(currentImage, metallicImage, 'B');
         currentTexture.updateURL(combinedTexture);
         texture.dispose();
         applyUVSettings({
           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,19 +426,39 @@ 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);
+        const combinedTexture = updateTextureChannel(metallicImage, roughnessImage, 'G');
         currentTexture.updateURL(combinedTexture);
         texture.dispose();
         applyUVSettings({
           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.1",
   "private": false,
   "main": "dist/Canvas.js",
   "module": "dist/Canvas.js",

package/src/package/helpers/canvasRemoveHelpers.js

@@ -13,6 +13,82 @@ import { TRANSPARENCY_MODES } from '../constants';
 import * as BABYLON from 'babylonjs';
 import _ from 'lodash';
 
+const removeChannelFromTexture = (image, channel) => {
+    const imageHeight = image?.naturalHeight ?? 0;
+    const imageWidth = image?.naturalWidth ?? 0;
+
+    let imageData;
+
+    const maxHeight = Math.max(...[ imageHeight, 1024 ]);
+    const maxWidth = Math.max(...[ imageWidth, 1024 ]);
+
+    const canvas = document.createElement('canvas');
+
+    const ctx = canvas.getContext('2d');
+
+    canvas.width = maxWidth;
+    canvas.height = maxHeight;
+
+    if (image) {
+        ctx.drawImage(image, 0, 0, maxWidth, maxHeight);
+        imageData = 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] = channel === 'R' ? 255 : imageData[i];
+        combinedData[i + 1] = channel === 'G' ? 255 : imageData[i + 1];
+        combinedData[i + 2] = channel === 'B' ? 255 : imageData[i + 2];
+        combinedData[i + 3] = channel === 'A' ? 255 : imageData[i + 3];
+    }
+
+    ctx.putImageData(combinedImageData, 0, 0);
+
+    return canvas.toDataURL('image/png');
+
+};
+
+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');
+            const { width, height } = texture.getSize();
+
+            canvas.width = width;
+            canvas.height = height;
+
+            const img = new Image();
+            const imageData = ctx.createImageData(width, height);
+            imageData.data.set(new Uint8ClampedArray(pixels));
+
+            ctx.putImageData(imageData, 0, 0);
+
+            img.onload = () => {
+                resolve(img);
+            };
+
+            img.onerror = () => {
+                resolve(null);
+            };
+
+
+            img.src = canvas.toDataURL();
+        })
+        .catch(() => {
+            resolve(null);
+        });
+
+    });
+};
+
 export const removeFromMaterial = inboundData => {
   const { payload } = inboundData;
   const {
@@ -23,6 +99,8 @@ export const removeFromMaterial = inboundData => {
     removeEmissiveTexture,
     removeBumpTexture,
     removeOpacityTexture,
+      removeRoughnessTexture,
+      removeAmbientTexture,
   } = payload;
 
   const material = scene.getMaterialByName(id, true);
@@ -44,8 +122,18 @@ export const removeFromMaterial = inboundData => {
     }
 
     if (removeMetallicTexture) {
-      material.metallicTexture?.dispose();
-      material.metallicTexture = null;
+          if (material.metallicTexture) {
+              textureToImage(material.metallicTexture)
+              .then(data => {
+                  const updatedTexture = removeChannelFromTexture(data, 'B');
+                  material.metallicTexture.updateURL(updatedTexture);
+                  newMetaDataEntry('materials', buildMaterialsArray());
+                  newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
+              })
+              .catch(() => {
+                  console.log('Failed to remove metallic texture');
+              });
+          }
     }
 
     if (removeMicroSurfaceTexture)  {
@@ -67,6 +155,24 @@ export const removeFromMaterial = inboundData => {
       material.opacityTexture?.dispose();
       material.opacityTexture = null;
     }
+    if (removeAmbientTexture) {
+        material.ambientTexture?.dispose();
+        material.opacityTexture = null;
+    }
+      if (removeRoughnessTexture) {
+          if (material.metallicTexture) {
+              textureToImage(material.metallicTexture)
+              .then(data => {
+                  const updatedTexture = removeChannelFromTexture(data, 'G');
+                  material.metallicTexture.updateURL(updatedTexture);
+                  newMetaDataEntry('materials', buildMaterialsArray());
+                  newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
+              })
+              .catch(() => {
+                  console.log('Failed to remove roughness texture');
+              });
+          }
+      }
 
     newMetaDataEntry('materials', buildMaterialsArray());
     newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
@@ -161,4 +267,4 @@ export const removeFromViewport = inboundData => {
 
     props.setConfirmMessage?.(confirmConfig);
   }
-};
+};

package/src/package/helpers/canvasUpdateHelpers.js

@@ -178,14 +178,17 @@ 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 updateTextureChannel = (imageToMaintain, newImage, channelToUpdate) => {
+    const maintainHeight = imageToMaintain?.naturalHeight ?? 0;
+    const maintainWidth = imageToMaintain?.naturalWidth ?? 0;
+    const newHeight = newImage?.naturalHeight ?? 0;
+    const newWidth = newImage?.naturalWidth ?? 0;
 
-    const maxHeight = Math.max(roughnessHeight, metallicHeight);
-    const maxWidth = Math.max(roughnessWidth, metallicWidth);
+    let maintainData;
+    let newData;
+
+    const maxHeight = Math.max(...[ maintainHeight, newHeight, 1024 ]);
+    const maxWidth = Math.max(...[ maintainWidth, newWidth, 1024 ]);
 
     const canvas = document.createElement('canvas');
 
@@ -194,20 +197,34 @@ 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 (newImage) {
+        ctx.drawImage(newImage, 0, 0, maxWidth, maxHeight);
+        newData = ctx.getImageData(0, 0, maxWidth, maxHeight).data;
+    }
 
-    ctx.drawImage(metallicImage, 0, 0, maxWidth, maxHeight);
-    const metallicData = ctx.getImageData(0, 0, maxWidth, maxHeight).data;
+    if (imageToMaintain) {
+        ctx.drawImage(imageToMaintain, 0, 0, maxWidth, maxHeight);
+        maintainData = 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 + 3] = 255;
+        const maintainRed = maintainData ? maintainData[i] : 255;
+        const maintainGreen = maintainData ? maintainData[i + 1] : 255;
+        const maintainBlue = maintainData ? maintainData[i + 2] : 255;
+        const maintainAlpha = maintainData ? maintainData[i + 3] : 255;
+
+        const newRed = newData ? newData[i] : 255;
+        const newGreen = newData ? newData[i + 1] : 255;
+        const newBlue = newData ? newData[i + 2] : 255;
+        const newAlpha = newData ? newData[i + 3] : 255;
+
+        combinedData[i] = channelToUpdate === 'R' ? newRed : maintainRed;
+        combinedData[i + 1] = channelToUpdate === 'G' ? newGreen : maintainGreen;
+        combinedData[i + 2] = channelToUpdate === 'B' ? newBlue : maintainBlue;
+        combinedData[i + 3] = channelToUpdate === 'A' ? newAlpha : maintainAlpha;
     }
 
     ctx.putImageData(combinedImageData, 0, 0);
@@ -218,23 +235,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 +277,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 +333,9 @@ export const updateMaterial = inboundData => {
     metallicTexture,
     roughness,
       roughnessTexture,
+      ambientColor,
+      ambientTextureStrength,
+      ambientTexture,
     microSurfaceTexture,
     emissiveColor,
     emissiveIntensity,
@@ -412,21 +440,30 @@ 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);
+              const combinedTexture = updateTextureChannel(currentImage, metallicImage, 'B');
               currentTexture.updateURL(combinedTexture);
 
               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,21 +481,38 @@ 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);
+              const combinedTexture = updateTextureChannel(metallicImage, roughnessImage, 'G');
               currentTexture.updateURL(combinedTexture);
 
               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

@@ -5,7 +5,7 @@ import { AppContainer, DebugButtons, Button } from './styles';
 import { theme } from 'static/theme';
 import { fetchDownloadURL } from 'helpers/fetchHelpers';
 import { ENVIRONMENTS } from 'constants';
-import { updateMaterial, scene } from 'package/helpers';
+import { updateMaterial, scene, removeFromMaterial } from 'package/helpers';
 import Canvas from 'package/Canvas';
 import _ from 'lodash';
 
@@ -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(() => {
@@ -195,19 +198,22 @@ const App = () => {
           onClick={() => {
             const inboundData = {
               payload: {
-                id: 'material',
-                ...serializedResponseData,
+                id: 'Material Metal PBR Rich',
+                removeRoughnessTexture: true,
               },
             };
 
-            updateMaterial(inboundData);
-            console.log({ metadata: scene.metadata });
+            removeFromMaterial(inboundData);
           }}
         >
-          Import material
+            Remove Roughness Texture
         </Button>
 
-      <input type={'file'} onChange={handleUpload} accept={'image/*'} />
+      <input
+        type={'file'}
+        onChange={handleUpload}
+        accept={'image/*'}
+      />
 
         <Button
           theme={theme}