Incorrect mesh collisions

#1

Hi, I have built a simple round race-track using the threejs editor and Kenney assets:

IMG_20210929_204303
IMG_20210929_2043031080×1280 96.6 KB

I then export this as a glb and import it in PlayCanvas using:

app.assets.loadFromUrl(url, "container", function(err, asset) {
	var track = new pc.Entity();
	track.addComponent("model", {
		type: "asset",
		asset: asset.resource.model,
	});
	track.setLocalScale(10,10,10);
	//CODE
});

And I’m adding collision to it by doing:

track.addComponent("collision", {
	type: "mesh",
	asset: asset.resource.model,
});

But the result is quite unexpected. The player is able to stand in the empty space in the centre and also for as far away from the track as I tried to go. The player would never fall off.
IMG_20210929_205259
Is there any way to fix/debug this? Thanks!

#2

Where’s the pivot point for the track? Is it in the centre?

It’s tough to debug this as it’s a mesh. I would try it with a box collision to start with and use the debug physics renderer to try to visualise the issue https://github.com/playcanvas/engine/blob/master/scripts/physics/render-physics.js

#3

Yes the pivot point is in the center:

IMG_20210930_120138
IMG_20210930_1201381080×1248 169 KB

Adding a box collider works as expected, but then the empty space at the center of the track also has collision. Using the renderPhysics script along with mesh collision, it render all the other collisions, but not the track’s collision…

IMG_20210930_120107
IMG_20210930_1201071081×830 73.2 KB

#4

It’s weird that the bounds of the box collision is correct but not a mesh :thinking:

The code you have looks correct. Does this work in the Editor (I know you are engine only but want to check if it could be a setup issue or potentially an engine issue)

#5

I tried to set it up in the editor and it works using both ModelComponent as well as RenderComponent.

ModelComponent: https://playcanvas.com/editor/scene/1241204

RenderComponent: https://playcanvas.com/editor/scene/1241161

In the editor I imported the track as an obj file whereas in my project I’m using a glb file with ModelComponent.

I tried using RenderComponent in my project but then the player just falls through:

var track = asset.resource.instantiateRenderEntity();

track.addComponent("collision", {
	type: "mesh",
	renderAsset: asset.resource,
});

//Static Rigidbody Component
#6

Can you supply the GLB version of the model and perhaps someone can take a look at it?

#7

Hi @Gamer_Wael

Looking at the documentation, I see that the CollisionComponent is expecting an asset to be provided for the renderAsset property:

https://developer.playcanvas.com/en/api/pc.CollisionComponent.html#renderAsset

It looks like you’re providing the asset resource instead of just the asset. If you provide the asset id as a number or just the asset object itself, does it start working?

#8

I have uploaded the glb file here:

As well as here:

@eproasim I tried providing just the asset object but that just gave me a bunch of errors.

#9

I’ve replicated the issue via code using the GLB and a scaled up road: https://playcanvas.com/editor/scene/1241351

#10

Hmm… The collision mesh looks wrong when it is scaled :thinking:

image
image2402×1322 752 KB

(using LeXXik’s awesome debug draw: https://playcanvas.com/project/744419/overview/ammo-debug-draw)

#11

At scale of 1, it looks good

image
image3102×1946 451 KB

#12

Hm… I think it looks like it is scaling the individual blocks separately instead of the whole object…

IMG_20210930_220404
IMG_20210930_2204041080×809 172 KB

#13

Can you try merging all of your model nodes in your modeling app before exporting? Not ideal, but most likely it will resolve that.

#14

I wonder if it’s a unit problem during the export to GLB. I noticed that in your example projects, they have to be scaled up to 100 times when in mine, I don’t have to scale at all to get the same size?

#15

The other thing I noticed is that when you imported the the OBJ into PlayCanvas Editor, it created a single render asset. In the GLB, this is what it looks like:

image
image700×388 37.7 KB

However, the binary you provided has a much more complicated hierarchy?

image
image1142×1406 100 KB

#16

I couldn’t find any such option in the Three JS editor so I tried to export it to blender but the option was missing over there as well.

So I tried to scale the model on the X and Z axes within the Three JS editor, and then export it. And I also removed:
track.setLocalScale(10,10,10);
from my code and the collisions started working as expected! (Although now it feels a bit bumpy sometimes, but that’s another issue)

So I think this was the issue.

Hmm… both those files were exported from the same ThreeJS scene, so I’m not sure why it’s different. In the ThreeJS editor I see the entire complicated heirarchy.

#17

You can merge two objects in Blender using the Boolean modifier. Select one object, add a boolean modifier, point to the next object, apply modifier. Repeat for next piece.

2 Likes