webgl-physics-examples

KO | EN

gitlite — search

#hacktoberfest #ai #go #machine-learning #rust #linux #macos #java #cli #kubernetes #awesome-list #openai #mcp #open-source

webgl-physics-examples

(★ 55)

Examples of WebGL Physics Library

webgl-physics-examples Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# webgl-physics-examples
Examples of WebGL Physics Library.

## Minimum examples

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/minimum.png)

|Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) / [cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) / [OimoPhysics](https://github.com/saharan/OimoPhysics) |[PhysX](https://github.com/fabmax/physx-js-webidl) |[rapier](https://github.com/dimforge/rapier) |WGSL |
|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------|:------------------------------------------------------------------------------------------|
|WebGL 1.0 | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl1/havok/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl1/oimo/minimum/) | | | |
|WebGL 2.0 | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl2/havok/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl2/oimo/minimum/) | | | |
|WebGPU | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgpu/havok/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgpu/oimo/minimum/) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgpu/wgsl_compute/minimum/) (WIP)|
|[Ashes](https://github.com/but0n/Ashes) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/ashes/oimo/minimum/) | | | |
|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/minimum/) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/wgsl_compute/minimum/) (WIP)|
|[Babylon Lite](https://github.com/BabylonJS/Babylon.js) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylon-lite/havok/minimum/)| | | | |
|[ClayGL](https://github.com/pissang/claygl) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/claygl/oimo/minimum/) | | | |
|[CZPG.js](https://github.com/PrincessGod/CraZyPG) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/czpg/oimo/minimum/) | | | |
|[Filament](https://github.com/google/filament) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/filament/havok/minimum/) | | | | |
|[GLBoost](https://github.com/emadurandal/GLBoost) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/oimo/minimum/) | | | |
|[Grimoire.js](https://github.com/GrimoireGL/GrimoireJS) | | | |[Link1](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimo/minimum/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimophysics/minimum/)| | | |
|[Hilo3d](https://github.com/hiloteam/Hilo3d) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/hilo3d/oimo/minimum/) | | | |
|[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/minimum/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/havok/minimum/) | | | | |
|[Rhodonite](https://github.com/actnwit/RhodoniteTS) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/havok/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/oimo/minimum/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/rapier/minimum/) | |
|[three.js](https://github.com/mrdoob/three.js/) |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo/minimum/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo_legacy/minimum/) (WIP)|[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon/minimum/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/minimum/)|[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/havok/minimum/) |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/minimum/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/physx/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/rapier/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/wgsl_compute/minimum/) (WIP)|
|[XenoGL](https://github.com/kotofurumiya/xenogl) | | | |[Link1](https://cx20.github.io/webgl-physics-examples/examples/xenogl/oimo/minimum/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/xenogl/oimophysics/minimum/) | | | |

## Domino examples

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/domino.jpg)

|Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) / [cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) / [OimoPhysics](https://github.com/saharan/OimoPhysics) |[PhysX](https://github.com/fabmax/physx-js-webidl) |[rapier](https://github.com/dimforge/rapier) |WGSL |
|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------|:----------------------------------------------------------------------------|
|WebGL 1.0 | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl1/havok/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl1/oimo/domino/) | | | |
|WebGL 2.0 | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl2/havok/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl2/oimo/domino/) | | | |
|WebGPU | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgpu/havok/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgpu/oimo/domino/) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgpu/wgsl_compute/domino/) (WIP)|
|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/domino/) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/wgsl_compute/domino/) (WIP)|
|[Babylon Lite](https://github.com/BabylonJS/Babylon.js) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylon-lite/havok/domino/) | | | | |
|[Filament](https://github.com/google/filament) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/filament/havok/domino/) | | | | |
|[ClayGL](https://github.com/pissang/claygl) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/claygl/oimo/domino/) | | | |
|[GLBoost](https://github.com/emadurandal/GLBoost) |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/ammo/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/cannon/domino/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/oimo/domino/) | | | |
|[Grimoire.js](https://github.com/GrimoireGL/GrimoireJS) |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/ammo/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/cannon/domino/) | |[Link1](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimo/domino/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimophysics/domino/) | | | |
|[Hilo3d](https://github.com/hiloteam/Hilo3d) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/hilo3d/oimo/domino/) | | | |
|[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/domino/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/havok/domino/) | | | | |
|[Rhodonite](https://github.com/actnwit/RhodoniteTS) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/havok/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/oimo/domino/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/rapier/domino/) | |
|[three.js](https://github.com/mrdoob/three.js/) |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo/domino/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo_legacy/domino/) (WIP)|[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon/domino/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/havok/domino/) |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/domino/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/physx/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/rapier/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/wgsl_compute/domino/) (WIP)|

## Falling Football examples

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/football.jpg)

|Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) / [cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) / [OimoPhysics](https://github.com/saharan/OimoPhysics) |[PhysX](https://github.com/fabmax/physx-js-webidl) |[rapier](https://github.com/dimforge/rapier) |WGSL |
|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------|
|WebGL 1.0 | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl1/havok/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl1/oimo/football/) | | | |
|WebGL 2.0 | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl2/havok/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl2/oimo/football/) | | | |
|WebGPU | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgpu/havok/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgpu/oimo/football/) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgpu/wgsl_compute/football/) (WIP)|
|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/football/) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/wgsl_compute/football/) (WIP)|
|[Babylon Lite](https://github.com/BabylonJS/Babylon.js) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylon-lite/havok/football/) | | | | |
|[Filament](https://github.com/google/filament) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/filament/havok/football/) | | | | |
|[ClayGL](https://github.com/pissang/claygl) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/claygl/oimo/football/) | | | |
|[GLBoost](https://github.com/emadurandal/GLBoost) |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/ammo/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/cannon/football/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/oimo/football/) | | | |
|[Grimoire.js](https://github.com/GrimoireGL/GrimoireJS) |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/ammo/football/)|[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/cannon/football/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimo/football/) | | | |
|[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/football/)| |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/havok/football/) | | | | |
|[Rhodonite](https://github.com/actnwit/RhodoniteTS) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/havok/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/oimo/football/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/rapier/football/) | |
|[three.js](https://github.com/mrdoob/three.js/) |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo/football/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo_legacy/football/) (WIP)|[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon/football/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/football/)|[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/havok/football/) |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/football/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/physx/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/rapier/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/wgsl_compute/football/) (WIP)|

## Stacked Boxes examples

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/box.jpg)

|Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) / [cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) / [OimoPhysics](https://github.com/saharan/OimoPhysics) |[PhysX](https://github.com/fabmax/physx-js-webidl) |[rapier](https://github.com/dimforge/rapier) |WGSL |
|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------|
|WebGL 1.0 | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl1/havok/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl1/oimo/box/) | | | |
|WebGL 2.0 | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl2/havok/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl2/oimo/box/) | | | |
|WebGPU | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgpu/havok/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgpu/oimo/box/) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgpu/wgsl_compute/box/) (WIP)|
|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/box/) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/wgsl_compute/box/) (WIP)|
|[Babylon Lite](https://github.com/BabylonJS/Babylon.js) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylon-lite/havok/box/) | | | | |
|[Filament](https://github.com/google/filament) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/filament/havok/box/) | | | | |
|[ClayGL](https://github.com/pissang/claygl) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/claygl/oimo/box/) | | | |
|[GLBoost](https://github.com/emadurandal/GLBoost) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/cannon/box/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/oimo/box/) | | | |
|[Grimoire.js](https://github.com/GrimoireGL/GrimoireJS) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/cannon/box/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimo/box/) | | | |
|[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/box/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/havok/box/) | | | | |
|[Rhodonite](https://github.com/actnwit/RhodoniteTS) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/havok/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/oimo/box/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/rapier/box/) | |
|[three.js](https://github.com/mrdoob/three.js/) |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo/box/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo_legacy/box/) (WIP)|[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon/box/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/havok/box/) |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/box/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/physx/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/rapier/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/wgsl_compute/box/) (WIP)|

## Falling Balls examples

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/balls.jpg)

The WGSL versions run the physics in a compute shader using brute-force O(N²) collision.

## Falling glTF examples

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/gltf.jpg)

## Falling Marbles examples (Using glTF)

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/marbles.jpg)

The WGSL versions run the physics in a compute shader using a uniform spatial-grid broad-phase (≈O(N)), so they scale to far more bodies.

## Falling Coins examples

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/coins.jpg)

The WGSL versions run the physics in a compute shader using a uniform spatial-grid broad-phase (≈O(N)), so they scale to far more bodies.

## Falling Shogi examples

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/shogi.jpg)

Havok versions (WebGL 1.0 / WebGL 2.0 / WebGPU) include tuned shogi collider sizes to better match the rendered piece dimensions.

The WGSL versions run the OBB physics in a compute shader using brute-force O(N²) collision.

## Falling Cone examples

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/cone.jpg)

## Falling Eraser examples

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/eraser.jpg)

The WGSL versions run a from-scratch oriented-bounding-box (OBB) solver in a compute shader, using the Separating Axis Theorem for eraser-eraser and eraser-static contacts.

## Basic Shapes example (glTF Physics extension)

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/gltf_physics_Basic_Shapes.jpg)

## Materials Friction example (glTF Physics extension)

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/gltf_physics_Materials_Friction.jpg)

## Materials Restitution example (glTF Physics extension)

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/gltf_physics_Materials_Restitution.jpg)

