solved collision detection with holes

[SchneeHenry]

Hello community,

I'm new to babylonjs and I have a question concerning to the collision detection of holes in meshes. I want to recognize that a sphere flies through a hole (any kind of shape possible).

I prepared a example with an cylinder which contains some holes (different shapes) at a random position. A sphere is moving up and down to collide with the cylinder and I want to know, if that sphere collides with a hole or with the surface of the mesh object.
https://www.babylonjs-playground.com/indexStable.html#1ZQS9W#6

At the moment, the collision with the mesh object changes the color of the sphere on any 'collision'. My goal is, that the sphere changes the color only passing/flying through a hole, but the holes can be random positioned and could also have a random shape. 

It would be great if you guys can help/teach me how to achieves this. 

[Sebavan]

The easiest would be to make the hole an invisible mesh so then you could detect collision with it. The best part is that if it is invisible you could rely on efficient shapes like spheres fitting as best as you can with your hole shapes to detect the collisions.

Do not hesitate to let me know if I am not clear enough.

[Sebavan]

Oh And I forgot the most important... fortunately @Wingnut is watching ?

Welcome to the forum !!! 

 

[SchneeHenry]

Hi and thx for the reply.

I changed some lines of code so that the "hole objects" are invisible and added via ActionManager a collision detection on these.
https://www.babylonjs-playground.com/indexStable.html#1ZQS9W#8

But the detection isn't as accurate as I thought. If the sphere just hit the edge of the hole the detection fires, but visually the sphere would hit the ground and only the edge of the hole.

Maybe I should add more smaller 'collider' objects to make a more precise detection, but that could  cause a performance issue?!

[Wingnut]

Hi SH, and welcome from me, too.  Sebavan and I talked a bit... in a personal message.... about your issue.  We (I) talked a bit about using a small invisible collider in center of hole.

We (I) also wondered if your spheres would ALWAYS be spheres, which would allow CannonJS physics engine to use its 'meshImpostor' on the CSG mesh.  This would give you sphere bounce-off (like a basketball hoop) IF sphere hit too much edge. 

SO, may I ask... Will your spheres... ALWAYS be spheres?   CannonJS meshImpostor only allows spheres (sphereImpostors) to collide with it (and rebound/recoil realistically).

And yes, your idea of making precise collision... using many little invisible colliders... is a good idea.  It has been used for a few other BJS projects. 

Yes, that method DOES have some performance concerns, but still possibly worth testing.  You are doing good thinking, SH.

IF you decide to use the CannonJS physics engine and meshImpostor collider... there is a performance issue with that, too.  Quite a few impact-angle and bounce-off angle math calculations are done by the physics engine.  IF the sphere doesn't need to spin after edge-impact, we can remove SOME physics calculations (fixedRotation).  *shrug*  Thinkin'. 

[Sebavan]

You need to add a check in onEntry to ensure you are only colliding with the Hole collider so that you would not have false positive when colliding with both the hole and the shape.

As this might cost a bit of perf the other way is to shrink your colliders to ensures that as long as the ball collides with them it can not touch the other shape by leaving a border equal to the diameter of the ball around the colider.

[jerome]

another approach would be to use the facetData partitioning that can work with any mesh if you like to tweak things 

http://doc.babylonjs.com/how_to/how_to_use_facetdata#mesh-partitioning

http://doc.babylonjs.com/how_to/how_to_use_facetdata

[SchneeHenry]

Thanks for all the feedback ?

To make my goal clearer I'll tell you my intentions about my game. I'll try to develop a kind of 'flying game'. In the game you're flying through a tunnel. Your 'plane' is always a sphere. In that tunnel you have discs/cylinders that are rotating. I will call them gates. These gates have holes where you can fly through. Those holes can have different shapes, sometimes it could be a circle, or an object with edges,... . If you hit the gate your plane will be destroyed. If you pass the gate, you get some points and your movement speed increases. And so on ?

That's why I'm asking for "hole collision detection" and also pay attention about game performance.

@Wingnut it will always be a sphere and I'll try to make an example with cannonJS and post it (but it takes some time ?)

 @Sebavan That was exactly my next step to make it better. I'll try to optimize my colliders. But what exactly did you mean with  " ensure you are only colliding with the Hole collider so that you would not have false positive when colliding with both the hole and the shape" --> I thought I just add intersections with my hole colliders and the sphere and turn off the collision check for any other objects.

@jerome interesting approach  I have to read these articles and examples and try to implement that.

 

Thx so far

 

[Sebavan]

Basicaly I mean as long as your collider is small enough you could not interact with it and another mesh at the same time which prevents the need to double check what you are colliding with.

[SchneeHenry]

Hi, I've got  a question ...

is it possible to show a intersection area of the collider? 
In my PG  https://www.babylonjs-playground.com/indexStable.html#1ZQS9W#9 you see, that the sphere is not collide with the collider but the detection tracks it as a collision (look at the console).
Do I have to adjust the ellipsoid of my collider? Sry if the question ever came up

 

