Incorrect mesh collisions

[Gamer_Wael]

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

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.

Is there any way to fix/debug this? Thanks!

[yaustar]

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

[Gamer_Wael]

Yes the pivot point is in the center:

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…

[yaustar]

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

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)

[Gamer_Wael]

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

[yaustar]

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

[eproasim]

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?

[Gamer_Wael]

I have uploaded the glb file here:

Track.glb

As well as here:

Upload files for free - Track.glb - ufile.io

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

[yaustar]

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

[yaustar]

Hmm… The collision mesh looks wrong when it is scaled

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

[yaustar]

At scale of 1, it looks good

[Gamer_Wael]

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

[Leonidas]

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

[yaustar]

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?

[yaustar]

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:

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

[Gamer_Wael]

@Leonidas

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

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)

@Gamer_Wael

it looks like it is scaling the individual blocks separately instead of the whole object

So I think this was the issue.

@yaustar

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

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.

[LeXXik]

@Gamer_Wael

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.

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.