@archvisioninc/canvas 3.1.4 → 3.1.6

package/dist/helpers/canvasRemoveHelpers.js

@@ -21,9 +21,9 @@ const removeChannelFromTexture = (image, channel) => {
   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] = channel === 'R' ? 0 : imageData[i];
+    combinedData[i + 1] = channel === 'G' ? 0 : imageData[i + 1];
+    combinedData[i + 2] = channel === 'B' ? 0 : imageData[i + 2];
     combinedData[i + 3] = channel === 'A' ? 255 : imageData[i + 3];
   }
   ctx.putImageData(combinedImageData, 0, 0);

package/dist/helpers/canvasUpdateHelpers.js

@@ -139,8 +139,6 @@ const applyUVSettings = args => {
     texture.vScale = uvYScale;
   }
 };
-
-// TODO: Future uses should support red, green, blue, and alpha channels with defaults for each
 const updateTextureChannel = (imageToMaintain, newImage, channelToUpdate) => {
   const maintainHeight = imageToMaintain?.naturalHeight ?? 0;
   const maintainWidth = imageToMaintain?.naturalWidth ?? 0;
@@ -167,13 +165,13 @@ const updateTextureChannel = (imageToMaintain, newImage, channelToUpdate) => {
   const combinedImageData = ctx.createImageData(maxWidth, maxHeight);
   const combinedData = combinedImageData.data;
   for (let i = 0; i < combinedData.length; i += 4) {
-    const maintainRed = maintainData ? maintainData[i] : 255;
-    const maintainGreen = maintainData ? maintainData[i + 1] : 255;
-    const maintainBlue = maintainData ? maintainData[i + 2] : 255;
+    const maintainRed = maintainData ? maintainData[i] : 1;
+    const maintainGreen = maintainData ? maintainData[i + 1] : 0;
+    const maintainBlue = maintainData ? maintainData[i + 2] : 0;
     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 newRed = newData ? newData[i] : 1;
+    const newGreen = newData ? newData[i + 1] : 0;
+    const newBlue = newData ? newData[i + 2] : 0;
     const newAlpha = newData ? newData[i + 3] : 255;
     combinedData[i] = channelToUpdate === 'R' ? newRed : maintainRed;
     combinedData[i + 1] = channelToUpdate === 'G' ? newGreen : maintainGreen;
@@ -397,6 +395,8 @@ export const updateMaterial = inboundData => {
         const [metallicImage, currentImage] = data;
         const combinedTexture = updateTextureChannel(currentImage, metallicImage, 'B');
         currentTexture.updateURL(combinedTexture);
+        material.useRoughnessFromMetallicTextureAlpha = false;
+        material.useMetalnessFromMetallicTextureBlue = true;
         texture.dispose();
         applyUVSettings({
           texture: material.metallicTexture,
@@ -438,6 +438,8 @@ export const updateMaterial = inboundData => {
         const [roughnessImage, metallicImage] = data;
         const combinedTexture = updateTextureChannel(metallicImage, roughnessImage, 'G');
         currentTexture.updateURL(combinedTexture);
+        material.useRoughnessFromMetallicTextureAlpha = false;
+        material.useRoughnessFromMetallicTextureGreen = true;
         texture.dispose();
         applyUVSettings({
           texture: material.metallicTexture,

package/package.json

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

package/src/package/helpers/canvasRemoveHelpers.js

@@ -39,9 +39,9 @@ const removeChannelFromTexture = (image, channel) => {
     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] = channel === 'R' ? 0 : imageData[i];
+        combinedData[i + 1] = channel === 'G' ? 0 : imageData[i + 1];
+        combinedData[i + 2] = channel === 'B' ? 0 : imageData[i + 2];
         combinedData[i + 3] = channel === 'A' ? 255 : imageData[i + 3];
     }
 

package/src/package/helpers/canvasUpdateHelpers.js

@@ -177,7 +177,6 @@ const applyUVSettings = args => {
   }
 };
 
-// TODO: Future uses should support red, green, blue, and alpha channels with defaults for each
 const updateTextureChannel = (imageToMaintain, newImage, channelToUpdate) => {
     const maintainHeight = imageToMaintain?.naturalHeight ?? 0;
     const maintainWidth = imageToMaintain?.naturalWidth ?? 0;
@@ -212,14 +211,14 @@ const updateTextureChannel = (imageToMaintain, newImage, channelToUpdate) => {
     const combinedData = combinedImageData.data;
 
     for (let i = 0; i < combinedData.length; i += 4) {
-        const maintainRed = maintainData ? maintainData[i] : 255;
-        const maintainGreen = maintainData ? maintainData[i + 1] : 255;
-        const maintainBlue = maintainData ? maintainData[i + 2] : 255;
+        const maintainRed = maintainData ? maintainData[i] : 1;
+        const maintainGreen = maintainData ? maintainData[i + 1] : 0;
+        const maintainBlue = maintainData ? maintainData[i + 2] : 0;
         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 newRed = newData ? newData[i] : 1;
+        const newGreen = newData ? newData[i + 1] : 0;
+        const newBlue = newData ? newData[i + 2] : 0;
         const newAlpha = newData ? newData[i + 3] : 255;
 
         combinedData[i] = channelToUpdate === 'R' ? newRed : maintainRed;
@@ -231,7 +230,6 @@ const updateTextureChannel = (imageToMaintain, newImage, channelToUpdate) => {
     ctx.putImageData(combinedImageData, 0, 0);
 
     return canvas.toDataURL('image/png');
-
 };
 
 // eslint-disable-next-line
@@ -455,6 +453,8 @@ export const updateMaterial = inboundData => {
               const [ metallicImage, currentImage ] = data;
               const combinedTexture = updateTextureChannel(currentImage, metallicImage, 'B');
               currentTexture.updateURL(combinedTexture);
+              material.useRoughnessFromMetallicTextureAlpha = false;
+              material.useMetalnessFromMetallicTextureBlue = true;
 
               texture.dispose();
               applyUVSettings({ texture: material.metallicTexture, material });
@@ -495,6 +495,8 @@ export const updateMaterial = inboundData => {
               const [ roughnessImage, metallicImage ] = data;
               const combinedTexture = updateTextureChannel(metallicImage, roughnessImage, 'G');
               currentTexture.updateURL(combinedTexture);
+              material.useRoughnessFromMetallicTextureAlpha = false;
+              material.useRoughnessFromMetallicTextureGreen = true;
 
               texture.dispose();
               applyUVSettings({ texture: material.metallicTexture, material });

package/src/scenes/App/App.js

@@ -130,8 +130,9 @@ const App = () => {
     const onImageLoad = args => {
         const inboundData = {
             payload: {
-                id: 'Material Metal PBR Rich',
+                id: 'Material #38',
                 metallicTexture: args,
+
             },
         };
 
@@ -149,6 +150,28 @@ const App = () => {
         });
     };
 
+    const onRoughnessImageLoad = args => {
+        const inboundData = {
+            payload: {
+                id: 'Material #38',
+                roughnessTexture: args,
+            },
+        };
+
+        updateMaterial(inboundData);
+
+    };
+
+    const handleRoughnessUpload = e => {
+        const file = e.currentTarget.files[0];
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => onRoughnessImageLoad({
+            name: file.name,
+            src: reader.result,
+        });
+    };
+
   useEffect(() => {
       getPreviewURL();
   }, [ getPreviewURL ]);
@@ -201,7 +224,7 @@ const App = () => {
           onClick={() => {
             const inboundData = {
               payload: {
-                id: 'Material Metal PBR Rich',
+                id: 'Material #38',
                 removeRoughnessTexture: true,
               },
             };
@@ -213,11 +236,21 @@ const App = () => {
         </Button>
 
       <input
+        name='Metallic'
+        title='Metallic'
         type={'file'}
         onChange={handleUpload}
         accept={'image/*'}
       />
 
+      <input
+        name='Roughness'
+        title='Roughness'
+        type={'file'}
+        onChange={handleRoughnessUpload}
+        accept={'image/*'}
+      />
+
         <Button
           theme={theme}
           $selectedTheme={selectedTheme}