Wasmで電場シミュレータを作る
モチベーション
卒業研究としてGPU.jsで電場シミュレータを作っている間にWebAssemblyというものを知ってしまい，それ以降はやる気が低下したりしていた．卒研が終わり暇も出来たので，電場シミュレータをWebAssemblyで作り直した．
制作物
https://slnq.github.io/werve-wasm/
機能
黒い範囲をクリックすると白いぼやけた円が表示される．これはスライダーによって変化するcharge valueの値に対応した電荷による電場である．このようにして電場を表示するのが主な機能．
install: クリックするとchargeに合う値の電荷を置く
remove: 電荷をクリックすると消すことができる
control: 電荷をドラッグ・アンド・ドロップで移動させられる
fix: 電荷をクリックすると固定できる
ソースコード
https://github.com/slnq/werve-wasm
基本的にsrc内の.jsファイルを読めばシミュレーションについてはわかると思う．
処理
- 1つの電荷に対する電界の値を1539×1539で計算しテンプレートに格納する．
- 電荷の位置を元に電界のテンプレートを動かし配列769×769に格納する．
- 電荷の数だけ総和して配列769×769に格納していく．
- 電荷の座標に対応する電界配列の要素を電荷値と乗算してクーロン力を計算する．
- クーロン力を元に位置と速度と加速度を計算する．
- 表示する．
これの2.から6.を繰り返している．配列の大きさの選択理由については記憶が無いが奇数の方が都合が良かったはず．
WebAssembly
入力と表示以外の全てをRustから変換したWebAssemblyで実行している．これを作った時点ではwgpuというかWebGPUの仕様が変わり続けていたため使っていない．
また，表示に適すような配列への変換もこっちで行っている．
スマホで触ってみて気がついたが，スワイプだとcontrol(move)が使えないようだ．GPU.jsで作った時は使えているのだから，修正も可能であうと思う．
Canvas
上述にある，表示に適すような配列をJavaScriptとWebAssemblyの共有メモリーから表示している．
GPU.js版にあったベクトル表示ha未だに作っていないため,Canvasは1枚のみでの実装．
CSS
デプロイ
webpackを用いてローカルで生成したものをGitHub Pagesで/docs`内をデプロイしている．
所感
GPU.jsで作った時に比べて情報が多くて楽だった．言語は違うとはいえ一度作った経験があるからというのも大きいだろうが．
今後の目標としては
という具合だろうか．
Discussion