Cannon.js: Difference between revisions

Revision as of 13:55, 19 March 2017

Latest revision as of 14:06, 8 July 2025

(30 intermediate revisions by 17 users not shown)

Line 1:

{{Short description|3D JavaScript physics engine}}

{{AFC submission|d|nn|u=Fourvelocity|ns=118|decliner=Winged Blades of Godric|declinets=20170319135524|ts=20170215074255}} <!-- Do not remove this line! -->

{{AFC comment|1=A stunning dearth of [[WP:RS]] reviews/sources covering the topic. <span style="font-size:17px">[[User:Winged Blades of Godric|<span style= "color:green">''Winged Blades''</span>]]^{[[User talk:Winged Blades of Godric| Godric]]}</span> 13:55, 19 March 2017 (UTC)}}

{{AFC comment|1=I did not find independent news. However I did find an in-depth technical walkthrough on MSDN (Microsoft Developer Network) that builds a game (bowling game) using babylon.js and and cannon.js from January of last year, see reference.<ref></ref> and also, a somewhat older but still correct reference <ref></ref>. This library does not get mentioned in news, mostly because its code is stable and it "just works". [[User:Fourvelocity|Fourvelocity]]}}

{{AFC comment|1=In this case, reviews would have helped because they establish substance; without it, the article is not as convincing; as a possible solution, you could add all available major independent news. [[User:SwisterTwister|<font color="green">'''S'''wister'''T'''wister</font>]] [[User talk:SwisterTwister|<font color="green">talk</font>]] 15:45, 20 February 2017 (UTC)}}

{{AFC comment|1=Would benefit from any available reviews. [[User:SwisterTwister|<font color="green">'''S'''wister'''T'''wister</font>]] [[User talk:SwisterTwister|<font color="green">talk</font>]] 21:45, 15 February 2017 (UTC)}}

----

{{Infobox software

| title = Cannon.js

| name = Cannon.js

| platform = [[Javascript]]

| programming language = [[JavaScript]]

| status = Active

| operating_system = OS independent

| genre = 3D Physics[[physics Engineengine]]

| license = [[MIT License]]

| developer = Stefan Hedman

| latest release version = 0.6.2

| website = {{URL|http://www.cannonjs.org/}}

| latest release date = {{release date|2015|03|28}}<ref>

| AsOf = February 2017

{{cite web

* [|url=https://github.com/schteppe/cannon.js Source Code Repository]/releases

|title=Releases · schteppe/cannon.js

|website=GitHub.com

|access-date = 11 May 2021

}}</ref>

| website = {{URL|httphttps://wwwgithub.cannonjs.orgcom/schteppe/cannon.js}}

| statusAsOf = Active

}}

{{Portal|Free and open-source software}}

'''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''''' is an [[open source]] [[JavaScript]] [[physics engine]].

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>

Cannon.js was written entirely in Javascript. This is in contrast<ref>{{cite web | url=http://buildnewgames.com/physics-engines-comparison/ | title = Physics Engines Comparison }}</ref><ref name="jsphy_windows8">{{cite web | url=https://blogs.msdn.microsoft.com/cbowen/2012/09/20/javascript-physics-engines-and-windows-8-games/ | title = javascript physics engine and windows 8 games}}</ref><ref>{{cite web|title=A Comparison of JavaScript Physics Engines|url=http://www.webappers.com/2012/12/11/a-comparison-of-javascript-physics-engines/|accessdate=22 February 2017}}</ref> with typical physics engines which can run in browsers (for example,

[[Bullet (software)|Bullet]] and [[Box2D]]), which were originally written in C or C++,

and compiled from [[LLVM]] instructions to JavaScript via [[Emscripten]].

The physics engine implements rigid-body dynamics, discrete [[collision detection]], and a ([[Gauss–Seidel_methodGauss–Seidel method|Gauss-Seidel]]), andconstraint constraintssolver.<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>.

The primary advantage that cannon.js gains from this approach is that the size of the resulting

package is much smaller. As of February 2017, Cannon.js is sized at 36.4KB<ref>{{cite web | url=https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js | title = cannon.js download}}</ref> (minified and zipped), compared to

ammo.js 452KB<ref>{{cite web | url=http://kripken.github.io/ammo.js/builds/ammo.js | title = ammo.js download}}</ref> (minified and zipped).

This approach may also imply performance advantages, though performance comparisons do not exist.

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 IncheonLance.gg<ref>{{cite web | url = https://github.com/OpherVlance-gg/Incheonlance | title = IncheonLance source repository| website = [[GitHub]]}}</ref>

== Features ==

== Example ==

Cannon.js supports the following shapes: [[Sphere]], [[Plane]], [[Box]], [[Cylinder]], [[Polyhedron#Convex_polyhedra|Convex Polyhedron]], [[Particle]], and [[Heightfield]].

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">

This collection of shapes matches the collection used by rendering engines such as Three.js and Babylon, but is not complete. For example, it is not sufficient for X3DOM<ref> {{cite web | url = https://pdfs.semanticscholar.org/e0fa/09e028075aa3b5274f15356563173eab8395.pdf | title = Initial steps for the coupling of Javascript Physics Engines with X3DOM}}</ref>.

// Setup our world

var world = new CANNON.World();

world.gravity.set(0, 0, -9.82); // m/s²

// Create a sphere

The physics engine implements rigid-body dynamics, collision detection ([[Gauss–Seidel_method|Gauss-Seidel]]), and constraints. 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>.

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

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 Incheon<ref>{{cite web | url = https://github.com/OpherV/Incheon | title = Incheon source repository}}</ref>

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

== External Links ==

var maxSubSteps = 3;

* [http://www.cannonjs.org/ Offical Website]

* [https://github.com/schteppe/cannon.js Source Code Repository]

// 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 ==

<!-- Inline citations added to your article will automatically display here. See https://en.wikipedia.org/wiki/WP:REFB for instructions on how to add citations. -->

{{reflist}}

== External Linkslinks ==

* {{GitHub|schteppe/cannon.js}}

{{Physics engines}}

[[Category:Computer physics engines]]

[[Category:Software using the MIT license]]