@archvisioninc/canvas 2.8.7 → 3.0.0

package/README.md

@@ -1,2 +1,2 @@
-## GET STARTED
+## GET STARTED
 Please see [developer documentation](https://github.com/ArchvisionInc/archvision-canvas/blob/main/README_DEV.md), in the repository.

package/dist/helpers/canvasUpdateHelpers.js

@@ -139,6 +139,102 @@ const applyUVSettings = args => {
     texture.vScale = uvYScale;
   }
 };
+
+// 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 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;
+  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;
+  }
+  ctx.putImageData(combinedImageData, 0, 0);
+  return canvas.toDataURL('image/png');
+};
+
+// eslint-disable-next-line
+const loadImage = async file => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = event => {
+      const img = new Image();
+      img.onload = () => {
+        resolve(img);
+      };
+      img.onerror = reject;
+      img.src = event.target.result;
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+};
+const textureToImage = (texture, textureName) => {
+  return new Promise((resolve, reject) => {
+    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 = event => {
+        console.log(`Error loading image: ${textureName}`);
+        reject(event);
+      };
+      img.src = canvas.toDataURL();
+    });
+  });
+};
+const dataUrlToBlob = dataURI => {
+  // convert base64 to raw binary data held in a string
+  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
+  const byteString = atob(dataURI.split(',')[1]);
+
+  // separate out the mime component
+  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+
+  // write the bytes of the string to an ArrayBuffer
+  const ab = new ArrayBuffer(byteString.length);
+
+  // create a view into the buffer
+  const ia = new Uint8Array(ab);
+
+  // set the bytes of the buffer to the correct values
+  for (let i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i);
+  }
+
+  // write the ArrayBuffer to a blob, and you're done
+  const blob = new Blob([ab], {
+    type: mimeString
+  });
+  return blob;
+};
 export const updateMaterial = inboundData => {
   const {
     payload
@@ -158,6 +254,7 @@ export const updateMaterial = inboundData => {
     metallic,
     metallicTexture,
     roughness,
+    roughnessTexture,
     microSurfaceTexture,
     emissiveColor,
     emissiveIntensity,
@@ -261,12 +358,24 @@ export const updateMaterial = inboundData => {
     // Metallic
     if (metallic !== undefined) material.metallic = metallic;
     if (!_.isEmpty(metallicTexture?.src || metallicTexture?.url)) {
-      material.metallicTexture = newTexture(metallicTexture?.src || metallicTexture?.url);
-      material.metallicTexture.name = metallicTexture.name;
-      applyUVSettings({
-        texture: material.metallicTexture,
-        material
-      });
+      // Metallic Texture uses the B channel of the metallicTexture for a PBRMaterial
+      const texture = newTexture(metallicTexture?.src || metallicTexture?.url);
+      let currentTexture = material.metallicTexture;
+      if (!currentTexture) {
+        material.metallicTexture = newTexture();
+        currentTexture = material.metallicTexture;
+      }
+      const metallicBlob = dataUrlToBlob(texture.url);
+      Promise.all([loadImage(metallicBlob), textureToImage(currentTexture, 'metallic')]).then(data => {
+        const [metallicImage, currentImage] = data;
+        const combinedTexture = combineMetallicRoughnessTextures(metallicImage, currentImage);
+        currentTexture.updateURL(combinedTexture);
+        texture.dispose();
+        applyUVSettings({
+          texture: material.metallicTexture,
+          material
+        });
+      }).catch(() => console.log(`Error updating the metallic texture of material: ${material.name}`));
     }
 
     // Roughness
@@ -279,6 +388,26 @@ export const updateMaterial = inboundData => {
         material
       });
     }
+    if (!_.isEmpty(roughnessTexture?.src || roughnessTexture?.url)) {
+      // Roughness Texture uses the G channel of the metallicTexture for a PBRMaterial
+      const texture = newTexture(roughnessTexture?.src || roughnessTexture?.url);
+      let currentTexture = material.metallicTexture;
+      if (!currentTexture) {
+        material.metallicTexture = newTexture();
+        currentTexture = material.metallicTexture;
+      }
+      const roughnessBlob = dataUrlToBlob(texture.url);
+      Promise.all([loadImage(roughnessBlob), textureToImage(currentTexture, 'metallic')]).then(data => {
+        const [roughnessImage, metallicImage] = data;
+        const combinedTexture = combineMetallicRoughnessTextures(metallicImage, roughnessImage);
+        currentTexture.updateURL(combinedTexture);
+        texture.dispose();
+        applyUVSettings({
+          texture: material.metallicTexture,
+          material
+        });
+      }).catch(() => console.log(`Error updating the roughness texture of material: ${material.name}`));
+    }
 
     // Emissive
     if (emissiveColor) material.emissiveColor = newColor(emissiveColor);

package/jsconfig.json

@@ -1,6 +1,6 @@
-{
-  "compilerOptions": {
-    "baseUrl": "src"
-  },
-  "include": ["src"]
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
 }

package/package.json

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

package/public/index.html

@@ -1,21 +1,21 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>React App</title>
-  </head>
-
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>React App</title>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

package/public/manifest.json

@@ -1,25 +1,25 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -1,3 +1,3 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/helpers/fetchHelpers.js

@@ -14,7 +14,7 @@ export const fetchDownloadURL = async args => {
     if (!_.isEmpty(rpcGuid)) {
       const servicesURL = `https://api.archvision.services/rpc/v1/integration/${rpcGuid}/download/${format}`;
       // eslint-disable-next-line
-      const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL2FyY2h2aXNpb24uY29tIiwic3ViIjozOTUxNTcsInRva2VuX3R5cGUiOiJiZWFyZXIiLCJzY29wZSI6ImJhc2ljIiwiYXVkIjoiNDVFUnF3SEV5SWRqbXhkaUU4MUxMbDlFYTN2SzZZQ3dLNWE2R2xEMyIsImlhdCI6MTcwOTY1MDM5OSwiZXhwIjoxNzE0ODM0Mzk5fQ.aCtOw3h-BTTiIEcvb0FeA_XhRpEmzQTfyerRUu4JGuU';
+      const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6IjE2MDAyMDc3ODQifQ.eyJpZCI6ImowbzVobDJkdXc5ZXZ4bXJubGIxZWh6a3lhYmJmN3d6ZzN3Z2g3c2kiLCJqdGkiOiJqMG81aGwyZHV3OWV2eG1ybmxiMWVoemt5YWJiZjd3emczd2doN3NpIiwiaXNzIjoiaHR0cHM6XC9cL2FyY2h2aXNpb24uY29tIiwiYXVkIjoiNDVFUnF3SEV5SWRqbXhkaUU4MUxMbDlFYTN2SzZZQ3dLNWE2R2xEMyIsInN1YiI6IjM5MDQxOSIsImV4cCI6MTc0ODI3ODEwNiwiaWF0IjoxNzE3MTc4MTA2LCJ0b2tlbl90eXBlIjoiYmVhcmVyIiwic2NvcGUiOiJiYXNpYyJ9.xKpX0xCEdoVpn-GGdmRWcMPp3pEa7PUbMxlhuAsNjL1ZoFIbxwTrAoXDnvozxjdxomxM7nFw05I1caGtfJARPipOSLFgzD1ANYvogmAImg1zXUV8RsHEVaApxhdwUS7IPO13K3QJMGmn-NgqpYly9ZF9XYxZ7twT4JneGmc_WzeairT9qqGLhKXuU_tkJ49tKAXfCSHAFFBkb93nnsrpd-RlsIeQnc7puTqxlKTREzvmW3_RdqO_1X9ohlnn3wWBEFo_a0W770lfWoF1JlJIqd9NIPrgVRG5inRmYNEz6gw5yLHcDDG-Z5DrQExVUJkYV81wBK2krr0AgX45CWTEdQ';
       const options = {
         method: 'GET',
         headers: {
@@ -42,4 +42,4 @@ export const fetchDownloadURL = async args => {
       clearExisting,
     );
   }
-};
+};

package/src/package/helpers/canvasUpdateHelpers.js

@@ -177,6 +177,119 @@ 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 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;
+
+    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;
+    }
+
+    ctx.putImageData(combinedImageData, 0, 0);
+
+    return canvas.toDataURL('image/png');
+
+};
+
+// eslint-disable-next-line
+const loadImage = async file => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = event => {
+            const img = new Image();
+            img.onload = () => {
+                resolve(img);
+            };
+            img.onerror = reject;
+            img.src = event.target.result;
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+};
+
+const textureToImage = (texture, textureName) => {
+    return new Promise((resolve, reject) => {
+        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 = event => {
+                console.log(`Error loading image: ${textureName}`);
+                reject(event);
+            };
+
+
+            img.src = canvas.toDataURL();
+        });
+
+    });
+};
+
+const dataUrlToBlob = dataURI => {
+  // convert base64 to raw binary data held in a string
+  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
+  const byteString = atob(dataURI.split(',')[1]);
+
+  // separate out the mime component
+  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+
+  // write the bytes of the string to an ArrayBuffer
+  const ab = new ArrayBuffer(byteString.length);
+
+  // create a view into the buffer
+  const ia = new Uint8Array(ab);
+
+  // set the bytes of the buffer to the correct values
+  for (let i = 0; i < byteString.length; i++) {
+      ia[i] = byteString.charCodeAt(i);
+  }
+
+  // write the ArrayBuffer to a blob, and you're done
+  const blob = new Blob([ ab ], { type: mimeString });
+  return blob;
+};
+
 export const updateMaterial = inboundData => {
   const { payload } = inboundData;
   const {
@@ -194,6 +307,7 @@ export const updateMaterial = inboundData => {
     metallic,
     metallicTexture,
     roughness,
+      roughnessTexture,
     microSurfaceTexture,
     emissiveColor,
     emissiveIntensity,
@@ -293,10 +407,26 @@ export const updateMaterial = inboundData => {
     // Metallic
     if (metallic !== undefined) material.metallic = metallic;
     if (!_.isEmpty(metallicTexture?.src || metallicTexture?.url)) {
-      material.metallicTexture = newTexture(metallicTexture?.src || metallicTexture?.url);
-      material.metallicTexture.name = metallicTexture.name;
+          // Metallic Texture uses the B channel of the metallicTexture for a PBRMaterial
+          const texture = newTexture(metallicTexture?.src || metallicTexture?.url);
+          let currentTexture = material.metallicTexture;
+          if (!currentTexture) {
+              material.metallicTexture = newTexture();
+              currentTexture = material.metallicTexture;
+          }
+
+          const metallicBlob = dataUrlToBlob(texture.url);
 
-      applyUVSettings({ texture: material.metallicTexture, material });
+          Promise.all([ loadImage(metallicBlob), textureToImage(currentTexture, 'metallic') ])
+          .then(data => {
+              const [ metallicImage, currentImage ] = data;
+              const combinedTexture = combineMetallicRoughnessTextures(metallicImage, currentImage);
+              currentTexture.updateURL(combinedTexture);
+
+              texture.dispose();
+              applyUVSettings({ texture: material.metallicTexture, material });
+          })
+          .catch(() => console.log(`Error updating the metallic texture of material: ${material.name}`));
     }
 
     // Roughness
@@ -308,6 +438,30 @@ export const updateMaterial = inboundData => {
       applyUVSettings({ texture: material.microSurfaceTexture, material });
     }
 
+      if (!_.isEmpty(roughnessTexture?.src || roughnessTexture?.url)) {
+          // Roughness Texture uses the G channel of the metallicTexture for a PBRMaterial
+          const texture = newTexture(roughnessTexture?.src || roughnessTexture?.url);
+          let currentTexture = material.metallicTexture;
+          if (!currentTexture) {
+              material.metallicTexture = newTexture();
+              currentTexture = material.metallicTexture;
+          }
+
+          const roughnessBlob = dataUrlToBlob(texture.url);
+
+          Promise.all([ loadImage(roughnessBlob), textureToImage(currentTexture, 'metallic') ])
+          .then(data => {
+              const [ roughnessImage, metallicImage ] = data;
+              const combinedTexture = combineMetallicRoughnessTextures(metallicImage, roughnessImage);
+              currentTexture.updateURL(combinedTexture);
+
+              texture.dispose();
+              applyUVSettings({ texture: material.metallicTexture, material });
+          })
+          .catch(() => console.log(`Error updating the roughness texture of material: ${material.name}`));
+
+      }
+
     // Emissive
     if (emissiveColor) material.emissiveColor = newColor(emissiveColor);
     if (emissiveIntensity !== undefined) material.emissiveIntensity = emissiveIntensity;
@@ -948,4 +1102,4 @@ export const updatePublish = inboundData => {
   };
 
   newMetaDataEntry('publish', withOptimizationValues);
-};
+};

package/src/scenes/App/App.js

@@ -9,7 +9,7 @@ import { updateMaterial, scene } from 'package/helpers';
 import Canvas from 'package/Canvas';
 import _ from 'lodash';
 
-const materialMode = true;
+const materialMode = false;
 const previewMode = false;
 const demoScene = false;
 const shaderballGuid = '21-791A-0D8D-F8A0-63F7-5086-471F-69A7-7AB0-00';
@@ -127,6 +127,24 @@ const App = () => {
     const updatedArray = notifications.filter((item, i) => index !== i);
     setNotifications(updatedArray);
   };
+    const onImageLoad = args => {
+        const inboundData = {
+            payload: {
+                id: 'Material Metal PBR Rich',
+                metallicTexture: args,
+            },
+        };
+
+        updateMaterial(inboundData);
+
+    };
+
+    const handleUpload = e => {
+        const file = e.currentTarget.files[0];
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => onImageLoad({ name: file.name, src: reader.result });
+    };
 
   useEffect(() => {
       getPreviewURL();
@@ -189,6 +207,8 @@ const App = () => {
           Import material
         </Button>
 
+      <input type={'file'} onChange={handleUpload} accept={'image/*'} />
+
         <Button
           theme={theme}
           $selectedTheme={selectedTheme}
@@ -249,4 +269,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;

package/src/scenes/App/App.test.js

@@ -1,8 +1,8 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

package/src/setupTests.js

@@ -1,5 +1,5 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';