webgl-physics-examples
Examples of WebGL Physics Library.
Minimum examples
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
PhysX | rapier | WGSL |
|---|---|---|---|---|---|---|---|
| WebGL 1.0 | Link | Link | |||||
| WebGL 2.0 | Link | Link | |||||
| WebGPU | Link | Link | Link (WIP) | ||||
| Ashes | Link | ||||||
| Babylon.js | Link | Link | Link | Link | |||
| ClayGL | Link | ||||||
| CZPG.js | Link | ||||||
| GLBoost | Link | ||||||
| Grimoire.js | Link1 / Link2 | ||||||
| Hilo3d | Link | ||||||
| PlayCanvas | Link | ||||||
| Rhodonite | Link | Link | |||||
| three.js | Link | Link1 / Link2 | Link | Link1 / Link2 | Link | Link | |
| XenoGL | Link1 / Link2 |
Domino examples
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
PhysX | rapier | WGSL |
|---|---|---|---|---|---|---|---|
| WebGL 1.0 | Link | Link | |||||
| WebGL 2.0 | Link | Link | |||||
| WebGPU | Link | Link | Link (WIP) | ||||
| Babylon.js | Link | Link | Link | Link | |||
| ClayGL | Link | ||||||
| GLBoost | Link | Link | Link | ||||
| Grimoire.js | Link | Link1 / Link2 | |||||
| Hilo3d | Link | ||||||
| PlayCanvas | Link | ||||||
| Rhodonite | Link | Link | |||||
| three.js | Link | Link1 / Link2 | Link | Link1 / Link2 | Link | Link |
Falling Football examples
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
PhysX | rapier | WGSL |
|---|---|---|---|---|---|---|---|
| WebGL 1.0 | Link | Link | |||||
| WebGL 2.0 | Link | Link | |||||
| WebGPU | Link | Link | Link (WIP) | ||||
| Babylon.js | Link | Link | Link | Link | |||
| ClayGL | Link | ||||||
| GLBoost | Link | Link | Link | ||||
| Grimoire.js | Link | Link | |||||
| PlayCanvas | Link | ||||||
| Rhodonite | Link | Link | |||||
| three.js | Link | Link1 / Link2 | Link | Link1 / Link2 | Link | Link |
Stacked Boxes examples
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
PhysX | rapier | WGSL |
|---|---|---|---|---|---|---|---|
| WebGL 1.0 | Link | Link | |||||
| WebGL 2.0 | Link | Link | |||||
| WebGPU | Link | Link | Link (WIP) | ||||
| Babylon.js | Link | Link | Link | Link | |||
| ClayGL | Link | ||||||
| GLBoost | Link | Link | |||||
| Grimoire.js | Link | Link | |||||
| PlayCanvas | Link | ||||||
| Rhodonite | Link | Link | |||||
| three.js | Link | Link1 / Link2 | Link | Link1 / Link2 | Link | Link |
Falling Balls examples
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier | WGSL |
|---|---|---|---|---|---|---|
| WebGL 1.0 | Link | Link | ||||
| WebGL 2.0 | Link | Link | ||||
| WebGPU | Link | Link | Link (WIP) | |||
| Babylon.js | Link | Link | Link | Link | ||
| ClayGL | Link | |||||
| GLBoost | Link | |||||
| Grimoire.js | Link | |||||
| PlayCanvas | Link | |||||
| Rhodonite | Link | Link | ||||
| three.js | - / Link |
Link | Link1 / Link2 | Link |
Falling glTF examples
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier | WGSL |
|---|---|---|---|---|---|---|
| WebGL 1.0 | Link | Link | ||||
| WebGL 2.0 | Link | Link | ||||
| WebGPU | Link | Link | Link (WIP) | |||
| Babylon.js | Link | Link | Link | Link | ||
| PlayCanvas | Link | |||||
| Rhodonite | Link | |||||
| three.js | Link | Link1 / Link2 | Link |
Falling Marbles examples (Using glTF)
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier | WGSL |
|---|---|---|---|---|---|---|
| WebGL 1.0 | Link | Link | ||||
| WebGL 2.0 | Link | Link | ||||
| WebGPU | Link | Link | Link (WIP) | |||
| Babylon.js | Link | Link | Link | Link | ||
| PlayCanvas | Link | |||||
| three.js | Link | Link | Link | |||
| Rhodonite | Link | Link (WIP) |
Falling Coins examples
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier | WGSL |
|---|---|---|---|---|---|---|
| Babylon.js | Link (WIP) | |||||
| WebGPU | Link (WIP) |
Falling Shogi examples
Havok versions (WebGL 1.0 / WebGL 2.0 / WebGPU) include tuned shogi collider sizes to better match the rendered piece dimensions.
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier | WGSL |
|---|---|---|---|---|---|---|
| WebGL 1.0 | Link | Link | ||||
| WebGL 2.0 | Link | Link | ||||
| WebGPU | Link | Link | Link | |||
| Babylon.js | Link | |||||
| GLBoost | Link | |||||
| three.js | Link | Link | Link | |||
| Rhodonite | Link | Link (WIP) |
Falling Cone examples
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier | WGSL |
|---|---|---|---|---|---|---|
| WebGL 1.0 | Link | Link | ||||
| WebGL 2.0 | Link | Link | ||||
| WebGPU | Link | Link | Link (WIP) | |||
| Babylon.js | Link | |||||
| PlayCanvas | Link | |||||
| Rhodonite | Link | |||||
| three.js | Link | Link1 / Link2 | Link |
Basic Shapes example (glTF Physics extension)
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier | WGSL |
|---|---|---|---|---|---|---|
| WebGL 1.0 | Link (WIP) | |||||
| WebGL 2.0 | Link (WIP) | |||||
| WebGPU | Link (WIP) | Link (WIP) | ||||
| Babylon.js | Link (WIP) | |||||
| PlayCanvas | Link | |||||
| three.js | Link | Link |
Materials Friction example (glTF Physics extension)
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier | WGSL |
|---|---|---|---|---|---|---|
| WebGL 1.0 | Link | |||||
| WebGL 2.0 | Link | |||||
| WebGPU | Link | Link | ||||
| Babylon.js | Link | |||||
| PlayCanvas | Link | |||||
| three.js | Link (WIP) | Link | Link | Link |
Materials Restitution example (glTF Physics extension)
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier | WGSL |
|---|---|---|---|---|---|---|
| WebGL 1.0 | Link | |||||
| WebGL 2.0 | Link | |||||
| WebGPU | Link | Link | ||||
| Babylon.js | Link | |||||
| PlayCanvas | Link | |||||
| three.js | Link | Link |
Motion Properties example (glTF Physics extension)
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier | WGSL |
|---|---|---|---|---|---|---|
| WebGL 1.0 | Link (WIP) | |||||
| WebGL 2.0 | Link (WIP) | |||||
| WebGPU | Link (WIP) | Link (WIP) | ||||
| Babylon.js | Link (WIP) | |||||
| PlayCanvas | Link | |||||
| three.js | Link | Link |
Filtering example (glTF Physics extension)
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier |
|---|---|---|---|---|---|
| WebGL 1.0 | Link (WIP) | ||||
| WebGL 2.0 | Link (WIP) | ||||
| WebGPU | Link (WIP) | ||||
| Babylon.js | Link | ||||
| PlayCanvas | |||||
| three.js | Link |
Triggers example (glTF Physics extension)
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier |
|---|---|---|---|---|---|
| WebGL 1.0 | Link (WIP) | ||||
| WebGL 2.0 | Link (WIP) | ||||
| WebGPU | Link (WIP) | ||||
| Babylon.js | Link | ||||
| PlayCanvas | |||||
| three.js | Link |
JointTypes example (glTF Physics extension)
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier |
|---|---|---|---|---|---|
| WebGL 1.0 | Link (WIP) | ||||
| WebGL 2.0 | Link (WIP) | ||||
| WebGPU | Link (WIP) | ||||
| Babylon.js | Link | ||||
| PlayCanvas | |||||
| three.js | Link |
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 (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 / cannon-es | SI (m / kg / s / N) | Flexible | Relatively tolerant of scale variation |
| Havok | SI (m / kg / s / N) | 0.1 – 10 m | |
| Oimo.js / OimoPhysics | SI (m / kg / s / N) | 0.1 – 10 m | |
| PhysX | SI (m / kg / s / N) | 0.1 – 10 m | |
| 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.