[3D]パラパラパララックス

出水洸太郎 — Wed, 03 Feb 2010 23:01:00 GMT

今の仕事で3D関連の事をやっています。
サンプルを動かすだけで度肝を抜かれることばっかりで…。

その中でも、かなりびっくりしたのがパララックスマッピングです。

下の画像を見てください。

なにやらお盆に変な立体が乗っかっているようですが、
実はこの立体部分は平らです。

この画像は、平らな円盤が表示されているだけで、立体に見えるのはただの模様(テクスチャ)です。
しかしながら、視線を動かすとその模様がリアルタイムに変わって立体があるかのように見える、
この技術がパララックスマッピングです。

ポリゴンのテクスチャとして、その部分がどれだけへこんでいるか、という情報を持ちます。
そして、へこんでいる量と視点に応じて、表示する点をちょっと動かしてやるわけです。
すると、へこんでいるように見えるよね、と…わかりにくいですね。

下の図は、真上から斜めになっているポリゴンを見た状態です。
ポリゴンに凹凸がないと左の図のように均等に張り付けられますが、
凹凸情報を計算して、右の図のようにテクスチャの張り方に変化をもたせると、より凹凸があるように見えます。

実際にはどうやっているか気になったのでソースを読んでみました。
ピクセルシェーダーのプログラムを読むのは初めてですが、概ねこんな感じじゃないかと。

黒い矢印は視線を表します。
本来のポリゴンであれば、赤い部分のど真ん中ですから、赤色で塗られる場所ですが、
高さマップを計算するとまだ視線はなにもぶつかっていません。

少しづつぶつかった部分からさらに視線を伸ばしていきます。
視線の深さがポリゴンの深さを超えるまですこしずつ計算し続けます。

実は視線の位置は赤と黄色の境目になる点でした。
そこで、最初にぶつかった点は境目の色で塗ります。

これをですね、ピクセル単位、つまり1ドット１ドット全てこの計算をするわけです。
何回の計算が必要なんだ！？と驚いてしまうのですが、
グラフィックカードはこういう計算を得意とするチップを積んでいます。
しかも、お互いが干渉しない＝並列化可能なので同時に並列でぐわーっと計算されるわけです。

冒頭の図はこれにバンプマッピングと言う輝度を変化させる技術も使われています。

光の方向と垂直になっている面はより強く光るし、平行に近ければ暗くなります。
これも、テクスチャにそういう情報を持たせて、光り方を変えるわけです。
もちろん、このバンプマッピングもピクセル単位で計算されます。

これでレンガが積み重なった壁のような、小さな凹凸がある壁がリアルに見える、と言うわけです。
こんな感じですね。

ポリゴンで表現しちゃえばいいんじゃないの？とおもうんですが、
こんなのをポリゴンで表現すると頂点数がいっぱい必要になって速度が出ません。

最近のリアルな3Dにはこんな技術が隠されているわけです。

ところで、使った画像はDirectXSDKに付いているサンプルです。
気になった人はダウンロードしてデモを動かしてみましょう。