2014/09/17 (2014年09月 のアーカイブ)
WebGLでシェーダープログラム書こうぜ!
LiveBeatsでビジュアルエフェクトを幾つか作ってみたりしているんですが、さすがにJavaScriptのCanvas上で画像のピクセル単位の処理をごにょごにょしたりしているとパフォーマンスが厳しくなってきます。
まだもう少しはCanvasだけでも頑張れるかなぁと思いつつも、これに関してはもう進むべき道ははっきりしていてるんですよね。WebGLですよ、やっぱり。とは言え、GPUの性能をフルに引き出すにはシェーダープログラムをGLSLなる言語で書く必要がある所が結構な障壁になっています。という事でとっつきやすいTHREE.jsあたりを使って取りあえずJavaScriptでコントロールするだけでも今までとは一味違う表現ができるんですが...
それでも満足できなくなったらこっち、GLSL Sandbox。GLSLでがしがし書いて即テストできるサイトで、ビジュアライザー系にそのまま使えそうなサンプルがてんこ盛りです。素晴らしい。このサンプルを見てると(THREE.jsとかのライブラリを使うにせよ)GLSLで書くモチベーションが湧いてきますね。
ただし、GLSL Sandboxでは入力となるパラメータが時間とマウス座標くらいしかないので、音のビジュアライザーにするにはちょっと物足りない所もあります。やっぱり生のWebGLの全貌をちゃんと理解しないといかんなぁ、となったらこっち、wgld.org。物凄く丁寧にWegGLを解説されていますので、みっちり読めばWebGLマスターになれそうです。
という事で、LiveBeatsで処理が重くてこの先不安な感じがあったカメラ画像で動きを検出したりエフェクトを掛けたりする部分をなんとかGLSLで書いてみました。Webカメラから画像を取り込んで、色々エフェクトをかけつつ、動きの激しい部分の座標を追いかけます。Canvasオンリーで書いてた時はかなり重かったんですが、GLSL化で古いMBAでもほぼ60FPSで安定して動作するようになりました。
これは、カメラ画像のフレーム差分から動きを検出する部分と画像にエフェクトを掛けつつ表示する部分で2つのシェーダープログラムを使用しています。ポイントとしてはGPU側で行った動き検出の結果をCPUで使いたかったのでそのあたりの受け渡しをどうすれば良いのかちょっと悩みましたが、シェーダーでオフスクリーンバッファに書き込んでCPUでreadPixelsするという感じで行ける模様です。この辺のボトルネックがどの程度なのかまだ感じが掴めてないんですけど、音声信号もGPUに送ってシェーダーで処理するなんて事も頑張ればできそうです。その内試してみるかも。
Posted by g200kg : 2014/09/17 19:28:14