Search the Community

I have trouble getting the code to work properly in the playground, so I hope you get an idea of what I mean. I'm using cannon direcly, and not as the plugin in Babylon. I have a cannon body and a sphere shape, and I'm controlling the movement on the X and Z axis using keyboard input. On top of that I have a sphere mesh in order to verify the changes to the body. Now, I use the below handler to rotate the body itself according to the mouse. window.addEventListener("mousemove", function(e) { // console.log("mouse"); var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; this.sphereBody.rotation.y += movementX * 0.002; this.sphereBody.rotation.x += movementY * 0.002; }); Now, the problem is, that if I rotate, let's say 50 degrees to the left, and press the key bound to the forward movement, the body moves directly forward, and not in the direction that the body rotated. I'm a little unsure as of what and how to accomplish this. This should be able to run server-side using node, which it already does, but this has it's limits, as I'm not planning to run babylon on the node server. I need a way to assign the Z and X axis to the way the body is currently rotated. I guess I could use a camera on the client, but then the rotation has to be useable on the body server-side. I already checked quite a few examples, one being the Cannon.js FPS example. I can upload the files somewhere if needed.

There is a problem in different browsers, for example, if a roulette ball in Chrome stops at a certain number in another browser, it stops at another. Can the difference between physics world.step (cannon.js) in different browsers?

Hello all, I've been working through a project (using a lot of advice I've found from lurking here) and I've run into an issue. My goals are pretty modest; I'm trying to 1) have a natural jumping mechanism, and 2) have collision detection between the camera, ground, walls, etc. At first I did this just using Babylon's .checkCollisions, which works very well for camera vs object and camera vs wall collisions. However, I couldn't get this to work properly for jumping. Even following other's tutorials, (http://www.html5gamedevs.com/topic/12198-camera-jump/) I wasn't getting the results I wanted; on my computer, at least, all of those playground sketches still "hang" at the top of the jump until other arrows are pressed. So, I switched gears and tried using Oimo and Cannon. I still can't get Oimo to work, for some reason ( "this.world.worldscale is not a function" ring a bell for anyone? I can't find anything on that) but I've had decent results with Cannon. In short, I have the jump working, but now the collisions vs the walls are all...funky. Check out the playground sketch here- if you hit the wall, everything spins like mad. https://www.babylonjs-playground.com/#GYZQLK#3 I'm pretty stuck. I don't see how this collision detection is any different than between the ground and the camera, but something is obviously off. I've tried vs other horizontal objects (boxes, spheres) and had the best results setting the camera's physics imposter to a box (which makes turning all jittery). Any suggestions or ideas? Thanks all!

So, I'm looking for ways to create a ragdoll effect using Cannon.js, and (preferably) a skinned, imported mesh. I tried the following 2 methods: #1: Use getRotation/position/absolute.. etc on the bones, to match with the Cannon bodies. This doesn't seem to work like it does the other way around (Match Cannon body to bone position and rotation). #2: Split my model into the different body parts, so each and every limp can be used seperately. This 'can' work, but requires a lot of work, and won't look as good as on a skinned model. Here is an example of a ragdoll, shamelessly stolen from the Cannon.js Three.js Ragdoll example: http://www.babylonjs-playground.com/index.html#XVETC#3 I'm looking for creative ways of achieving this very same ragdoll effect, but with a model. Edit: Forgot to mention, press A to start the ragdoll by enabling the stepping of the Cannon world.

Hello there! Long time lurker, first time poster here... In the following example: http://www.babylonjs-playground.com/#1NASOD#13 Why does the sphere mesh overlap (or fall slightly into) the box mesh as the box moves upwards? Is there a way to make the sphere not overlap the box as the box moves the sphere upwards?

Is it possible to add a physics impostor to a free camera with cannon.js that allows it to collide with rigid bodies just like any other mesh that has a physics impostor? I also need the free camera to maintain the standard keyboard/mouse controls.

This is my current setup: .Player presses the Mouse button .A Ray is fired using Babylon and the players camera The intersection point (vector3) is sent to the server The server uses Cannon to do it's own intersection testing (Using the player's head hitbox(Same location as the camera client-side) as the origin point, and the vector3 from the client as the target point. Now, if I wanted the server to be a bit more authoritative when it comes to hit detection, I shouldn't send the point from Babylon, but rather a 'fire' command, and, somehow, calculate a point that Cannon can use for it's own testing. The server is aware of the position of the origin vector, and has the rotation of the player's physics body. Now, my math is worse than bad, so: Would it be possible to calculate a point, a fixed distance away, using only the origin vector and the direction in which the point should be placed? I've seen various posts and discussions about it, but I really don't quite get it. Oh. And I know aimbotting isn't impossible to prevent, but I feel like the above method, that I already use, makes a bit too easy to achieve.

