Added progress bar

controllers/prototype/views/prototype.jade

@@ -17,6 +17,10 @@ block content
     #main-div.panel-group(style={'margin-top':'10px', 'margin-bottom':'10px'})
         block description
         #alert-placeholder
+        .progress
+            .progress-bar.progress-bar-striped.active(role='progress-bar', aria-valuenow='0',aria-valuemin="0", aria-valuemax="100", style={width:'0%'})
+                #percentage 0%
+
         div(style="margin:5px")
         #container(style={'padding': '0px', 'margin': '0px'}, tabindex="1")
 

geo/MeshContainer.js

@@ -38,6 +38,12 @@ geo.MeshContainer = function(path, callback) {
      */
     this.texCoords = [];
 
+    /**
+     * Number of elements to stream in the mesh
+     * @type {Number}
+     */
+    this.numberOfElements = -1;
+
     this.callback = callback;
 
     if (path !== undefined) {
@@ -69,6 +75,8 @@ geo.MeshContainer.prototype.loadFromFile = function(path) {
 
             if (line[0] === 'v') {
 
+                self.numberOfElements++;
+
                 if (line[1] === 't') {
 
                     // Texture coord
@@ -101,6 +109,8 @@ geo.MeshContainer.prototype.loadFromFile = function(path) {
 
             } else if (line[0] === 'f') {
 
+                self.numberOfElements++;
+
                 // Create mesh if it doesn't exist
                 if (currentMesh === undefined) {
                     currentMesh = new geo.Mesh();
@@ -124,6 +134,8 @@ geo.MeshContainer.prototype.loadFromFile = function(path) {
 
             } else if (line[0] === 'u') {
 
+                self.numberOfElements++;
+
                 // usemtl
                 // If a current mesh exists, finish it
 

geo/MeshStreamer.js

@@ -253,6 +253,9 @@ geo.MeshStreamer.prototype.nextMaterials = function() {
 
     var data = [];
 
+    data.push(['g', this.mesh.numberOfElements]);
+
+
     for (var i = 0; i < this.mesh.meshes.length; i++) {
 
         var currentMesh = this.mesh.meshes[i];

js/l3d/src/loaders/ProgressiveLoader.js

@@ -65,6 +65,12 @@ var _parseList = function(arr) {
         ret.texCoordsExist = arr[4];
         ret.normalsExist = arr[5];
 
+    } else if (arr[0] === 'g') {
+
+        ret.type = "global";
+        ret.index = null;
+        ret.numberOfElements = arr[1];
+
     }
 
     return ret;
@@ -81,7 +87,7 @@ var _parseList = function(arr) {
  * @constructor
  * @memberOf L3D
  */
-var ProgressiveLoader = function(path, scene, camera, callback) {
+var ProgressiveLoader = function(path, scene, camera, callback, log) {
 
     /**
      * Path to the .obj file
@@ -178,6 +184,27 @@ var ProgressiveLoader = function(path, scene, camera, callback) {
      */
     this.camera = camera;
 
+
+    /**
+     * Number of total elements for loading
+     * @type{Number}
+     */
+    this.numberOfElements = -1;
+
+    /**
+     * Number of elements received
+     * @type {Number}
+     */
+    this.numberOfElementsReceived = -1;
+
+    /**
+     * Modulus indicator (not to log too often)
+     * @type {Number}
+     */
+    this.modulus = 150;
+
+    this.log = log;
+
 };
 
 /**
@@ -216,26 +243,19 @@ ProgressiveLoader.prototype.initIOCallbacks = function() {
     var self = this;
 
     this.socket.on('ok', function() {
-        console.log('ok');
         self.socket.emit('materials');
     });
 
     this.socket.on('elements', function(arr) {
 
-        if (arr.length === 0) {
-
-            console.log("Empty array");
-
-        } else {
-
-            console.log("Stuff received");
-
-        }
-
-
-        // console.log("Received elements for the " + (++self.counter) + "th time !");
         for (var i = 0; i < arr.length; i++) {
 
+            self.numberOfElementsReceived++;
+
+            if (typeof self.log === 'function' && self.numberOfElementsReceived % self.modulus === 0) {
+                self.log(self.numberOfElementsReceived, self.numberOfElements);
+            }
+
             var elt = _parseList(arr[i]);
 
             // console.log(elts);
@@ -346,6 +366,11 @@ ProgressiveLoader.prototype.initIOCallbacks = function() {
                 }
 
 
+            } else if (elt.type === 'global') {
+
+                self.numberOfElements = elt.numberOfElements;
+                self.modulus = Math.floor(self.numberOfElements / 200);
+
             }
 
         }
@@ -356,6 +381,7 @@ ProgressiveLoader.prototype.initIOCallbacks = function() {
 
     this.socket.on('disconnect', function() {
         console.log('Finished !');
+        self.log(self.numberOfElements, self.numberOfElements);
         self.finished = true;
     });
 };

js/l3d/src/scenes/initScene.js

@@ -1,3 +1,9 @@
+L3D.LogFunction = function(a,b) {
+    var val = 100*a/b;
+    $('.progress-bar').css('width', val+'%').attr('aria-valuenow', val);
+    $('#percentage').html(Math.floor(10*val)/10 + '%');
+}
+
 L3D.addLight = function(scene) {
     var directional_light = new THREE.DirectionalLight(0xdddddd);
     directional_light.position.set(1, 2.5, 1).normalize();
@@ -25,7 +31,8 @@ L3D.initPeachCastle = function(scene, collidableObjects, recommendation) {
                 object.raycastable = false;
                 object.material.side = THREE.FrontSide;
             }
-        }
+        },
+        L3D.LogFunction
     );
     loader.load();
 
@@ -161,7 +168,8 @@ L3D.initBobombScene = function(scene, collidableObjects, recommendation) {
                 object.material.name === 'Material.070_41A41EE3_c.bmp') {
                 THREEx.Transparency.push(object);
             }
-        }
+        },
+        L3D.LogFunction
     );
 
     loader.load();
@@ -314,7 +322,8 @@ L3D.initWhompScene = function(scene, collidableObjects, recommendation) {
                 object.visible = false;
             }
 
-        }
+        },
+        L3D.LogFunction
     );
 
     loader.load();
@@ -489,7 +498,8 @@ L3D.initMountainScene = function(scene, collidableObjects, recommendation) {
                 THREEx.Transparency.push(object);
                 object.material.opacity = 0.5;
             }
-        }
+        },
+        L3D.LogFunction
     );
 
     loader.load();
@@ -631,15 +641,16 @@ L3D.initSponzaScene = function(scene, collidableObjects, recommendation) {
 
             obj.raycastable = true;
 
-        }
+        },
+        L3D.LogFunction
     );
 
     l = loader;
     loader.load();
 
 
-    loader.getRecommendation = function() {
+    loader.getCamera = function() {
-        var ret = loader.recommendation.toList();
+        var ret = loader.camera.toList();
         ret[0][0] *= 10;
         ret[0][1] *= 10;
         ret[0][2] *= 10;

js/three/OBJLoader.js

@@ -28,7 +28,7 @@ THREE.OBJLoader.prototype = {
 
 	parse: function ( text ) {
 
-		console.time( 'OBJLoader' );
+		// console.time( 'OBJLoader' );
 
 		var object, objects = [];
 		var geometry, material;
@@ -363,7 +363,7 @@ THREE.OBJLoader.prototype = {
 
 		}
 
-		console.timeEnd( 'OBJLoader' );
+		// console.timeEnd( 'OBJLoader' );
 
 		return container;