@archvisioninc/canvas 3.1.5 → 3.1.7

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,11 +165,11 @@ 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] : 0;
+    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] : 0;
+    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;
@@ -202,7 +200,7 @@ const loadImage = async file => {
     reader.readAsDataURL(file);
   });
 };
-const textureToImage = texture => {
+const metallicTextureToImage = texture => {
   return new Promise(resolve => {
     if (!texture.readPixels()) {
       resolve(null);
@@ -393,10 +391,12 @@ export const updateMaterial = inboundData => {
         currentTexture = material.metallicTexture;
       }
       const metallicBlob = dataUrlToBlob(texture.url);
-      Promise.all([loadImage(metallicBlob), textureToImage(currentTexture)]).then(data => {
+      Promise.all([loadImage(metallicBlob), metallicTextureToImage(currentTexture)]).then(data => {
         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,
@@ -434,10 +434,12 @@ export const updateMaterial = inboundData => {
         currentTexture = material.metallicTexture;
       }
       const roughnessBlob = dataUrlToBlob(texture.url);
-      Promise.all([loadImage(roughnessBlob), textureToImage(currentTexture)]).then(data => {
+      Promise.all([loadImage(roughnessBlob), metallicTextureToImage(currentTexture)]).then(data => {
         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/dist/helpers/initHelpers.js

@@ -42,7 +42,7 @@ const resizeEngine = () => engine?.resize();
 export const initSceneObjects = () => {
   initCamera();
   initLights();
-  initHighlightManagers();
+  if (!props.previewMode) initHighlightManagers();
   if (!props.previewMode) initGridGround();
   initMirrorGround();
   initGizmos();

package/dist/helpers/utilityHelpers.js

@@ -25,6 +25,7 @@ export const serializeScene = () => {
   return serializedData;
 };
 export const addHighlightExclusion = mesh => {
+  if (props.previewMode) return;
   highlightManager.addExcludedMesh(mesh);
   hoverHighlightManager.addExcludedMesh(mesh);
 };

package/dist/helpers/viewportHelpers.js

@@ -92,6 +92,7 @@ const removeSelectedMesh = selectedMesh => {
 };
 const addHoverMesh = pickedMesh => {
   if (props.integration?.meshHighlighting === false) return;
+  if (props.previewMode) return;
   const isSelected = selectedMeshes.includes(pickedMesh);
   removeHoverMesh();
   if (isSelected) {
@@ -107,6 +108,7 @@ const addHoverMesh = pickedMesh => {
 };
 const removeHoverMesh = () => {
   if (props.integration?.meshHighlighting === false) return;
+  if (props.previewMode) return;
   hoverHighlightManager.removeAllMeshes();
   if (tempMesh) {
     highlightManager.addMesh(tempMesh, highlightColor());

package/package.json

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

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,12 +211,12 @@ const updateTextureChannel = (imageToMaintain, newImage, channelToUpdate) => {
     const combinedData = combinedImageData.data;
 
     for (let i = 0; i < combinedData.length; i += 4) {
-        const maintainRed = maintainData ? maintainData[i] : 0;
+        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] : 0;
+        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;
@@ -231,7 +230,6 @@ const updateTextureChannel = (imageToMaintain, newImage, channelToUpdate) => {
     ctx.putImageData(combinedImageData, 0, 0);
 
     return canvas.toDataURL('image/png');
-
 };
 
 // eslint-disable-next-line
@@ -253,7 +251,7 @@ const loadImage = async file => {
     });
 };
 
-const textureToImage = texture => {
+const metallicTextureToImage = texture => {
     return new Promise(resolve => {
         if (!texture.readPixels()) {
             resolve(null);
@@ -449,12 +447,14 @@ export const updateMaterial = inboundData => {
 
           Promise.all([
               loadImage(metallicBlob),
-              textureToImage(currentTexture),
+              metallicTextureToImage(currentTexture),
           ])
           .then(data => {
               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 });
@@ -490,11 +490,13 @@ export const updateMaterial = inboundData => {
 
           const roughnessBlob = dataUrlToBlob(texture.url);
 
-          Promise.all([ loadImage(roughnessBlob), textureToImage(currentTexture) ])
+          Promise.all([ loadImage(roughnessBlob), metallicTextureToImage(currentTexture) ])
           .then(data => {
               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/package/helpers/gizmoHelpers.js

@@ -140,6 +140,7 @@ export const createBoundingMesh = () => {
   boundingMesh.position = nodeLocation || newVector(1, 1, 1);
   boundingMesh.isPickable = false;
 
+
   addHighlightExclusion(boundingMesh);
 
   return boundingMesh;

package/src/package/helpers/initHelpers.js

@@ -86,7 +86,7 @@ const resizeEngine = () => engine?.resize();
 export const initSceneObjects = () => {
   initCamera();
   initLights();
-  initHighlightManagers();
+  if (!props.previewMode) initHighlightManagers();
   if (!props.previewMode) initGridGround();
   initMirrorGround();
   initGizmos();

package/src/package/helpers/utilityHelpers.js

@@ -55,6 +55,7 @@ export const serializeScene = () => {
 };
 
 export const addHighlightExclusion = mesh => {
+  if (props.previewMode) return;
   highlightManager.addExcludedMesh(mesh);
   hoverHighlightManager.addExcludedMesh(mesh);
 };

package/src/package/helpers/viewportHelpers.js

@@ -135,6 +135,7 @@ const removeSelectedMesh = selectedMesh => {
 
 const addHoverMesh = pickedMesh => {
   if (props.integration?.meshHighlighting === false) return;
+  if (props.previewMode) return;
 
   const isSelected = selectedMeshes.includes(pickedMesh);
 
@@ -156,6 +157,7 @@ const addHoverMesh = pickedMesh => {
 
 const removeHoverMesh = () => {
   if (props.integration?.meshHighlighting === false) return;
+  if (props.previewMode) return;
 
   hoverHighlightManager.removeAllMeshes();
 

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}