Building a 3D JavaScript physics engine – cannon.js

Above: the JavaScript physics engine cannon.js running together with the WebGL scenegraph three.js.

Recently I’ve been working hard on a 3D JavaScript physics engine that I call cannon.js. I kind of made a prestudy for it in my browser physics project at UMIT, but continued the project as a hobby. It was not a project goal to build an full engine, rather to see IF the browser can do it.

After my performance test, I was determined that a JavaScript physics engine could be a successful project. JavaScript may not be the most optimal way to make a physics engine (C++ seems to be preferred for performance), but by using tricks (typed arrays, web workers, webcl…) quite good performance can be achieved anyway.

A native JavaScript physics engine will also be needed in the future. When the WebGL developers are done with making scenegraphs, the game developers will take over and produce games. And when that happens… They will need physics.

At the moment, cannon.js supports planes, boxes and spheres to a small extent. It is not yet stable enough to use with an end-user software though. When the software gets stable, we can expect Angry Birds-like games in 3D!

You may ask why I am making a new software from scratch. There are already a number of physics engine ports to JavaScript! For example ammo.js. My answer is that they are not enough optimal for JavaScript.
The code structure of those softwares depends on the original language and the porting method, the performance of the final code may not be optimal in JavaScript.
Also, some of the ports contains logical bugs, and many times this is hard to correct for the developer porting the code.
Another reason (probably the most important one) is that I am very interested in a full understanding of a rigid body physics simulator. I admire physics engine developers. Without them we would not have realistic games at all… And Angry Birds would’t even exist.

Have a look at the current examples, or go to cannon.js on GitHub to get the code.

Share Button

5 thoughts on “Building a 3D JavaScript physics engine – cannon.js”

  1. That’s very nice to hear! What do you want to apply this engine on? Any specific constraints or wishes for features?

    I’m trying to put some more resources on this project, you don’t happen to know anyone willing to invest in such engine? 🙂

  2. I would be all over this. Depending on the budget I would be willing to invest not only my time but some cash to bring this thing to life. Shoot me an email to discuss.

  3. hi steffe, i provide you with my billard test scene. If you klick at a ball the view is centered to this view. shot direction (pressing space) is centered ball, so if you hit a ball centered it has to follow this direction, but it does NOT. Any ideas what is wrong there. Is there any subdivisioning applied to the spheres? Impulse applied is definitly through the center of the ball, try it!

    1. Hi! Neat game, good job!
      I don’t know what’s wrong in your demo… Does it help if you turn off *all* friction?

Leave a Reply

Your email address will not be published. Required fields are marked *


*