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

  • 38
    いいね
  • 0
    コメント

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

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

ライブラリ名 バージョン サイズ 良いところ 良くないところ
Cannon.js v0.6.2 129KB Three.jsとの親和性が高い。ソースコードが軽量。 パフォーマンスがそれほど良くない
Oimo.js v1.1.0a 151KB パフォーマンスに優れている。ソースコードが軽量。 精度はそれほど高くない。対応している物理演算の形状が少ない。
ammo.js v0.0.3 1.4MB パフォーマンスや精度が優れている。対応している物理演算の形状も豊富。 ライブラリのサイズが大きい。minify版で1.4MB程
Physi.js - 82.7KB Three.jsのプラグイン。生のammo.jsを使う場合に比べてThree.jsとの親和性が高い。 ammo.jsを合わせて読み込む必要がある

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

ドミノ倒し

domino.jpg

ライブラリ名 Cannon.js Oimo.js ammo.js Physi.js
ライブラリなし(WebGL) Link
ライブラリなし(WebGL2) Link
Babylon.js Link Link
CubicVR.js Link
GLBoost.js Link Link Link
Grimoire.js Link Link Link
PlayCanvas Link
Three.js Link Link Link
WhitestormJS Link

サッカーボール落下

falling_football.jpg

ライブラリ名 Cannon.js Oimo.js ammo.js Physi.js
Babylon.js Link Link
CubicVR.js Link
GLBoost.js Link Link Link
Grimoire.js Link Link Link
Three.js Link Link Link
WhitestormJS Link

段ボール落下

falling_box.jpg

ライブラリ名 Cannon.js Oimo.js ammo.js Physi.js
Babylon.js Link Link
CubicVR.js Link
GLBoost.js Link Link Link
Grimoire.js Link Link Link
PlayCanvas Link
Three.js Link Link Link
WhitestormJS Link

ボールをカゴに落下

falling_ball.jpg

ライブラリ名 Cannon.js Oimo.js ammo.js
Babylon.js Link
GLBoost.js Link
Grimoire.js Link
Three.js Link

消しゴム落下

falling_eraser.jpg

ライブラリ名 Cannon.js Oimo.js ammo.js
ライブラリなし(WebGL) Link
ライブラリなし(WebGL2) Link
Babylon.js Link
GLBoost.js Link
Grimoire.js Link
Three.js 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 ammo.js
Babylon.js
GLBoost.js Link Link
Grimoire.js Link Link
Three.js 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