« 道のり | トップページ | スモールA、スモールA、聞こえていますか? »

2010年6月 7日 (月)プログラマー的デザイン表現(7)

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

意外にも粘りに粘る「プログラマー的デザイン表現」7回目です。
今回は予告通り、パーティクルシステムを取り上げます。
あまり斬新なことはしませんが、お付き合い頂ければと思います。

さて、そもそもパーティクルシステムとは?
簡単に説明すると、煙や炎、魔法等といった表現をパーティクル(粒子)の
集合体で制御するシステムのことを指します。

小難しい説明はここまでとして、とりあえずは以下をご覧下さい。

<↓クリックすると拡大出来ます>

2010_0604_01_2 


煙を表現したパーティクルです。
各パーティクルの回転や移動、重力等に不規則性を持たせ、アニメーションも
個別に制御しています。そうすることで、より自然に映るよう演出します。
というか、この辺はセオリー通りです。

さて、ここからがプログラマーならではの話題です。
先程の画像、ちょっと気になる箇所があります。赤マル印で囲った部分、
パーティクルが地形に刺さっています。
ちょっと昔のタイトルによく見られる
交差現象ですが、近年ではほとんど改善されています。

具体的には、地形との深度値に応じてアルファ値を変化させ、上手く溶け込ませる
「ソフトパーティクル」という技術を使っているからです。
ピクセル単位での比較が必要なので、シェーダによる処理が必須です。

ということで、これを実装した結果が以下になります。

<↓クリックすると拡大出来ます>

2010_0604_02 


先程見られた交差現象は軽減されています。より自然な感じになったのではないでしょうか。

但し、それなりに処理負荷も掛かるので、トレードオフの為、1/4の解像度に
レンダリングしたものを合成しています。
当然、品質は劣化しますが、パーティクル自体が元々ボヤけているので、

多少解像度を落としてもそれほど影響はありません。

さて、次に気になるのが、パーティクルの「のっぺり感」です。光源計算を全くやっていないので、当然と言えば当然です。

テクスチャ自体に陰影を描いておけば良いのかもしれませんが、
それでは芸が無いのでシェーダによる光源計算を行います。

どうやって計算するのかといいますと、まずパーティクルの表示方向から
法線を算出し、更にテクスチャに法線マップを持たせることで、

ピクセル単位での光源計算を行います。
パーティクルの表示方法がビルボードなので、物理的に正確な計算方法とは成り得ませんが、それなりの効果は出るはずです。

以下、光源計算を追加した結果です。

<↓クリックすると拡大出来ます>

2010_0604_03 


先程と比べて、結構ボリューム感が出たかと思います。

この画像では判りませんが、裏側に回れば煙は暗く表示されます。
フェイクにしては効果は結構高いですね。
ちなみに、炎等のような自己発光物には使えません。当たり前ですが、念の為。

今回はここまで。というか、ネタ切れです(汗)

今までの例と同じく、今となっては珍しくとも何ともない技術ですが、
自己学習も兼ねて紹介してみました。

縮小レンダリングはフィルレートの改善にも貢献しています。
大量のパーティクルを出すには必須ですね。

さて次回ですが、ここまで学習してきた内容を織り交ぜて色々やってみたいと思います。
どんな形になるのか、自分でも皆目見当がつきませんが、お楽しみに!?

ではでは。

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

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

« 道のり | トップページ | スモールA、スモールA、聞こえていますか? »

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

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック


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

« 道のり | トップページ | スモールA、スモールA、聞こえていますか? »