## Motion Properties example (glTF Physics extension)

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/gltf_physics_Motion_Properties.jpg)

## Filtering example (glTF Physics extension)

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/gltf_physics_Filtering.jpg)

## Triggers example (glTF Physics extension)

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/gltf_physics_Triggers.jpg)

## JointTypes example (glTF Physics extension)

![](https://raw.githubusercontent.com/cx20/webgl-physics-examples/master/assets/screenshot/gltf_physics_JointTypes.jpg)

## glTF Physics Exporter example

Exports a Havok physics scene (floor + falling cube) as a `.glb` with [`KHR_physics_rigid_bodies`](https://github.com/eoineoineoin/glTF_Physics) and `KHR_implicit_shapes` extensions. The output round-trips through the loader used by the `gltf_physics_*` examples above.

|Library                                                      |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics)                                          |
|:------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------|
|[Babylon.js](https://github.com/BabylonJS/Babylon.js)        |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/gltf_physics_Exporter/)         |

## Physics Library Unit Systems

All physics libraries used in this project adopt the **SI (International System of Units)**: meters (m), kilograms (kg), seconds (s), and newtons (N).  
The convention **1 unit = 1 meter** is recommended for stable simulation results.

| Library | Unit System | Recommended Scale | Notes |
|:--------|:------------|:------------------|:------|
| [ammo.js](https://github.com/kripken/ammo.js/) (Bullet) | SI (m / kg / s / N) | 0.05 – 10 m | Most sensitive to scale; official docs strongly recommend matching real-world meter scale |
| [Cannon.js](https://github.com/schteppe/cannon.js) / [cannon-es](https://github.com/pmndrs/cannon-es) | SI (m / kg / s / N) | Flexible | Relatively tolerant of scale variation |
| [Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) | SI (m / kg / s / N) | 0.1 – 10 m | |
| [Oimo.js](https://github.com/lo-th/Oimo.js/) / [OimoPhysics](https://github.com/saharan/OimoPhysics) | SI (m / kg / s / N) | 0.1 – 10 m | |
| [PhysX](https://github.com/fabmax/physx-js-webidl) | SI (m / kg / s / N) | 0.1 – 10 m | |
| [rapier](https://github.com/dimforge/rapier) | SI (m / kg / s / N) | Flexible | Good numerical stability across a wide range of scales |

> **Tip:** Objects smaller than ~0.05 m or larger than ~100 m may cause floating-point instability (jitter, tunneling). Keep rigid bodies within the recommended scale range for best results.

webgl-physics-examples

webgl-physics-examples Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

webgl-physics-examples

webgl-physics-examples Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README