mail4 google-plus3 facebook3 twitter3 vimeo3 github menu list next prev

[oF] パノラマ画像からの環境マッピング

2015-11-26

env1

CGのレンダリングの手法として、素材の反射を表現する環境マッピングがあります。

本来ですとCubeMapTextureを作成し、GLSLで法線と視線ベクトルから反射ベクトルを計算し、ピクセルを取得するのですが、CubeMapの作成が少々面倒だったりします。
openFrameworksにはofxCubeMapというアドオンがあり、左右上下前後の6枚の画像を読み込ませればCubeMapTextureを作ることができます。

Skybox_example

ただし、そもそも使用したい素材が正距円筒図法(Equirectangular)のパノラマ画像だったりすると、PrimitiveSphereにテクスチャとして貼り付けて、中心に置いたカメラで6方向の画像を取得して、ofxCubeMapに読み込ませるといった手順が発生してしまいます。
静止画であれば起動時に一度CubeMapを作ってしまえば問題ないのですが、例えば入力が動画形式だったり、THETA Sからのライブビューであったりすると、動画のフレームが更新されるたびに、毎回このプロセスを踏むことになり、かなりのコストになる可能性があります。

そこで、Marc Inignac氏のブログに載っていた、正距円筒図法の素材から環境マップを行う手法を紹介します。
http://marcinignac.com/blog/pragmatic-pbr-hdr/

やっていることは非常にシンプルで、三次元の反射ベクトルから経度と緯度を取得し、二次元の座標に変換しているだけです。

oF用に書き直し、幾つかの機能を加えたサンプルを以下に置いておきました。(oF0.9.0, Macのみ検証)
https://github.com/yasuhirohoshino/equirectEnvironmentMap

入力ソースとして静止画、動画、THETA Sからのライブビューを切り替えることができます。

env2

逆に言ってしまえば正距円筒図法の素材でしかできないアプローチなのですが、使い方によっては非常に効果的なのではないでしょうか。

ついでに無料でパノラマ画像をダウンロードできるサイトを幾つか紹介しておきます。
http://www.hdrlabs.com/sibl/archive.html
http://adaptivesamples.com/tag/free-ibl/
https://www.hdri-hub.com/hdrishop/hdri/outdoor
基本的にCGアーティスト向けの高解像度HDR画像ですので、Photoshopなどで適度な解像度のLDR画像に変換するか、トーンマッピングのシェーダーを書いて対応するといいと思います。

ちなみに、Marc Inignac氏のブログでは、WebGLでの物理ベースレンダリングの解説がなされています。
非常に勉強になるので、レンダリング技法に興味のある方はぜひ読んでみてください。
http://marcinignac.com/blog/pragmatic-pbr-intro/
http://marcinignac.com/blog/pragmatic-pbr-setup-and-gamma/
http://marcinignac.com/blog/pragmatic-pbr-hdr/

Pocket

Category : openFrameworks, THETA

4 / 6