@archvisioninc/canvas 3.1.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,34 +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 ?? 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 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;
-  if (roughnessImage) {
-    ctx.drawImage(roughnessImage, 0, 0, maxWidth, maxHeight);
-    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;
   }
-  if (metallicImage) {
-    ctx.drawImage(metallicImage, 0, 0, maxWidth, maxHeight);
-    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 ? roughnessData[i + 1] : 255;
-    combinedData[i + 2] = metallicData ? metallicData[i + 2] : 255;
-    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');
@@ -385,7 +393,7 @@ export const updateMaterial = inboundData => {
       const metallicBlob = dataUrlToBlob(texture.url);
       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({
@@ -424,7 +432,7 @@ export const updateMaterial = inboundData => {
       const roughnessBlob = dataUrlToBlob(texture.url);
       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({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archvisioninc/canvas",
-  "version": "3.1.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,17 +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 ?? 0;
-    const roughnessWidth = roughnessImage?.naturalWidth ?? 0;
-    const metallicHeight = metallicImage?.naturalHeight ?? 0;
-    const metallicWidth = metallicImage?.naturalWidth ?? 0;
+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 roughnessData;
-    let metallicData;
+    let maintainData;
+    let newData;
 
-    const maxHeight = Math.max(...[ roughnessHeight, metallicHeight, 1024 ]);
-    const maxWidth = Math.max(...[ roughnessWidth, metallicWidth, 1024 ]);
+    const maxHeight = Math.max(...[ maintainHeight, newHeight, 1024 ]);
+    const maxWidth = Math.max(...[ maintainWidth, newWidth, 1024 ]);
 
     const canvas = document.createElement('canvas');
 
@@ -197,24 +197,34 @@ const combineMetallicRoughnessTextures = (metallicImage, roughnessImage) => {
     canvas.width = maxWidth;
     canvas.height = maxHeight;
 
-    if (roughnessImage) {
-        ctx.drawImage(roughnessImage, 0, 0, maxWidth, maxHeight);
-        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;
     }
 
-    if (metallicImage) {
-        ctx.drawImage(metallicImage, 0, 0, maxWidth, maxHeight);
-        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 ? roughnessData[i + 1] : 255;
-        combinedData[i + 2] = metallicData ? metallicData[i + 2] : 255;
-        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);
@@ -442,7 +452,7 @@ export const updateMaterial = inboundData => {
           ])
           .then(data => {
               const [ metallicImage, currentImage ] = data;
-              const combinedTexture = combineMetallicRoughnessTextures(metallicImage, currentImage);
+              const combinedTexture = updateTextureChannel(currentImage, metallicImage, 'B');
               currentTexture.updateURL(combinedTexture);
 
               texture.dispose();
@@ -480,7 +490,7 @@ export const updateMaterial = inboundData => {
           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();

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';
 
@@ -198,16 +198,15 @@ 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