« 若いって素敵♪ | トップページ | 汝が半数の中心 »

2009年5月18日 (月)プログラマー的デザイン表現(2)

おはようございます。本日の当番、プログラマーの大川です。

前回に引き続き、「プログラマー的デザイン表現」について、アレコレ考えてみます。
ネタがどこまで続くか微妙ですが、自らに試練を課す意味も込めて(汗)頑張ります。

さて、前回は「平行光源/フォグ/HDR」を使って、山岳地帯を表現してみました。
今回は、先に完成形からお見せします。

2009_0515_01_2 

見た目は高精度なテクスチャから構成されたメッシュのように見えますが、
実はそんなに頑張って作っていません。そもそも、そんなデザイン能力ありませんし(汗)

では、どうやって作っているのか?
今回は、以下のテクニックを使用してみました。

 ・ディティールマッピング
 ・スペキュラマッピング
 ・シャドウマッピング
 ・事前計算によるアンビエント・ライティング
 ・スクリーンスペース・アンビエント・オクルージョン(SSAO)


見た目、バンプマッピングを使っているように見えますが、使っていません。
また、前回使用したHDRについても、今回は無しです。
リアルタイム光源処理もありません。

ズバリ、今回の課題は「処理速度/容量圧迫に優しく!」です。
具体的に何処が優しいねん、ということになりますが、順を追って説明します。



まずは「ディティールマッピング」から。
低解像度のテクスチャに、詳細模様を表現したテクスチャを合成する、というものです。

↓例えば、こんなテクスチャに対して、

2009_0515_02

↓こんなテクスチャを合成すると、

2009_0515_03

↓こうなります。

2009_0515_04

こうすることで、高解像度のテクスチャが必要無くなり、容量削減や速度向上、
書き手さんの作業自体の短縮化に繋がります。節約万歳!

次にスペキュラマッピングですが、今更解説は必要無いですね。
↓処理適用後は、こうなります。なかなか雰囲気が出てきました。

2009_0515_05

次に、事前計算ライティングです。
一般的にはポリゴン毎に光源処理を施しますが、今回は「どの軸に、どの程度の光が
当たっているか」を事前に計算を行い、1パスで全光源をレンダリングしています。

荒っぽい処理に聞こえますが、環境光のような大局照明に対しては、大して目立ちません。
また、光源の数に関わらず、処理負荷は一定ですので、これまた節約です。ん~節約名人!

2009_0515_06

シャドウマッピングについては、ごくごくベタに実装していますので、割愛します。
強いて言えば、カスケード状にシャドウバッファを作成している事くらいでしょうか。

最後に、スクリーンスペース・アンビエント・オクルージョン(SSAO)です。
最近になって何かと注目を浴びているようなので、興味本位で実装してみました。
簡単に言うと、環境閉塞を疑似的にリアルタイム処理しましょう、というものです。

↓こういった結果に対して、

2009_0515_07

↓SSAO処理を通すと、こうなります。

2009_0515_08

雰囲気的には、柔らかい陰影が出て、何となくリアリティが増します。
SSAOはポスト処理として実行されますので、ジオメトリの複雑さに影響されず、
それなりの雰囲気を表現することが出来ますので、お得です。



今回は、費用対効果の視点から攻めてみました。マシン性能が上がったとはいえ、
性能自体無限ではありませんので、出来るだけ疑似表現を使って、メモリ節約と
処理の軽減を考えましょう、という話題でした。

いよっ、節約大臣!

follow us in feedly
result = encodeURIComponent( "http://www.accessgames-blog.com/blog/2009/05/post-c7cb.html" );document.write( "result = " , result );&media=https%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">

| | コメント (0) | トラックバック (0)

« 若いって素敵♪ | トップページ | 汝が半数の中心 »

プログラマー」カテゴリの記事

コメント

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: プログラマー的デザイン表現(2):

« 若いって素敵♪ | トップページ | 汝が半数の中心 »