Babylon + Physics with Oimo + Roation

[iiceman]

Hi again everybody,

 

I am still working on my Bomberman game. I made some (little) progress but alot of questions came up. Here I want to ask some of the physics related of those.

 

Here is what I got so far: 

http://p215008.mittwaldserver.info/bbomberman/?players=4

 

Here are the questions:

 

1.) do I understand right, that we don't have a CapsuleImpostor when using Oimo? If so, what would be a good alternative to use for a humanoid? I found this demo of Oimo where they use some kind of capsules, how do they do that (I didn't really get it when looking at the source)? Can I do that, too, in Babylon?  http://lo-th.github.io/Oimo.js/test_compound2.html

 

2.) it seems that I can't really rotate a mesh with an impostor. I read about it here in the forum but I didn't understand how I am supposed to do it. Everything I tried failed:

http://www.babylonjs-playground.com/#1NLTUH

 

Since I am still stuck with the SphereImpostor I decided to have the impostor seperated from the mesh, since it would be enought to just rotate the mesh and not the imposter. Something like:

var player = someInvisibleMesh;var playerMesh = someMeshWithChildrenThatMakeMyBomberman;var playerImpostor = aSphereMesh;playerAvatar.impostor = playerAvatar.setPhysicsState(BABYLON.PhysicsEngine.SphereImpostor, {    mass: 100,    friction: 0.001,    restitution: 0.999});playerMesh.parent = player;playerImpostor.parent = player;

So at the moment, if I rotate the player, I just rotate playerMesh. That kind of works but is somehow stupid. It should be somehow possible to rotate the mesh with the impostor, too, right?

 

3.) (actually not directly physics related but rotation ) I want to rotate the player in 8 different direction when moving up,down, left, right, up left, up right, down left and down right. Therefor I thought I could convert the direction vector (that I use to give the impulse to the physics mesh to make it move) into Euler rotation angles. I googled a bit, found some equations and tried things out. Somehow that works ... at least for the first 6 directions, but down left and down right give me the same result as up left and up right. So... I guess I am doing something wrong here

 

Here is the code for setting the rotation (on the "playerMesh" wich in my code is called this.avatarWrapper):

var finalMoveVector = moveVector.normalize().scale(this.speed);if(finalMoveVector != BABYLON.Vector3.Zero()) {    if (finalMoveVector.x != 0) {        this.avatarWrapper.rotation.y = Math.atan(finalMoveVector.x / finalMoveVector.z);    } else {        if(moveVector.z > 0) {            this.avatarWrapper.rotation.y = 0;        } else {            this.avatarWrapper.rotation.y = Math.PI;        }    }}

Okay... thats it.. for now.. I have more questions, but I save some for later

 

 

I really hope you guys can help me out (again). I appreciate all your help big time, thanks!

[GameMonetize]

1. If Temechon is ok to add support for capsules

2. You cannot easily control a mesh with physics on it because..physics is already controlling it Temechon introduces mesh.updatePhysicsBodyPosition back in time but it is for position. We should be able to do the same for rotation

3. This is not really clear to me what you want to achieve

[iiceman]

1. okay, that would be pretty cool, I think, maybe he needs it for his game, too. @Temechon, you do, right?

 

2. that's too bad. but if you say I can not easily control the rotation.... that kind of implies there is a difficult way to do it? I found this flyer frame demo from wingnut http://urbanproductions.com/wingy/babylon/flyer/flyer20/flyer20.htm (not sure if that's the final version) Is that the hard way to do it? So maybe I should stick with rotating the visible mesh independently from the physics body?

 

3. okay, I try again, hopefully a bit clearer: I want to make the player character face the direction that he is walking. So if the user pushes "D", the player character walks right, so the little dude has to look to the right side. there are 8 directions that the player can move. so i could make a switch case for each of those, but I thought it might be easier/cleaner if I take the direction vector and compute the rotation needed from this vector. therefor this formula seems to return pretty much almost the right angle: Math.atan(finalMoveVector.x / finalMoveVector.z);

 

Problem is that I can't do that if finalMoveVector.z is 0 (devision by zero) ... *looking*at*my*code*example* ... *realizing*that*I*am*checking*for*finalMoveVector.x*and*not*z* ... *feeling*stupid*now* ... uhm, never mind I am not sure if that is the problem though. I mean, how is it possible that this works for the other 6 directions and only down left and down right are broken? But okay, I guess I have to check that myself again and maybe make a playground if I can't figure it out.

 

But you get the general idea of what I am trying to do? Is it the right approach?

 

