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

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

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

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

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

### 最小サンプル

![cube.png](https://qiita-image-store.s3.amazonaws.com/0/26094/bf46ccd4-6d6b-15b6-bdfe-3cd388ebceda.png)

|ライブラリ名|Cannon.js                       |Oimo.js                         |OimoPhysics.js                  |ammo.js                         |Physi.js                        |
|:-----------|:-------------------------------|:-------------------------------|:-------------------------------|:-------------------------------|:-------------------------------|
|ライブラリなし（WebGL）|                     |[Link](https://cx20.github.io/jsdo.it-archives/cx20/6TqN)|                                |                                |                                |
|Ashes       |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/cCx5)|                                |                                |                                |
|A-Frame     |[Link](https://cx20.github.io/jsdo.it-archives/cx20/yzbu)|                                |                                |                                |                                |
|Babylon.js  |[Link](https://cx20.github.io/jsdo.it-archives/cx20/YUWo)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/ijR9)|                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/K8ZT)|                                |
|ClayGL      |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/2iFI)|                                |                                |                                |
|CZPG.js     |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/MZ4J)|                                |                                |                                |
|Grimoire.js |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/c1O1)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/Ep4p)|                                |                                |
|GLBoost.js  |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/ceEA)|                                |                                |                                |
|Hilo3d      |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/2UGp)|                                |                                |                                |
|QTEK        |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/WUf4)|                                |                                |                                |
|Three.js    |[Link](https://cx20.github.io/jsdo.it-archives/cx20/Uhfq)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/ugwW)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/mJhp)|                                |                                |
|XenoGL      |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/mdwE)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/EIoR)|                                |                                |


### ドミノ倒し

![domino.jpg](https://qiita-image-store.s3.amazonaws.com/0/26094/ca5df88e-5277-f9f9-073b-b843982e53d1.jpeg)

|ライブラリ名|Cannon.js                       |Oimo.js                         |OimoPhysics.js                  |ammo.js                         |Physi.js                        |
|:-----------|:-------------------------------|:-------------------------------|:-------------------------------|:-------------------------------|:-------------------------------|
|ライブラリなし（WebGL） |                    |[Link](https://cx20.github.io/jsdo.it-archives/cx20/u9rQ)|                                |                                |                                |
|ライブラリなし（WebGL2）|                    |[Link](https://cx20.github.io/jsdo.it-archives/cx20/nVDx)|                                |                                |                                |
|Babylon.js  |[Link](https://cx20.github.io/jsdo.it-archives/cx20/omfA)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/0jIF)|                                |                                |                                |
|ClayGL      |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/qHti)|                                |                                |                                |
|CubicVR.js  |                                |                                |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/iBox)|                                |
|GLBoost.js  |[Link](https://cx20.github.io/jsdo.it-archives/cx20/0EX2)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/uDg8)|                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/UKvA)|                                |
|Grimoire.js |[Link](https://cx20.github.io/jsdo.it-archives/cx20/I19s)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/U4pp)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/q304)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/MeJl)|                                |
|Hilo3d      |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/cx1D)|                                |                                |                                |
|PlayCanvas  |                                |                                |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/emEI)|                                |
|QTEK        |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/qtGf)|                                |                                |                                |
|Three.js    |[Link](https://cx20.github.io/jsdo.it-archives/cx20/qM1k)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/8ReN)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/Goua)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/mmj3)|                                |

### サッカーボール落下

![falling_football.jpg](https://qiita-image-store.s3.amazonaws.com/0/26094/7a05e314-3508-0cd0-e96d-f6bff7535ebe.jpeg)

|ライブラリ名|Cannon.js                       |Oimo.js                         |OimoPhysics.js                  |ammo.js                          |Physi.js                        |
|:-----------|:-------------------------------|:-------------------------------|:-------------------------------|:--------------------------------|:-------------------------------|
|A-Frame     |[Link](https://cx20.github.io/jsdo.it-archives/cx20/0ZUL)|                                |                                |                                 |                                |
|Babylon.js  |[Link](https://cx20.github.io/jsdo.it-archives/cx20/WtR7)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/AJpD)|                                |                                 |                                |
|ClayGL      |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/0HniI)|                               |                                 |                                |
|CubicVR.js  |                                |                                |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/4jVV) |                                |
|GLBoost.js  |[Link](https://cx20.github.io/jsdo.it-archives/cx20/WjfG)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/GIhN)|                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/ITZF) |                                |
|Grimoire.js |[Link](https://cx20.github.io/jsdo.it-archives/cx20/M4sS)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/sRhd)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/Oz7X)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/Ai8D8)|                                |
|Hilo3d      |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/iwHl)|                                |                                 |                                |
|QTEK        |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/s2wJ)|                                |                                 |                                |
|Three.js    |[Link](https://cx20.github.io/jsdo.it-archives/cx20/59Ij)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/3FAB)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/agRM)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/nnK9) |                                |

### 段ボール落下

![falling_box.jpg](https://qiita-image-store.s3.amazonaws.com/0/26094/05bf3a83-c265-88c6-8e32-d37feba90776.jpeg)

|ライブラリ名|Cannon.js                       |Oimo.js                         |OimoPhysics.js                  |ammo.js                         |Physi.js                        |
|:-----------|:-------------------------------|:-------------------------------|:-------------------------------|:-------------------------------|:-------------------------------|
|Babylon.js  |[Link](https://cx20.github.io/jsdo.it-archives/cx20/2LGa)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/6TbO)|                                |                                |                                |
|ClayGL      |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/MFVk)|                                |                                |                                |
|CubicVR.js  |                                |                                |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/7bHz)|                                |
|GLBoost.js  |[Link](https://cx20.github.io/jsdo.it-archives/cx20/GDXr)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/wUhx)|                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/qmX9)|                                |
|Grimoire.js |[Link](https://cx20.github.io/jsdo.it-archives/cx20/Yzin)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/G2wl)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/giob)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/YBix)|                                |
|Hilo3d      |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/SneJ)|                                |                                |                                |
|PlayCanvas  |                                |                                |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/2XqZ)|                                |
|QTEK        |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/6viZ)|                                |                                |                                |
|Three.js    |[Link](https://cx20.github.io/jsdo.it-archives/cx20/yG5a)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/voHQ)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/kW7u)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/k77l)|                                |

### ボールをカゴに落下

![falling_ball.jpg](https://qiita-image-store.s3.amazonaws.com/0/26094/1ccddabe-69d2-bdbf-c0a1-d40b0fa8a46d.jpeg)

|ライブラリ名|Cannon.js                       |Oimo.js                         |OimoPhysics.js                  |ammo.js                         |
|:-----------|:-------------------------------|:-------------------------------|:-------------------------------|:-------------------------------|
|A-Frame     |[Link](https://cx20.github.io/jsdo.it-archives/cx20/qh52)|                                |                                |                                |                                |
|Babylon.js  |[Link](https://cx20.github.io/jsdo.it-archives/cx20/w03j)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/KM6T)|                                |                                |
|ClayGL      |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/GfTd)|                                |                                |
|GLBoost.js  |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/UTlY)|                                |                                |
|Grimoire.js |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/0fsp)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/eg5p)|                                |
|QTEK        |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/yZwE)|                                |                                |
|Three.js    |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/kNgw)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/ccWR)|                                |

