Skip to main content

Getting started

Installing Rapier from NPM

Rapier is available as the @dimforge/rapier2d and @dimforge/rapier3d NPM packages. You may add the following to your package.json:

  "dependencies": {
"@dimforge/rapier2d": "*", // Replace the * by the latest version number.
}

Because Rapier is actually a WebAssembly module, it has to be loaded asynchronously. The following shows a basic example with a dynamic rigid-body falling on the ground.

<load path='/2d/javascript/src/snippets/getting_started.ts' marker='basic_sim' />

See the testbed3d/src/demos and testbed2d/src/demos folders for examples on how to initialize a Rapier physics world using these bindings.

Using Rapier without a bundler

If you are attempting to use Rapier without a bundler, or if you are using a bundler that doesn't support WASM files properly, the previous solution will be difficult to get working. The alternative is to use our compatibility UMD packages @dimforge/rapier2d-compat or @dimforge/rapier3d-compat. These packages embed the WASM file (encoded in base64) into the main JS file. This results in a slightly different initialization process:

<load path='/2d/javascript/src/snippets/standalone.js' marker='NoBundler' />

A complete example can be found on codepen.

Rendering Debug Shapes

Rapier does not come with any built-in rendering capabilities, so you must do the rendering yourself. However, the debug shape data can be accessed directly from the physics world instance by calling debugRender().

<load path='/2d/javascript/src/snippets/graphics/Graphics.ts' marker='Debug0' />

These are each flat arrays filled with shape and color data for every body and collider in the physics world.

The vertices array contains point data of where to draw lines while the colors array contains the RGBA values to associate with each line.

info

The colors of each body are not configurable in the current version of Rapier. The colors given will be based on the type of the given rigid body or collider and the current kinematic state of it.

Below is an example of rendering this data using Pixi.js and Pixi Viewport.

<load path='/2d/javascript/src/snippets/graphics/Graphics.ts' marker='Debug1' />
<load path='/2d/javascript/src/snippets/graphics/Graphics.ts' marker='Debug2' />

An example of this in action can be see in the Rapier.js testbed code.