(by the way: the linked online version of bomberman above should be fully playable with up to 4 players - set then parameter in the url. player1 WASD+SPACE, player2 8456+0 on the num pad and players3 and 4 with gamepad. you have purle random power ups hidden that give you some more or less good power like invisibility or non stop bomb placing - if somebody tries it, let me know if you find bugs! )

[Temechon]

Hello iiceman, 

 

Your game is looking great ! (Mine is not advanced as yours, but I'm working on the game UI and menu)

 

1. I can work on that.

 

2. It's already done. Check this : http://www.babylonjs-playground.com/#1NLTUH#1

 

3. I'm not good in math enough to help you on this :/

[iiceman]

1. Thank you!

2. Awesome!

3. I am not good either but I'll try again. Anybody else good at math and wants to give it a try?

[Temechon]

I'm looking into Oimo code, and I can confirm that only BOX, CYLINDER and SPHERE shapes are supported by default.

You can see here how the capsule shapes is added : 

function initCapsuleGeometry (radius, height, SRadius, SHeight) {        types = [ 'sphere', 'sphere','sphere'];        sizes = [ radius,radius,radius, radius,radius,radius, radius,radius,radius ];        positions = [0,0,0,   0,height*0.5,0, 0,height,0];        ...    }

It's actually composed of three spheres. I can do the same in Babylon (create three spheres for each capsule), but I don't know if it's the best solution.

What do you think ?

[iiceman]

Would definitely be good enough for me. Maybe a combination of 2 spheres and a cylinder with a certain height might by more dynamic (but maybe slower)?

   _____

O|____|O 

 

Or at least a dynamic amount of spheres?

 

OOOOOO

 

By the way, it is not possible to scale the sphere impostor, right? Like from O -> 0 if you know what I mean?

[Temechon]

It's possible to scale it. 

BTW, for Oimo, a cylinder is a box. Nothing more So 3 spheres is the best we can do, like this : 0O0

 

(my ascii art definitely sucks)

[iiceman]

Ohw I can scale it? Then for my purpose a slim sphere would be good, too. I mean a shape like an american football... so I just need to scale the Babylon mesh and the impostor adepts? I guess, I really didn't try that yet.

[Temechon]

The impostor will be scaled according to the boudning sphere (if the impostor is a sphere) or the bounding box (if the impostor is a box).

[iiceman]

Just a short update:

 

1.) I guess I don't need the CapsuleImpostor that badly. But some how I didn't manage to scale my sphere impostor. I guess I missunderstood something here. Therefor I threw togehter a playground to show what I mean:

 

http://www.babylonjs-playground.com/#1ZXK8G#1

 

The two objects collide even if they actually don't touch each other. I hope you guys get what I want to achieve. Is it possible?

 

 

2 and 3 are done, thanks again! Here is the current version, let me know what you think: http://p215008.mittwaldserver.info/bbomberman/ (please don't mind the interface, it's work in progress and I just copied it from an much earlier version and it is kinda messed up. Just add as many players as you like with the + buttons and then hit the obvious play button in the center )

[Temechon]

Hey guys, 

 

Just use a BoxImpostor instead of a SphereImpostor for the sphere.

I don't know why, but Oimo takes only one size to create the physics body of a sphere, and by default Babylon gives it the max of the 3 radius (x, y, z).

 

So what you are trying to achieve is not possible right now, but it is possible with a box impostor.

[iiceman]

Okay, I see, thank you. I'll try it out and if it doesn't work as I want to, I think I try to combine my sphere with one or two other impostors, that should work out somehow.. probably

[iiceman]

I got a new physics related question... I think it might be related to the rotation problem, but I am not sure. I am trying to use ramps that the player can go up. I only tried in a playground so far but I can't get it to work as i expected it: http://www.babylonjs-playground.com/#1XAAKS (hit any key to apply an impulse to the sphere to make it go to the right)

 

