v1.8.0

Babylon/Animations/babylon.animation.js

@@ -19,6 +19,18 @@ var BABYLON = BABYLON || {};
     };
 
     // Methods   
+    BABYLON.Animation.prototype.floatInterpolateFunction = function (startValue, endValue, gradient) {
+        return startValue + (endValue - startValue) * gradient;
+    };
+    
+    BABYLON.Animation.prototype.quaternionInterpolateFunction = function (startValue, endValue, gradient) {
+        return BABYLON.Quaternion.Slerp(startValue, endValue, gradient);
+    };
+    
+    BABYLON.Animation.prototype.vector3InterpolateFunction = function (startValue, endValue, gradient) {
+        return BABYLON.Vector3.Lerp(startValue, endValue, gradient);
+    };
+
     BABYLON.Animation.prototype.clone = function() {
         var clone = new BABYLON.Animation(this.name, this.targetPropertyPath.join("."), this.framePerSecond, this.dataType, this.loopMode);
 
@@ -37,6 +49,8 @@ var BABYLON = BABYLON || {};
         if (loopMode === BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT && repeatCount > 0) {
             return highLimitValue.clone ? highLimitValue.clone() : highLimitValue;
         }
+
+        this.currentFrame = currentFrame;
         
         for (var key = 0; key < this._keys.length; key++) {
             if (this._keys[key + 1].frame >= currentFrame) {
@@ -50,9 +64,9 @@ var BABYLON = BABYLON || {};
                         switch (loopMode) {
                             case BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE:
                             case BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT:
-                                return startValue + (endValue - startValue) * gradient;                                
+                                return this.floatInterpolateFunction(startValue, endValue, gradient);                                
                             case BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE:
-                                return offsetValue * repeatCount + (startValue + (endValue - startValue) * gradient);
+                                return offsetValue * repeatCount + this.floatInterpolateFunction(startValue, endValue, gradient);
                         }
                         break;
                     // Quaternion
@@ -61,10 +75,10 @@ var BABYLON = BABYLON || {};
                         switch (loopMode) {
                             case BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE:
                             case BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT:
-                                quaternion = BABYLON.Quaternion.Slerp(startValue, endValue, gradient);
+                                quaternion = this.quaternionInterpolateFunction(startValue, endValue, gradient);
                                 break;
                             case BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE:
-                                quaternion = BABYLON.Quaternion.Slerp(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
+                                quaternion = this.quaternionInterpolateFunction(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
                                 break;
                         }
 
@@ -74,9 +88,9 @@ var BABYLON = BABYLON || {};
                         switch (loopMode) {
                             case BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE:
                             case BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT:
-                                return BABYLON.Vector3.Lerp(startValue, endValue, gradient);
+                                return this.vector3InterpolateFunction(startValue, endValue, gradient);
                             case BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE:
-                                return BABYLON.Vector3.Lerp(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
+                                return this.vector3InterpolateFunction(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
                         }
                     // Matrix
                     case BABYLON.Animation.ANIMATIONTYPE_MATRIX:

Babylon/Cameras/babylon.camera.js

@@ -37,7 +37,6 @@ var BABYLON = BABYLON || {};
     BABYLON.Camera.ORTHOGRAPHIC_CAMERA = 1;
 
     // Members
-    BABYLON.Camera.prototype.fov = 0.8;
     BABYLON.Camera.prototype.orthoLeft = null;
     BABYLON.Camera.prototype.orthoRight = null;
     BABYLON.Camera.prototype.orthoBottom = null;

Babylon/Cameras/babylon.freeCamera.js

@@ -45,7 +45,7 @@ var BABYLON = BABYLON || {};
     BABYLON.FreeCamera.prototype.noRotationConstraint = false;
     BABYLON.FreeCamera.prototype.angularSensibility = 2000.0;
     BABYLON.FreeCamera.prototype.lockedTarget = null;
-
+    BABYLON.FreeCamera.prototype.onCollide = null;
 
     // Methods
     BABYLON.FreeCamera.prototype._computeLocalCameraSpeed = function () {
@@ -228,6 +228,9 @@ var BABYLON = BABYLON || {};
 
         if (this._diffPosition.length() > BABYLON.Engine.collisionsEpsilon) {
             this.position.addInPlace(this._diffPosition);
+            if (this.onCollide) {
+                this.onCollide(this._collider.collidedMesh);
+            }
         }
     };
 

Babylon/Collisions/babylon.collider.js

@@ -308,6 +308,7 @@ var BABYLON = BABYLON || {};
                 }
                 this.nearestDistance = distToCollision;                
                 this.collisionFound = true;
+                this.collidedMesh = subMesh.getMesh();
             }
         }
     };

Babylon/Lights/babylon.pointLight.js

@@ -14,7 +14,7 @@ var BABYLON = BABYLON || {};
     BABYLON.PointLight.prototype = Object.create(BABYLON.Light.prototype);
     
     // Methods
-    BABYLON.Light.prototype.transferToEffect = function (effect, positionUniformName) {
+    BABYLON.PointLight.prototype.transferToEffect = function (effect, positionUniformName) {
         if (this.parent && this.parent.getWorldMatrix) {
             if (!this._transformedPosition) {
                 this._transformedPosition = BABYLON.Vector3.Zero();

Babylon/Materials/textures/babylon.baseTexture.js

@@ -11,7 +11,6 @@ var BABYLON = BABYLON || {};
     // Members
     BABYLON.BaseTexture.prototype.delayLoadState = BABYLON.Engine.DELAYLOADSTATE_NONE;
     BABYLON.BaseTexture.prototype.hasAlpha = false;
-    BABYLON.BaseTexture.prototype.hasAlpha = false;
     BABYLON.BaseTexture.prototype.level = 1;
     BABYLON.BaseTexture.prototype._texture = null;
 

Babylon/Mesh/babylon.mesh.js

@@ -801,6 +801,78 @@ var BABYLON = BABYLON || {};
             this.onDispose();
         }
     };
+    
+    // Physics
+    BABYLON.Mesh.prototype.setPhysicsState = function(options) {
+        if (!this._scene._physicsEngine) {
+            return;
+        }
+
+        options.impostor = options.impostor || BABYLON.PhysicsEngine.NoImpostor;
+        options.mass = options.mass || 0;
+        options.friction = options.friction || 0.0;
+        options.restitution = options.restitution || 0.9;
+
+        this._physicImpostor = options.impostor;
+        this._physicsMass = options.mass;
+        this._physicsFriction = options.friction;
+        this._physicRestitution = options.restitution;
+
+        if (options.impostor === BABYLON.PhysicsEngine.NoImpostor) {
+            this._scene._physicsEngine._unregisterMesh(this);
+            return;
+        }
+        
+        this._scene._physicsEngine._registerMesh(this, options);
+    };
+
+    BABYLON.Mesh.prototype.getPhysicsImpostor = function() {
+        if (!this._physicImpostor) {
+            return BABYLON.PhysicsEngine.NoImpostor;
+        }
+
+        return this._physicImpostor;
+    };
+
+    BABYLON.Mesh.prototype.getPhysicsMass = function() {
+        if (!this._physicsMass) {
+            return 0;
+        }
+
+        return this._physicsMass;
+    };
+    
+    BABYLON.Mesh.prototype.getPhysicsFriction = function () {
+        if (!this._physicsFriction) {
+            return 0;
+        }
+
+        return this._physicsFriction;
+    };
+    
+    BABYLON.Mesh.prototype.getPhysicsRestitution = function () {
+        if (!this._physicRestitution) {
+            return 0;
+        }
+
+        return this._physicRestitution;
+    };
+
+    BABYLON.Mesh.prototype.applyImpulse = function(force, contactPoint) {
+        if (!this._physicImpostor) {
+            return;
+        }
+
+        this._scene._physicsEngine._applyImpulse(this, force, contactPoint);
+    };
+
+    BABYLON.Mesh.prototype.setPhysicsLinkWith = function(otherMesh, pivot1, pivot2) {
+        if (!this._physicImpostor) {
+            return;
+        }
+        
+        this._scene._physicsEngine._createLink(this, otherMesh, pivot1, pivot2);
+    };
 
     // Statics
     BABYLON.Mesh.CreateBox = function (name, size, scene, updatable) {

Babylon/Physics/babylon.physicsEngine.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var BABYLON = BABYLON || {};
+
+(function () {
+    BABYLON.PhysicsEngine = function (gravity) {
+        this.gravity = gravity || new BABYLON.Vector3(0, 0, -9.82);
+
+        this._world = new CANNON.World();
+        this._world.broadphase = new CANNON.NaiveBroadphase();
+        this._world.gravity.set(this.gravity.x, this.gravity.y, this.gravity.z);
+
+        this._registeredMeshes = [];
+        this._physicsMaterials = [];
+    };
+
+    BABYLON.PhysicsEngine.prototype._runOneStep = function (delta) {
+        if (delta > 1.0) {
+            delta = 1.0;
+        }
+            
+        this._world.step(delta);
+        
+        for (var index = 0; index < this._registeredMeshes.length; index++) {
+            var registeredMesh = this._registeredMeshes[index];
+
+            registeredMesh.mesh.position.x = registeredMesh.body.position.x;
+            registeredMesh.mesh.position.y = registeredMesh.body.position.z;
+            registeredMesh.mesh.position.z = registeredMesh.body.position.y;
+            
+            if (!registeredMesh.mesh.rotationQuaternion) {
+                registeredMesh.mesh.rotationQuaternion = new BABYLON.Quaternion(0, 0, 0, 1);
+            }
+
+            registeredMesh.mesh.rotationQuaternion.x = registeredMesh.body.quaternion.x;
+            registeredMesh.mesh.rotationQuaternion.y = registeredMesh.body.quaternion.z;
+            registeredMesh.mesh.rotationQuaternion.z = registeredMesh.body.quaternion.y;
+            registeredMesh.mesh.rotationQuaternion.w = -registeredMesh.body.quaternion.w;
+        }
+    };
+
+    BABYLON.PhysicsEngine.prototype._addMaterial = function (friction, restitution) {
+        var index;
+        var mat;
+
+        for (index = 0; index < this._physicsMaterials.length; index++) {
+            mat = this._physicsMaterials[index];
+            
+            if (mat.friction === friction && mat.restitution === restitution) {
+                return mat;
+            }
+        }
+
+        var currentMat = new CANNON.Material();
+        currentMat.friction = friction;
+        currentMat.restitution = restitution;
+        this._physicsMaterials.push(currentMat);
+
+        for (index = 0; index < this._physicsMaterials.length; index++) {
+            mat = this._physicsMaterials[index];
+            
+            var contactMaterial = new CANNON.ContactMaterial(mat, currentMat, Math.max(mat.friction, currentMat.friction), mat.restitution * currentMat.restitution);
+            this._world.addContactMaterial(contactMaterial);
+        }
+
+        return currentMat;
+    };
+
+    BABYLON.PhysicsEngine.prototype._setGravity = function (gravity) {
+        this._world.gravity.set(this.gravity.x, this.gravity.y, this.gravity.z);
+    };
+
+    BABYLON.PhysicsEngine.prototype._registerMesh = function (mesh, options) {
+        var shape = null;
+        
+        this._unregisterMesh(mesh);
+
+        mesh.computeWorldMatrix(true);
+
+        switch (options.impostor) {
+            case BABYLON.PhysicsEngine.SphereImpostor:
+                var bbox = mesh.getBoundingInfo().boundingBox;
+                var radiusX = bbox.maximumWorld.x - bbox.minimumWorld.x;
+                var radiusY = bbox.maximumWorld.y - bbox.minimumWorld.y;
+                var radiusZ = bbox.maximumWorld.z - bbox.minimumWorld.z;
+                
+                shape = new CANNON.Sphere(Math.max(radiusX, radiusY, radiusZ) / 2);
+                break;
+            case BABYLON.PhysicsEngine.BoxImpostor:
+                var bbox = mesh.getBoundingInfo().boundingBox;
+                var min = bbox.minimumWorld;
+                var max = bbox.maximumWorld;
+                var box = max.subtract(min).scale(0.5);
+                shape = new CANNON.Box(new CANNON.Vec3(box.x, box.z, box.y));
+                break;
+            case BABYLON.PhysicsEngine.PlaneImpostor:
+                shape = new CANNON.Plane();
+                break;
+        }
+        
+        var material = this._addMaterial(options.friction, options.restitution);
+        var body = new CANNON.RigidBody(options.mass, shape, material);
+        
+        body.position.set(mesh.position.x, mesh.position.z, mesh.position.y);
+        this._world.add(body);
+
+        this._registeredMeshes.push({ mesh: mesh, body: body, material:material});
+    };
+    
+    BABYLON.PhysicsEngine.prototype._unregisterMesh = function (mesh) {
+        for (var index = 0; index < this._registeredMeshes.length; index++) {
+            var registeredMesh = this._registeredMeshes[index];
+
+            if (registeredMesh.mesh === mesh) {
+                // Remove
+                this._world.remove(registeredMesh.body);
+                this._registeredMeshes.splice(index, 1);
+                return;
+            }
+        }
+    };
+    
+    BABYLON.PhysicsEngine.prototype._applyImpulse = function (mesh, force, contactPoint) {
+        var worldPoint = new CANNON.Vec3(contactPoint.x, contactPoint.z, contactPoint.y);
+        var impulse = new CANNON.Vec3(force.x, force.z, force.y);
+
+        for (var index = 0; index < this._registeredMeshes.length; index++) {
+            var registeredMesh = this._registeredMeshes[index];
+
+            if (registeredMesh.mesh === mesh) {
+                registeredMesh.body.applyImpulse(impulse, worldPoint);
+                return;
+            }
+        }
+    };
+
+    BABYLON.PhysicsEngine.prototype._createLink = function (mesh1, mesh2, pivot1, pivot2) {
+        var body1, body2;
+        for (var index = 0; index < this._registeredMeshes.length; index++) {
+            var registeredMesh = this._registeredMeshes[index];
+
+            if (registeredMesh.mesh === mesh1) {
+                body1 = registeredMesh.body;
+            } else if (registeredMesh.mesh === mesh2) {
+                body2 = registeredMesh.body;
+            } 
+        }
+        
+        if (!body1 || !body2) {
+            return;
+        }
+        
+        var constraint = new CANNON.PointToPointConstraint(body1, new CANNON.Vec3(pivot1.x, pivot1.z, pivot1.y), body2, new CANNON.Vec3(pivot2.x, pivot2.z, pivot2.y));
+        this._world.addConstraint(constraint);
+    };
+
+    BABYLON.PhysicsEngine.prototype.dispose = function () {
+        while (this._registeredMeshes.length) {
+            this._unregisterMesh(this._registeredMeshes[0].mesh);
+        }
+    };
+
+    // Statics
+    BABYLON.PhysicsEngine.IsSupported = function() {
+        return CANNON !== undefined;
+    };
+
+    BABYLON.PhysicsEngine.NoImpostor = 0;
+    BABYLON.PhysicsEngine.SphereImpostor = 1;
+    BABYLON.PhysicsEngine.BoxImpostor = 2;
+    BABYLON.PhysicsEngine.PlaneImpostor = 3;
+})();

Babylon/Shaders/shadowMap.fragment.fx

@@ -22,14 +22,17 @@ vec2 packHalf(float depth)
 	return color - (color.yy * bitOffset);
 }
 
+#ifndef VSM
+varying vec4 vPosition;
+#endif
 
 void main(void)
 {
 #ifdef VSM
-	float moment1 = gl_FragCoord.z / gl_FragCoord.w; 
+	float moment1 = gl_FragCoord.z / gl_FragCoord.w;
 	float moment2 = moment1 * moment1;
 	gl_FragColor = vec4(packHalf(moment1), packHalf(moment2));
 #else
-	gl_FragColor = pack(gl_FragCoord.z / gl_FragCoord.w);
+	gl_FragColor = pack(vPosition.z / vPosition.w);
 #endif
 }

Babylon/Shaders/shadowMap.vertex.fx

@@ -18,6 +18,10 @@ uniform mat4 viewProjection;
 uniform mat4 worldViewProjection;
 #endif
 
+#ifndef VSM
+varying vec4 vPosition;
+#endif
+
 void main(void)
 {
 #ifdef BONES
@@ -28,6 +32,9 @@ void main(void)
 	mat4 finalWorld = world * (m0 + m1 + m2 + m3);
 	gl_Position = viewProjection * finalWorld * vec4(position, 1.0);
 #else
+#ifndef VSM
+	vPosition = worldViewProjection * vec4(position, 1.0);
+#endif
 	gl_Position = worldViewProjection * vec4(position, 1.0);
 #endif
 }

Babylon/Tools/babylon.sceneLoader.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var BABYLON = BABYLON || {};
+var BABYLON = BABYLON || {}; 
 
 (function () {
     var loadCubeTexture = function (rootUrl, parsedTexture, scene) {
@@ -415,6 +415,22 @@ var BABYLON = BABYLON || {};
         if (parsedMesh.skeletonId > -1) {
             mesh.skeleton = scene.getLastSkeletonByID(parsedMesh.skeletonId);
         }
+        
+        // Physics
+        if (parsedMesh.physicsImpostor) {
+            if (!scene.isPhysicsEnabled()) {
+                scene.enablePhysics();
+            }
+
+            switch (parsedMesh.physicsImpostor) {
+                case 1: // BOX
+                    mesh.setPhysicsState({ impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: parsedMesh.physicsMass, friction: parsedMesh.physicsFriction, restitution: parsedMesh.physicsRestitution });
+                    break;
+                case 2: // SPHERE
+                    mesh.setPhysicsState({ impostor: BABYLON.PhysicsEngine.SphereImpostor, mass: parsedMesh.physicsMass, friction: parsedMesh.physicsFriction, restitution: parsedMesh.physicsRestitution });
+                    break;
+            }
+        }
 
         // Animations
         if (parsedMesh.animations) {

Babylon/babylon.engine.js

@@ -845,7 +845,7 @@ var BABYLON = BABYLON || {};
 
         var that = this;
         cascadeLoad(rootUrl, 0, [], scene, function (imgs) {
-            var width = getExponantOfTwo(imgs[0].width);
+            var width = getExponantOfTwo(imgs[0].width, that._caps.maxCubemapTextureSize);
             var height = width;
 
             that._workingCanvas.width = width;

Babylon/babylon.scene.js

@@ -121,10 +121,6 @@ var BABYLON = BABYLON || {};
         return this._activeVertices;
     };
 
-    BABYLON.Scene.prototype.getTotalVertices = function () {
-        return this._totalVertices;
-    };
-
     BABYLON.Scene.prototype.getActiveParticles = function () {
         return this._activeParticles;
     };
@@ -690,9 +686,15 @@ var BABYLON = BABYLON || {};
         }
         
         // Animations
-        this._animationRatio = BABYLON.Tools.GetDeltaTime() * (60.0 / 1000.0);
+        var deltaTime = BABYLON.Tools.GetDeltaTime();
+        this._animationRatio = deltaTime * (60.0 / 1000.0);
         this._animate();
         
+        // Physics
+        if (this._physicsEngine) {
+            this._physicsEngine._runOneStep(deltaTime / 1000.0);
+        }
+        
         // Clear
         this._engine.clear(this.clearColor, this.autoClear || this.forceWireframe, true);
         
@@ -788,6 +790,11 @@ var BABYLON = BABYLON || {};
 
         // Post-processes
         this.postProcessManager.dispose();
+        
+        // Physics
+        if (this._physicsEngine) {
+            this.disablePhysicsEngine();
+        }
 
         // Remove from engine
         index = this._engine.scenes.indexOf(this);
@@ -951,6 +958,42 @@ var BABYLON = BABYLON || {};
             return BABYLON.Ray.Transform(ray, that._pickWithRayInverseMatrix);
         }, predicate, fastCheck);
     };
+    
+    // Physics
+    BABYLON.Scene.prototype.enablePhysics = function(gravity) {
+        if (this._physicsEngine) {
+            return true;
+        }
+        
+        if (!BABYLON.PhysicsEngine.IsSupported()) {
+            return false;
+        }
+
+        this._physicsEngine = new BABYLON.PhysicsEngine(gravity);
+
+        return true;
+    };
+
+    BABYLON.Scene.prototype.disablePhysicsEngine = function() {
+        if (!this._physicsEngine) {
+            return;
+        }
+
+        this._physicsEngine.dispose();
+        this._physicsEngine = undefined;
+    };
+
+    BABYLON.Scene.prototype.isPhysicsEnabled = function() {
+        return this._physicsEngine !== undefined;
+    };
+    
+    BABYLON.Scene.prototype.setGravity = function (gravity) {
+        if (!this._physicsEngine) {
+            return;
+        }
+
+        this._physicsEngine._setGravity(gravity);
+    };
 
     // Statics
     BABYLON.Scene.FOGMODE_NONE = 0;

Exporters/Blender/io_export_babylon.py

@@ -601,6 +601,17 @@ class Export_babylon(bpy.types.Operator, ExportHelper):
         Export_babylon.write_bool(file_handler, "checkCollisions", object.data.checkCollisions)
         Export_babylon.write_int(file_handler, "billboardMode", billboardMode)
         Export_babylon.write_bool(file_handler, "receiveShadows", object.data.receiveShadows)
+
+        # Export Physics
+        if object.rigid_body != None:
+            shape_items = {'BOX': 1, 'SPHERE': 2}
+            shape_type = shape_items[object.rigid_body.collision_shape]
+            Export_babylon.write_int(file_handler, "physicsImpostor", shape_type)
+            Export_babylon.write_float(file_handler, "physicsMass", object.rigid_body.mass)
+            Export_babylon.write_float(file_handler, "physicsFriction", object.rigid_body.friction)
+            Export_babylon.write_float(file_handler, "physicsRestitution", object.rigid_body.restitution)
+
+        # Geometry
         if hasSkeleton:
             i = 0
             for obj in [object for object in scene.objects if object.is_visible(scene)]:
@@ -644,7 +655,7 @@ class Export_babylon(bpy.types.Operator, ExportHelper):
             file_handler.write("}")
             first = False
         file_handler.write("]")
-                
+
         #Export Animations
         
         rotAnim = False

Samples/Scenes/Customs/physics.js

@@ -0,0 +1,121 @@
+var CreatePhysicsScene = function(engine) {
+    var scene = new BABYLON.Scene(engine);
+    var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -20), scene);
+    camera.checkCollisions = true;
+    camera.applyGravity = true;
+    
+    var light = new BABYLON.DirectionalLight("dir02", new BABYLON.Vector3(0.2, -1, 0), scene);
+    light.position = new BABYLON.Vector3(0, 80, 0);
+
+    // Material
+    var materialAmiga = new BABYLON.StandardMaterial("amiga", scene);
+    materialAmiga.diffuseTexture = new BABYLON.Texture("assets/amiga.jpg", scene);
+    materialAmiga.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
+    materialAmiga.diffuseTexture.uScale = 5;
+    materialAmiga.diffuseTexture.vScale = 5;
+    
+    var materialAmiga2 = new BABYLON.StandardMaterial("amiga", scene);
+    materialAmiga2.diffuseTexture = new BABYLON.Texture("assets/mosaic.jpg", scene);
+    materialAmiga2.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
+    
+    // Shadows
+    var shadowGenerator = new BABYLON.ShadowGenerator(2048, light);
+    shadowGenerator.getShadowMap().renderList.push(box0);
+
+    // Physics
+    scene.enablePhysics();
+    
+    // Spheres
+    var y = 0;
+    for (var index = 0; index < 32; index++) {
+        var sphere = BABYLON.Mesh.CreateSphere("Sphere0", 16, 3, scene);
+        sphere.material = materialAmiga;
+
+        sphere.position = new BABYLON.Vector3(Math.random() * 20 - 10, y, Math.random() * 10 - 5);
+
+        shadowGenerator.getShadowMap().renderList.push(sphere);
+        
+        sphere.setPhysicsState({ impostor: BABYLON.PhysicsEngine.SphereImpostor, mass: 1 });
+
+        y += 2;        
+    }
+    
+    // Link
+    var spheres = [];
+    for (var index = 0; index < 10; index++) {
+        var sphere = BABYLON.Mesh.CreateSphere("Sphere0", 16, 1, scene);
+        spheres.push(sphere);
+        sphere.material = materialAmiga2;
+        sphere.position = new BABYLON.Vector3(Math.random() * 20 - 10, y, Math.random() * 10 - 5);
+
+        shadowGenerator.getShadowMap().renderList.push(sphere);
+
+        sphere.setPhysicsState({ impostor: BABYLON.PhysicsEngine.SphereImpostor, mass: 1 });
+    }
+
+    for (var index = 0; index < 10; index++) {
+        spheres[index].setPhysicsLinkWith(spheres[index + 1], new BABYLON.Vector3(0, 0.5, 0), new BABYLON.Vector3(0, -0.5, 0));
+    }
+
+    // Box
+    var box0 = BABYLON.Mesh.CreateBox("Box0", 3, scene);
+    box0.position = new BABYLON.Vector3(3, 30, 0);
+    var materialWood = new BABYLON.StandardMaterial("wood", scene);
+    materialWood.diffuseTexture = new BABYLON.Texture("assets/wood.jpg", scene);
+    materialWood.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
+    box0.material = materialWood;
+
+    shadowGenerator.getShadowMap().renderList.push(box0);
+
+    // Playground
+    var ground = BABYLON.Mesh.CreateBox("Ground", 1, scene);
+    ground.scaling = new BABYLON.Vector3(100, 1, 100);
+    ground.position.y = -5.0;
+    ground.checkCollisions = true;
+
+    var border0 = BABYLON.Mesh.CreateBox("border0", 1, scene);
+    border0.scaling = new BABYLON.Vector3(1, 100, 100);
+    border0.position.y = -5.0;
+    border0.position.x = -50.0;
+    border0.checkCollisions = true;
+    
+    var border1 = BABYLON.Mesh.CreateBox("border1", 1, scene);
+    border1.scaling = new BABYLON.Vector3(1, 100, 100);
+    border1.position.y = -5.0;
+    border1.position.x = 50.0;
+    border1.checkCollisions = true;
+    
+    var border2 = BABYLON.Mesh.CreateBox("border2", 1, scene);
+    border2.scaling = new BABYLON.Vector3(100, 100, 1);
+    border2.position.y = -5.0;
+    border2.position.z = 50.0;
+    border2.checkCollisions = true;
+    
+    var border3 = BABYLON.Mesh.CreateBox("border3", 1, scene);
+    border3.scaling = new BABYLON.Vector3(100, 100, 1);
+    border3.position.y = -5.0;
+    border3.position.z = -50.0;
+    border3.checkCollisions = true;
+    
+    camera.setTarget(new BABYLON.Vector3(0, 0, 0));
+
+    var groundMat = new BABYLON.StandardMaterial("groundMat", scene);
+    groundMat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5);
+    groundMat.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
+    ground.material = groundMat;
+    border0.material = groundMat;
+    border1.material = groundMat;
+    border2.material = groundMat;
+    border3.material = groundMat;
+    ground.receiveShadows = true;
+        
+    // Physics
+    box0.setPhysicsState({ impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 2, friction: 0.4, restitution: 0.3 });
+    ground.setPhysicsState({ impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 0, friction: 0.5, restitution: 0.7 });
+    border0.setPhysicsState({ impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 0 });
+    border1.setPhysicsState({ impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 0 });
+    border2.setPhysicsState({ impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 0 });
+    border3.setPhysicsState({ impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 0 });
+    
+    return scene;
+};

Samples/Scenes/Espilit/debug.txt

@@ -0,0 +1 @@
+Generation of c:\Export\Espilit\Espilit.babylon successfullGeneration of c:\Export\espilit\espilit.babylon successfull

Samples/Scenes/Sandbox/index.css

@@ -0,0 +1,232 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    font-family: "Segoe WP", "Segoe UI", "Verdana", "Arial";
+}
+
+a {
+    color: white;
+}
+
+    a:visited {
+        color: white;
+    }
+
+.hidden {
+    display: none;
+}
+
+#renderCanvas {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    margin-bottom: 70px;
+    touch-action: none;
+    -ms-touch-action: none;
+}
+
+.help {
+    position: absolute;
+    background-color: #988DB5;
+    right: 0;
+    bottom: 70px;
+    color: white;
+    padding-right: 10px;
+    width: 360px;
+    height: 30px;
+    transition: all 0.5s ease;
+    -webkit-transition: all 0.5s ease;
+    transform: translateX(400px);
+    -webkit-transform: translateX(400px);
+        text-align: center;
+}
+
+    .help.shown {
+        transform: translateX(-100px);
+        -webkit-transform: translateX(-100px);
+    }
+
+ .help2 {
+    position: absolute;
+    background-color: #988DB5;
+    right: 0;
+    bottom: 70px;
+    color: white;
+    padding-right: 10px;
+    width: 360px;
+    height: 30px;
+    transition: all 0.5s ease;
+    -webkit-transition: all 0.5s ease;
+    transform: translateX(400px);
+    -webkit-transform: translateX(400px);
+        text-align: center;
+}
+
+    .help2.shown {
+        transform: translateX(0px);
+        -webkit-transform: translateX(0px);
+    }
+
+#helpArrow {
+    position: absolute;
+    right: -65px;
+    bottom: 10px;
+}
+
+#fps {
+    position: absolute;
+    font-size: 30px;
+    color: white;
+    bottom: 15px;
+    right: 85px;
+    width: 85px;
+}
+
+.footer {
+    position: absolute;
+    width: 100%;
+    height: 60px;
+    bottom: 0;
+    background-color: #59448F;
+    padding-top: 5px;
+    padding-left: 15px;
+}
+
+.perffooter {
+    position: absolute;
+    width: 100%;
+    height: 60px;
+    bottom: 0px;
+    background-color: #988DB5;
+    padding-top: 5px;
+    padding-left: 15px;
+        transition: all 0.5s ease;
+    -webkit-transition: all 0.5s ease;
+}
+
+    .perffooter.shown {
+        transform: translateY(-65px);
+        -webkit-transform: translateY(-65px);
+    }
+
+.footerRight {
+    display: inline;
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+}
+
+.footerLeft {
+    position: absolute;
+    bottom: 20px;
+    left: 15px;
+    color: white;
+}
+
+.custom-upload {
+    position: relative;
+    background:url(./Assets/BtnDragdrop.png) center right no-repeat;
+    height: 56px;
+    width: 56px;
+    margin: 10px 20px 5px 5px;
+}
+
+.custom-upload input[type=file]
+{
+    outline:none;
+    position: relative;
+    text-align: right;    
+    -moz-opacity:0 ;
+    filter:alpha(opacity: 0);
+    opacity: 0;
+    z-index: 2;
+    width:100%;
+    height:100%;
+    
+}
+
+#logo {
+    width: 100%;
+    height: 100%;
+    background: url('./Assets/LogoSandbox.png') no-repeat 0 0;
+    background-position: center;
+}
+
+#btnFullscreen {
+}
+
+#btnFullscreen {
+    margin-top: 10px;
+    margin-right: 25px;
+}
+
+#btnPerf {
+    margin-top: 10px;
+    margin-right: 15px;
+}
+
+ul {
+ padding:0;
+ margin:0;
+ list-style-type:none;
+ }
+
+li {
+ float:left;
+ }
+
+#btnDownArrow {
+    position: absolute;
+    bottom: 35px;
+    right: 30px;
+}
+
+#miscCounters {
+    position: relative;
+    top: 18px;
+    height: 60px;
+    -webkit-column-width: 150px;
+    -moz-column-width: 150px;
+    -ms-column-width: 150px;
+    -o-column-width: 150px;
+    column-width: 150px;
+
+    font-size: 14px;
+}
+
+#loadingText {
+    width: 100%;
+    height: 60px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    margin-top: -30px;
+    color: white;
+    text-align: center;
+    padding-top: 10px;
+    font-size: 30px;
+    transition: transform 0.25s ease-in-out;
+    -webkit-transition: -webkit-transform 0.25s ease-in-out;
+    z-index: 3;
+    cursor: default;
+    background-color: #988DB5;
+}
+
+.loadingText {
+    transform: translateX(120%);
+    -webkit-transform: translateX(120%);
+}
+
+#btnFullscreen, #btnPerf, #btnFiles {
+     -webkit-transition: -webkit-transform 0.15s ease-in-out;
+     transition: transform 0.15s ease-in-out;
+}
+
+#btnFullscreen:hover, #btnPerf:hover, #btnFiles:hover {
+    -webkit-transform: scale(0.9);
+    transform: scale(0.9);
+}

