レンダーバッファの作成
レンダーバッファの作成
色や、深度値に関するデータを格納するバッファを用意するためにはレンダーバッファ(render buffer)を利用します。
レンダリングを行う対象として利用できるバッファ領域
レンダーバッファは非常に柔軟な仕様となっており、
どのように設定したのかによって
カラーバッファとしても、
深度バッファとしても、
ステンシルバッファとしても使うことができます。
本家 OpenGL には、このレンダーバッファに設定できるフォーマットの種類として非常に多くの選択肢が用意されていますが、WebGL においては現時点でいくつかを除いて使用できない状態です。
createRenderbuffer
var renderBuffer = gl.createRenderbuffer();
これで空のレンダーバッファが生成できます
これを WebGL にバインドすることによって操作を加えることが可能になります。
レンダーバッファのバインド
gl.bindRenderbuffer(gl.RENDERBUFFER, renderBuffer);
第一引数には、WebGL の組み込み定数gl.RENDERBUFFERを指定します。
第二引数がバインドするレンダーバッファですね。
バインドが完了したら、このレンダーバッファをどのようなフォーマットとして扱うのかを設定します。
ここで設定した内容に応じて、このレンダーバッファがどのように利用できるのか決まります。
レンダーバッファへのフォーマットの設定にはrenderbufferStorageメソッドを使います。
レンダーバッファへのフォーマットの設定
gl.renderbufferStorage(gl.RENDERBUFFER, format, width, height);
第一引数は先ほどのバインド処理と同様gl.RENDERBUFFERを指定します。
第二引数がレンダーバッファに設定したいフォーマットの指定です。
第三引数と第四引数を使って、このレンダーバッファのサイズを指定します。
第二引数に指定できるフォーマットの種類は以下のようになります。
table:フォーマットの種類
フォーマット 意味
gl.RGBA4 RGBA それぞれに 4 ビットを割り当てカラーバッファとして利用する
gl.RGB5_A1 RGB それぞれに 5 ビット、アルファ値として 1 ビットを割り当てるカラーフォーマットを利用する
gl.RGB565 R 要素と B 要素に 5 ビットを割り当て、G 要素に 6 ビットを割り当てるカラーフォーマット
gl.DEPTH_COMPONENT16 16 ビット深度を持つ深度バッファとして利用する
gl.STENCIL_INDEX8 8 ビットのビット長を持つステンシルバッファとして利用する
オフスクリーンレンダリングを行なった結果はテクスチャとして再利用できるようにしておくのが定石です。
このような処理を実現するための手段として、
フレームバッファに紐付けるカラーバッファの代替としてテクスチャを使う方法が WebGL には実装されています。
カラーバッファとしてテクスチャを使うと、ビット長による縛りもありませんし、今まで使ってきたテクスチャに関する技術がそのまま流用できます。