added zoom for OrthographicCamera, tried to decouple gl rendering and box2d updates, didn't work yet

app/Game/Client/GameController.js

@@ -21,6 +21,7 @@ function (Box2D, Parent, PhysicsEngine, ViewController, PlayerController, Notifi
         this.me = null;
 
         this.update();
+        this.render();
     }
 
     GameController.prototype = Object.create(Parent.prototype);
@@ -54,16 +55,20 @@ function (Box2D, Parent, PhysicsEngine, ViewController, PlayerController, Notifi
 
     GameController.prototype.update  = function () {
 
-        requestAnimFrame(this.update.bind(this));
+        setTimeout(this.update.bind(this), Settings.BOX2D_TIME_STEP * 1000);
 
         this.physicsEngine.update();
-        this.viewController.update();
         
         if(this.me) {
             this.me.update();
         }
     }
 
+    GameController.prototype.render = function() {
+        requestAnimFrame(this.render.bind(this));
+        this.viewController.render();
+    }
+
     GameController.prototype.onWorldUpdate = function (updateData) {
 
         var body = this.physicsEngine.world.GetBodyList();
@@ -113,7 +118,7 @@ function (Box2D, Parent, PhysicsEngine, ViewController, PlayerController, Notifi
         //this.onSpawnPlayer(options);
         this.me = this.players[playerId];
         this.me.setPlayerController(new PlayerController(this.me));
-        this.viewController.setMainPlayer(this.me);
+        this.viewController.setMe(this.me);
     }
 
     GameController.prototype.onSpawnPlayer = function(options) {
@@ -125,7 +130,7 @@ function (Box2D, Parent, PhysicsEngine, ViewController, PlayerController, Notifi
         player.spawn(x, y);
 
         // add to view controller
-        this.viewController.addMovablePlayer(player);
+        this.viewController.addPlayer(player);
     }
 
     GameController.prototype.loadLevel = function (path) {

app/Game/Client/View/CameraController.js

@@ -1,33 +1,19 @@
 define(['Lib/Vendor/Three', 'Game/Config/Settings'], function (Three, Settings) {
 
-    function CameraController (isOrthographic) {
+    function CameraController () {
-
+        this.zoom = 1;
-        isOrthographic = typeof isOrthographic == 'undefined' 
-            ? true 
-            : isOrthographic;
-
-        if(!isOrthographic) {
 
         this.camera = new Three.OrthographicCamera(
             -Settings.STAGE_WIDTH/2, 
             Settings.STAGE_WIDTH/2, 
             Settings.STAGE_HEIGHT/2, 
             -Settings.STAGE_HEIGHT/2, 
-                1, 
+            0, 
             1000 
         );
 
-        } else {
+        this.camera.position.z = 1;
 
-            this.camera = new Three.PerspectiveCamera(
-                45, 
-                Settings.STAGE_WIDTH / Settings.STAGE_HEIGHT, 
-                1, 
-                -500
-            );
-        }
-
-        this.camera.position.z = 270; // 481 
         this.setPosition(Settings.STAGE_WIDTH / 2, -Settings.STAGE_HEIGHT / 2);
 
         this.initWheel();
@@ -46,7 +32,9 @@ define(['Lib/Vendor/Three', 'Game/Config/Settings'], function (Three, Settings)
         if(!event) event = window.event; // IE
         if(event.wheelDelta) delta = event.wheelDelta/120;
         else if(event.detail) delta = -event.detail/3;
-        if(delta) this.camera.position.z -= delta * 10;
+        if(delta) {
+            this.setZoom(this.zoom + (delta / 30));
+        }
         if(event.preventDefault) event.preventDefault();
         event.returnValue = false;
     };
@@ -62,7 +50,14 @@ define(['Lib/Vendor/Three', 'Game/Config/Settings'], function (Three, Settings)
 
 
     CameraController.prototype.setZoom = function (z) {
-        this.camera.position.z = z;
+        this.zoom = z;
+        z *= 2;
+        console.log(this.zoom)
+        this.camera.left   = - Settings.STAGE_WIDTH / z;
+        this.camera.right  =   Settings.STAGE_WIDTH / z;
+        this.camera.top    =   Settings.STAGE_HEIGHT / z;
+        this.camera.bottom = - Settings.STAGE_HEIGHT / z;
+        this.camera.updateProjectionMatrix();
     }
 
     return CameraController;

app/Game/Client/View/ViewController.js

@@ -102,13 +102,10 @@ define(requires, function (DomController, Three, Settings, CameraController) {
         return false;
     };
 
-    ViewController.prototype.update = function () {
-        this.render();
-    }
-
     ViewController.prototype.render = function () {
-        if(this.mainPlayer) {
+        
-            var pos = this.mainPlayer.getDoll().getBody().GetPosition();
+        if(this.me) {
+            var pos = this.me.getDoll().getBody().GetPosition();
             this.cameraController.setPosition(pos.x * Settings.RATIO, -(pos.y * Settings.RATIO));
         }
 
@@ -135,14 +132,13 @@ define(requires, function (DomController, Three, Settings, CameraController) {
         mesh.overdraw = true;
         mesh.position.x = x;
         mesh.position.y = y;
-        //mesh.position.z = 1;
     }
 
-    ViewController.prototype.setMainPlayer = function(player) {
+    ViewController.prototype.setMe = function(player) {
-        this.mainPlayer = player;
+        this.me = player;
     };
 
-    ViewController.prototype.addMovablePlayer = function(player) {
+    ViewController.prototype.addPlayer = function(player) {
         var self = this;
         var mesh = null;
         var pos = player.getDoll().getBody().GetPosition();
@@ -155,7 +151,15 @@ define(requires, function (DomController, Three, Settings, CameraController) {
             });            
         }
         this.createMesh(size.w, size.h, pos.x, pos.y, "static/img/Characters/Chuck/chuck.png", callback);
+    };
 
+    ViewController.prototype.removPlayer = function(player) {
+        for (var i = 0; i < this.movableObjects.length; i++) {
+            var o = this.movableObjects[i];
+            if(o.player == player) {
+                this.scene.remove(o.mesh);
+            }
+        };
     };
 
     return ViewController;

app/Game/Config/Settings.js

@@ -8,7 +8,7 @@ define({
     BOX2D_GRAVITY: 16,
     BOX2D_VELOCITY_ITERATIONS: 5,
     BOX2D_POSITION_ITERATIONS: 5,
-    BOX2D_TIME_STEP: 1 / 60,
+    BOX2D_TIME_STEP: 1 / 30,
 
     // GRAPHIC PATHS
     GRAPHICS_PATH: 'static/img/',
@@ -17,6 +17,7 @@ define({
 
     RATIO: 35,
     TILE_SIZE: 15,
+    CAMERA_IS_ORTHOGRAPHIC: true,
 
     // GAME PLAY 
     WALK_SPEED: 2.5,
@@ -43,7 +44,7 @@ define({
     CANVAS_DOM_ID: 'canvasContainer',
     IS_BROWSER_ENVIRONMENT: typeof window !== 'undefined',
 
-    DEBUG_MODE: false,
+    DEBUG_MODE: true,
 
     // NETWORKING
     WORLD_UPDATE_BROADCAST_INTERVAL: 70

app/Game/Core/Physics/Engine.js

@@ -12,6 +12,7 @@ function (Settings, Box2D, CollisionDetector) {
             Settings.BOX2D_ALLOW_SLEEP
         );
         this.ground = null;
+        console.log(Settings.BOX2D_TIME_STEP)
     }
 
     Engine.prototype.getWorld = function () {