It seems to me that the bounding box of the ramp (or better: it's impostor) is not where Babylon shows it. Any idea what I am doing wrong here?

[Wingnut]

Hi again, iiceman! 

 

http://www.babylonjs-playground.com/#1XAAKS#2

 

That works.

 

Basically, I never saw the "// throws error: undefined is not a function" for your line 49.  I did see a momentary d.undefined is not a function compilation error, but it went away after I did a fresh non-cache reload (shift-control-R in firefox).  A minor bug could have been fixed in the middle of the night... who knows?  Things happen fast around these parts.  Make sure you have cleared your browser cache before doing more testing.  The error might have disappeared for you, too.

 

I also disabled line 54 - // ramp.updatePhysicsBodyPosition();  I don't know when that call is supposed to be used, but it annoyed me, so I eliminated it.  hehe. 

 

Note: The line numbers I am quoting are for the first demo.  My version has different line numbers because I cleaned some of the old comments out of the scene.

 

Then I used your line 49 rotate setter to set the rotation of the ramp to a decent angle... and did a bit of ramp position tweaking (yawn).

 

Then I increased the friction on the ground, sphere, and ramp, just because I wanted-to. 

 

Then it all started acting more correctly.   Other testers... iiceman's demo allows repeated pressings of any key... to +x applyImpulse to the sphere.  Fun little demo/test.

 

iiceman, it seems these physics engines count-on rotation quaternions... and ramp.rotate(BABYLON.Axis.Z, .5, BABYLON.Space.LOCAL); is indeed a quaternion rotater (at least I think so, but I am often wrong).  In BJS, when you rotate a mesh with a standard .rotation property... it is Euler.  If you look at the api for our mesh, there is NOT a .rotationQuaternion property on it AT ALL, by default.  It gets created... if certain conditions are met.

 

Take a look at...

 

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Mesh/babylon.abstractMesh.js#L189

if (!this.rotationQuaternion) {    this.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(this.rotation.y, this.rotation.x, this.rotation.z);    this.rotation = BABYLON.Vector3.Zero();}

Per this code, IF the mesh has no .rotationQuaternion, then create one here and now.  What criteria must be met for the framework to create a .rotationQuaternion... that I don't know.

 

Generally speaking, avoid .rotation when using a mesh with a setPhysicsState.  Stick with .rotate() or yaw/pitch/roll things.  Also notice that when a .rotationQuaternion is created, it is set to 0, nulling-out any previous (euler) rotation that was applied to the mesh.

 

Positioning a mesh, without using applyImpulse, has proven to be another challenge.  In my "links from hell" demo, I needed to make the green box be physics-active, yet I wanted to move it with Math.cos (not with applyImpulse).  I worked-around the problem in the animation function, where I move the mesh, then re-apply its physicsState and links with the chain.  The imposter re-positions itself to the mesh.... when I re-set the physics state on each animation cycle.

 

I'm sure there are better ways, but the point I am trying to make is that once a mesh has its physics state set... it uses physics "imposters".  And if you don't position or rotate the mesh using a method where the imposter "comes-along on the ride" (rot/pos), then you are going to have a bad time. 

 

In other words, you might find that the imposter for a ramp... is not in the same place or at the same angle... as the MESH for that ramp.  It is because you postioned or rotated the mesh, but the physics imposter said "Hey, I want a SPECIAL kind of postioning and rotating" and refused to follow the mesh itself. 

 

There's lots of posts in this forum... talking about positioning and rotating mesh that have their physicsState set.  ApplyImpulse is a never-fail way.  Other ways... challenging.  The more you understand quaternions, the better... but we all know that it is quite impossible to understand quaternions.  heh.

 

On a similar topic...

 

Rumor has it... we have active physics allowed on heightMaps these days.  That means we can make a bowl out of a ground mesh, and roll a sphere around in it.  That would be fun, huh?  A person might play with the vertex colors on the ground mesh, and the sphere will leave colorful trails wherever it rolls! 

 

I have been excessively lazy, lately, but maybe somebody wants to run with that, huh?    Readers, please correct mistakes I have made, and help me/us learn things.  Thanks!

[iiceman]

Nice! That's how it was supposed to look like Thanks! I check with my PC at work now, so I assume it really was a cache problem.

 

I am interested in that height map with physics thing. How is that supposed to work? Does Oimo support that? Where do those rumors come from? Any resource that I could check to find out how it is supposed to work? I would like to use something like that to build a bit more complex maps for my game without having to use individual ramps like the one that I was playing with.

[Wingnut]

Let's bring this one back "up".  Sorry that you've had no replies for so long, ice.  The only webGL heightmap physics I've seen so far... is the cannonJS raycast car.  I'm sure there are others.  Near line 121...

            var hfShape = new CANNON.Heightfield(matrix, {                elementSize: 100 / sizeX            });            var hfBody = new CANNON.Body({ mass: 0 });            hfBody.addShape(hfShape);

Notice, it's NOT a threeJS heightmap... but a cannonJS heightmap.  And I believe this requires the newest CannonJS... which is not your standard Babylon Playground version.

 

I don't know if anything can be deduced from any of this, but it's just some observations I've done, and likely poor ones. 

[iiceman]

Hey Wingy... new picture, eh? Cool cool...

 

Thanks for the reply but I already kinda gave up on that idea and completly removed the physics engine. I think i dont rellay need it and things are easier with moveWithCollisions... even if it sometimes doesn't work as I would like to either. So maybe somebody else needs it one day and makes things work but for now I am gonna try my luck with moveWithCollisions... well as soon as I have tome and mood to try again... took a long break and didn't get in the mood yet again