### 消しゴム落下

![falling_eraser.jpg](https://qiita-image-store.s3.amazonaws.com/0/26094/a5a9ddc5-9f81-33a0-3356-71ece4ee8026.jpeg)

|ライブラリ名|Cannon.js                       |Oimo.js                         |OimoPhysics.js                  |ammo.js                         |
|:-----------|:-------------------------------|:-------------------------------|:-------------------------------|:-------------------------------|
|ライブラリなし（WebGL） |                    |[Link](https://cx20.github.io/jsdo.it-archives/cx20/GUz8)|                                |                                |
|ライブラリなし（WebGL2）|                    |[Link](https://cx20.github.io/jsdo.it-archives/cx20/rIbm)|                                |                                |
|Babylon.js  |[Link](https://cx20.github.io/jsdo.it-archives/cx20/miDI)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/oMV2)|                                |                                |
|GLBoost.js  |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/c2K1)|                                |                                |
|Grimoire.js |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/eDWo)|                                |                                |
|Three.js    |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/1RNU)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/qhUk)|                                |

### ニンジン落下

![ninjin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/21a6622e-44e2-93c4-143c-295689714871.png)

|ライブラリ名|Cannon.js                       |Oimo.js                         |OimoPhysics.js                  |ammo.js                         |
|:-----------|:-------------------------------|:-------------------------------|:-------------------------------|:-------------------------------|
|Three.js    |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/zFJT)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/o1uB)|                                |


### 複合オブジェクト

![gogogo.jpg](https://qiita-image-store.s3.amazonaws.com/0/26094/910a9b36-a262-ea3a-e9a5-1f259bbd28ac.jpeg)

|ライブラリ名|Cannon.js                       |Oimo.js                         |ammo.js                         |
|:-----------|:-------------------------------|:-------------------------------|:-------------------------------|
|Babylon.js  |[Link](https://cx20.github.io/jsdo.it-archives/cx20/kUd3)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/sSbw)|                                |
|GLBoost.js  |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/2qzd)|                                |
|Three.js    |[Link](https://cx20.github.io/jsdo.it-archives/cx20/7lgA)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/yYRM)|                                |

### glTF ファイル

![gltf.jpg](https://qiita-image-store.s3.amazonaws.com/0/26094/dc815c9f-8bca-095e-3a48-1b11fd182a47.png)

|ライブラリ名|Cannon.js                       |Oimo.js                         |OimoPhysics.js                  |ammo.js                         |
|:-----------|:-------------------------------|:-------------------------------|:-------------------------------|:-------------------------------|
|Babylon.js  |[Link](https://cx20.github.io/jsdo.it-archives/cx20/Etmi)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/Abgj)|                                |                                |
|GLBoost.js  |[Link](https://cx20.github.io/jsdo.it-archives/cx20/qQNv)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/sBPJ)|                                |                                |
|Grimoire.js |[Link](https://cx20.github.io/jsdo.it-archives/cx20/8d29)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/IUCm)|                                |                                |
|Three.js    |[Link](https://cx20.github.io/jsdo.it-archives/cx20/M2nA)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/iJJn)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/iJJn)|                                |

### 3D地図 + 物理演算

![falling_box_on_mountain.jpg](https://qiita-image-store.s3.amazonaws.com/0/26094/65dc871e-4df0-2727-d210-a76c2ade983f.jpeg)

|ライブラリ名|Cannon.js                       |Oimo.js                         |ammo.js                         |
|:-----------|:-------------------------------|:-------------------------------|:-------------------------------|
|Three.js    |                                |[Link](https://cx20.github.io/jsdo.it-archives/cx20/yWa7)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/r8Br)|

### Web Worker

|ライブラリ名|Cannon.js                       |Oimo.js                         |ammo.js                         |Physi.js                        |
|:-----------|:-------------------------------|:-------------------------------|:-------------------------------|:-------------------------------|
|Three.js    |[Link](https://cx20.github.io/jsdo.it-archives/cx20/s73C)|[Link](https://cx20.github.io/jsdo.it-archives/cx20/jP5SL)|                               |[Link](https://cx20.github.io/jsdo.it-archives/cx20/8NHu)|