Need help with collisions; my mesh/actor falls through the floor

Hi everyone. I am having some issues trying physics for the first time. I have looked at the simple examples of physics in the Deep Dive as well as a few from this forum (example: Babylon.js Playground).

You can see the soldier falling through the floor here:

The section of code that loads the soldier is as follows (I raised the soldier’s Y up a little bit so that the soldier drops down towards the floor when the scene loads):

const actor = new Actor(this.scene, 'soldier.glb');
actor.loadActorModel().then((result) => {
    this.soldier = result.meshes[0];
    this.soldierAnimations = result.animationGroups;

    this.soldier.physicsImpostor = new PhysicsImpostor(
        this.soldier,
        PhysicsImpostor.CylinderImpostor,
        { mass: 91, restitution: 0.2 },
        this.scene,
    );

    // Example print animations:
    for (let animation of this.soldierAnimations) {
        console.log(animation.name);
    }

    this.soldierAnimations[0].stop();
    this.soldierAnimations[3].start(true);

    this.soldier.position.x = 2.0;
    this.soldier.position.y = 2.0;
    this.soldier.position.z = -2.0;

The section of code that loads the room model is shown below. The creator of the model named all of the meshes that are stored; I am iterating over them and printing their names as this is mostly just a project for my notes/future-reference.

I am attempting to set the PhysicsImpostor on ‘Plane001’ once it shows up in the loop.

I am also temporarily setting the HighlightLayer on ‘Plane001’ so that I can be sure that it looks accurate (hence the red lines shown in the screenshot).

SceneLoader.ImportMesh(
    '',
    `${location.href}static/`,
    'room.glb',
    this.scene,
    (meshes) => {
        this.roomMeshes = meshes;
        this.soldier.parent = this.roomMeshes[0];
        this.soldier.setParent(this.roomMeshes[0]);
        this.roomMeshes[0].addChild(this.soldier);
        this.roomMeshes[0].position = new Vector3(0.0, 0.0, 0.0);

        // Example print all scene meshes in the baked room model:
        for (let node of this.roomMeshes) {
            console.log(node.name);
            if (node.name === 'Plane001') {
                // Example hightlight mesh:
                const hLayer1 = new HighlightLayer('hl1', this.scene);
                hLayer1.addMesh(node, Color3.Red());

                node.physicsImpostor = new PhysicsImpostor(
                    node,
                    PhysicsImpostor.BoxImpostor,
                    { mass: 0, restitution: 0.2 },
                    this.scene,
                );
            }
        }

So all loads fine and I think the physics part is close, because when the scene loads the soldier drops from a few feet above the floor and then falls right through the floor.

How can I make it collide like in the simple examples?

Also, I am not so sure of the accuracy of the Impostors that I have chosen (ie: Cylinder vs Box vs Plane etc).

Is there a way to temporarily show the collision boundaries? Similar to the HighlighLayer technique?

I am a bit new to 3d programming, but I am extremely impressed with the library and excited to learn it :crazy_face: Any help would be greatly appreciated!

Okay I have made some progress.

My guess is that maybe I can’t just attach a physicsImpostor to the red-highlighted floor node that is baked into the model? (Plane001).

I added a cube to see if that would fall through the floor like the soldier (it did).

So I have added a ground mesh with MeshBuilder.CreateGround(), set it to the same height as the floor in my room model, and then used set setEnabled(false) to make it invisible.

The cube now lands on the floor correctly but the soldier is still falling through. Will keep trying!

cc @Cedric

1 Like

Hi @swim81 do you repro in a playground? it’s easier for us to debug with a small scene.
Usually, meshes/impostors that fall thru ground are already below (or a portion of it) the ground.
Did you check with the physics debugger?
Can you test to spawn the character higher?

Hi Cedric! Yep I set the character’s Y to be up pretty high… so when the scene loads it drops down a ways before passing through the floor.

Is there a physics debugger? You actually just answered one of my questions :slight_smile: I think this must be the link? The Inspector | Babylon.js Documentation

I will give it a shot over the next couple days and report back. Thank you so much!

Hmmm shoot. I haven’t been using the playground… and I can’t seem to get the inspector to run locally (I’m using plain JS with webpack and modules, Flask on the back-end to serve the build and models).


ERROR in ./node_modules/@babylonjs/serializers/glTF/2.0/glTFMaterialExporter.js 9:0-62
Module not found: Error: Can't resolve '@babylonjs/core/Misc/dumpTools.js' in 'C:\Users\user12\Projects\babylonjs_webpack_flask_template\js\node_modules\@babylonjs\serializers\glTF\2.0'
resolve '@babylonjs/core/Misc/dumpTools.js' in 'C:\Users\user12\Projects\babylonjs_webpack_flask_template\js\node_modules\@babylonjs\serializers\glTF\2.0'
  Parsed request is a module
  using description file: C:\Users\user12\Projects\babylonjs_webpack_flask_template\js\node_modules\@babylonjs\serializers\package.json (relative path: ./glTF/2.0)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\Users\user12\Projects\babylonjs_webpack_flask_template\js\node_modules\@babylonjs\serializers\glTF\2.0\node_modules doesn't exist or is not a directory
      C:\Users\user12\Projects\babylonjs_webpack_flask_template\js\node_modules\@babylonjs\serializers\glTF\node_modules doesn't exist or is not a directory
      C:\Users\user12\Projects\babylonjs_webpack_flask_template\js\node_modules\@babylonjs\serializers\node_modules doesn't exist or is not a directory
      C:\Users\user12\Projects\babylonjs_webpack_flask_template\js\node_modules\@babylonjs\node_modules doesn't exist or is not a directory
      C:\Users\user12\Projects\babylonjs_webpack_flask_template\js\node_modules\node_modules doesn't exist or is not a directory
      looking for modules in C:\Users\user12\Projects\babylonjs_webpack_flask_template\js\node_modules
        existing directory C:\Users\user12\Projects\babylonjs_webpack_flask_template\js\node_modules\@babylonjs\core
          using description file: C:\Users\user12\Projects\babylonjs_webpack_flask_template\js\node_modules\@babylonjs\core\package.json (relative path: .)
            using description file: C:\Users\user12\Projects\babylonjs_webpack_flask_template\js\node_modules\@babylonjs\core\package.json (relative path: ./Misc/dumpTools.js)
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\user12\Projects\babylonjs_webpack_flask_template\js\node_modules\@babylonjs\core\Misc\dumpTools.js doesn't exist
      C:\Users\user12\Projects\babylonjs_webpack_flask_template\node_modules doesn't exist or is not a directory
      C:\Users\user12\Projects\node_modules doesn't exist or is not a directory
      C:\Users\user12\node_modules doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
 @ ./node_modules/@babylonjs/serializers/glTF/2.0/index.js 6:0-42 6:0-42
 @ ./node_modules/@babylonjs/serializers/glTF/index.js 3:0-31 3:0-31
 @ ./node_modules/@babylonjs/serializers/index.js 3:0-32 3:0-32
 @ ./node_modules/@babylonjs/inspector/dist/babylon.inspector.bundle.max.js 3:208-241
 @ ./src/scene.js 3:0-30
 @ ./src/index.js 2:0-36 9:8-17

webpack 5.74.0 compiled with 1 error in 3438 ms

I installed the @babylonjs/inspector package from npm and imported like this:

import '@babylonjs/core/Debug/debugLayer'; // TODO: remove
import '@babylonjs/inspector'; // TODO: remove

and then used like this:

this.scene.debugLayer.show({
    embedMode: true,
});

I guess your version are different between core / serializer and inspector.

Can you check in your package.json ?

Hi @sebavan sure thanks!

  "dependencies": {
    "@babylonjs/core": "^5.30.0",
    "@babylonjs/loaders": "^5.30.0",
    "@babylonjs/materials": "^5.30.0",
    "ammo.js": "github:kripken/ammo.js"
  },
  "devDependencies": {
    "eslint": "^8.26.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.26.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"

btw I switched to ammo from cannon but still get the same issue… my cube looks a little slicker when it bounces though :slight_smile:

Can you look into your node_modules folder for which version is installed as I am thinking the caret might have force a more recent minor version of one of the package ?

Oh sure… sorry I realized I had uninstalled the inspector. I just reinstalled and it shows this in my package.json:

"@babylonjs/inspector": "^5.35.1",

And here are just the top portions of each package.json in the libs that you mentioned:

$ cat node_modules/\@babylonjs/serializers/package.json
{
    "name": "@babylonjs/serializers",
    "version": "5.35.1",
    ...

$ cat node_modules/\@babylonjs/core/package.json
{
    "name": "@babylonjs/core",
    "version": "5.30.0",
    ...

$ cat node_modules/\@babylonjs/inspector/package.json
{
    "name": "@babylonjs/inspector",
    "version": "5.35.1",
    ...

Edit: I also added back the inspector import and the call to show() for the scene debugLayer, but unfortunately still get that build error. Webpack sucks :smiley:

core is not on the same version can you move it up to 35.1 as well ?

1 Like

Yep that worked! I can see the inspector now. Thanks for that. I will report back once I figure out how to view the applied physics!

I was just playing with something similar - also with same problem of character falling through floor after walking around a bit. Haven’t figured it out yet.

even with everything scooted up, she still falls through floor eventually:

Collision detection is not really meant to do such things. It’s done so camera and small objects can slide on level geometry.
In this case, the hero slides onto sphere faces and it can then enter the ground.
You can improve things a little by setting a big value to collisionRetryCount or use collision detection with cylinder instead of spheres (so no face are oriented toward ground or sky).
you can switch to a navigation mesh and have dynamic avoidance. or physicalize everything with a physics plugin.

Okay interestingly enough I don’t see any physics outline on the soldier, but I do see it on the cube.

I had to lower the gravity so that I would have time to set the physics debugger to “on” and take a screenshot after refreshing the page. I might try to recreate it in the playground. At least now I know about the debugger!

1 Like

Hi @Cedric and @sebavan

Okay I got it.

My answer was in this post: How to (correctly) import gltf and add physics - #2 by PirateJC

I used the following lines to make the physics show up:

let soldier = result.meshes[0];
this.soldier = soldier.getChildMeshes()[0];
this.soldier.setParent(null);
soldier.dispose();
2 Likes

Yeah. This line should become a must have in the doc as it generates just so many different issues:

1 Like