From bfca8ceab1ceed82c72126503bc02b4ed9b11bdf Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Wed, 17 Jun 2015 17:11:23 +0200 Subject: [PATCH] Now, only the part of the mesh in front of the camera is streamed The rest is definitly lost --- geo/Mesh.js | 4 +- geo/MeshStreamer.js | 88 +++++++++++++++++++++++++++++++-- js/ProgressiveLoader.js | 4 +- js/ProgressiveLoaderGeometry.js | 38 ++++++++------ js/prototype/initScene.js | 27 +++++----- 5 files changed, 130 insertions(+), 31 deletions(-) diff --git a/geo/Mesh.js b/geo/Mesh.js index e4174ef..aa5f060 100644 --- a/geo/Mesh.js +++ b/geo/Mesh.js @@ -223,8 +223,8 @@ mesh.Face.prototype.maxTexture = function() { } } -mesh.Face.prototype.toList = function() { - var l = ['f', this.index, +mesh.Face.prototype.toList = function(parameter) { + var l = ['f', this.index, parameter, [this.a, this.b, this.c ], isNaN(this.aTexture) ? [] : [this.aTexture, this.bTexture, this.cTexture], isNaN(this.aNormal ) ? [] : [this.aNormal, this.bNormal, this.cNormal ] diff --git a/geo/MeshStreamer.js b/geo/MeshStreamer.js index 423ad89..60074bc 100644 --- a/geo/MeshStreamer.js +++ b/geo/MeshStreamer.js @@ -112,6 +112,7 @@ geo.MeshStreamer.prototype.loadFromFile = function(path, callback) { if (typeof callback === 'function') { callback(); } + }); } @@ -138,7 +139,31 @@ geo.MeshStreamer.prototype.start = function(socket) { }); - socket.on('next', function() { + socket.on('next', function(_camera) { + + var camera = { + position: { + x: _camera[0]*10, + y: _camera[1]*10, + z: _camera[2]*10 + }, + target: { + x: _camera[3]*10, + y: _camera[4]*10, + z: _camera[5]*10 + } + } + + var direction = { + x: camera.target.x - camera.position.x, + y: camera.target.y - camera.position.y, + z: camera.target.z - camera.position.z + } + + var norm = direction.x * direction.x + direction.y * direction.y + direction.z * direction.z; + direction.x /= norm; + direction.y /= norm; + direction.z /= norm; // Send next elements var currentMesh = self.meshes[self.meshIndex]; @@ -148,7 +173,8 @@ geo.MeshStreamer.prototype.start = function(socket) { var sent = 0; - while (sent < 500) { + while (sent < 100) { + if (currentMesh.faceIndex === -1) { @@ -172,6 +198,7 @@ geo.MeshStreamer.prototype.start = function(socket) { } data.push(['u', currentMesh.material, currentMesh.vertices.length, currentMesh.faces.length, self.texCoords.length > 0, self.normals.length > 0]); + currentMesh.faceIndex++; sent++; continue; @@ -181,6 +208,14 @@ geo.MeshStreamer.prototype.start = function(socket) { if (currentFace === undefined) { + currentMesh = self.meshes[++self.meshIndex]; + + if (currentMesh === undefined) { + socket.emit('elements', data); + socket.disconnect(); + return; + + } continue; } @@ -191,6 +226,50 @@ geo.MeshStreamer.prototype.start = function(socket) { var vertex2 = self.vertices[currentFace.b]; var vertex3 = self.vertices[currentFace.c]; + var v1 = { + x: vertex1.x - camera.position.x, + y: vertex1.y - camera.position.y, + z: vertex1.z - camera.position.z + }; + + var v2 = { + x: vertex2.x - camera.position.x, + y: vertex2.y - camera.position.y, + z: vertex2.z - camera.position.z + }; + + var v3 = { + x: vertex3.x - camera.position.x, + y: vertex3.y - camera.position.y, + z: vertex3.z - camera.position.z + }; + + norm = v1.x * v1.x + v1.y * v1.y + v1.z * v1.z; + v1.x /= norm; + v1.y /= norm; + v1.z /= norm; + + norm = v2.x * v2.x + v2.y * v2.y + v2.z * v2.z; + v2.x /= norm; + v2.y /= norm; + v2.z /= norm; + + norm = v3.x * v3.x + v3.y * v3.y + v3.z * v3.z; + v3.x /= norm; + v3.y /= norm; + v3.z /= norm; + + if ( + direction.x * v1.x + direction.y * v1.y + direction.z * v1.z < 0 && + direction.x * v2.x + direction.y * v2.y + direction.z * v2.z < 0 && + direction.x * v3.x + direction.y * v3.y + direction.z * v3.z < 0 + ) { + + currentFace.sent = false; + continue; + + } + if (!vertex1.sent) { data.push(vertex1.toList()); vertex1.sent = true; sent++;} if (!vertex2.sent) { data.push(vertex2.toList()); vertex2.sent = true; sent++;} if (!vertex3.sent) { data.push(vertex3.toList()); vertex3.sent = true; sent++;} @@ -213,10 +292,13 @@ geo.MeshStreamer.prototype.start = function(socket) { currentFace.index = currentMesh.faceIndex; - data.push(currentFace.toList()); currentFace.sent = true; + + data.push(currentFace.toList(self.meshIndex)); currentFace.sent = true; sent++; } + // console.log(self.meshIndex); + // console.log(data); // Emit self.chunk faces (and the corresponding vertices if not emitted) socket.emit('elements', data); diff --git a/js/ProgressiveLoader.js b/js/ProgressiveLoader.js index 7ba34af..3a97b4f 100644 --- a/js/ProgressiveLoader.js +++ b/js/ProgressiveLoader.js @@ -63,7 +63,7 @@ var _parseList = function(arr) { return ret; } -var ProgressiveLoader = function(path, scene, callback) { +var ProgressiveLoader = function(path, scene, camera, callback) { // Init attributes this.objPath = path.substring(1, path.length); this.texturesPath = path.substring(0, path.lastIndexOf('/')) + '/'; @@ -87,6 +87,8 @@ var ProgressiveLoader = function(path, scene, callback) { this.socket = io(); this.initIOCallbacks(); + this.camera = camera; + } ProgressiveLoader.prototype.load = function() { diff --git a/js/ProgressiveLoaderGeometry.js b/js/ProgressiveLoaderGeometry.js index cf8e558..a0e1233 100644 --- a/js/ProgressiveLoaderGeometry.js +++ b/js/ProgressiveLoaderGeometry.js @@ -1,4 +1,4 @@ -var _parseList = function(arr) { +var _parseList2 = function(arr) { var ret = {}; ret.index = arr[1]; @@ -14,11 +14,12 @@ var _parseList = function(arr) { ret.y = arr[3]; } else if (arr[0] === 'f') { ret.type = 'face'; + ret.mesh = arr[2]; // Only Face3 are allowed - vertexIndices = arr[2]; - textureIndices = arr[3]; - normalIndices = arr[4]; + vertexIndices = arr[3]; + textureIndices = arr[4]; + normalIndices = arr[5]; // Vertex indices ret.a = vertexIndices[0]; @@ -63,7 +64,7 @@ var _parseList = function(arr) { return ret; } -var ProgressiveLoaderGeometry = function(path, scene, callback) { +var ProgressiveLoaderGeometry = function(path, scene, camera, callback) { // Init attributes this.objPath = path.substring(1, path.length); this.texturesPath = path.substring(0, path.lastIndexOf('/')) + '/'; @@ -88,6 +89,8 @@ var ProgressiveLoaderGeometry = function(path, scene, callback) { this.socket = io(); this.initIOCallbacks(); + this.camera = camera; + } ProgressiveLoaderGeometry.prototype.load = function() { @@ -105,13 +108,20 @@ ProgressiveLoaderGeometry.prototype.load = function() { }); } +ProgressiveLoaderGeometry.prototype.getCamera = function() { + + return [this.camera.position.x, this.camera.position.y, this.camera.position.z, + this.camera.target.x, this.camera.target.y, this.camera.target.z]; + +} + ProgressiveLoaderGeometry.prototype.initIOCallbacks = function() { var self = this; this.socket.on('ok', function() { console.log('ok'); - self.socket.emit('next'); + self.socket.emit('next', self.getCamera()); }); this.socket.on('elements', function(arr) { @@ -119,7 +129,7 @@ ProgressiveLoaderGeometry.prototype.initIOCallbacks = function() { // console.log("Received elements for the " + (++self.counter) + "th time !"); for (var i = 0; i < arr.length; i++) { - var elt = _parseList(arr[i]); + var elt = _parseList2(arr[i]); // console.log(elts); if (elt.type === 'vertex') { @@ -204,25 +214,25 @@ ProgressiveLoaderGeometry.prototype.initIOCallbacks = function() { } else if (elt.type === 'face') { - self.currentMesh.geometry.faces.push(new THREE.Face3(elt.a, elt.b, elt.c, [self.normals[elt.aNormal], self.normals[elt.bNormal], self.normals[elt.cNormal]])); + self.obj.children[elt.mesh].geometry.faces.push(new THREE.Face3(elt.a, elt.b, elt.c, [self.normals[elt.aNormal], self.normals[elt.bNormal], self.normals[elt.cNormal]])); if (elt.aTexture !== undefined) { - self.currentMesh.geometry.faceVertexUvs[0].push([self.texCoords[elt.aTexture], self.texCoords[elt.bTexture], self.texCoords[elt.cTexture]]); + self.obj.children[elt.mesh].geometry.faceVertexUvs[0].push([self.texCoords[elt.aTexture], self.texCoords[elt.bTexture], self.texCoords[elt.cTexture]]); } - self.currentMesh.geometry.verticesNeedUpdate = true; - self.currentMesh.geometry.uvsNeedUpdate = true; - self.currentMesh.geometry.normalsNeedUpdate = true; - self.currentMesh.geometry.groupsNeedUpdate = true; + self.obj.children[elt.mesh].geometry.verticesNeedUpdate = true; + self.obj.children[elt.mesh].geometry.uvsNeedUpdate = true; + self.obj.children[elt.mesh].geometry.normalsNeedUpdate = true; + self.obj.children[elt.mesh].geometry.groupsNeedUpdate = true; } } // Ask for next elements - self.socket.emit('next'); + self.socket.emit('next', self.getCamera()); }); this.socket.on('disconnect', function() { diff --git a/js/prototype/initScene.js b/js/prototype/initScene.js index f8d9b92..1836f51 100644 --- a/js/prototype/initScene.js +++ b/js/prototype/initScene.js @@ -11,11 +11,12 @@ function addLight(scene) { scene.add(ambient_light); } -function initPeachCastle(scene, collidableObjects, loader, static_path) { +function initPeachCastle(scene, collidableObjects, loader, camera) { var loader = new ProgressiveLoader( '/static/data/castle/princess peaches castle (outside).obj', scene, + camera, function(object) { object.raycastable = true; if (object.material.name === 'Material.103_princess_peaches_cast') { @@ -47,7 +48,7 @@ function initPeach(camera, scene, static_path, coins) { var loader = new THREE.OBJMTLLoader(); var collidableObjects = []; - initPeachCastle(scene, collidableObjects, loader, static_path); + initPeachCastle(scene, collidableObjects, loader, camera); camera.resetElements = resetPeachElements(); camera.collidableObjects = collidableObjects; @@ -159,11 +160,12 @@ function createPeachCameras(width, height) { return cams; } -function initBobombScene(scene, collidableObjects, loader, static_path) { +function initBobombScene(scene, collidableObjects, loader, camera) { var loader = new ProgressiveLoader( static_path + 'data/bobomb/bobomb battlefeild.obj', scene, + camera, function(object) { object.raycastable = true; if (object.material.name === 'Material.071_574B138E_c.bmp' || @@ -276,7 +278,7 @@ function initBobomb(camera, scene, static_path, coins) { var loader = new THREE.OBJMTLLoader(); var collidableObjects = []; - initBobombScene(scene, collidableObjects, loader, static_path); + initBobombScene(scene, collidableObjects, loader, camera); camera.resetElements = resetBobombElements(); camera.collidableObjects = collidableObjects; @@ -304,11 +306,12 @@ function initBobomb(camera, scene, static_path, coins) { return cameras; } -function initWhompScene(scene, collidableObjects, loader, static_path) { +function initWhompScene(scene, collidableObjects, loader, camera) { var loader = new ProgressiveLoader( static_path + 'data/whomp/Whomps Fortress.obj', scene, + camera, function(object) { if (object.material.name === 'Shape_088' || object.material.name === 'Shape_089') { @@ -426,7 +429,7 @@ function initWhomp(camera, scene, static_path, coins) { var loader = new THREE.OBJMTLLoader(); var collidableObjects = []; - initWhompScene(scene, collidableObjects, loader, static_path); + initWhompScene(scene, collidableObjects, loader, camera); camera.resetElements = resetWhompElements(); camera.collidableObjects = collidableObjects; @@ -454,11 +457,12 @@ function initWhomp(camera, scene, static_path, coins) { return cameras; } -function initMountainScene(scene, collidableObjects, loader, static_path) { +function initMountainScene(scene, collidableObjects, loader, camera) { var loader = new ProgressiveLoader( static_path + 'data/mountain/coocoolmountain.obj', scene, + camera, function(object) { // object.rotation.x = -Math.PI/2; // object.rotation.z = Math.PI/2; @@ -578,7 +582,7 @@ function initMountain(camera, scene, static_path, coins) { var loader = new THREE.OBJMTLLoader(); var collidableObjects = []; - initMountainScene(scene, collidableObjects, loader, static_path); + initMountainScene(scene, collidableObjects, loader, camera); camera.resetElements = resetMountainElements(); camera.collidableObjects = collidableObjects; @@ -605,9 +609,9 @@ function initMountain(camera, scene, static_path, coins) { return cameras; } -function initSponzaScene(scene, collidableObjects, loader, static_path) { +function initSponzaScene(scene, collidableObjects, loader, camera) { - var loader = new ProgressiveLoaderGeometry('/static/data/sponza/sponza.obj', scene, function(obj) { + var loader = new ProgressiveLoaderGeometry('/static/data/sponza/sponza.obj', scene, camera, function(obj) { if (obj.material.name === 'chain' || obj.material.name === 'leaf' || obj.material.name === 'Material__57') { @@ -620,6 +624,7 @@ function initSponzaScene(scene, collidableObjects, loader, static_path) { }); + l = loader; loader.load(); loader.obj.scale.set(0.1,0.1,0.1); @@ -665,7 +670,7 @@ function initSponza(camera, scene, static_path, coins) { var loader = new THREE.JSONLoader(); var collidableObjects = []; - initSponzaScene(scene, collidableObjects, loader, static_path); + initSponzaScene(scene, collidableObjects, loader, camera); camera.resetElements = resetSponzaElements(); camera.collidableObjects = collidableObjects;