Collision not detected

[David78]

Hi to all,

 

This question regards collision-detection on a terrain and also on other meshes. Going through this example here:

 

https://github.com/BabylonJS/Babylon.js/wiki/09-Cameras-collisions

 

And playing with it in the playground and even on my local server, everything works as it should, collision detection is enabled and the camera does not fall through the mesh and it also hits the box. This is really good for an FPS.

 

The issue comes when one uses this same technique without a camera, like so:

scene.gravity = new BABYLON.Vector3(0, -0.5, 0);	scene.collisionsEnabled = true;	//terrain:	var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "DoubleBasin_big/DoubleBasin_big.png", 100, 100, 100, 0, 12, scene, true);       var groundMaterial = new BABYLON.StandardMaterial("groundMat", scene);	groundMaterial.diffuseTexture = new BABYLON.Texture("tiles-56/arroway.de_tiles-56_d100.jpg", scene);	groundMaterial.diffuseTexture.uScale = 5.0;	groundMaterial.diffuseTexture.vScale = 5.0;	ground.material = groundMaterial;		ground.checkCollisions = true;//wall:

var Mur = BABYLON.Mesh.CreateBox("Mur", 1, scene);Mur.scaling = new BABYLON.Vector3(15, 6, 1);Mur.position.y = 3.1;Mur.position.z = 20;Mur.checkCollisions = true;//loaded character: meshPlayer.checkCollisions = true; meshPlayer.ellipsoid = new BABYLON.Vector3(0.5, 1, 0.5); meshPlayer.ellipsoidOffset = new BABYLON.Vector3(0, 2, 0); meshPlayer.applyGravity = true;

 

 

That would be good for a third person type of thing. The code is from dad72's demo here:

 

http://www.castorengine.com/babylon/moveCharacter/

 

It works fine on that link, however when I downloaded the source and ran it on the local server, everything just falls through the terrain's mesh. The code is unchanged with the exception of using different materials and a different heightmap. Is there something missing somewhere on my part, once the code is run locally? There isn't any physics, just in-built babylon.js collision. This example from my perspective is extremely impressive, as it shows how easy it is to build a game. The only thing that's left is just adding a story-line with different characters, environments and so on! This is a really amazing engine! 

 

Thanks in advance.

[amorgan]

I believe you don't use meshPlayer.applyGravity, but instead in your renderLoop move the mesh with meshPlayer.moveWithCollisions(x, scene.gravity.y, z);

[Dad72]

ellipsoid on a mesh works if you use mesh.moveWithCollisions (x, y, z);

This allows to manage gravity with the collisions by moving the character.

 

PS: Delighted that my demo is useful. I have change the tutorial (4 - Object vs. object collision) with a small example for the velocity and add this demo of the character that it moves with the colllisions and the gravity

The link has changed and is now: https://github.com/BabylonJS/Babylon.js/wiki/09-Cameras-and-mesh-collisions

[David78]

Thank you both for your replies, and thanks dad72 for the working demo.

 

Well that part that you mention, is also implemented in the code. In fact, here is the whole exact code that I use, the same as dad72 uses:

