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 | Link (WIP) | ||
| Babylon Lite | Link | ||||||
| ClayGL | Link | ||||||
| CZPG.js | Link | ||||||
| Filament | Link | ||||||
| GLBoost | Link | ||||||
| Grimoire.js | Link1 / Link2 | ||||||
| Hilo3d | Link | ||||||
| PlayCanvas | Link | Link | |||||
| Rhodonite | Link | Link | |||||
| three.js | Link1 / Link2 (WIP) | Link1 / Link2 | Link | Link1 / Link2 | Link | Link | Link (WIP) |
| 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 | Link (WIP) | ||
| Babylon Lite | Link | ||||||
| Filament | Link | ||||||
| ClayGL | Link | ||||||
| GLBoost | Link | Link | Link | ||||
| Grimoire.js | Link | Link | Link1 / Link2 | ||||
| Hilo3d | Link | ||||||
| PlayCanvas | Link | Link | |||||
| Rhodonite | Link | Link | |||||
| three.js | Link1 / Link2 (WIP) | Link1 / Link2 | Link | Link1 / Link2 | Link | Link | Link (WIP) |
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 | Link (WIP) | ||
| Babylon Lite | Link | ||||||
| Filament | Link | ||||||
| ClayGL | Link | ||||||
| GLBoost | Link | Link | Link | ||||
| Grimoire.js | Link | Link | Link | ||||
| PlayCanvas | Link | Link | |||||
| Rhodonite | Link | Link | |||||
| three.js | Link1 / Link2 (WIP) | Link1 / Link2 | Link | Link1 / Link2 | Link | Link | Link (WIP) |
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 | Link (WIP) | ||
| Babylon Lite | Link | ||||||
| Filament | Link | ||||||
| ClayGL | Link | ||||||
| GLBoost | Link | Link | |||||
| Grimoire.js | Link | Link | |||||
| PlayCanvas | Link | Link | |||||
| Rhodonite | Link | Link | |||||
| three.js | Link1 / Link2 (WIP) | Link1 / Link2 | Link | Link1 / Link2 | Link | Link | Link (WIP) |
Falling Balls examples
The WGSL versions run the physics in a compute shader using brute-force O(N²) collision.
| 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 | Link (WIP) | |
| Babylon Lite | Link | |||||
| Filament | Link | |||||
| ClayGL | Link | |||||
| GLBoost | Link | |||||
| Grimoire.js | Link (WIP) | |||||
| PlayCanvas | Link | Link | ||||
| Rhodonite | Link | Link | ||||
| three.js | - / Link |
Link | Link1 / Link2 | Link | Link (WIP) |
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 | Link (WIP) | |
| Babylon Lite | Link | |||||
| Filament | Link | |||||
| PlayCanvas | Link | Link | ||||
| Rhodonite | Link | |||||
| three.js | Link | Link1 / Link2 | Link | Link (WIP) |
Falling Marbles examples (Using glTF)
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.
| 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 | Link (WIP) | |
| Babylon Lite | Link | |||||
| Filament | Link | |||||
| PlayCanvas | Link | Link | ||||
| three.js | Link | Link | Link | Link (WIP) | ||
| Rhodonite | Link | Link (WIP) |
Falling Coins examples
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.
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier | WGSL |
|---|---|---|---|---|---|---|
| WebGL 1.0 | Link | |||||
| WebGL 2.0 | Link | |||||
| WebGPU | Link | Link (WIP) | ||||
| Babylon.js | Link (WIP) | Link (WIP) | ||||
| Babylon Lite | Link | |||||
| Filament | Link | |||||
| PlayCanvas | Link | Link | ||||
| Rhodonite | Link | |||||
| three.js | Link | 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.
The WGSL versions run the OBB physics in a compute shader using brute-force O(N²) collision.
| 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 | Link (WIP) | ||||
| Babylon Lite | Link | |||||
| Filament | Link | |||||
| GLBoost | Link | Link | ||||
| PlayCanvas | Link | Link | ||||
| three.js | Link | Link | Link | Link (WIP) | ||
| 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 | Link (WIP) | ||||
| Babylon Lite | Link | |||||
| Filament | Link | |||||
| PlayCanvas | Link | Link | ||||
| Rhodonite | Link | |||||
| three.js | Link | Link1 / Link2 | Link | Link (WIP) |
Falling Eraser examples
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.
| Library | ammo.js | Cannon.js / cannon-es |
Havok | Oimo.js / OimoPhysics |
rapier | WGSL |
|---|---|---|---|---|---|---|
| WebGL 1.0 | Link | Link | ||||
| WebGL 2.0 | Link | |||||
| WebGPU | Link Link (physics debug) |
Link Link (physics debug) |
||||
| Babylon.js | Link | Link | Link | Link | Link | |
| Babylon Lite | Link | |||||
| Filament | Link | |||||
| GLBoost | Link | |||||
| Grimoire.js | Link | |||||
| PlayCanvas | Link | Link | ||||
| three.js | Link | Link | Link (WIP) | |||
| Rhodonite | Link |
Basic Shapes 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 (WIP) | ||||
| Babylon.js | Link | Link | ||||
| Babylon Lite | Link | Link | ||||
| Filament | Link | |||||
| PlayCanvas | Link | |||||
| Rhodonite | 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 | |||||
| Babylon Lite | Link | |||||
| Filament | Link | |||||
| PlayCanvas | Link | |||||
| Rhodonite | 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 | |||||
| Babylon Lite | Link | |||||
| Filament | Link | |||||
| PlayCanvas | Link | |||||
| Rhodonite | 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) | |||||
| Babylon Lite | Link (WIP) | |||||
| Filament | Link | |||||
| PlayCanvas | Link | |||||
| Rhodonite | 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 | |||||
| Babylon Lite | Link | |||||
| Filament | Link | |||||
| PlayCanvas | Link | |||||
| Rhodonite | Link | |||||
| 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 | |||||
| Babylon Lite | Link | |||||
| Filament | Link | |||||
| PlayCanvas | Link | |||||
| Rhodonite | Link | |||||
| 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 | ||||
| Babylon Lite | Link | ||||
| PlayCanvas | Link | ||||
| Rhodonite | Link | ||||
| three.js | Link |
glTF Physics Exporter example
Exports a Havok physics scene (floor + falling cube) as a .glb with KHR_physics_rigid_bodies and KHR_implicit_shapes extensions. The output round-trips through the loader used by the gltf_physics_* examples above.
| Library | Havok |
|---|---|
| Babylon.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.