Dragged physics body is clipping through (Havok)

Questions
, ,
1

Hello folks!

I am taking my first steps with babylon.js, moving from purely 2D background.

The challenge I gave myself is to create a Jenga game. Mostly is it going pretty well but I find one problem that I cannot pass. I tried to find answers both in docs and on this forum and after couple of days, here I am, posting my first question :slight_smile:

Here’s what I have so far:

My problem is that the block is clipping through others when being dragged. The slower you go the better it gets but if you go really fast, you can pull out any block without any repercussions!

Ideally I would like to achieve something like this:
https://chandlerprall.github.io/Physijs/examples/jenga.html

My problem seems to be similar to this one:

Am I missing something or is it more complicated to achieve than I thought?

Cheers!

2

cc @carolhmj and @Cedric

3

Hello and welcome abroad! That’s a pretty cool first project you choose :smiley:

Indeed, it’s a bit tricky to mix “manual” drag with physics, because when you update the position of the body directly, you’re kind of “teleporting” it in the physics engine’s view, which ends up breaking the collision detection. You already noticed that it happens more if we move the blocks fast, because that will make the body “teleport” more at each step. To guarantee that the body’s updates are being properly accounted for in the engine, you have to update it through physics methods, such as applying forces/impulses or updating the velocity of the body.

I did a very quick update on your PG, by using the drag observable just to listen to the events, and apply the difference between drag positions as a impulse on the block, using this method, there’s no clipping between the blocks: Jenga Havok Physics | Babylon.js Playground (babylonjs.com)

4 Likes
4

Hey! Sorry for late response (crazy week).
Thanks for the example of impulses. I will check it out and come back if there are any more questions from my side :slight_smile:

1 Like
5

Hello again!

After a while I came back to this with an idea to place an image on top of every block.
I tried to use decals for it but I don’t really know what is wrong. Every example I checked was using casting to place a decal on top of the mesh and I would like to do it instantly when I initialize the block.

Here’s slightly modified example:
https://playground.babylonjs.com/#MWGGQY#6

I don’t know why I am getting only a black rectangle or a square instead of an image that I got from this example: https://playground.babylonjs.com/#1BAPRM#73

Also when I am trying to do the same thing on my main project where blocks are InstanceMesh’es from .gltf file, I kinda see decals as “inverted”? I can somehow see them when I look at the blocks from the bottom - reversed situation of when you look at the ground from the bottom and it is invisible. Pretty hard to explain :sweat_smile:

Also, I though it might be good to continue on this in the same thread (marked as solved) but if I am mistaken then please say so and I will create a new post for that.

6

Since it’s about a different matter and this thread is solved, it’s best to create a new topic! :slightly_smiling_face: