Added progressive streaming

controllers/stream/views/index.jade

@@ -7,6 +7,7 @@ block extrajs
     script params = {}; params.get= {}; params.get.res = #{resolution}
     script(src="/static/js/three.min.js")
     script(src="/static/js/threetools.min.js")
+    script(src="/static/js/socket.io.min.js")
     script(src="/static/js/streamingsimulator.min.js")
 
 block content

js/Camera.js

@@ -12,8 +12,8 @@ var Camera = function() {
 Camera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
 
 // Update function
-Camera.prototype.update = function() {
-    this.theta += 0.01;
+Camera.prototype.update = function(time) {
+    this.theta += 0.01 * time / 20;
     this.position.x = Camera.DISTANCE_X*Math.cos(this.theta);
     this.position.y = Camera.DISTANCE_X*Math.sin(this.theta);
 }

js/Makefile

@@ -6,7 +6,12 @@ else
 	CLOSURE=./compiler.sh
 endif
 
-all: Three Stats ThreeTools Bouncing Multisphere StreamingSimulator PrototypeTools PrototypeReplay PrototypeInteractive Tutorial
+all: Socket Three Stats ThreeTools Bouncing Multisphere StreamingSimulator PrototypeTools PrototypeReplay PrototypeInteractive Tutorial
+
+Socket:
+	cp socket.io/socket.io.min.js ../static/js
+	$(CLOSURE) $(OPT) \
+		--js ProgressiveLoader.js >> ../static/js/socket.io.min.js
 
 Three:
 	cp three/three.min.js ../static/js/

js/ProgressiveLoader.js

@@ -0,0 +1,68 @@
+var ProgressiveLoader = function(res, scene) {
+    // Create mesh
+    var geometry = new THREE.Geometry();
+    geometry.dynamic = true;
+    var material = new THREE.MeshLambertMaterial();
+    material.color.setRGB(1,0,0);
+    material.side = THREE.DoubleSide;
+    var mesh = new THREE.Mesh(geometry, material);
+    mesh.up = new THREE.Vector3(0,0,1);
+    var added = false;
+
+    var socket = io();
+
+    socket.emit('request', res);
+
+    socket.on('vertex', function(arr) {
+        mesh.geometry.vertices[arr[0]] = new THREE.Vector3(arr[1], arr[2], arr[3]);
+        mesh.geometry.verticesNeedUpdate = true;
+    });
+
+    socket.on('face', function(arr) {
+        mesh.geometry.faces.push(new THREE.Face3(arr[0], arr[1], arr[2]));
+
+        if (arr[0] >= mesh.geometry.vertices.length
+            || arr[1] >= mesh.geometry.vertices.length
+            || arr[2] >= mesh.geometry.vertices.length) {
+
+            console.log("Error");
+        }
+
+        if (arr[3])
+            mesh.geometry.faces.push(new THREE.Face3(arr[0], arr[2], arr[3]));
+
+        if (!added) {
+            scene.add(mesh);
+            added = true;
+        }
+
+        // Compute the normal
+
+        mesh.geometry.computeFaceNormals();
+        mesh.geometry.verticesNeedUpdate = true;
+        mesh.geometry.groupsNeedUpdate = true;
+        mesh.geometry.elementsNeedUpdate = true;
+        mesh.geometry.normalsNeedUpdate = true;
+
+        if (mesh.faceNumber && mesh.faceNumber === mesh.geometry.faces.length) {
+            console.log("Finished");
+        }
+    });
+
+    socket.on('finished', function(arg) {
+        mesh.faceNumber = arg;
+        //mesh.geometry.computeFaceNormals();
+        mesh.geometry.verticesNeedUpdate = true;
+        mesh.geometry.groupsNeedUpdate = true;
+        mesh.geometry.elementsNeedUpdate = true;
+        mesh.geometry.morphTargetsNeedUpdate = true;
+        mesh.geometry.uvsNeedUpdate = true;
+        mesh.geometry.normalsNeedUpdate = true;
+        mesh.geometry.colorsNeedUpdate = true;
+        mesh.geometry.tangentsNeedUpdate = true;
+
+        // scene.add(mesh);
+    });
+
+    return mesh;
+}

js/stream/main.js

@@ -5,7 +5,7 @@ var raycaster;
 var objects = [];
 var spheres = new Array(mesh_number);
 var visible = 0;
-
+var previousTime;
 var loader;
 
 var container_size = {width: 1067, height: 600};
@@ -42,11 +42,10 @@ function init() {
     scene.add(camera);
 
     window.addEventListener('resize', onWindowResize, false);
-    container.addEventListener('mousedown', function() { } , false);
 
     // Load the scene
-    loader = new THREE.OBJLoader();
-    sphere = new ProgessiveSphere(loader, params.get.res);
+    // loader = new THREE.OBJLoader();
+    sphere = ProgressiveLoader(params.get.res, scene);
 
     plane = new Plane(1000,1000);
     plane.translate(0,0,-100);
@@ -58,10 +57,12 @@ function animate() {
     // on appelle la fonction animate() récursivement à chaque frame
     requestAnimationFrame(animate);
 
-    camera.update();
+    var currentTime = Date.now() - previousTime;
+    camera.update(isNaN(currentTime) ? 20 : currentTime);
+    previousTime = Date.now();
     camera.look();
 
-    sphere.addFace();
+    // sphere.addFace();
 
     renderer.render(scene, camera);
 }

package.json

@@ -7,7 +7,9 @@
         "pg": "4.3.0",
         "body-parser": "1.12.4",
         "cookie-parser": "1.3.4",
-        "cookie-session": "1.1.0"
+        "cookie-session": "1.1.0",
+        "socket.io": "1.3.5",
+        "sleep": "2.0.0"
     },
     "repository": {
         "type": "git",

server.js

@@ -7,6 +7,12 @@ var pg = require('pg');
 var secret = require('./private');
 
 var app = express();
+
+// Socket.io initialization
+var http = require('http').Server(app);
+var io = require('socket.io')(http);
+require('./socket.js')(io);
+
 var bodyParser = require('body-parser');
 var session = require('cookie-session');
 var cookieParser = require('cookie-parser');
@@ -91,5 +97,6 @@ if ( app.get('env') === 'development' ) {
 }
 
 // Start server
-console.log("Server ready : now listening " + server_ip_address + ":" + server_port);
-app.listen(server_port, server_ip_address);
+http.listen(server_port, server_ip_address, function(){
+    console.log("Server ready : now listening " + server_ip_address + ":" + server_port);
+});

views/withjs.jade

@@ -3,4 +3,5 @@ extends ./main
 block js
     script(src="/static/js/three.min.js")
     script(src="/static/js/stats.min.js")
+    script(src="/static/js/socket.io.min.js")
     script(src="/static/js/threetools.min.js")