Skip to content

cx20/webgl-physics-examples

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1,252 Commits
assets
assets
 
 
docs
docs
 
 
examples
examples
 
 
AGENTS.md
AGENTS.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 

Repository files navigation

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.js 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.js 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.js 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.js 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.js 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.js 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.js Lite Link (WIP)
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.js 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.js 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.js 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.js 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
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
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
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)
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
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
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
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.

About

Examples of WebGL Physics Library

cx20.github.io/webgl-physics-examples/

Resources

Readme

License

MIT license
Activity

Stars

54 stars

Watchers

2 watching

Forks

5 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors