LoginSignup
61

More than 3 years have passed since last update.

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

Last updated at Posted at 2015-10-03

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

サッカーボール落下

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

段ボール落下

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

ボールをカゴに落下

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
61