Merge pull request #21 from Shopify/mv-1.2.1

Bump to ModelViewer 1.2.1

Author: tylerrowsell

dev.yml

@@ -6,7 +6,7 @@ type: node
 up:
   - railgun
   - node:
-      version: v8.16.0
+      version: v14.3.0
       yarn: true
       packages:
         - .

package.json

@@ -11,8 +11,9 @@
   "author": "Stephan Leroux <stephan.leroux@shopify.com>",
   "license": "MIT",
   "dependencies": {
-    "@google/model-viewer": "^0.8.0",
-    "puppeteer": "^2.1.1",
+    "@google/model-viewer": "^1.2.1",
+    "mime-types": "^2.1.27",
+    "puppeteer": "^5.3.1",
     "yargs": "^13.3.0"
   }
 }

src/cli.js

@@ -8,10 +8,13 @@ const FileServer = require('./file-server');
 
 const startBrowser = require('./start-browser')
 const loadGLBAndScreenshot = require('./load-glb-and-screenshot');
+const scrubOutput = require('./scrub-output');
+const colors = require('./colors.js')
 
 const argv = require('yargs')
   .alias('i', 'input')
   .alias('o', 'output')
+  .alias('c', 'color')
   .alias('w', 'width')
   .alias('h', 'height')
   .alias('f', 'image_format')
@@ -20,11 +23,12 @@ const argv = require('yargs')
   .count('verbose')
   .alias('v', 'verbose')
   .describe('i', 'Input glTF 2.0 binary (GLB) filepath')
-  .describe('o', 'Output PNG screenshot filepath')
+  .describe('o', 'Output screenshot filepath')
   .describe('w', 'Output image width')
   .describe('h', 'Output image height')
   .describe('f', 'Output image format (defaults to \'image/png\')')
   .describe('q', 'Quality of the output image (defaults to 0.92)')
+  .describe('c', 'Output image background color (defaults to transparent, accepts HEX or RGB)')
   .describe('t', 'Timeout length')
   .describe('v', 'Enable verbose logging')
   .demandOption(['i', 'o'])
@@ -71,9 +75,11 @@ function copyModelViewer(){
 
   const width = argv.width || 1024;
   const height = argv.height || 1024;
-  const format = argv.image_format || 'image/png';
   const quality = argv.image_quality || 0.92;
   const timeout = argv.timeout || 10000;
+  const [output, format] = scrubOutput(argv.output, argv.image_format)
+  const defaultBackgroundColor = (format === 'image/jpeg' ? colors.white : colors.transparent);
+  const backgroundColor = argv.color || defaultBackgroundColor;
 
   const {page, browser} = await startBrowser({width, height, libPort: libServer.port});
 
@@ -91,7 +97,7 @@ function copyModelViewer(){
   process_status = 0;
 
   try {
-    await loadGLBAndScreenshot(page, { glbPath, outputPath: argv.output, format, quality, timeout });
+    await loadGLBAndScreenshot(page, { glbPath, outputPath: output, backgroundColor, format, quality, timeout });
     t3 = performance.now();
     INFO("--- Took snapshot of", argv.input, `(${timeDelta(t2, t3)} s)`);
   } catch (err) {

src/colors.js

@@ -0,0 +1,4 @@
+module.exports = {
+  white: 'rgba(255, 255, 255, 100)',
+  transparent: 'rgba(255, 255, 255, 0)',
+}

src/load-glb-and-screenshot.js

@@ -1,5 +1,6 @@
-module.exports = (page, {glbPath, outputPath, format, quality, timeout}) => {
-  return page.evaluate((browser_glbPath, browser_outputPath, browser_format, browser_quality, timeout) => {
+const colors = require('./colors')
+module.exports = (page, {glbPath, outputPath, backgroundColor, format, quality, timeout}) => {
+  return page.evaluate((browser_glbPath, browser_outputPath, backgroundColor, image_format, browser_quality, timeout, colors) => {
     return new Promise((resolve, reject) => {
       var startTime = Number(new Date());
       var endTime = startTime + timeout;
@@ -13,16 +14,48 @@ module.exports = (page, {glbPath, outputPath, format, quality, timeout}) => {
         }
       }
 
-      modelViewer = document.getElementById('snapshot-viewer');
-      timeoutSet = setInterval(isTimedOut, 1000);
+      const rafAsync = function() {
+        return new Promise(resolve => {
+            requestAnimationFrame(resolve);
+        });
+      }
+
+      const checkElementExists = async function(element) {
+        while (element === null) {
+            await rafAsync()
+        }
+        return element;
+      }  
+
+      const modelViewerCanvas = async function(resolveCanvas){
+        checkElementExists(modelViewer.shadowRoot)
+        const srcCanvas = modelViewer.shadowRoot.getElementById('webgl-canvas');
+        checkElementExists(srcCanvas)
+        if(backgroundColor === colors.transparent){
+          resolveCanvas(srcCanvas);
+        }
+        const destinationCanvas = document.createElement("canvas");
+        destinationCanvas.width = srcCanvas.width;
+        destinationCanvas.height = srcCanvas.height;
+
+        const destCtx = destinationCanvas.getContext('2d');
+        destCtx.fillStyle = backgroundColor;
+        destCtx.fillRect(0,0,srcCanvas.width,srcCanvas.height);
+        
+        destCtx.drawImage(srcCanvas, 0, 0);
 
-      modelViewer.addEventListener('model-visibility', function(){
+        
+        resolveCanvas(destinationCanvas);
+      }
+
+      const modelViewerVisibleCallback = async function (event){
         try {
           const visible = event.detail.visible;
           if(visible){
             let t0 = Number(new Date());
+            const canvas = await new Promise(modelViewerCanvas)
             window.saveDataUrl(
-              modelViewer.toDataURL(browser_format, browser_quality),
+              canvas.toDataURL(image_format, browser_quality),
               browser_outputPath,
             );
 
@@ -37,8 +70,13 @@ module.exports = (page, {glbPath, outputPath, format, quality, timeout}) => {
         } catch(err) {
           reject(err);
         }
-      });
+      }
+
+      modelViewer = document.getElementById('snapshot-viewer');
+      timeoutSet = setInterval(isTimedOut, 1000);
+
+      modelViewer.addEventListener('model-visibility', modelViewerVisibleCallback)
       modelViewer.src = browser_glbPath;
     });
-  }, glbPath, outputPath, format, quality, timeout);
+  }, glbPath, outputPath, backgroundColor, format, quality, timeout, colors);
 }

src/scrub-output.js

@@ -0,0 +1,22 @@
+const mime = require('mime-types');
+const path = require('path');
+
+const appendExtension = function(output, format){
+  const extension = mime.extension(format);
+  return `${output}.${extension}`
+}
+
+const validExtension = function(extension, format){
+  const mimeType = mime.lookup(extension);
+  if(mimeType !== format){
+    throw new Error(`Output filetype is not valid provided format. Output file extension (${extension}) should have mimeType: ${mimeType}`);
+  }
+  return true;
+}
+
+module.exports = (output, imageFormat) => {
+  const format = imageFormat || mime.lookup(output) || 'image/png'
+  const extension = path.extname(output);
+  if(extension && validExtension(extension, format)) return [output, format];
+  return [appendExtension(output, format), format]
+}