Animated character and built-in collision detection

Hello fellow Babylonians!

I am a beginner to 3D game development and babylon.js.

I am trying to build a scenario-based 3D learning space where avatars can navigate around and do stuff.

To support collisions, I have tried a couple physics engines but they seem too complicated for my use case. So I selected the included collision engine of babylon.js and it seems to be working nicely except when the avatar is animating.

In an animation I found online, the avatar seems to translated a few “centimeters” off the original center of the meshes, to one side. When colliding with solid boxes, it seems that the collisions happen with the original avatar and not the animated one, which makes, for example, entering doors very weird.

I read the documentation on mesh collisions but there are very few details on what is actually happening when moving with collisions. For instance, is the bounding box used or the ellipsoid?

I have made the following playground, where the weird behaviour can be observed both when entering into the room and especially on a single side of the grass box, where the model cannot approach as close as with the other sides. Please excuse me for the keyboard movement:

Can you help me resolve this?

@Cedric would be a good person to help here.

Hi @Lazaros_Ioannidis

The collision system uses an ellipsoid to do collision detection (and movement response).
The mesh responsible for collision must not be parented or you will get undefined behavior. The parent will always have the priority on the children and collision detection on children will not be taken into account.
For best results, ellipsoid and ellipsoid offset should not change.
Make sure your mesh is centered on the bounding box center, so the ellipsoid will also be centered properly.
Withi these 3 constraints applied, you should get better collision results.

Hello @Lazaros_Ioannidis ! Just checking in if you need any more help with this.

Hello @carolhmj ,

Some animations move the mesh off-center, thus, given the restrictions mentioned by Cedric, I am afraid I cannot implement what I need. One solution would be to ‘emulate’ the bounding box with another mesh, but then parenting is not allowed, so I would need to manually translate the original mesh to the intended position.

Do you think there is a better solution?

You may have a look how it is done here - GitHub - ssatguru/BabylonJS-CharacterController: A CharacterController for BabylonJS

@labris I do use large pieces of code from this sample in my project. I haven’t had significant issues with the animation part, thanks to the sample.

Though, the sample does not contain any collisions with objects other than the ground, for example walls.

I think the solution of emulating the BB with another mesh will be the best one in this case :thinking:

I will try in the following weeks and report back with a sandbox.

I managed to animate my character the way I wanted. I used three helper boxes.
The first one (collisionbox) is moved by the controller. The second one (parentbox) is the parent of all the character meshes. The third one (ghostbox) is also a child of the second, but is always aligned to the center of the character.

As the collisionbox moves around and the character animates, the parent box position is always the collisionbox position minus the ghostbox position. This makes the parent box to be a bit off if the animation is moving the character. This compensates for the offset, so that the character ends up exactly at the collisionbox position, following the controller commands.

Of course, rotations have also to be set.

I will post a sandbox the following days!


Thank you very much for the update, this will probably save someone’s else programming eventually :rofl: :heart: