iOSでキューブマッピング
オフスクリーンレンダリングを調べていた時にキューブマッピングなるものを知ったんだわ。環境マッピングとも言ったりするみたい。
これを使えばオブジェクトへの映り込みを表現できるとか。これは面白そうだと挑戦してみたんだよ。
ところがこれ、やろうとするとなかなかややこしくてね。OpenGLだとよくあることだけど説明する人によって環境も違うしさ。iOSでのOpenGLだとどうなるんだろう?と最初は戸惑ったんだけど、結局のところ、このキューブマッピングというのはオブジェクトを’世界’の中心に置いて視線と法線だけで周辺画像(上下左右前後6枚用意するでしょ)のどこを拾うかを決定するんだよね(周辺は無限遠にあると仮定するので)。
するとフラグメントシェーダはこんなのになる。
ちょっとこれすごくない?
実際にやってみたところ、、、

↑こんな感じになる。
このトーラス、頂点の数が221,184個あるんだわ、、、もっとキレイに映り込みさせようとするならどんなけ必要なんだよー?!って感じ。
iPhone 5sだと60fps出てたけど、touch(5G)だと35fps程度。静止画ならともかくリアルタイムで動かそうとするならちょっと使いどころが難しいかな。
wgld.org | WebGL: キューブ環境マッピング |
↑なお、6枚のテクスチャはここから借りたよ。
これを使えばオブジェクトへの映り込みを表現できるとか。これは面白そうだと挑戦してみたんだよ。
ところがこれ、やろうとするとなかなかややこしくてね。OpenGLだとよくあることだけど説明する人によって環境も違うしさ。iOSでのOpenGLだとどうなるんだろう?と最初は戸惑ったんだけど、結局のところ、このキューブマッピングというのはオブジェクトを’世界’の中心に置いて視線と法線だけで周辺画像(上下左右前後6枚用意するでしょ)のどこを拾うかを決定するんだよね(周辺は無限遠にあると仮定するので)。
するとフラグメントシェーダはこんなのになる。
{ highp vec3 ref = reflect(vPosition - eyePosition, vNormal); gl_FragColor = textureCube(uTexture, ref); }これだけで物体表面のテクスチャに周辺の画像(6枚の画像)が映り込む。単にテクスチャの表示方法を指定してるだけで、オフスクリーンレンダリングも必要なし。
ちょっとこれすごくない?
実際にやってみたところ、、、

↑こんな感じになる。
このトーラス、頂点の数が221,184個あるんだわ、、、もっとキレイに映り込みさせようとするならどんなけ必要なんだよー?!って感じ。
iPhone 5sだと60fps出てたけど、touch(5G)だと35fps程度。静止画ならともかくリアルタイムで動かそうとするならちょっと使いどころが難しいかな。
wgld.org | WebGL: キューブ環境マッピング |
↑なお、6枚のテクスチャはここから借りたよ。
スポンサーサイト