[Wingnut]

Hi guys.  SH, I don't have an answer for your last question, but ellipsoid and ellipsoidOffset [and moveWithCollisions()] were created for use-with a built-into BJS system... used for camera->object collisions... for first-person shooter games.  When using intersectsMesh(), or actionManager intersection stuff, I have never adjusted .ellipsoid.  I think actionManager intersect uses boundingBox and boundingSphere stuff  (no .ellipsoid).  I could be wrong.

You might want to set anymesh.showBoundingBox = true; on some things... to help see what is happening.  *shrug*  Many of us are learning right along-side you, SH!  

Perhaps we will all assemble an "Everything you ever wanted to know about colliding" -document/tutorial, later, using your discoveries and whatever other knowledge we can find.

ANYWAY... I built a playground version with basic CannonJS meshImpostor colliding.

https://www.babylonjs-playground.com/#1ZQS9W#10

*shrug*.  Something to play-with. 

Friction, for spheres... is almost non-operational, due to their near-0 surface-area contact with other surfaces.  If you wish... you can reach deep into the CannonJS "native" (lower level) objects/classes, and do this...

sphere.physicsImpostor.physicsBody.linearDamping = 0.4;   (Found here:  http://schteppe.github.io/cannon.js/docs/classes/Body.html  You can also see the .fixedRotation property that I spoke-of earlier.)

Automatic brakes for roll-forever spheres.     Demo:  https://www.babylonjs-playground.com/#OJVVA#18

[JohnK]

3 hours ago, SchneeHenry said:

you see, that the sphere is not collide with the collider

Hi @SchneeHenry and a welcome from me. Actually they do overlap. It is a little easier to see from this angle https://www.babylonjs-playground.com/indexStable.html#1ZQS9W#11 and even easier to see if you do as @Wingnut suggests and show the bounding boxes for the sphere and cylinderHole Top. You need to check your measurements and also remember that an intersection is calculated from a bounding box.

You collision cylinder has a diameter of 2.25 * 0.05 = 0.1125 and so a radius of 0.02625, so looking down onto the XZ plane gives the following results

the bottom edge of your collision cylinder is at -1.72625 but the top edge of the sphere is at -1.6 .

Also the left edge of the collider is at -0.02625 whereas the right edge of the sphere is at 0.

When R is the radius of the sphere for them not to intersect you need -2.1 + R < -1.72625

R < 2.1 - 1.72625

R < 0.47375 and so the diameter of the sphere has to be less than 2R = 0.9465

In practice (either due to my error somewhere in calculations or to rounding errors) max radius is 0.88 as you can see in this https://www.babylonjs-playground.com/indexStable.html#1ZQS9W#12

[JohnK]

Here is a minor development - currently it is restricted to the sphere moving in the y direction and the plane of the item must be perpendicular the Y axis. You could extend it to other shaped holes but would need to use the inscribed circle of the shape as the hole boundary. I have also simplified to one hole and everything centered on the origin. You can soon extend.

The idea is that provided the sphere is smaller than the hole it will go through if the centre of the sphere is close enough to the centre of the hole.

https://www.babylonjs-playground.com/indexStable.html#1ZQS9W#15

I think the code is self explanatory but if you need something explaining please ask. Have fun. Adjust line 51 for sphere not the pass through.

This one is just playing around with a reaction if the sphere cannot get through. It is not very good as the reaction is not what you would expect.  To get a better reaction you would need to determine the position of the sphere's central column to the centre of the hole. https://www.babylonjs-playground.com/indexStable.html#1ZQS9W#16

 

[SchneeHenry]

@JohnK Thx for your detailed feedback. It helped me a lot and I totally forgot to take the bounding box of each element into account ?

At this point I think I'll continue with the small collider objects for the collision detection.
I'll guess the CannonJS is quite useful but I think I'll run into performance issues when I have a lot of objects but I'm not sure.

When I have time I'll give the facelets a shot. I will keep you up to date.

 

[SchneeHenry]

Hi guys,

I had some time to deal with the faceData approach.

I update my PG: https://www.babylonjs-playground.com/indexStable.html#1ZQS9W#18

From line 92 to 104 I added some positions for different situations where a collision detection doesn't work.
So my question is, why I get a null object in line 142 when my sphere collides with my item. Sometimes I get some facelets and sometimes not.

 

 

[Guest]

@jerome is our facet master

[jerome]

reading quickly your code :

- you don't need to update the facetData once they were computed if your mesh is not morphed in some way

- I think you're trying to find the closest item facet near to the sphere position (so its center) and not from the sphere surface ... FacetData are a facet related feature : if you search for the closest item facet from the sphere center, you'll probably get nothing, hence the returned "null"

As you can't know what part of the sphere could hit the item, you would check in theory is there's some closest item facet near to each sphere facet what you probably be too much computation. Maybe you could instead check only some part of the sphere surface to lower these computations and keep a good approximation (like there were some points or vertices on the sphere acting as collision sensors)