投稿者 tel | 2014年10月29日

WebGLで深度テクスチャを表示する

WebGLの拡張機能の WEBGL_depth_texture を使うとフレームバッファにアタッチしたテクスチャに深度値を書き込める。

gl.getExtension('WEBGL_depth_texture');

で深度テクスチャの拡張機能を有効にするとテクスチャ生成時のフォーマットが以下のような設定ができるようになる。

gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, width, height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null);

生成したテクスチャをフレームバッファに深度バッファとしてアタッチしてレンダリングすると深度値が書き込まれる。

書き込まれたテクスチャを画面を覆うポリゴンに貼り付けて表示する。
フラグメントシェーダで深度テクスチャのR成分をみてグレイスケールとして表示している。

precision mediump float;
varying vec2 uv;
uniform sampler2D tex;
uniform vec2 offset;
void main() {
    vec4 c = vec4((texture2D(tex, uv).r));
    gl_FragColor = vec4(c.rgb, 1.0);
}

depth_texture
http://jsdo.it/sapphire_al2o3/klwa
ポイントとして深度をテクスチャに書き込むときはカメラのニアとファーのパラメータをいい値にしてあげないといけない。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。