はじめに
前回の記事↓
JavaScriptでGray-Scottモデルを実装してみた話
この前作ったGray-Scottモデルのシミュレータを改良してみました。具体的には、WebGL2を使って計算処理と描画処理をGPUに任せることで軽量化を図りました。改良前のものは計算処理をCPUで行っており、描画処理も標準のCanvas2Dを使っていたのでかなり重かったのですが、今回の改良でずいぶん改善されました。
コチラです。→Gray-Scottモデル v2
ソースコードはGitHubに置いています。↓
mitaka1962/gray-scott-model (GitHub)
パターン生成の様子はこんな感じです。
しかし一方で、WebGL2に対応していないブラウザでは動作しなくなっています。。。といっても、ChromeやFirefoxなど主要ブラウザではすでに対応しているのでほとんど問題ないのですが。Edgeは最近リリースされたChromium版の新Edgeなら動作するようですが、旧EdgeはWebGL2非対応なので動作しないようです（もちろんIEも非対応）。iOSはWebGL2に対応している（らしい）のですが、今回の改良で使った拡張機能には対応していないようなので動作するかは微妙です。一応androidのほうは問題なく動きました。
参考にしたWebGL関連サイト
WebGL、OpenGLを使うのはほとんど初めてだったのでシェーダープログラムやバッファーなどの概念にかなり戸惑いました（というか、今もまだ完全な理解にはほど遠いのですが）。WebGLを学ぶにあたって参考になったサイトを紹介しておきます。
公式のチュートリアル。とりあえず最初はこのサイトに載っているコードをコピペしながらWebGLを動かしてみました。
とても分かりやすく、かつ丁寧にWebGLの基礎的な知識を説明してくれているサイト。シェーダーの書き方やJavaScript側のコードの意味などがよくわかりました。ところどころ日本語化されています。
一つ上のサイトのWebGL2版。WebGL1から何が変わったのかをわかりやすく解説してくれています。
・WebGL2でGray-Scott反応拡散系シミュレーション (Qiita)
すでに全く同じテーマでシミュレータを作っている方がいました。途中シミュレーションがうまくいかなくて半日ぐらいハマっていたのですが、この記事のおかげでfloatテクスチャやEXT_color_buffer_floatという拡張機能を知ることができ、何とか完成させることができました。記事にある3D風のシェーディングもいずれ実装してみたいです。
同じくGray-Scottモデルのシミュレータ。フラグメントシェーダーでの計算のコードはとても参考になりました。
行列に関する記事は今後3Dをやる際に必須の知識だと思いました。
おわりに
せっかくシミュレータを作ったので他の反応拡散系についてもシミュレートしてみたいと思っています。FitzHugh-Nagumoモデルなど、Gray-Scottモデル以外にもいろいろあるみたいです。あと3D化も試したいです。
追記(2020/04/26)：改良しました。↓
