Edited at

WebGLと3D物理演算ライブラリの組み合わせを試してみる

WebGLと3D物理演算ライブラリの組み合わせを試してみたのでまとめてみました。

物理演算ライブラリとしては以下が有名どころかと思います。以下は個人的な感想です。

ライブラリ名
バージョン
サイズ
良いところ
残念なところ

Cannon.js
v0.6.2
129KB
Three.jsとの親和性が高い。ソースコードが軽量。
パフォーマンスがそれほど良くない

Oimo.js
v1.1.0a
151KB
パフォーマンスに優れている。ソースコードが軽量。
精度はそれほど高くない。対応している物理演算の形状が少ない。

OimoPhysics.js
v1.0.0
389KB
Oimo.jsに比べて対応している物理演算の形状が多い。
Oimo.jsに比べてライブラリのサイズが大きい。

ammo.js
v0.0.3
1.4MB
パフォーマンスや精度が優れている。対応している物理演算の形状も豊富。
ライブラリのサイズが大きい。minify版で1.4MB程

Physi.js
-
82.7KB
Three.jsのプラグイン。生のammo.jsを使う場合に比べてThree.jsとの親和性が高い。
ammo.jsを合わせて読み込む必要がある

サンプルは各リンク先を参照願います。


最小サンプル

cube.png

ライブラリ名
Cannon.js
Oimo.js
OimoPhysics.js
ammo.js
Physi.js

ライブラリなし(WebGL)

Link

Ashes

Link

A-Frame
Link

Babylon.js
Link
Link

Link

ClayGL

Link

CZPG.js

Link

Grimoire.js

Link
Link

GLBoost.js

Link

Hilo3d

Link

QTEK

Link

Three.js
Link
Link
Link

XenoGL

Link
Link


ドミノ倒し

domino.jpg

ライブラリ名
Cannon.js
Oimo.js
OimoPhysics.js
ammo.js
Physi.js

ライブラリなし(WebGL)

Link

ライブラリなし(WebGL2)

Link

Babylon.js
Link
Link

ClayGL

Link

CubicVR.js

Link

GLBoost.js
Link
Link

Link

Grimoire.js
Link
Link
Link
Link

Hilo3d

Link

PlayCanvas

Link

QTEK

Link

Three.js
Link
Link
Link
Link

WhitestormJS

Link


サッカーボール落下

falling_football.jpg

ライブラリ名
Cannon.js
Oimo.js
OimoPhysics.js
ammo.js
Physi.js

A-Frame
Link

Babylon.js
Link
Link

ClayGL

Link

CubicVR.js

Link

GLBoost.js
Link
Link

Link

Grimoire.js
Link
Link
Link
Link

Hilo3d

Link

QTEK

Link

Three.js
Link
Link
Link
Link

WhitestormJS

Link


段ボール落下

falling_box.jpg

ライブラリ名
Cannon.js
Oimo.js
OimoPhysics.js
ammo.js
Physi.js

Babylon.js
Link
Link

ClayGL

Link

CubicVR.js

Link

GLBoost.js
Link
Link

Link

Grimoire.js
Link
Link
Link
Link

Hilo3d

Link

PlayCanvas

Link

QTEK

Link

Three.js
Link
Link
Link
Link

WhitestormJS

Link


ボールをカゴに落下

falling_ball.jpg

ライブラリ名
Cannon.js
Oimo.js
OimoPhysics.js
ammo.js

A-Frame
Link

Babylon.js
Link
Link

ClayGL

Link

GLBoost.js

Link

Grimoire.js

Link
Link

QTEK

Link

Three.js

Link
Link


消しゴム落下

falling_eraser.jpg

ライブラリ名
Cannon.js
Oimo.js
OimoPhysics.js
ammo.js

ライブラリなし(WebGL)

Link

ライブラリなし(WebGL2)

Link

Babylon.js
Link
Link

GLBoost.js

Link

Grimoire.js

Link

Three.js

Link
Link


ニンジン落下

ninjin.png

ライブラリ名
Cannon.js
Oimo.js
OimoPhysics.js
ammo.js

Three.js

Link
Link


複合オブジェクト

gogogo.jpg

ライブラリ名
Cannon.js
Oimo.js
ammo.js

Babylon.js
Link
Link

GLBoost.js

Link

Three.js
Link
Link


glTF ファイル

gltf.jpg

ライブラリ名
Cannon.js
Oimo.js
OimoPhysics.js
ammo.js

Babylon.js
Link
Link

GLBoost.js
Link
Link

Grimoire.js
Link
Link

Three.js
Link
Link
Link


3D地図 + 物理演算

falling_box_on_mountain.jpg

ライブラリ名
Cannon.js
Oimo.js
ammo.js

Three.js

Link
Link


Web Worker

ライブラリ名
Cannon.js
Oimo.js
ammo.js
Physi.js

Three.js
Link
Link

Link