Samples/Scenes/Sandbox/index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html manifest="babylon.cache">
+<head>
+    <title>BabylonJS - Sandbox</title>
+    <link href="index.css" rel="stylesheet" />
+    <script src="../../hand.minified-1.2.js"></script>
+    <script src="../../babylon.js"></script>
+    <script src="index.js"></script>
+</head>
+<body>
+    <canvas id="renderCanvas"></canvas>
+    <div id="logo">
+    </div>
+    <div id="help01" class="help">
+        <span class="helpText">Press this button to open your assets' files</span>
+        <img id="helpArrow" src="./Assets/FlecheTuto.png" />
+    </div>
+    <div id="help02" class="help2">
+        <span class="helpText">Or directly drag'n'drop your files in the browser</span>
+    </div>
+    <div id="perf" class="perffooter">
+        <div class="footerLeft">
+            <div id="miscCounters"></div>
+        </div>
+        <div class="footerRight">
+            <div id="fps"></div>
+            <img id="btnDownArrow" src="./Assets/FlecheDown.png" />
+        </div>
+    </div>
+    <div class="footer">
+        <div class="footerLeft">
+            Powered by <a href="http://www.babylonjs.com/" target="_blank">Babylon.js</a><br />
+        </div>
+        <div class="footerRight">
+            <ul>
+                <li id="btnFullscreen">
+                    <img src="./Assets/BtnFullscreen.png" alt="Switch the scene to full screen" title="Switch the scene to full screen" />
+                </li>
+                <li id="btnPerf">
+                    <img src="./Assets/BtnPerf.png" alt="Display performance dashboard" title="Display performance dashboard" />
+                </li>
+                <li id="btnFiles">
+                    <div class="custom-upload" title="Open your .babylon scene from your hard drive">
+                        <input type="file" id="files" multiple />
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div id="loadingText" class="loadingText"></div>
+</body>
+</html>

