テクスチャをカラーバッファとして利用する
テクスチャをカラーバッファとして利用する
フレームバッファに紐付けるカラーバッファにテクスチャを利用するには、
まず空のテクスチャオブジェクトを用意することから始めます。
これまで同様、対象のテクスチャに何かしらの処理を加える場合には、まずテクスチャをバインドしなければなりません。
code:js
// フレームバッファ用テクスチャの生成
var fTexture = gl.createTexture();
// フレームバッファ用のテクスチャをバインド
gl.bindTexture(gl.TEXTURE_2D, fTexture);
生成したテクスチャに、カラーバッファとして利用できるように設定を行なわなければなりません。
テクスチャをカラーバッファ用に設定する
code:js
// フレームバッファ用のテクスチャにカラー用のメモリ領域を確保
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
まずは、第四・第五引数ですが、
ここにはテクスチャの横幅と縦幅を指定します。
そして最後の第九引数にnullが指定されていることが重要です。
本来、この最後の引数にはテクスチャに設定するイメージデータを渡しますが、
ここにnullが指定されていることによって、
テクスチャにはそのサイズやフォーマットだけが設定され、中身は空っぽの状態になります。
要は、この空の領域にオフスクリーンレンダリングを行なうわけです。
ですから、重要なのはテクスチャのサイズを正しく指定すること、そして最後の引数を必ずnullにすることです。
その他の引数の意味はここでは説明しませんが、上記の例のように指定すればとりあえずは問題ないでしょう。
これでカラーバッファ用のテクスチャが準備できました。