Getting started
#
Installing Rapier from NPMRapier is available as the @dimforge/rapier2d and
@dimforge/rapier3d NPM packages. You may add the following to
your package.json
:
- Example 2D
- Example 3D
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.
- Example 2D
- Example 3D
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 bundlerIf 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:
- Example 2D
- Example 3D
A complete example can be found on codepen.
#
Rendering Debug ShapesRapier 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()
.
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.
An example of this in action can be see in the Rapier.js testbed code.