Samples/Scenes/Sandbox/index.js

@@ -0,0 +1,103 @@
+/// <reference path="../../babylon.js" />
+
+document.addEventListener("DOMContentLoaded", startGame, false);
+
+function startGame() {
+    if (BABYLON.Engine.isSupported()) {
+        var canvas = document.getElementById("renderCanvas");
+        var engine = new BABYLON.Engine(canvas, true);
+        var divFps = document.getElementById("fps");
+        var htmlInput = document.getElementById("files");
+        var btnFullScreen = document.getElementById("btnFullscreen");
+        var btnDownArrow = document.getElementById("btnDownArrow");
+        var perffooter = document.getElementById("perf");
+        var btnPerf = document.getElementById("btnPerf");
+        var miscCounters = document.getElementById("miscCounters");
+        var help01 = document.getElementById("help01");
+        var help02 = document.getElementById("help02");
+        var loadingText = document.getElementById("loadingText");
+        var filesInput;
+        var currentHelpCounter;
+        var currentScene;
+        var perffooterEnable = false;
+
+        currentHelpCounter = localStorage.getItem("helpcounter");
+
+        if (!currentHelpCounter) currentHelpCounter = 0;
+
+        // Resize
+        window.addEventListener("resize", function () {
+            engine.resize();
+        });
+
+        var sceneLoaded = function (sceneFile, babylonScene) {
+            currentScene = babylonScene;
+            document.title = "BabylonJS - " + sceneFile.name;
+            // Fix for IE, otherwise it will change the default filter for files selection after first use
+            htmlInput.value = "";
+            document.getElementById("logo").className = "hidden";
+            loadingText.className = "loadingText";
+        };
+
+        var progressCallback = function (evt) {
+                if (evt.lengthComputable) {
+                    loadingText.innerHTML = "Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%";
+                } else {
+                    dlCount = evt.loaded / (1024 * 1024);
+                    loadingText.innerHTML = "Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.";
+                }
+        };
+
+        var textureLoadingCallback = function (remainingTextures) {
+            loadingText.innerHTML = "Streaming items..." + (remainingTextures ? (remainingTextures + " remaining") : "");
+        };
+
+        var startingProcessingFilesCallback = function () {
+            loadingText.className = "";
+            loadingText.innerHTML = "Loading, please wait...";
+        };
+
+        var additionnalRenderLoopLogic = function () {
+            divFps.innerHTML = BABYLON.Tools.GetFps().toFixed() + " fps";
+            if (currentScene) {
+                miscCounters.innerHTML = "Total vertices: " + currentScene.getTotalVertices() + " <br />"
+                    + "Active vertices: " + currentScene.getActiveVertices() + " <br />"
+                    + "Active particles: " + currentScene.getActiveParticles() + " <br />"
+                    + "Frame duration: " + currentScene.getLastFrameDuration() + " ms" + " <br />"
+                    + "Evaluate Active Meshes duration: " + currentScene.getEvaluateActiveMeshesDuration() + " ms" + " <br />"
+                    + "Render Targets duration: " + currentScene.getRenderTargetsDuration() + " ms" + " <br />"
+                    + "Particles duration: " + currentScene.getParticlesDuration() + " ms" + " <br />"
+                    + "Sprites duration: " + currentScene.getSpritesDuration() + " ms" + " <br />"
+                    + "Render duration: " + currentScene.getRenderDuration() + " ms";
+            }
+        };
+
+        filesInput = new BABYLON.FilesInput(engine, null, canvas, sceneLoaded, progressCallback, additionnalRenderLoopLogic, textureLoadingCallback, startingProcessingFilesCallback);
+        filesInput.monitorElementForDragNDrop(canvas);
+
+        htmlInput.addEventListener('change', filesInput.loadFiles, false);
+        btnFullScreen.addEventListener('click', function () {
+            engine.switchFullscreen(true);
+        }, false);
+        btnPerf.addEventListener('click', function () {
+            perffooter.className = "perffooter shown";
+        }, false);
+        btnDownArrow.addEventListener('click', function () {
+            perffooter.className = "perffooter";
+        }, false);
+
+        // The help tips will be displayed only 5 times
+        if (currentHelpCounter < 5) {
+            help01.className = "help shown";
+
+            setTimeout(function () {
+                help01.className = "help";
+                help02.className = "help2 shown";
+                setTimeout(function () {
+                    help02.className = "help2";
+                    localStorage.setItem("helpcounter", currentHelpCounter + 1);
+                }, 5000);
+            }, 5000);
+        }
+    }
+}

