BabylonJS + cannon-es + raycastVehicle

neu5 · August 19, 2022, 2:49pm

Hi, I’m trying to replace AmmoJS with cannon-es in my project. I’m using this cannon-es example

pmndrs/cannon-es/blob/master/examples/raycast_vehicle.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>cannon.js - RaycastVehicle</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
  </head>
  <body>
    <script type="module">
      import * as CANNON from '../dist/cannon-es.js'
      import { Demo } from './js/Demo.js'

      const demo = new Demo()

      demo.addScene('Car', () => {
        const world = setupWorld(demo)

        // Build the car chassis
        const chassisShape = new CANNON.Box(new CANNON.Vec3(2, 0.5, 1))

This file has been truncated. show original

and at this point I’m stuck with how to get the vehicle to be shown in the scene?
My (not working, I mean it’s working but it’s not adding the body to the scene) code so far:

github.com

neu5/rally-online/blob/107c2079b798e10dbec060c55497f7669d7f6e37/packages/client/src/scene/scene.ts#L74


      
          const physicsEngine = scene.getPhysicsEngine();
          
          
if (physicsEngine === null) {
            throw new Error("Physics Engine is null");
          }
          
          
const physicsWorld = physicsEngine.getPhysicsPlugin().world;
          
          
playersMap.forEach((player) => {
            // Build the car chassis
            const chassisShape = new CANNON.Box(new CANNON.Vec3(2, 0.5, 1));
            const chassisBody = new CANNON.Body({ mass: 150 });
            chassisBody.addShape(chassisShape);
            chassisBody.position.set(0, 4, 0);
            chassisBody.angularVelocity.set(0, 0.5, 0);
            // demo.addVisual(chassisBody);
          
          
  // Create the vehicle
            const vehicle = new CANNON.RaycastVehicle({
              chassisBody,
            });

The examples in the cannon-es are using Three.js. I checked that they are using some demo.addVisual function, which uses bodyToMesh function. So I guess I should do something similar and create BabylonJS meshes?

I think probably @Cedric is the person that may give me some hints
Thanks in advance!

RaananW · August 19, 2022, 3:46pm

The general idea is - after the physics is done calculating the next position, update the babylon meshes corresponding the impostors. for example, in the postStep event in cannonjs, iterate over each impostor and “copy” its transformation to a babylon mesh you have already created

neu5 · August 19, 2022, 4:34pm

Thanks @RaananW!

I’ve found your demo in some old topic

I think I can get some inspiration from that code.

RaananW · August 19, 2022, 4:49pm

That’s what I call “travel the world”

This must be 6 years old!

neu5 · September 2, 2022, 1:10pm

@RaananW I would be thankful if you could take a look at my code.
As I told before I’m trying to marry this example

github.com

pmndrs/cannon-es/blob/master/examples/raycast_vehicle.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>cannon.js - RaycastVehicle</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
  </head>
  <body>
    <script type="module">
      import * as CANNON from '../dist/cannon-es.js'
      import { Demo } from './js/Demo.js'

      const demo = new Demo()

      demo.addScene('Car', () => {
        const world = setupWorld(demo)

        // Build the car chassis
        const chassisShape = new CANNON.Box(new CANNON.Vec3(2, 0.5, 1))

This file has been truncated. show original

with BabylonJS.

So at first I’m creating the meshes:

github.com

neu5/rally-online/blob/398bd70e295fb802edd616362ea3a5e5e9038dc5/packages/client/src/scene/scene.ts#L130


      
          
          
const physicsEngine = scene.getPhysicsEngine();
          
          
if (physicsEngine === null) {
            throw new Error("Physics Engine is null");
          }
          
          
const physicsWorld = physicsEngine.getPhysicsPlugin().world;
          
          
playersMap.forEach((player) => {
            // babylon meshes part
            const carPosition = [0, 4, 0];
          
          
  const visualBody = createChassisMesh({
              depth: chassisDepth,
              width: chassisWidth,
              height: chassisHeight,
              scene,
            });
          
          
  visualBody.physicsImpostor = new PhysicsImpostor(

and later I’m creating the bodies for the physical engine

github.com

neu5/rally-online/blob/398bd70e295fb802edd616362ea3a5e5e9038dc5/packages/client/src/scene/scene.ts#L191


      
          
          
wheelBL.physicsImpostor = new PhysicsImpostor(
            wheelBL,
            PhysicsImpostor.SphereImpostor,
            { mass: massWheel, restitution: 0.9 },
            scene
          );
          
          
const wheelMeshes = [wheelFR, wheelFL, wheelBR, wheelBL];
          
          
// physics engine part
          const chassisShape = new CANNON.Box(
            new CANNON.Vec3(chassisDepth, chassisHeight, chassisWidth)
          );
          const chassisBody = new CANNON.Body({ mass: massVehicle });
          chassisBody.addShape(chassisShape);
          chassisBody.position.set(...carPosition);
          chassisBody.angularVelocity.set(0, 0.5, 0);
          
          
// Create the vehicle
          const vehicle = new CANNON.RaycastVehicle({

And at the end I’m setting the positions of the wheels but it doesn’t work.
The whole PR is just here

I had “working babylon vehicle” with usage of mesh.parent but I can’t get it working with physics engine.
Gosh, I feel like I should take some “basic gamedev course”.

RaananW · September 2, 2022, 1:16pm

pulling this PR will be enough to run the project?

neu5 · September 2, 2022, 1:19pm

Yes, it works locally.
@RaananW I can try creating PG. I think it should work with cannon, it’s pretty basic stuff.

neu5 · September 2, 2022, 5:56pm

Here is the PG:

RaananW · September 2, 2022, 6:02pm

that seems to be causing a fight between babylon’s physics loop and the cannon changes, no? You are using babylon’s phyiscs impostors on the wheels, and then update them in the postStep again. Do you need the physics impostors? or better - do you need the physics engine plugin in this case?

neu5 · September 2, 2022, 6:15pm

You know, I’m really like

Removing the physics impostors on the wheels doesn’t seem to change anything.
Maybe there is something wrong with this postStep function. I copied it from cannon-es example.

If I use only BabylonJS Physics, and I have box as parent with wheels it doesn’t work because mesh children impostors don’t work - so I guess I need the physics engine plugin.

RaananW · September 2, 2022, 6:22pm

The story of my life!

This kind of hybrid solution would require a lot of playing around with the babylon cannon plugin and special configuration to the impostors.
You want to avoid transforming your meshes twice. either the babylon physics engine is doing it (as in my example), or youa re doing it manually (and then you don’t need enabling the babylon physics engine. I will be happy to find time and show you a simple example of this way of working, but i won’t make it today, that’s for sure…

neu5 · September 2, 2022, 6:29pm

No problem! I’m also done for today. Thank you for your help - it really opens new doors in my head
So when you wrote about the physics engine plugin you meant the Babylon impostors?
If so - I think I won’t need it. I want to build simple car racing game with heightmaps so I will need Cannon plugin - it should do all the work.

neu5 · September 5, 2022, 3:02pm

Hey, I followed your instructions and I removed Babylon impostors and at the moment I’ve got something like this:

Don’t know what a heck is going on with the wheels but I’m heading somewhere definitely

EDIT:
Ok, so the
chassisBody.angularVelocity.set(0, 0.5, 0);
was the reason of the rotating wheels. So I’ve got

@RaananW do you think it looks ok?
If so I’ll try to add driving code to it.

RaananW · September 12, 2022, 11:00am

It does look ok! There were a few issues with the data conversion, but this should work now - cannon simple vehicle | Babylon.js Playground (babylonjs.com)

(I switched the camera’s position). There seems to be an issue with the force application. This might be the version of cannon we are using over the version of cannon this was developed for. It is possible that cannon-es has fixed a but (or added params), that are not supported in the old cannon implementation. that’s probably why steering is not working as you expect.

neu5 · September 12, 2022, 11:05am

Thanks @RaananW, I’m on that too atm.
But it doesn’t go forward / backward it goes to the sides…
Did I messed up something while building the vehicle for the physics engine?

RaananW · September 12, 2022, 11:06am

No, i really believe this is a difference between cannon and cannon-es.

In my demo I fixed it by changing the axis for every wheel and applied difference force on both wheels. I can’t seem to find the line that does it, but it seems like the force is applied incorrectly.

neu5 · September 12, 2022, 11:13am

Okey, so I opened the demo you shared

and I’m just clicking WSAD and I see
car

RaananW · September 12, 2022, 11:17am

Sorry, I meant - the demo I have created 6 years ago. You can see how I solve it there, to fix the cannon architecture

Topic		Replies	Views
Cannon-es-debugger with BabylonJS Demos and projects cannon-es	6	807	October 25, 2022
Switch back from Ammo.js to Cannon.js Questions	10	2488	November 5, 2019
Best way to implement/import AmmoJS physics engine? Questions	2	1656	June 2, 2021
CANNON/OIMO/AMMO TypeScript/Webpack example please? Questions	10	2687	April 19, 2020
Webpack-compliant imports for Cannon.js Questions	6	2064	March 15, 2020

Related Topics