This is a (sort of) port of the Three.js vehicle demo using Cannon.js, in case someone is looking for vehicle physics or just want to play with it. I made some weird choices like sperating the renderLoop and the postStep, and some quesswork here and there. And some options are left out, but can easily be added by looking at the Cannon.js docs or logging the vehicle object itself. This includes ConnectionPoints, which wheels steer, back or front wheels etc. Just play with the options, and press the "Run with Options" in the bottom of the Dat.GUI. http://www.babylonjs-playground.com/#1PX171#9 WASD to drive around. Space to brake.

First of all here is my project, controls are WASD and mouse. http://playground.babylonjs.com/#11OMIX#26 I was wondering what is causing some kind of friction between the ground and a tank, try to press A or D for 5 seconds, it will not turn smoothly, I noticed that the glitch occurs when the tank is on X or Z axis (probably also on Y axis too but I didn't try). You can see that wheels are rotating propertly, there are no forces pushing the hull, just wheels are jointed to it. Any ideas?

Hi, I am a beginner to Babylon.js, but I decided to create a game about helicopter and... I don't know what to add next. Here you can see the latest update: http://playground.babylonjs.com/#11OMIX#23 The CONTROLS are: -Arrows to tilt the helicopter -W/A to fly up/down -S/D to turn left/right -Spacebar (press) to change perspective You can pick up the minecraft block by landing on it. Crash into buildings (yes, these big blocks). If you have any ideas how to develope this project let me know in comments. I am pretty sure I will need help with placing textures on the ribbon, it seems to be hard to do because it has the width and height equal to 0, I see just one pixel, but I want to fix it later.

