投稿者 tel | 2014年7月20日

WebGLでブルーム

ポストエフェクトのブルーム効果を試してみる。

ブルームのコードはnVidiaのOpenGLのサンプルのBloomを参考にした。

https://github.com/NVIDIAGameWorks/OpenGLSamples

手順としては

  1. 普通にレンダリング。
  2. カラーバッファをテクスチャにコピー。
  3. 高輝度部分を抽出しながら4分の1サイズにしてテクスチャにレンダリング。
  4. 横方向にガウスぼかし。
  5. 縦方向にガウスぼかし。
  6. ぼかしたテクスチャとカラーバッファのテクスチャをブレンドしてレンダリング。

最初にテクスチャにレンダリングしないでわざわざコピーしてるのはテクスチャにレンダリングした場合だとアンチエイリアスが効かないため。たぶんパフォーマンスがちょっと落ちる。

https://gist.github.com/sapphire-al2o3/399c67a83dac93f161fd

bloom_off_ss

bloom_ss

ブルームを有効。

http://jsdo.it/sapphire_al2o3/9V1g

 

 

 


コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

カテゴリー

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