three.jsのgpgpu Birdsのコードを読む。

公開:2016-10-15 18:59
更新:2017-09-18 05:24
カテゴリ:javascript,three.js,glsl

RYDEENカバー用の動画を作るためにthree.jsを復習していて、ようやくシェーダー・マテリアルの使い方がわかってきてちょっと楽しくなってきている。 ただまだまだ表現として稚拙だし、サンプルのパラメータやコードを少し変えてみている程度なので、もうちょっと凝ったことをしたいなーと思っている。

で、波形データをシェーダー側で直接いじって何かできないかなーと思っていて、さらにはgpgpu的ななにかもちょっとやってみたくなってきている。 そこでthree.jsのexampleの中のgpgpu birdsサンプルを読んでいる。

gpgpuって何かというと、General Purpose omputing on Graphics Processing Unitsの略で、GPUが持つ強力な並列演算機能を画像処理以外の処理に使おうというものである。でgpgpu Birdsは鳥モデルの移動計算をgpuに行わせることによって、大量の鳥モデルの表示を可能にしている。

https://sfpgmr.github.io/images/2016/10/2016101501.png

で、数値演算をどのようにgpuにさせるのかというと、テクスチャを演算用メモリとして使用し、演算したい変数情報を格納して、gpuに渡しフラグメントシェーダーで演算させるのである。

gpgpu Birdsでは、サンプル中にあるGPUComputationRenderer.jsというヘルパを使って演算を行っている。なのでGPUComputationRenderer.jsの使い方を理解すれば、私でも比較的簡単にgpgpuが使えるようになるはずだという想定のもと、コードを読んでいる。

なんとなく使い方はわかったので、実際にコードを書いてみようかなと思っている。