WebGL 1.0 　OpenGL ES 2.0 　Google Chrome 14.0.835.186

今回は、Learning WebGLでやり残していたネタである、レンダーバッファを使ってみます。 DirectX 9 でいうところのレンダーターゲットサーフェスです。 要するに描画した結果をシェーダー内で参照できるようにします。

OpenGL ES 2.0 ではまずフレームバッファというものを作成します。 フレームバッファは多分レンダーバッファとテクスチャーを関連付けるための親バッファ的な意味合いだと思います。 で描画対象のバッファを指定する際に使用するレンダーバッファとシェーダー内でサンプリングを行う際に使用するテクスチャーをそれぞれ作成して、 フレームバッファに関連付けるようにします。 この辺の処理は initTextureFramebuffer() で行っているのでソースを参照してください。

いくつか注意点があります。レンダーバッファに書き込まれた内容を確認すると上下逆向きとなっています。 WebGL Inspector で確認するとそれがわかります。 OpenGL ES 2.0 ではテクセルの原点位置が左下となるので、左下から描画を行っていくためそのようになるのだと思います( 多分 )。
ただわからないのが、テクスチャーにgl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, true ); を設定してもポストエフェクトの結果で正しく描画されないことです。 どうにもならなかったので結局、ポストエフェクト描画時に使用する四角ポリゴンのテクセル座標を上下逆向きにしました。

次にキャンバスのサイズについてです。 もともと縦横幅それぞれ 500pixel でキャンバスを作成していましたが、このサイズでフレームバッファを使用すると正しく描画できなくなります。 どうもフレームバッファは 2 のべき乗 のサイズで作成する必要があるようです。

最後にポストエフェクトについてです。今回やっていることはただの輪郭抽出です。 画像処理プログラミングという書籍を参考にしています。 といってもサンプルどおり作成してないですけどね(笑)。

Prev　Top　Next