Samples/index.css

@@ -10,8 +10,13 @@
 
 a {
     color: black;
+    text-decoration: none;
 }
 
+    a:hover {
+        text-decoration: underline;
+    }
+
     a:visited {
         color: black;
     }
@@ -26,6 +31,23 @@ a {
         -webkit-transform: scale3d(0.9, 0.9, 0.9);
     }
 
+#footer {
+    position: absolute;
+    width: 100%;
+    height: 25px;
+    bottom: 0;
+    background: white;
+    text-align: center;
+}
+
+.footerLink {
+    color: #2E7F80;
+}
+
+.footerLink:visited {
+    color: #2E7F80;
+}
+
 .buttonControlPanel {
     height: 40px;
     width: 200px;
@@ -178,13 +200,13 @@ button {
 }
 
 .movedLeft {
-    transform: translateX(-2000px);
-    -webkit-transform: translateX(-2000px);
+    transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
 }
 
 .movedRight {
-    transform: translateX(2000px);
-    -webkit-transform: translateX(2000px);
+    transform: translateX(100%);
+    -webkit-transform: translateX(100%);
 }
 
 #babylonLink {
@@ -223,7 +245,7 @@ button {
     left: 0;
     right: 0;
     top: 136px;
-    bottom: 0px;
+    bottom: 25px;
     overflow-y: auto;
     overflow-x: hidden;
     width: 100%;
@@ -313,9 +335,12 @@ button {
 .item-text-right {
     position: absolute;
     right: 10px;
-    bottom: 15px;
+    bottom: 0px;
     font-size: 16px;
     color: white;
+    max-width: 300px;
+    text-align: right;
+    height: 50px;
 }
 
 #notSupported {

Samples/index.html

@@ -30,11 +30,13 @@
     </script>
     <link href="index.css" rel="stylesheet" />
     <script src="hand.minified-1.2.js"></script>
+    <script src="cannon.js"></script>
     <!--<script src="Babylon/Tools/babylon.math.js"></script>
     <script src="Babylon/Tools/babylon.database.js"></script>
     <script src="Babylon/Tools/babylon.tools.js"></script>
     <script src="Babylon/babylon.engine.js"></script>
     <script src="Babylon/babylon.node.js"></script>
+    <script src="Babylon/Tools/babylon.filesInput.js"></script>
     <script src="Babylon/Collisions/babylon.pickingInfo.js"></script>
     <script src="Babylon/Culling/babylon.boundingSphere.js"></script>
     <script src="Babylon/Culling/babylon.boundingBox.js"></script>
@@ -91,7 +93,8 @@
     <script src="Babylon/PostProcess/babylon.convolutionPostProcess.js"></script>
     <script src="Babylon/PostProcess/babylon.fxaaPostProcess.js"></script>
     <script src="Babylon/LensFlare/babylon.lensFlare.js"></script>
-    <script src="Babylon/LensFlare/babylon.lensFlareSystem.js"></script>-->
+    <script src="Babylon/LensFlare/babylon.lensFlareSystem.js"></script>
+    <script src="Babylon/Physics/babylon.physicsEngine.js"></script>-->
     <script src="babylon.js"></script>
     <script src="Scenes/Customs/test.js"></script>
     <script src="Scenes/Customs/lights_test.js"></script>
@@ -106,6 +109,7 @@
     <script src="Scenes/Customs/postprocessBloom.js"></script>
     <script src="Scenes/Customs/postprocessRefraction.js"></script>
     <script src="Scenes/Customs/lensFlares.js"></script>
+    <script src="Scenes/Customs/physics.js"></script>
     <script src="index.js"></script>
 </head>
 <body>
@@ -152,7 +156,6 @@
                         <i>3D engine:</i> David <b>CATUHE</b> (<a href="http://www.twitter.com/@deltakosh">@deltakosh</a>)<br />
                         <i>Scenes:</i> Michel <b>ROUSSEAU</b> (<a href="http://www.twitter.com/@rousseau_michel">@rousseau_michel</a>)<br />
                         <i>Game FX:</i> Pierre <b>LAGARDE</b> (<a href="http://www.twitter.com/@pierlag">@pierlag</a>)<br />
-                        <i>Game FX:</i> Sébastien <b>PERTUS</b> (<a href="http://www.twitter.com/@sebastienpertus">@sebastienpertus</a>)<br />
                         <i>Game FX:</i> David <b>ROUSSET</b> (<a href="http://www.twitter.com/@davrous">@davrous</a>)<br />
                         <br />
                         <i>Train scene:</i> Romuald <b>ROUHIER</b> and <a href="http://www.progiss.com/">Progiss</a><br />
@@ -168,6 +171,7 @@
                         <ul>
                             <li>Complete scene graph with lights, cameras, materials and meshes</li>
                             <li><b>Collisions engine</b></li>
+                            <li><b>Physics engine (thanks to cannon.js)</b></li>
                             <li>Scene picking</li>
                             <li>Antialiasing</li>
                             <li><b>Animations engine</b></li>
@@ -215,6 +219,7 @@
                                     <li>Rendering layers</li>
                                     <li><b>Post-processes (blur, refraction, black'n'white, fxaa, customs...)</b></li>
                                     <li><b>Lens flares</b></li>
+                                    <li><b>Multi-views</b></li>
                                 </ul>
                             </li>
                             <li>
@@ -247,12 +252,20 @@
                                 <ul>
                                     <li>Babylon scene file can be converted from <i>.OBJ</i>, <i>.FBX</i>, <i>.MXB</i></li>
                                     <li>Exporter for Blender</li>
+                                    <li>Support for drag'n'drop</li>
                                 </ul>
                             </li>
                         </ul>
                     </div>
                 </div>
             </div>
+            <div id="footer">
+                <a class="footerLink" href="http://www.babylonjs.com/sandbox">sandbox</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a class="footerLink" href="http://www.html5gamedevs.com/forum/16-babylonjs/">forum</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a class="footerLink" href="https://github.com/BabylonJS/Babylon.js/wiki" >wiki</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a class="footerLink" href="https://github.com/BabylonJS/Babylon.js">github</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a class="footerLink" href="http://www.sokrate.fr/documentation/babylonjs/index.html">documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                
+            </div>
         </div>
         <div id="opacityMask" class="hidden"></div>
         <div id="renderZone" class="movedRight">
@@ -276,7 +289,7 @@
                             <label><input type="checkbox" id="postProcess" checked="true" />Post-processes</label>
                         </p>
                         <p>
-                            <button id="fullscreen">Switch fullscreen mode</button>
+                            <label><input type="checkbox" id="mirrors" checked="true" />Mirrors</label>
                         </p>
                     </div>
                     <div id="rightPart">
@@ -290,6 +303,9 @@
                             </select>
                         </p>
                         <p id="extensions"></p>
+                        <p>
+                            <button id="fullscreen">Switch fullscreen mode</button>
+                        </p>
                     </div>
                 </div>
                 <div class="tag">Control panel</div>

Samples/index.js

@@ -7,8 +7,18 @@ var onload = function () {
 
     // Demos
     var demos = [
+        //{
+        //    title: "HILLVALLEY", scene: "hillvalley", screenshot: "hill.jpg", size: "150 MB<br>(high-end device recommanded)", incremental: true, big: true, onload: function () {
+        //        scene.collisionsEnabled = false;
+        //        scene.lightsEnabled = false;
+        //        scene.createOrUpdateSelectionOctree();
+        //        for (var matIndex = 0; matIndex < scene.materials.length; matIndex++) {
+        //            scene.materials[matIndex].checkReadyOnEveryCall = false;
+        //        }
+        //    }
+        //},
         {
-            title: "TRAIN", scene: "Train", screenshot: "train.jpg", size: "70 MB", big: true, onload: function () {
+            title: "TRAIN", scene: "Train", screenshot: "train.jpg", size: "70 MB", onload: function () {
                 scene.collisionsEnabled = false;
                 for (var index = 0; index < scene.cameras.length; index++) {
                     scene.cameras[index].minZ = 10;
@@ -48,7 +58,7 @@ var onload = function () {
                 var postProcess = new BABYLON.RefractionPostProcess("Refraction", "/scenes/customs/refMap.jpg", new BABYLON.Color3(1.0, 1.0, 1.0), 0.5, 0.5, 1.0, scene.cameras[1]);
             }
         },
-        { title: "WINDOWS CAFE", scene: "WCafe", screenshot: "wcafe.jpg", size: "28 MB", anchor:"WCAFE" },
+        { title: "WINDOWS CAFE", scene: "WCafe", screenshot: "wcafe.jpg", size: "28 MB", anchor: "WCAFE" },
         {
             title: "FLAT 2009",
             scene: "Flat2009",
@@ -60,20 +70,21 @@ var onload = function () {
                 scene.createOrUpdateSelectionOctree();
             }
         },
-        { title: "THE CAR", scene: "TheCar", screenshot: "thecar.jpg", size: "100 MB", incremental: true, anchor:"THECAR" },
+        { title: "THE CAR", scene: "TheCar", screenshot: "thecar.jpg", size: "100 MB", incremental: true, anchor: "THECAR" },
         { title: "VIPER", scene: "Viper", screenshot: "viper.jpg", size: "18 MB" },
         { title: "SPACESHIP", scene: "Spaceship", screenshot: "spaceship.jpg", size: "1 MB" },
         {
-            title: "OMEGA CRUSHER", scene: "SpaceDek", screenshot: "omegacrusher.jpg", size: "10 MB", anchor:"OMEGA", onload: function () {
+            title: "OMEGA CRUSHER", scene: "SpaceDek", screenshot: "omegacrusher.jpg", size: "10 MB", anchor: "OMEGA", onload: function () {
                 scene.collisionsEnabled = false;
             }
         }];
 
     var tests = [
+        { title: "PHYSICS", id: 13, screenshot: "physics.jpg", size: "1.0 MB", anchor: "PHYSICS" },
         { title: "LENS FLARES", id: 12, screenshot: "lens.jpg", size: "1.0 MB", anchor: "LENS" },
-        { title: "POSTPROCESS - REFRACTION", id: 11, screenshot: "postprocessRefraction.jpg", size: "1.0 MB", anchor:"PPREF" },
+        { title: "POSTPROCESS - REFRACTION", id: 11, screenshot: "postprocessRefraction.jpg", size: "1.0 MB", anchor: "PPREF" },
         { title: "POSTPROCESS - BLOOM", id: 10, screenshot: "postprocessBloom.jpg", size: "1.0 MB", anchor: "PPBLOOM" },
-        { title: "OCTREE - 8000 spheres", id: 8, screenshot: "octree.jpg", size: "0.1 MB", anchor:"OCTREE" },
+        { title: "OCTREE - 8000 spheres", id: 8, screenshot: "octree.jpg", size: "0.1 MB", anchor: "OCTREE" },
         { title: "BONES", id: 9, screenshot: "bones.jpg", size: "10 MB" },
         { title: "CHARTING", id: 7, screenshot: "charting.jpg", size: "0.1 MB" },
         { title: "SHADOWS", id: 6, screenshot: "shadows.jpg", size: "1.0 MB" },
@@ -87,6 +98,7 @@ var onload = function () {
     ];
 
     var thirdParties = [
+    { title: "BING 3D MAPS", url: "http://babylonbing.azurewebsites.net/", screenshot: "bing3D.jpg", size: "by A. Beaulieu" },
     { title: "CAR GAME", url: "http://babylon.azurewebsites.net", screenshot: "car.jpg", size: "by G. Carlander" },
     { title: "CYCLE GAME", url: "http://tronbabylon.azurewebsites.net/", screenshot: "tron.jpg", size: "by G. Carlander" },
     { title: "GALLERY", url: "http://guillaume.carlander.fr/Babylon/Gallery/", screenshot: "gallery.png", size: "by G. Carlander" },
@@ -113,6 +125,7 @@ var onload = function () {
     var hardwareScalingLevel = document.getElementById("hardwareScalingLevel");
     var collisions = document.getElementById("collisions");
     var postProcess = document.getElementById("postProcess");
+    var mirrors = document.getElementById("mirrors");
     var status = document.getElementById("status");
     var fullscreen = document.getElementById("fullscreen");
     var touchCamera = document.getElementById("touchCamera");
@@ -324,6 +337,9 @@ var onload = function () {
                     case 12:
                         newScene = CreateLensFlaresTestScene(engine);
                         break;
+                    case 13:
+                        newScene = CreatePhysicsScene(engine);
+                        break;
                 }
                 scene = newScene;
 
@@ -506,7 +522,7 @@ var onload = function () {
         }
     });
 
-    canvas.addEventListener("click", function (evt) {
+    canvas.addEventListener("mousedown", function (evt) {
         if (!panelIsClosed) {
             panelIsClosed = true;
             cameraPanelIsClosed = true;
@@ -516,14 +532,14 @@ var onload = function () {
             cameraPanel.style.transform = "translateX(300px)";
         }
 
-        if (evt.ctrlKey) {
-            if (!scene)
-                return;
+        if (!scene)
+            return;
 
-            var pickResult = scene.pick(evt.clientX, evt.clientY);
+        var pickResult = scene.pick(evt.clientX, evt.clientY);
 
-            if (pickResult.hit) {
-                status.innerHTML = "Selected object: " + pickResult.pickedMesh.name + "(" + pickResult.pickedPoint.x + "," + pickResult.pickedPoint.y  + "," + pickResult.pickedPoint.z  + ")";
+        if (pickResult.hit) {
+            if (evt.ctrlKey) {
+                status.innerHTML = "Selected object: " + pickResult.pickedMesh.name + "(" + pickResult.pickedPoint.x + "," + pickResult.pickedPoint.y + "," + pickResult.pickedPoint.z + ")";
 
                 // Animations
                 scene.beginAnimation(pickResult.pickedMesh, 0, 100, true, 1.0);
@@ -558,6 +574,9 @@ var onload = function () {
                 particleSystem.start();
 
             } else {
+                var dir = pickResult.pickedPoint.subtract(scene.activeCamera.position);
+                dir.normalize();
+                pickResult.pickedMesh.applyImpulse(dir.scale(10), pickResult.pickedPoint);
                 status.innerHTML = "";
             }
         }
@@ -641,6 +660,12 @@ var onload = function () {
         }
     });
 
+    mirrors.addEventListener("change", function () {
+        if (scene) {
+            scene.renderTargetsEnabled = mirrors.checked;
+        }
+    });
+
     toggleBandW.addEventListener("click", function () {
         if (scene && scene.activeCamera) {
             if (scene.activeCamera.__bandw_cookie) {
@@ -653,7 +678,7 @@ var onload = function () {
             }
         }
     });
-    
+
     toggleFxaa.addEventListener("click", function () {
         if (scene && scene.activeCamera) {
             if (scene.activeCamera.__fxaa_cookie) {

readme.md

@@ -18,6 +18,7 @@ Online [sandbox](http://www.babylonjs.com/sandbox) where you can test your .baby
 ## Features
 - Complete scene graph with lights, cameras, materials and meshes
 - Collisions engine
+- Physics engine (thanks to cannon.js)
 - Scene picking
 - Antialiasing
 - Animations engine

what's new.md

@@ -1,5 +1,14 @@
 Changes list
 ============
+- 1.8.0:
+ - **Major updates**
+ - Support for [physics engine](https://github.com/BabylonJS/Babylon.js/wiki/How-to-use-lens-flares) thanks to cannon.js ([deltakosh](http://www.github.com/deltakosh))
+ - New [sandbox tool](http://www.babylonjs.com/sandbox/) ([davrous](http://www.github.com/davrous))
+ - **Updates**
+ - New ```animation.currentFrame``` property to get current animation frame ([deltakosh](http://www.github.com/deltakosh))
+ - New ```animation.floatInterpolateFunction``` property to define custom float interpolation function ([deltakosh](http://www.github.com/deltakosh))
+ - New ```animation.vector3InterpolateFunction``` property to define custom vector3 interpolation function ([deltakosh](http://www.github.com/deltakosh))
+ - New ```animation.quaternionInterpolateFunction``` property to define custom quaternion interpolation function ([deltakosh](http://www.github.com/deltakosh))
 - 1.7.3:
  - **Updates**
  - Support for "file://" moniker ([davrous](https://github.com/davrous))
@@ -13,7 +22,7 @@
  - Support for [lens flares](https://github.com/BabylonJS/Babylon.js/wiki/How-to-use-lens-flares) ([deltakosh](http://www.github.com/deltakosh))
  - Support for [multi-views](https://github.com/BabylonJS/Babylon.js/wiki/How-to-use-multi-views) ([deltakosh](http://www.github.com/deltakosh))
  - **Updates**
- - New ```light.excludedMeshes``` property to exclude specific meshes from light coputation ([deltakosh](http://www.github.com/deltakosh))
+ - New ```light.excludedMeshes``` property to exclude specific meshes from light computation ([deltakosh](http://www.github.com/deltakosh))
  - New ```texture.anisotropicFilteringLevel``` property to define the anisotropic level of a texture ([deltakosh](http://www.github.com/deltakosh))
  - New ```mesh.infiniteDistance``` property to make a mesh static from the point of view of the camera ([deltakosh](http://www.github.com/deltakosh))
  - New ```scene.customRenderTargets``` property to add our own renderTargetTexture ([deltakosh](http://www.github.com/deltakosh))