HTML5を活用したインタラクティブ物理シミュレーション
~タブレット端末による柔軟体・流体の力学計算~
CEDEC2014

画像をクリックするとデモが起動します

2.5D FEM

柔軟体シミュレーション

WebGLを用いて三次元柔軟物体を表現しました.マウスドラッグで視点を変えることができます.有限要素法(FEM)により物体の変形を計算します.力学計算は二次元ですが厚みを持たせて簡易的に三次元で表現しています.(PC向け)

DEM

流体(粉体)シミュレーション

WebGLを用いた三次元流体(粉体)シミュレーションです.個別要素法(DEM)により粉体の力学計算しています.(粒子数5000)(PC向け)

jelly

画像を利用した柔軟体表現

Canvas要素を用いて画像を利用した柔軟体表現を行いました.マウスドラッグやタッチによってインタラクティブに物体を変形できます.(PC・タブレット向け)
軽量版
多機能版(画像の読み込み,メッシュ生成,材料パラメータ設定など)
ライブカメラ版(カメラ映像上でマウスドラッグすることで変形)

dem2d

スマートフォンにおける二次元流体

Canvas要素を用いた二次元流体(粉体)シミュレーションです.スマートフォンの加速度センサから実空間の重力の向きを取得して力学計算をしています.(粒子数300)
固定枠版(1200x800)
固定枠版(800x1200)