Updated logging in our THREE.js example

- output to console
- needs to be explicitly enabled by settings a non-zero verbosity level

javascript/example/DRACOLoader.js

@@ -18,6 +18,7 @@ THREE.DRACOLoader = function(manager) {
     this.manager = (manager !== undefined) ? manager :
         THREE.DefaultLoadingManager;
     this.materials = null;
+    this.verbosity = 0;
 };
 
 
@@ -39,6 +40,10 @@ THREE.DRACOLoader.prototype = {
         this.path = value;
     },
 
+    setVerbosity: function(level) {
+        this.verbosity = level;
+    },
+
     decodeDracoFile: ( function() {
         let dracoDecoder;
 
@@ -63,12 +68,15 @@ THREE.DRACOLoader.prototype = {
            */
           const geometryType = wrapper.GetEncodedGeometryType(buffer);
           if (geometryType == dracoDecoder.TRIANGULAR_MESH) {
-            fileDisplayArea.innerText = "Loaded a mesh.\n";
+            if (this.verbosity > 0) {
+              console.log('Loaded a mesh.');
+            }
           } else if (geometryType == dracoDecoder.POINT_CLOUD) {
-            fileDisplayArea.innerText = "Loaded a point cloud.\n";
+            if (this.verbosity > 0) {
+              console.log('Loaded a point cloud.');
+            }
           } else {
-            const errorMsg = "Error: Unknown geometry type.";
+            console.error('THREE.DRACOLoader: Unknown geometry type.');
-            fileDisplayArea.innerText = errorMsg;
             throw new Error(errorMsg);
           }
           return scope.convertDracoGeometryTo3JS(wrapper, geometryType, buffer,
@@ -96,8 +104,9 @@ THREE.DRACOLoader.prototype = {
         let geometryInfoStr;
         if (geometryType == dracoDecoder.TRIANGULAR_MESH) {
           numFaces = dracoGeometry.num_faces();
-          geometryInfoStr += "Number of faces loaded: " + numFaces.toString()
+          if (this.verbosity > 0) {
-              + ".\n";
+            console.log('Number of faces loaded: ' + numFaces.toString());
+          }
         } else {
           numFaces = 0;
         }
@@ -105,17 +114,17 @@ THREE.DRACOLoader.prototype = {
         numVertexCoordinates = numPoints * 3;
         numTextureCoordinates = numPoints * 2;
         numAttributes = dracoGeometry.num_attributes();
-        geometryInfoStr = "Number of points loaded: " + numPoints.toString()
+        if (this.verbosity > 0) {
-            + ".\n";
+          console.log('Number of points loaded: ' + numPoints.toString());
-        geometryInfoStr += "Number of attributes loaded: " +
+          console.log('Number of attributes loaded: ' +
-            numAttributes.toString() + ".\n";
+              numAttributes.toString());
+        }
 
         // Get position attribute. Must exists.
         const posAttId = wrapper.GetAttributeId(dracoGeometry,
                                                 dracoDecoder.POSITION);
         if (posAttId == -1) {
-          const errorMsg = "No position attribute found in the mesh.";
+          console.error('THREE.DRACOLoader: No position attribute found.');
-          fileDisplayArea.innerText = errorMsg;
           dracoDecoder.destroy(wrapper);
           dracoDecoder.destroy(dracoGeometry);
           throw new Error(errorMsg);
@@ -129,7 +138,9 @@ THREE.DRACOLoader.prototype = {
                                                   dracoDecoder.COLOR);
         let colAttributeData;
         if (colorAttId != -1) {
-          geometryInfoStr += "\nLoaded color attribute.\n";
+          if (this.verbosity > 0) {
+            console.log('Loaded color attribute.');
+          }
           const colAttribute = wrapper.GetAttribute(dracoGeometry, colorAttId);
           colAttributeData = new dracoDecoder.DracoFloat32Array();
           wrapper.GetAttributeFloatForAllPoints(dracoGeometry, colAttribute,
@@ -141,7 +152,9 @@ THREE.DRACOLoader.prototype = {
             wrapper.GetAttributeId(dracoGeometry, dracoDecoder.NORMAL);
         let norAttributeData;
         if (normalAttId != -1) {
-          geometryInfoStr += "\nLoaded normal attribute.\n";
+          if (this.verbosity > 0) {
+            console.log('Loaded normal attribute.');
+          }
           const norAttribute = wrapper.GetAttribute(dracoGeometry, normalAttId);
           norAttributeData = new dracoDecoder.DracoFloat32Array();
           wrapper.GetAttributeFloatForAllPoints(dracoGeometry, norAttribute,
@@ -153,7 +166,9 @@ THREE.DRACOLoader.prototype = {
             wrapper.GetAttributeId(dracoGeometry, dracoDecoder.TEX_COORD);
         let textCoordAttributeData;
         if (texCoordAttId != -1) {
-          geometryInfoStr += "\nLoaded texture coordinate attribute.\n";
+          if (this.verbosity > 0) {
+            console.log('Loaded texture coordinate attribute.');
+          }
           const texCoordAttribute = wrapper.GetAttribute(dracoGeometry,
                                                          texCoordAttId);
           textCoordAttributeData = new dracoDecoder.DracoFloat32Array();
@@ -180,8 +195,10 @@ THREE.DRACOLoader.prototype = {
             // ThreeJS vertex colors need to be normalized to properly display
             if (colorAttId != -1) {
               geometryBuffer.colors[i] = colAttributeData.GetValue(i) / 255;
-              geometryBuffer.colors[i + 1] = colAttributeData.GetValue(i + 1) / 255;
+              geometryBuffer.colors[i + 1] =
-              geometryBuffer.colors[i + 2] = colAttributeData.GetValue(i + 2) / 255;
+                  colAttributeData.GetValue(i + 1) / 255;
+              geometryBuffer.colors[i + 2] =
+                  colAttributeData.GetValue(i + 2) / 255;
             } else {
               // Default is white. This is faster than TypedArray.fill().
               geometryBuffer.colors[i] = 1.0;
@@ -227,8 +244,6 @@ THREE.DRACOLoader.prototype = {
         dracoDecoder.destroy(wrapper);
         dracoDecoder.destroy(dracoGeometry);
 
-        fileDisplayArea.innerText += geometryInfoStr;
-
         // Import data to Three JS geometry.
         const geometry = new THREE.BufferGeometry();
         if (geometryType == dracoDecoder.TRIANGULAR_MESH) {
@@ -248,9 +263,13 @@ THREE.DRACOLoader.prototype = {
           geometry.addAttribute('uv',
               new THREE.Float32BufferAttribute(geometryBuffer.uvs, 2));
         }
-        fileDisplayArea.innerText += ' decode:' + (decode_end - start_time);
+        this.decode_time = decode_end - start_time;
-        fileDisplayArea.innerText +=
+        this.import_time = performance.now() - decode_end;
-            ' import:' + (performance.now() - decode_end);
+
+        if (this.verbosity > 0) {
+          console.log('Decode time: ' + this.decode_time);
+          console.log('Import time: ' + this.import_time);
+        }
         return geometry;
     }
 };

javascript/example/webgl_loader_draco.html

@@ -141,7 +141,13 @@
           const reader = new FileReader();
           reader.onload = function(e) {
             const dracoLoader = new THREE.DRACOLoader();
+            // Enable logging to console output.
+            dracoLoader.setVerbosity(1);
             const bufferGeometry = dracoLoader.decodeDracoFile(reader.result);
+            if (dracoLoader.decode_time !== undefined) {
+              fileDisplayArea.innerText = 'Decode time = ' + dracoLoader.decode_time + '\n' +
+                                          'Import time = ' + dracoLoader.import_time;
+            }
             const material = new THREE.MeshStandardMaterial({vertexColors: THREE.VertexColors});
 
             let geometry;