var canvas = document.getElementById("renderCanvas");var PlayAnnimation = false, PlayerCharger = false, skybox, scene, sceneCharger = false, meshPlayer, meshOctree, skeletonsPlayer = [], cameraArcRotative = [], octree,    keys={letft:0,right:0,arriere:0,avancer:0}, VitessePerso = 5, forward, backwards;function animatActor(){		if(PlayAnnimation === false && (keys.avancer == 1 || keys.arriere == 1)) {		totalFrame = skeletonsPlayer[0]._scene._activeSkeletons.data.length;			start = 0;		end = 100;		VitesseAnim = parseFloat(100 / 100);		scene.beginAnimation(skeletonsPlayer[0], (100*start)/totalFrame, (100*end)/totalFrame, true, VitesseAnim);		meshPlayer.position = new BABYLON.Vector3(parseFloat(meshPlayer.position.x), parseFloat(meshPlayer.position.y), parseFloat(meshPlayer.position.z));		PlayAnnimation = true;	}	if (keys.avancer == 1){	// En avant				forward = new BABYLON.Vector3(parseFloat(Math.sin(parseFloat(meshPlayer.rotation.y))) / VitessePerso, 0.5, parseFloat(Math.cos(parseFloat(meshPlayer.rotation.y))) / VitessePerso);		forward = forward.negate();		meshPlayer.moveWithCollisions(forward);	}		else if (keys.arriere == 1) { // En arriere			backwards = new BABYLON.Vector3(parseFloat(Math.sin(parseFloat(meshPlayer.rotation.y))) / VitessePerso, -0.5, parseFloat(Math.cos(parseFloat(meshPlayer.rotation.y))) / VitessePerso);				meshPlayer.moveWithCollisions(backwards);	}	}// Cameras rotative qui suit l'acteur joueurfunction CameraFollowActor(){			meshPlayer.rotation.y = -4.69 - cameraArcRotative[0].alpha;				cameraArcRotative[0].target.x = parseFloat(meshPlayer.position.x);			cameraArcRotative[0].target.z = parseFloat(meshPlayer.position.z);		}function createScene() {   	var engine = new BABYLON.Engine(canvas, true);	engine.displayLoadingUI();    scene = new BABYLON.Scene(engine);			//Active gravity and collision	scene.gravity = new BABYLON.Vector3(0, -0.5, 0);	    scene.collisionsEnabled = true;	       // Light directional	var LightDirectional = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-2, -4, 2), scene);    	LightDirectional.diffuse = new BABYLON.Color3(1, 1, 1);		LightDirectional.specular = new BABYLON.Color3(0, 0, 0);	LightDirectional.position = new BABYLON.Vector3(250, 400, 0);    LightDirectional.intensity = 1.8;		// Camera 3 eme personne	cameraArcRotative[0] = new BABYLON.ArcRotateCamera("CameraBaseRotate", -Math.PI/2, Math.PI/2.2, 12, new BABYLON.Vector3(0, 5.0, 0), scene);		cameraArcRotative[0].wheelPrecision = 15;		cameraArcRotative[0].lowerRadiusLimit = 2;	cameraArcRotative[0].upperRadiusLimit = 22;	cameraArcRotative[0].minZ = 0;	cameraArcRotative[0].minX = 4096;	scene.activeCamera = cameraArcRotative[0];		cameraArcRotative[0].attachControl(canvas);	// Terrain	var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "DoubleBasin_big/DoubleBasin_big.png", 100, 100, 100, 0, 12, scene, true);       var groundMaterial = new BABYLON.StandardMaterial("groundMat", scene);	groundMaterial.diffuseTexture = new BABYLON.Texture("tiles-56/arroway.de_tiles-56_d100.jpg", scene);	groundMaterial.diffuseTexture.uScale = 5.0;	groundMaterial.diffuseTexture.vScale = 5.0;	ground.material = groundMaterial;		ground.checkCollisions = true;		// Wall	var Mur = BABYLON.Mesh.CreateBox("Mur", 1, scene);		Mur.scaling = new BABYLON.Vector3(15, 6, 1);	Mur.position.y = 3.1;	Mur.position.z = 20;	Mur.checkCollisions = true;			// Character import	BABYLON.SceneLoader.ImportMesh("him", "Dude/Dude/", "dude.babylon", scene, function (newMeshes, particleSystems, skeletons)	{		meshPlayer = newMeshes[0];		meshOctree = newMeshes;		meshPlayer.scaling= new BABYLON.Vector3(0.05, 0.05, 0.05);		meshPlayer.position = new BABYLON.Vector3(-5.168, 1.392, -7.463);		meshPlayer.rotation = new BABYLON.Vector3(0, 3.9, 0);		cameraArcRotative[0].alpha = -parseFloat(meshPlayer.rotation.y) + 4.69;				skeletonsPlayer[0] = skeletons[0];		skeletonsPlayer.push(skeletons[0]);		var totalFrame = skeletons[0]._scene._activeSkeletons.data.length;			var start = 0;		var end = 100;		var vitesse = 100 / 100;		scene.beginAnimation(skeletons[0], 100*start/totalFrame, 100*end/totalFrame, true, vitesse);				meshPlayer.checkCollisions = true;		meshPlayer.ellipsoid = new BABYLON.Vector3(0.5, 1, 0.5);		meshPlayer.ellipsoidOffset = new BABYLON.Vector3(0, 2, 0);		meshPlayer.applyGravity = true;			});				scene.registerBeforeRender(function(){					if(scene.isReady() && meshPlayer) {				if(sceneCharger == false) {								engine.hideLoadingUI();				sceneCharger = true;			}			animatActor();					}	});		engine.runRenderLoop(function () {        scene.render();				if(scene.isReady() && meshPlayer){										CameraFollowActor();						if(PlayerCharger == false) {				scene.stopAnimation(skeletonsPlayer[0]);				PlayerCharger = true;								octree = scene.createOrUpdateSelectionOctree();				for(var i = 0; i < meshOctree.length; i++) {					octree.dynamicContent.push(meshOctree[i]);				}			}		}		    });		    window.addEventListener("resize", function () { engine.resize();});		window.addEventListener("keydown", onKeyDown, false);	window.addEventListener("keyup", onKeyUp, false);}// Gestion du clavier quand on presse une touchefunction onKeyDown(event) {    	var touche = event.keyCode;	var ch = String.fromCharCode(touche);	switch (touche) {		case 16: // MAJ Le perso cours			VitessePerso = 2.5;		break;		case 32: // ESPACE le perso saute						keys.saut=1;		break;	}				// Clavier AZERTY	if (ch == "Z") keys.avancer=1;	if (ch == "Q") keys.left=1;		if (ch == "S") keys.arriere=1;	if (ch == "D") keys.right=1;}// Gestion du clavier quand on relache une touchefunction onKeyUp(event){    	var touche = event.keyCode;	var ch = String.fromCharCode(touche);	switch (touche) {		case 16: // MAJ Le perso marche			VitessePerso = 5;		break;		case 32: // ESPACE le perso ne saute plus			keys.saut=0;			 		break;	}			// Clavier AZERTY	if (ch == "Z") keys.avancer=0;	if (ch == "Q") keys.left=0;		if (ch == "S") keys.arriere=0;	if (ch == "D") keys.right=0;		PlayAnnimation = false;	scene.stopAnimation(skeletonsPlayer[0]);}

As you can see, I have not changed a thing other than the heightmap and texture and path to the dude.babylon file, it even maintains the French! The part you mention, is also there:

if (keys.avancer == 1){	// En avant				forward = new BABYLON.Vector3(parseFloat(Math.sin(parseFloat(meshPlayer.rotation.y))) / VitessePerso, 0.5, parseFloat(Math.cos(parseFloat(meshPlayer.rotation.y))) / VitessePerso);		forward = forward.negate();		meshPlayer.moveWithCollisions(forward);	}		else if (keys.arriere == 1) { // En arriere			backwards = new BABYLON.Vector3(parseFloat(Math.sin(parseFloat(meshPlayer.rotation.y))) / VitessePerso, -0.5, parseFloat(Math.cos(parseFloat(meshPlayer.rotation.y))) / VitessePerso);				meshPlayer.moveWithCollisions(backwards);	}

Even the wall mesh that does not move just falls right through the terrain when the scene has finished loading. Dad72, if it's not too much to ask, can you kindly produce a .zip file that has this demo; or could you please look at the above code and perhaps point out why when it is run in my local server, the wall mesh and the character mesh just fall through the terrain mesh, and in fact, no collision is detected anywhere in the scene, even between the wall and the character?

 

Thanks in advance.

[Dad72]

Hello,

 

It is strange, try deleting this:

 

scene.gravity = new BABYLON.Vector3(0, -0.5, 0);

 

Make sure you use the latest version of babylon

 

Url zip:

http://www.castorengine.com/babylon/moveCharacter.zip

[David78]

It seems Babylon doesn't like certain heightmaps...

 

Changing the heightmap from the one I have, to the one you're using makes it work fine. However, using the attached heightmap inhibits the collision detection,everything just falls through. You can try and use it and see if you get the same results.

 

Instead of:

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "map.jpg", 100, 100, 100, 0, 12, scene, true);   

try:

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "DoubleBasin_big/DoubleBasin_big.png", 100, 100, 100, 0, 12, scene, true);   

Using the first heightmap detects collision, however, using the second one does not.

The second heightmap is attached.

How can this issue be addressed? 

[Dad72]

I do not think your heightmap is correct.

 

Try this one, it's the same image but modified

[David78]

I suppose the issue has been solved, it is the nature of the heightmap that is used. Even when using the heightmap that you've modified, everything still falls through, but not completely, only mid-way; however, upon walking, the character falls completely through. It's just increasing the grey-scale intensity of the image that fixes it completely, thanks for the help.

 

I used a different heightmap I generated using this package here:

 

http://nemesis.thewavelength.net/index.php?p=9

 

It's very good for generating different types of terrains.

Using the new attached terrain works,well for example, the first one I just downloaded from the net.

[with this small change to make the wall's elevation higher:

Mur.position.y = 7.1; 

]

If I may ask, what are you using to generate or modify your heightmaps? 

 

Thanks.

[Dad72]

my heightmap made by me, I painted by hand, I do not use any specific software.

 

If I use a terrain editor I specially made: CastorEngine (an editor of game that I did with Babylon which is open source, multilingual)