View source for Cannon.js

{{Short description|3D JavaScript physics engine}}
{{Infobox software
| title                = Cannon.js
| name                 = Cannon.js
| platform             = 
| programming language = [[JavaScript]]
| operating_system     = OS independent
| genre                = 3D [[physics engine]]
| license              = [[MIT License]]
| developer            = Stefan Hedman
| latest release version = 0.6.2
| latest release date = {{release date|2015|03|28}}<ref>
{{cite web
|url=https://github.com/schteppe/cannon.js/releases
|title=Releases · schteppe/cannon.js
|website=GitHub.com
|access-date = 11 May 2021
}}</ref>
| website              = {{URL|http://www.cannonjs.org/}}
| AsOf                 = 
}}

'''Cannon.js''' is an [[Open-source software|open source]] [[JavaScript]] [[3D computer graphics|3D]] [[physics engine]] created by Stefan "schteppe" Hedman.<ref>{{cite web |title=Stefan Hedman  |url=https://github.com/schteppe |website=GitHub |accessdate=27 April 2017}}</ref> Unlike physics engine libraries ported from C++ to JavaScript, cannon.js is written in JavaScript from the start and can take advantage of its features.<ref name=Prall2012>{{cite web |last=Prall |first=Chandler |title=JavaScript Physics Engines Comparison |url=http://buildnewgames.com/physics-engines-comparison/ |website=Build New Games |date=10 April 2012 |accessdate=27 April 2017}}</ref> In a 2013 comparison with Ammo.js, cannon.js was found to be "more compact, more comprehensible, more powerful with regard to its performance and also easier to understand", but did not have as many features.<ref name=Huber2013>{{cite book |last=Huber |first=Linda |chapter=Initial Steps for the Coupling of JavaScript Physics Engines with X3DOM |editor1=Jan Bender |editor2=Jeremie Dequidt |editor3=Christian Duriez |editor4=Gabriel Zachmann |title=Workshop on Virtual Reality Interaction and Physical Simulation (VRIPHYS 2013) |journal=Workshop on Virtual Reality Interaction and Physical Simulation |publisher=The Eurographics Association |date=2013 |pages=81–90 |isbn=978-3-905674-57-6 |doi=10.2312/PE.vriphys.vriphys13.081-090}}</ref>

== Features ==

Cannon.js supports the following shapes: sphere, plane, box, cylinder, [[Polyhedron#Convex polyhedra|convex polyhedron]], particle, and [[heightfield]]. This collection of shapes matches the collection used by rendering engines such as [[Three.js]] and [[Babylon.js|Babylon]], but is not complete. For example, it is not sufficient for X3DOM,<ref name=Huber2013 /> an application of [[X3D]] which allows 3D graphics to be included in web pages without the need for a [[Plug-in (computing)|plug-in]].<ref>{{cite web |title=Background: What is X3DOM, and what can it do for me? |url=https://doc.x3dom.org/gettingStarted/background/index.html |work=official x3dom documentation |publisher=x3dom.org |accessdate=27 April 2017}}</ref>

The physics engine implements rigid-body dynamics, discrete [[collision detection]], and a [[Gauss–Seidel method|Gauss-Seidel]] constraint solver.<ref>{{cite web |title= Branch: master. cannon.js/README.markdown |url=https://github.com/schteppe/cannon.js/blob/master/README.markdown |publisher=GitHub |date=22 April 2015 |accessdate=27 April 2017}}</ref>  It can perform [[cloth simulation]]<ref>{{cite web | url=https://blog.raananweber.com/2016/04/03/cloth-physics-simulation-for-babylon-js/ | title = Cloth physics simulation}}</ref>

Cannon.js can be used with Three.js and Babylon.js<ref>{{cite web|title=Create wonderful interactive games for the web: Using webgl and a physics engine (babylon.js & cannon.js)|url=https://www.eternalcoding.com/?p=153|accessdate=21 February 2017}}</ref><ref name="msdn_phy_tutorial">{{cite web|title=MSDN Game Development with Babylon.js|url=https://msdn.microsoft.com/en-us/magazine/mt614269.aspx|accessdate=21 February 2017}}</ref> WebGL renderers to generate physics-based 3D scenes.  It can also be used to provide networked-physics synchronization for [[multiplayer online game]]s using Lance.gg<ref>{{cite web | url = https://github.com/lance-gg/lance | title = Lance source repository| website = [[GitHub]]}}</ref>

== Example ==
The sample code below creates a sphere on a plane, steps the simulation, and prints the sphere simulation to the console. Note that Cannon.js uses [[International System of Units|SI units]] (metre, kilogram, second, etc.).<ref>{{Cite web|title=Cannon.js - JavaScripting|url=https://www.javascripting.com/view/cannon-js|access-date=2020-12-22|website=www.javascripting.com}}</ref><syntaxhighlight lang="java">
// Setup our world
var world = new CANNON.World();
world.gravity.set(0, 0, -9.82); // m/s²

// Create a sphere
var radius = 1; // m
var sphereBody = new CANNON.Body({
   mass: 5, // kg
   position: new CANNON.Vec3(0, 0, 10), // m
   shape: new CANNON.Sphere(radius)
});
world.addBody(sphereBody);

// Create a plane
var groundBody = new CANNON.Body({
    mass: 0 // mass == 0 makes the body static
});
var groundShape = new CANNON.Plane();
groundBody.addShape(groundShape);
world.addBody(groundBody);

var fixedTimeStep = 1.0 / 60.0; // seconds
var maxSubSteps = 3;

// Start the simulation loop
var lastTime;
(function simloop(time) {
  requestAnimationFrame(simloop);
  if (lastTime !== undefined) {
     var dt = (time - lastTime) / 1000;
     world.step(fixedTimeStep, dt, maxSubSteps);
  }
  console.log("Sphere z position: " + sphereBody.position.z);
  lastTime = time;
})();
</syntaxhighlight>

== References ==
{{reflist}}

== External links ==
* {{Official website|http://www.cannonjs.org/}}
* [https://github.com/schteppe/cannon.js Source Code Repository]

{{Physics engines}}
[[Category:Computer physics engines]]
[[Category:Software using the MIT license]]