As I don't have an external server at the moment, I'm trying to fake a bit of latency using SetTimeout. The code is based on Gabriel Gambetta's code for handling an authoritative server: http://www.gabrielgambetta.com/fpm_live.html And yeah. I know the code is very ugly and prototypish, no handling of multiple users, etc. etc.. I am sending inputs as well as the time the key is pressed, as a way of making it time-independent, but I have no sanity checks. If I keep the networkLatency at 0, it seems to run very smoothly, and both reconciliation and prediction works very well. However, if I add a delay, of say, 200 ms, it behaves strangely, and I can't really see why. This is the code handling the updating of the position, and the prediction based on previously saved inputs, and as far as I can see, this should work: iosocket.on('updatePOS', function(message) { setTimeout(function () { sphereBody.position.x = message.x; sphereBody.position.y = message.y; sphereBody.position.z = message.z; ghostSphere.position.x = message.x; ghostSphere.position.y = message.y; ghostSphere.position.z = message.z; lastSequence = message.last; console.log(lastSequence); for (var x in pending_inputs){ if (x <= lastSequence){ console.log(x); delete pending_inputs[x]; pending_inputs.splice(x, 1); delete inputsToSend[x]; inputsToSend.splice(x, 1); } else { //console.log(x); // console.log(pending_inputs[x]); applyInputs(pending_inputs[x]); } } }, networkLatency); }); Even with a delay/latency, the function should still take into consideration the saved inputs, and apply these when the new positional updates are received. So even when apllying updates as old as 200ms, the result should be the same as the predicted state. If someone can spot where the issue is, that would be awesome. If someone has a VPS with some real latency, a test of that woulld be appreciated too. index.html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Babylon - Basic scene</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.4.0/babylon.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.js"></script> <!-- optional physics engine --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script type="text/javascript"> var sphere, inputs = []; var globalGravity = new CANNON.Vec3(0,-30,0); var camera; var lastSequence = 0; var client = {}; client.left = false; client.right = false; client.forward = false; client.back = false; pending_inputs = []; inputsToSend = []; input_sequence_number = -1; var networkLatency = 0; // var keys; // keys.left=1; this.playerDirection = [0,0,0,0]; quat = new CANNON.Quaternion(); var iosocket = io.connect("http://localhost:8080"); iosocket.on('connect', function () { console.log("connect"); iosocket.on('message', function(message) { // console.log(message); }); iosocket.on('updatePOS', function(message) { setTimeout(function () { sphereBody.position.x = message.x; sphereBody.position.y = message.y; sphereBody.position.z = message.z; ghostSphere.position.x = message.x; ghostSphere.position.y = message.y; ghostSphere.position.z = message.z; lastSequence = message.last; console.log(lastSequence); for (var x in pending_inputs){ if (x <= lastSequence){ console.log(x); delete pending_inputs[x]; pending_inputs.splice(x, 1); delete inputsToSend[x]; inputsToSend.splice(x, 1); } else { //console.log(x); // console.log(pending_inputs[x]); applyInputs(pending_inputs[x]); } } }, networkLatency); }); iosocket.on('spawnPlayer', function(player) { console.log("Spawning Player"); }); iosocket.on('disconnect', function() { }); }); var canvas = document.querySelector("#renderCanvas"); var engine = new BABYLON.Engine(canvas, true); // setTimeout(sendInput, 2000); function sendInput(){ console.log("2 sek"); for (var x in inputsToSend){ iosocket.emit('input', inputsToSend[x]); } setTimeout(sendInput, 2000); } var createScene = function () { this.playerDirection = [0,0,0,0]; // Now create a basic Babylon Scene object var scene = new BABYLON.Scene(engine); scene.debugLayer.show(); // Change the scene background color to green. scene.clearColor = new BABYLON.Color3(0, 1, 0); // This creates and positions a free camera camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, false); // This creates a light, aiming 0,1,0 - to the sky. var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Dim the light a small amount light.intensity = .5; // Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene this.sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene); this.sphere.quaternion = new CANNON.Quaternion(0,0,0,0); this.box = BABYLON.MeshBuilder.CreateBox("box", {height: 5}, scene); // Move the sphere upward 1/2 its height this.sphere.position.y = 2; this.box.position.y = 2.5; this.box.position.z = 2; this.box.parent = this.sphere; ghostSphere = BABYLON.Mesh.CreateSphere("ghost", 16, 2, scene); var ghostMat = new BABYLON.StandardMaterial("texture1", scene); ghostMat.diffuseColor = new BABYLON.Color3(0.5, 0.2, 0.7); ghostMat.alpha = 0.6; ghostSphere.material = ghostMat; // Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene this.ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene); this.ground.rotation = new CANNON.Vec3(-0,0,0); BABYLON.SceneLoader.ImportMesh("", "https://raw.githubusercontent.com/RaggarDK/Baby/baby/", "height.babylon", scene, function (newMeshes) { setTimeout(function () { ground = newMeshes[1]; var material = new BABYLON.StandardMaterial("texture1", scene); //window.ground = ground; //ground.parent = undefined; ground.scaling.copyFromFloats(.3, .3, .3); ground.bakeCurrentTransformIntoVertices(); material.diffuseTexture = new BABYLON.Texture("https://raw.githubusercontent.com/RaggarDK/Baby/baby/plan.png", scene); ground.material = material; //ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsEngine.HeightmapImpostor, { mass: 0 }, scene); createHeightmap(newMeshes[1]); }, 2000) }); // window.addEventListener("keydown", handleKeyDown, false); // window.addEventListener("keyup", handleKeyUp, false); window.addEventListener("mousemove", function(e) { // console.log("mouse"); event = e; var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; //this.sphereBody.quaternion.y += movementX * 0.002; // this.sphereBody.quaternion.x += movementY * 0.002; sphereBody.rotation.y += movementX * 0.008; sphereBody.rotation.x += movementY * 0.008; }); seq = 0; function handleKeyDown(evt){ seq += 1; if (evt.keyCode==16){ if(inputs){ console.log(inputs); } } if (evt.keyCode==65){ inputs[seq] = {left:1, rot:sphereBody.rotation}; this.playerDirection[0] = 1; applyInput(seq, "left", sphereBody.rotation); console.log(seq); // iosocket.emit('input', { left:1, rot:sphereBody.rotation}); // shootBullet(sphereBody.rotation.y, sphereBody.position); } if (evt.keyCode==68){ sphereBody.position.x += .1; inputs[seq] = {right:1, rot:sphereBody.rotation}; this.playerDirection[1] = 1; //applyInput(seq, "right", sphereBody.rotation); //iosocket.emit('input', { right:1, rot:sphereBody.rotation}); } if (evt.keyCode==87){ inputs[seq] = {forward:1, rot:sphereBody.rotation}; applyInput(seq, "forward", sphereBody.rotation); this.playerDirection[2] = 1; // iosocket.emit('input', { forward:1, rot:sphereBody.rotation}); } if (evt.keyCode==83){ inputs[seq] = {back:1, rot:sphereBody.rotation}; this.playerDirection[3] = 1; applyInput(seq, "back", sphereBody.rotation); // iosocket.emit('input', { back:1, rot:sphereBody.rotation}); } } function handleKeyUp(evt){ if (evt.keyCode==65){ this.playerDirection[0] = 0; // iosocket.emit('input', { left:0}); } if (evt.keyCode==68){ // iosocket.emit('input', { right:0}); this.playerDirection[1] = 0; } if (evt.keyCode==87){ // iosocket.emit('input', { forward:0}); this.playerDirection[2] = 0; } if (evt.keyCode==83){ // iosocket.emit('input', { back:0}); this.playerDirection[3] = 0; } } var keyHandler = function(e) { e = e || window.event; if (e.keyCode == 65) { console.log("Lefty"); client.left = (e.type == "keydown"); } if (e.keyCode == 68) { console.log("righty"); client.right = (e.type == "keydown"); } if (e.keyCode == 87) { console.log("forward"); client.forward = (e.type == "keydown"); } else if (e.keyCode == 83) { client.back = (e.type == "keydown"); console.log("back"); } }; window.addEventListener("keydown", keyHandler, false); window.addEventListener("keyup", keyHandler, false); return scene; }; var createPhysics = function(){ console.log("createPhysicsFunction Called!"); world = new CANNON.World(); world.gravity.set(0,-30,0); world.broadphase = new CANNON.NaiveBroadphase(); var mass = 5, radius = 1; sphereShape = new CANNON.Sphere(radius); // Step 1 sphereBody = new CANNON.Body({mass: 1, shape: sphereShape}); // Step 2 sphereBody.position.set(0,2,2); sphereBody.rotation = new CANNON.Vec3(); world.add(sphereBody); // Step 3 console.log("sphereBodyPosition0: " + sphereBody.position); sphereBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); groundShape = new CANNON.Plane(); groundBody = new CANNON.Body({ mass: 0, shape: groundShape }); console.log(groundBody.rotation); groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); console.log(groundBody.quaternion); world.add(groundBody); timeStep = 1.0 / 60.0; // seconds velocity = sphereBody.velocity; sphereBody.velocity = new CANNON.Vec3(0,0,0); return world; } var scene = createScene(); this.world = createPhysics(); var zeroVel = new CANNON.Vec3(0,0,0); var inputVelocity = new CANNON.Vec3(); var lastTime = (new Date()).getTime(); var currentTime = 0; var delta = 0; engine.runRenderLoop(function () { currentTime = (new Date()).getTime(); delta = (currentTime - lastTime) / 1000; // console.log(delta); processInputs(); scene.render(); world.step(1.0 / 60.0); velocity = sphereBody.velocity; this.sphere.position = sphereBody.position; this.sphere.rotation = sphereBody.rotation; moveSpeed = .1; // camera.position.x = sphereBody.position.x // camera.position.z = sphereBody.position.z // camera.rotation = sphereBody.rotation; //sphereBody.position.z += moveSpeed; //console.log(sphereBody.position.x); velocity.x = inputVelocity.x; velocity.z = inputVelocity.z; lastTime = currentTime; }); window.addEventListener("resize", function () { engine.resize(); }); function processInputs() { // Compute delta time since last update. var now_ts = +new Date(); var last_ts = this.last_ts || now_ts; var dt_sec = (now_ts - last_ts) / 1000.0; this.last_ts = now_ts; // Package player's input. var input; if (client.right) { input = {dir:"right", press_time: dt_sec }; }else if (client.forward && client.left) { input = {dir:"sfLeft", press_time: dt_sec }; } else if (client.left) { input = {dir:"left", press_time: dt_sec }; }else if (client.forward) { input = {dir:"forward", press_time: dt_sec }; }else if (client.back) { input = {dir:"back", press_time: dt_sec }; } else { // Nothing interesting happened. return; } // Send the input to the server. input.input_sequence_number = input_sequence_number++; console.log(input.input_sequence_number); // input.entity_id = this.entity_id; applyInputs(input); inputsToSend.push(input); iosocket.emit('input', input); // Save this input for later reconciliation. pending_inputs.push(input); } function applyInputs(input) { // console.log(input.dir); if (input.dir == "left"){ sphereBody.position.x += -input.press_time*5; } if (input.dir == "right"){ sphereBody.position.x += input.press_time*5; } if (input.dir == "forward"){ sphereBody.position.z += input.press_time*5; } if (input.dir == "back"){ sphereBody.position.z += -input.press_time*5; } if (input.dir == "sfLeft"){ sphereBody.position.z += input.press_time*2.5; sphereBody.position.x += -input.press_time*2.5; } } function createHeightmap (object, pointDepth) { var pos = object.getVerticesData(BABYLON.VertexBuffer.PositionKind); var matrix = []; //For now pointDepth will not be used and will be automatically calculated. //Future reference - try and find the best place to add a reference to the pointDepth variable. var arraySize = pointDepth || ~~(Math.sqrt(pos.length / 3) - 1); var dim = Math.min(object.getBoundingInfo().boundingBox.extendSize.x, object.getBoundingInfo().boundingBox.extendSize.z); var elementSize = dim * 2 / arraySize; var minY = object.getBoundingInfo().boundingBox.extendSize.y; for (var i = 0; i < pos.length; i = i + 3) { var x = Math.round((pos[i + 0]) / elementSize + arraySize / 2); var z = Math.round(((pos[i + 2]) / elementSize - arraySize / 2) * -1); var y = pos[i + 1] + minY; if (!matrix[x]) { matrix[x] = []; } if (!matrix[x][z]) { matrix[x][z] = y; } matrix[x][z] = Math.max(y, matrix[x][z]); } for (var x = 0; x <= arraySize; ++x) { if (!matrix[x]) { var loc = 1; while (!matrix[(x + loc) % arraySize]) { loc++; } matrix[x] = matrix[(x + loc) % arraySize].slice(); } for (var z = 0; z <= arraySize; ++z) { if (!matrix[x][z]) { var loc = 1; var newValue; while (newValue === undefined) { newValue = matrix[x][(z + loc++) % arraySize]; } matrix[x][z] = newValue; } } } var shape = new CANNON.Heightfield(matrix, { elementSize: elementSize }); console.log(elementSize); //Output Matrix Info for Node.js console.log(matrix.length); for (i=0;i<matrix.length;i++){ //GET MATRIX DATA //console.info(JSON.stringify(matrix[0], null, ' ')) console.log("\n" + "matrix2[" + i + "] = " + JSON.stringify(matrix[i], null, ' ')) } heightBody = new CANNON.Body({mass: 0, shape: shape}); // Step 2 heightBody.position.y = -4.5; heightBody.position.x = -30; heightBody.position.z = 30; heightBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); console.log(heightBody.position); world.add(heightBody); }; </script> </body> </html> server.js: /* Copyright (c) 2012 Sven "FuzzYspo0N" Bergström http://underscorediscovery.com MIT Licensed. See LICENSE for full license. Usage : node simplest.app.js */ var gameport = process.env.PORT || 4004, CANNON = require('cannon'), io = require('socket.io'), socketio = require('socket.io'), express = require('express'), UUID = require('node-uuid'), fs = require('fs'), gameloop = require('node-gameloop'), verbose = false; var fs = require('fs') , http = require('http') , socketio = require('socket.io'); var server = http.createServer(function(req, res) { res.writeHead(200, { 'Content-type': 'text/html'}); res.end(fs.readFileSync(__dirname + '/index.html')); }).listen(8080, function() { console.log('Listening at: http://localhost:8080'); }); timeStep = 1.0 / 60.0; moveSpeed = .1; lastProcessedInput = -1; socketio.listen(server).on('connection', function (socket) { socket.emit('spawnPlayer'); var testLat = 0; var networkLoop = gameloop.setGameLoop(function(delta) { //socket.emit('news', { x: sphereBody.position.x, y: sphereBody.position.y, z: sphereBody.position.z, last:lastProcessedInput}); socket.emit('updatePOS', { x: sphereBody.position.x, y: sphereBody.position.y, z: sphereBody.position.z, last:lastProcessedInput}); }, 1000 / 10); socket.on('input', function (inp) { applyInput(inp); console.log(inp.input_sequence_number); }); sphereBody.velocity = new CANNON.Vec3(0,0,0); /*socket.on('arrayInput', function (ainput) { for (var input in ainput){ if (ainput.input_sequence_number > lastProcessedInput){ applyInput(ainput[input]); } } }); */ }); function applyInput(inp){ sphereBody.velocity.x = 0; if (inp.dir == "right"){ sphereBody.position.x += inp.press_time*5; } if (inp.dir == "sfLeft"){ sphereBody.position.z += inp.press_time*2.5; sphereBody.position.x += -inp.press_time*2.5; } if (inp.dir == "left"){ sphereBody.position.x += -inp.press_time*5; } if (inp.dir == "forward"){ sphereBody.position.z += inp.press_time*5; } if (inp.dir == "back"){ sphereBody.position.z += -inp.press_time*5; } lastProcessedInput = inp.input_sequence_number; console.log(lastProcessedInput); } var initPhysics = function() { world = new CANNON.World(); world.gravity.set(0,-30,0); world.broadphase = new CANNON.NaiveBroadphase(); var mass = 5, radius = 1; sphereShape = new CANNON.Sphere(radius); sphereBody = new CANNON.Body({mass: 1, shape: sphereShape}); sphereBody.position.set(0,2,2); sphereBody.rotation = new CANNON.Vec3(); world.add(sphereBody); sphereBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); createHeightfield(); } var frameCount = 0; var mainLoop = gameloop.setGameLoop(function(delta) { // console.log('Hi there! (frame=%s, delta=%s)', frameCount++, delta); world.step(timeStep); // console.log(sphereBody.position); if (sphereBody){ velocity = sphereBody.velocity; //sphereBody.velocity.z = 0; var inputVelocity = new CANNON.Vec3(); sphereBody.velocity.x = 0; sphereBody.velocity.z = 0; velocity.x = inputVelocity.x; velocity.z = inputVelocity.z; } }, 1000 / 60); function createHeightfield(){ matrix2 = []; elementSize = 2.9999426007270813; matrix2[0] = [ 10.294134842548655, 10.294077302543254, 10.294019762537854, 10.293962222532453, 10.293904682527053, 10.293847142521653, 10.293789602516252, 10.293732062510852, 10.293674522505452, 10.293616982500051, 10.29355944249465, 10.29350190248925, 10.29344436248385, 10.29338682247845, 10.29332928247305, 10.293271742467649, 10.293214202462249, 10.293156662456848, 10.293099122451448, 10.293041582446047, 10.292984042440647 ]; matrix2[1] = [ 10.294134842548655, 10.294077302543254, 10.294019762537854, 10.293962222532453, 10.293904682527053, 10.293847142521653, 10.293789602516252, 10.293732062510852, 10.293674522505452, 10.293616982500051, 10.29355944249465, 10.29350190248925, 10.29344436248385, 10.29338682247845, 10.29332928247305, 10.293271742467649, 10.293214202462249, 10.293156662456848, 10.293099122451448, 10.293041582446047, 10.292984042440647 ]; matrix2[2] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[3] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[4] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[5] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 1.260629979194317, 1.2605724391889166, 1.2605148991835162, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[6] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 1.260629979194317, 1.2605724391889166, 1.2605148991835162, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[7] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 1.260629979194317, 1.2605724391889166, 1.2605148991835162, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[8] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[9] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 4.516292111633966, 4.516234571628566 ]; matrix2[10] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 4.516292111633966, 4.516234571628566 ]; matrix2[11] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 4.516292111633966, 4.516234571628566 ]; matrix2[12] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[13] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[14] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 7.674529389168344, 7.674471849162944, 7.674414309157544, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[15] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 7.674529389168344, 7.674471849162944, 7.674414309157544, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[16] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 7.674529389168344, 7.674471849162944, 7.674414309157544, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[17] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[18] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[19] = [ 10.294134842548655, 10.294077302543254, 10.294019762537854, 10.293962222532453, 10.293904682527053, 10.293847142521653, 10.293789602516252, 10.293732062510852, 10.293674522505452, 10.293616982500051, 10.29355944249465, 10.29350190248925, 10.29344436248385, 10.29338682247845, 10.29332928247305, 10.293271742467649, 10.293214202462249, 10.293156662456848, 10.293099122451448, 10.293041582446047, 10.292984042440647 ]; matrix2[20] = [ 10.294134842548655, 10.294077302543254, 10.294019762537854, 10.293962222532453, 10.293904682527053, 10.293847142521653, 10.293789602516252, 10.293732062510852, 10.293674522505452, 10.293616982500051, 10.29355944249465, 10.29350190248925, 10.29344436248385, 10.29338682247845, 10.29332928247305, 10.293271742467649, 10.293214202462249, 10.293156662456848, 10.293099122451448, 10.293041582446047, 10.292984042440647 ]; shape = new CANNON.Heightfield(matrix2, { elementSize: elementSize }); heightBody = new CANNON.Body({mass: 0, shape: shape}); // Step 2 heightBody.position.y = -4.5; heightBody.position.x = -30; heightBody.position.z = 30; heightBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); console.log(heightBody.position); world.add(heightBody); } initPhysics(); Node.js for the server.js Chrome for the index.html WASD to move around.

As my little project is done using Babylon, I thought this would be the most fitting and active section. If not, mods may move the topic as they please. I am unsure as to how it is possible to apply Server Reconciliation when using physics to drive the movement, as I am using Cannon.js. The examples I've seen on SR are based on movement, by first applying the confirmed position, followed by applying all the unconfirmed input, and thereby smoothing the movement of a local player in a multiplayer setup. I don't really see how this is possible, as by far as I know, Cannon won't be able to simulate ahead of time, and by using velocities/forces/impulses, there is bound to be time involved due to acceleration etc. 1) Is it possible, and has it been done using either Cannon.js, or other of the physics implementations? 2) Are there any other ways of dealing with the apparent jitter/lag? Prediction is good as Cannon is deterministic, but the updates still create a very laggy feel. A good example is this: http://www.gabrielgambetta.com/fpm_live.html Turning on prediction, you'll get results identical to what I have now, but applying unconfirmed input after the confirmed server snapshot simply makes the movement seem slow and unresponsive.

Hi folks, I have the following example... http://www.babylonjs-playground.com/#OYE6Q#4 I was wondering how I'd go about moving the smaller mesh around the plane, by clicking on it, then clicking on a different point in the plane, but in such a way that it uses the physics engine. Currently, if I set another block to having 0 mass, so that it's static. The smaller moveable block passes through the static block. I understand that this is because, animation doesn't actually use the physics engine. So I was wondering if anyone knew how to replicate this behaviour, but using the physics engine. I attempted to use 'applyImpulse' but that seemed to be for applying constant force, such as onKeyDown. I'm a total n00b to game dev and to Babylon, so any help is hugely appreciated. Cheers, Ewan

I need some simple pointers on how to turn an imported model into a Cannon.js heightfield. I would prefer this over actual heightmaps, as I feel that I'm more in control of the design of the ground. I made a simple PG example so I can test it along the way. Just a very basic model made out of a 20x20 plane. How would you pull the positions(Especially Y) on the individual vertices, so they can be used to create the heightfield shape and added to a Cannon.js body? This is the relevant code from the heightfield demo: var matrix = []; var sizeX = 15, sizeY = 15; for (var i = 0; i < sizeX; i++) { matrix.push([]); for (var j = 0; j < sizeY; j++) { var height = Math.cos(i/sizeX * Math.PI * 2)*Math.cos(j/sizeY * Math.PI * 2) + 2; if(i===0 || i === sizeX-1 || j===0 || j === sizeY-1) height = 3; matrix[i].push(height); } } https://github.com/schteppe/cannon.js/blob/master/demos/heightfield.html

I have absolutely nothing to do with the following code, I just thought I wanted to share it, and I was slightly unsure as to which section this was best suited. https://github.com/mfosse/multiplayerFramework it.s 1.6GB with models, sounds etc. http://f1v3.net/mmo/ I haven't been able to load the hosted game, though, so I guess something is down. I just wanted to share it, as it seems to implement an authoritative model, with physics and hit detection done on the server. And I'm pretty sure this is something quite a few users are looking for, based on threads on the forums. The server uses three.js too, but that's only for some basic vertex manipulation for the cannon heightfield I guess. I have trouble installling canvas on node, as a Lot of people seem to have, so I haven't tested it yet.

Okay, so I'm playing around with some vehicle-rigs, and the ones I found on the forum/the playground use spheres as wheels, where as I'm trying ti use the more traditional cylinders instead. Here I have created cylinders instead of spheres: http://www.babylonjs-playground.com/#IIIVB#1 I have commented out the cylinder imposter, and went with the sphere one, as it doesn't make much of a difference at this point. What I'm trying to achieve, is making the rotation of the cylinder more in the likes of a wheel, but no matter how and where I try to rotate the wheels, they just don't seem to do as I command them to. Based on the cylinder imposter, the shapes are all right, but it's a very weird ride, since, as you can see, the wheels behave in a noticably different way than they are supposed to. The playground code is based on this: http://www.babylonjs-playground.com/#IIIVB In which there are quite some versions of on the playground. All with spheres, though. Another example is this, using Oimo.js, and again some code I found on the forum/playground: http://www.babylonjs-playground.com/#1MSQGK#19 (Based on the 18 versions before it). I, again, switched the spheres with cylinders, and changed the imposters accordingly. Same problem. How do I rotate the wheels/axis in the right position? And on a side note, has anyone played with the Energy.js engine? In this thread: RaananW mentions that: But it isn't present in plugin form? Maybe I should get to know at least the basics of One first, but, this one just seemed perfect for vehicular physics.

I'm sure there's a simple solution to this issue. I'm trying to shoot a bullet from the turret of a tank, in the direction that the turret is pointing. I made this simple scene. to demonstrate what I mean: http://www.babylonjs-playground.com/#2IRUGC#2 As you can see, I created a very basic tank, and placed a bullet (sphere) just behind the turret. In front of the turret is a Box mesh( bPoint1 ). I was hoping I could somehow shoot the bullet in the direction of the bPoint, in order for it to "appear" to be shot from the turret. I made the turret spin ever so slightly. How should I approach this?

Hello, I am a bit new to this, but have a working hockey rink with a puck and walls that stop the puck, but it seems I cannot use any other impostor shape other than sphere on my puck even though it is defined as a cylinder when created. Thus, the puck ROLLS along the ice instead of sliding like a puck. Here is a bit of code for the puck and ice. ice = BABYLON.Mesh.CreateGround('ice', 200, 85, 2, scene); puck = BABYLON.MeshBuilder.CreateCylinder("puck", {diameter: 0.3, height: 0.1, tessellation: 32}, scene); ... ice.physicsImpostor = new BABYLON.PhysicsImpostor(ice, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: iceBouncy, friction: lessSlippery }, scene); puck.physicsImpostor = new BABYLON.PhysicsImpostor(puck, BABYLON.PhysicsImpostor.CylinderImpostor, { mass: 1, restitution: bouncy, friction: slippery }, scene); BUT, if I change BABYLON.PhysicsEngine.CylinderImpostor to BABYLON.PhysicsEngine.SphereImpostor it bounces off the ice as expected. Other shapes also do not work. I test with BoxImposter and it did not stop the puck from falling through the ice either. Is there some reason I can't use CylinderImpostor? I feel this must be something simple I am not doing correctly. Thanks for any assistance! EDIT: I am using babylon 2.4 and the latest version of cannon.js <script src="http://cdn.babylonjs.com/2-4/babylon.js"></script> <script src="http://www.babylonjs.com/cannon.js"></script>

Hello everyone, I'm trying to implement the Cannon.js physics engine into a Babylon.js scene. For some reason it's giving me weird problems: If, for example, I try to create a "BABYLON.CannonJSPlugin" and then use "setTimeStep(number)" it throws an exception. Another thing is that if I use "scene.enablePhysics(gravityVector, physicsPlugin)" and then "scene.getPhysicsEngine()" it returns null. I use Babylon.js version 2.3 and I'm building the scene in Microsoft Visual Studio 2012. Any ideas on what may cause those things? Thanks in advance. @RaananW I'm tagging you because you've helped me a lot in the past.

Hi gang, I just pushed an update to the cannon.js plugin to be conform with the newest cannon.js version (0.6.2). Babylon.js 2.3 will support this version only. Running a few tests, cannon.js is actually very nice to use. And the new version fixes bugs the old one had. Try using it and see if it fits your needs. BTW - Comparing both engines using the same scene and configuration might not be 100% correct. I have noticed each engine has different "units" to friction and restitution (and impulse application). Changing the plugin to cannon or oimo should get things to work, but the phzsics configuration might need to be updated.

Hi Everyone, Here is my latest game, called Crokinole. This is a dexterity board game similar in various ways to pitchnut, carrom, with elements of curling reduced to table-top size. I used three.js and the physics engine is cannon.js. The multiplayer part uses websocket, but it's not synchronising the time at the moment so it's possible to a bit laggy. It's tested on mobile and desktop chrome. I hope you like it. Play here: http://butchersworkshop.com/crokinole/ Thank you!