2011年06月17日

【プロシージャル生成】植物生長シミュレーション

こんにちは、イワサキです。わーい(嬉しい顔)
さて、今日は技術的な話題ということで『植物のプロシージャル生成』のお話をしてみたいと思います。
昨今ですとCRY ENGINEなども搭載している機能ですね。

技術トレンドもプロシージャル生成を併用して自動化していくようになることが考えられますので
ヘキサドライブでも技術的な部分を研究を行なってみました。

植物生成をする際には一般的には「自己相似」「フラクタル」という概念を主に用います。
そのなかでも植物学者アリステッド・リンデンマイヤー(Aristid Lindenmayer)が提唱したL-systemというアルゴリズムあるようです。
詳細はWikipediaを御覧ください。

L-system (Wikipedia)
http://ja.wikipedia.org/wiki/L-system

数学的図形を再帰的に繰り返すことで植物などの形状を表現できるというものです。
そして、計算によって自動生成することをプロシージャル生成(Procedural generation)と言います。
しかしながら、単純にこれを実装すると、いかにもCG!というような規則的な形状が生成されてしまいます。

ゲームCGでは、プロシージャル生成を行なうとしても仮想世界を作る上で、よりナチュラルで現実世界に近い見た目で生成することが望ましいです。


私自身の趣味で密かにガーデニングをしているのですが、草木にふれあううちに植物の生命力の高さと巧妙さに驚きます。
まさに生命の神秘です。

2011-06-17-2.JPG2011-06-17-3.JPG
今回直接関係ない話ですが今年自宅で咲いたバラです。

植物とはどのように生命を営み、どのように生長繁茂していくのかという観点で、
今回はプログラマーとしての数学的見地ではなく、農業や生物学(理論生物学)的見地から植物生成を考えてみます。
どこかに似た文献がありそうですが、今回は計算方法などはオリジナルの手法です。
こういうのをCEDECとかで技術講演出来れば…

植物のプロシージャル生成についてはかなり以前からSpeedTreeをはじめ、多くの先駆者が研究を進めている分野です。
成長ホルモンをシミュレートするという考え方も以前から存在しており、2008年のCEDECでも講演発表されていました。

■CEDEC 2008 - コンピュータが知性でコンテンツを自動生成--プロシージャル技術とは(前編)
http://journal.mycom.co.jp/articles/2008/10/08/cedec03/001.html


動植物は設計図(DNA:デオキシリボ核酸)をもち、その設計図をもとに細胞を分裂させて増殖をして形作ります。
いろんな形の形成や動作などは分子からなる化学反応が動力になっています。
細胞の分裂や情報の伝達のきっかけは栄養素、つまり化学物質が大きな影響を及ぼしています。

今回植物生成するにあたって、普通にフラクタル再帰でモデル生成しているだけではリアルに見えないということで
上記の観点から栄養素と細胞分裂・幹細胞の変化を簡易的にシミュレートして実際に起こっている現象を再現して形状を生成したいと思います。

次のように現象を簡易モデル化したいと思います。

2010-10-14-0.png


ひらめき微量元素を省略して三大栄養素のみで構成(窒素・リン・カリウム)

ひらめき根からの吸収で各細胞へ栄養素の運搬を行なう。
各細胞で栄養素・成長(生長)ホルモンは呼吸によって消費され、余剰分が次の細胞に送られる。

ひらめき各細胞は栄養素を蓄積/消費するものとする

ひらめき仮想的な生長成長ホルモンを設定。(発根成長、幹の成長、枝の節の形成成長ホルモン、葉脈形成、葉肉形成)
各幹細胞内でこの成長ホルモンを蓄積させて濃度として管理


ひらめき一定の濃度しきい値を超えた場合に細胞は役割を変える。

2010-10-14-0.png


今回はすべてを行うと大規模なものになりますので、幹細胞は根と幹・枝に限定してワイヤーフレームでシルエットを描画してみたいと思います。
まずは実行プログラムを置いておきます。どのような具合かをみてもらったほうが解りやすいかなと思います。




このデモは以下からダウンロードすることができます。

地面を模して、根の形状と枝の形状をシミュレートします。
プロシージャル生成していますので、作る度に形状が変化します。
又、成長がほぼ止まった状態になっても、そのまま放置すると樹齢を重ねていきます。
年月の進行によって幹の太さや比率に味が出てきます。
(本当は先端の生長点も樹齢シミュレーションしたら、より良いのですが今回は省略しています)


◎動作可能な環境

 <動作条件>
 WindowsXP以降、DirectX9.0c
 ShaderModel 2.0 以降

2011-06-17-A.png2011-06-17-9.png

Download
HexaPlant.zip (約944KB)

───2011-06-20 追記
■節の形状の影響の計算を改良しました
■地上部への窒素供給量が本来よりも多かったためを修正しました。
■必要なシェーダー条件をShaderModel2.0に引き下げました。
───2011-06-21 追記
■幹の太さをマーカー表示するように追加しました。
───2011-07-15 追記
■成長時の栄養素消費量を減らして全体の流量を調整しました。
(以前よりも成長しやすくなっています)
■幹の太さを反映してラインで輪郭を簡易描画するようにしました。
───

【動作確認済ハードウェア】
NVIDIA GeForce GT 420

【操作方法】
マウスのドラッグで視点を回転
十字キー↑↓…肥料吸収量を増減
Zキー  … 幹・枝の太さ表示ON/OFF
スペースキー…リセット/再シミュレーション




木に身近に触れることがある方だとこの枝ぶりの生な感覚をなんとなく感じ取っていただけるかなと思います。
今回のデモの動作原理についてご紹介します。

2010-10-14-0.png


まずは原点座標に起点となる『種子』を置きます。ここから発芽し、根の生育と共に地面から栄養素を吸収して生長して行きます。
この仮想的な植物が吸収する総吸収窒素肥料量として、左側のバーにグラフで表示しています。十字キー上下で増減操作ができます。
肥料が少ないと矮小な貧弱なものになりますし、多いと果樹くらいの大きさになります。

ここで吸収する肥料は三大栄養素の窒素(N) リン(P) カリウム(K)です。これが元になって成長ホルモンが作成されます。
プログラム内ではVector3でNPKをxyzに入れて使用しています。
根から吸収された栄養素は成長ホルモンに変化し、道管を通じて各枝まで届けられます。
懐かしい…「維管束」とかあったっけ…理科テストに出たよな…

2011-06-17-4.png

各細胞内を通過する際にこの成長ホルモンを細胞に吸収させ加算します。呼吸によって消費もします。
残りの余剰分を次の先にある細胞へ送ります。

2011-06-17-5.png

上記の実装によって、根元ほど成長ホルモンが豊富にあり、根の先や枝葉にはその過程で消費した残りのものが存在することになります。
幹は富栄養、枝先は貧栄養になります。

枝(ノード)は成長ホルモンを吸収し生長します。枝自体の長さが伸びます。
最初は枝の太さは細く、生長が活発です。
植物の先端は「生長点」と呼び、徐々に幹の太さが太くなればなるほどその部分の伸びる能力が鈍り、幹を太くする方に栄養素が消費されます。
(プログラム上では幹の半径を大きくしながら、その太さを伸長係数に利用しています。)

2011-06-17-7.png2011-06-17-6.png

枝生成成長ホルモンが一定のしきい値を超えた場合にはノードを生成して分岐させます。
このとき、本流と支流の2方向に分けます。
この本流と支流の太さの比率も植物によって異なります。分岐ノードは栄養素を幹の太さの割合によって分配します。
これによって、枝分けが繰り返すうちに細くなり、枝の先端の栄養素量が薄くなります。

枝分けには形状生成に必要な閾値をつかって分岐設定します。
この閾値が『DNA』に相当します。DNAは生物の完全な設計図ではなく、幹細胞の分裂しきい値をもったものと言われています。
人間の指が5本だったり、左右対称だったり、いろいろDNAにフラクタル圧縮されてますよね。
今回は次のようなものを設定します。

2010-10-14-0.png


ひらめき枝振りの決定要素として、成長ホルモンの運搬経路と濃度変化を考慮する
 植物の栄養素は「道管」と呼ばれる経路を通り、各細胞へ運搬されます。
 枝や茎には、ぐるりと一周分「道管」が通っています。

 ここに節ができて枝分かれした場合は、その表面を通っていた栄養素は分岐した方へ流れます。
 そうすると、必然的にそのすぐ真上の側面は栄養素が薄くなります。
 次の節が形成される場合には成長ホルモンが薄くなっている場所には付かずに、濃いほうにつきます。

2011-06-17-8.png
 
 この原理で、植物は枝葉の位置が偏らず、たがい違いに枝をつけて生長します。
 生命の偶然の神秘はすごいですね。
 プログラムではこの道管内の濃度分布をシミュレートし、栄養素の濃いほうには節を付けるように補正します。

ひらめき太陽の方向がよく育つ
 太陽光を受けることで光合成します。光合成の栄養素は葉が最も多く、そこから道管で運搬されます。
 成長ホルモン濃度も日の当たるほうが濃くなります。
(プログラム上では真上に太陽があると仮定します)

ひらめき細胞の精度はバラつきがある
 各種しきい値は誤差が多く、各細胞で個体差が生まれます。
 これによって形状に揺らぎが出ます。(プログラム上ではある程度乱数範囲を持って対応します)

ひらめき枝は重力を受け、水平な枝は栄養素が片方に偏る
 つるバラなどはこの現象によって水平な枝に花が付きやすいと言われます。
 又、枝が空へ向かって伸びるのもこの影響があります。水平な枝は、下側の生長が早くなり、枝が上を向くように曲がってゆきます。
     2011-06-17-B.png
 プログラムでは道管の姿勢方向によって節の出来る方向をコントロールします。

ひらめき枝は分岐したあとでもその部分の生長を続けられるが、根は土中を広がっていくため、一度分岐したらその先しか生長していかないようにする。

2010-10-14-0.png



大まかですが以上のような現象をこのデモではシミュレートしています。
これによって、何回生成しても結構それっぽい形が出ているのではないでしょうか。
枝の分岐は栄養素の値のみで判定して分岐方向を決定しているだけですが、わりとそれらしいです。

※もちろんこの見た目や成長の具合は植物によって多種多様で、全ての植物に当てはまるわけではありません。

をつけるにもこれと同じ方法で付けることができます。
幹で特定の成分が消費された栄養素は葉に到達する頃には一部分の栄養素がなくなった状態で届きます。
その残りの栄養素の比率がしきい値となり、葉の形成細胞へ変化します。
これをシミュレートすると今回のデモで葉をつけることもできそうです。ぴかぴか(新しい)

又、剪定したり、枝が折れたりした場合の変化もこの技法では栄養素の動きを変化させることで表現できますので
それに合わせた生長の変化も表現することができてしまいます。ぴかぴか(新しい)ぴかぴか(新しい)
盆栽剪定シミュレーションゲーム』とか作れそうですね
剪定には「ヤゴ、幹ぶき、からみ枝、逆枝、ふところ枝、立て枝」など好ましくない向きの枝を切り落とすときれいな樹形になり良いという定石のようなものがあるのですが、これをゲーム内で表現してしまったりできると別のゲームになりそうです。
この手法だとこの逆枝のような現象も実際に今回のデモの画面内に自然現象として観察することができます。

内部的には枝や根の太さや、他のDNA的なパラメータを持っていますので、これを簡単に調整できる仕組みを作ればゲームに適用していけると思います。グッド(上向き矢印)

擬似的にいろいろ頑張って苦労するよりもがっつりシミュレーションしたほうが楽にリアリティが出せる例でした手(チョキ)



ヘキサドライブでは自社内製ゲームエンジン「ヘキサエンジン」を開発しています。
いろいろな技術を取り込んでゲーム開発を力強く加速させてみませんか?

新卒・中途ともにご応募お待ちしています。
皆さんに会えることを心待ちにしています手(パー)ぴかぴか(新しい)ぴかぴか(新しい)ぴかぴか(新しい)


posted by 管理人 at 22:22 | 研究・開発

2011年02月16日

Morphological Antialiasing


先週今週と全国で雪雪が降りましたね。皆さんいかがお過ごしでしょうか。
自宅花壇が雪で埋まってしまいました。イワサキです。手(パー)

さて、今日は技術的な話題ということでアンチエイリアシングのお話をしてみたいと思います。ぴかぴか(新しい)
その中でも今ゲーム界で最もホットなアンチエイリアシング技法であろう『Morphological Antialiasing』を紹介してみたいと思います。

Morphologicalの発音は「モーフォロジカル(発音記号:m`ɔɚfəlάdʒɪk(ə)l)」で意味は「形態学的な, 形態学の, 形態上の, 形態的な」という意味です。
Morphological AntialiasingはMLAAと略されるようです。(以後MLAAと記述します)

この技法がゲームCGの世界で脚光を浴びたのは去年発売された『God of War III』で採用されたことが発端になります。

■Morphological Antialiasing in God of War III (Real-Time Rendering)
http://www.realtimerendering.com/blog/morphological-antialiasing-in-god-of-war-iii/

上記の記事では「PS3のSPU1基で20ms掛かっていたものを5基並列で最適化した結果、4msで実行可能になった」ということが紹介されています。

この技法は一般的なマルチサンプルアンチエイリアシング(MSAA)とは異なり、ポスト処理でフィルタ的にアンチエイリアシングを施す技法です。
例えとして正確ではないかもしれませんが「エッジ検出アンチエイリアシングの高精度判定版」というイメージです。ひらめき
MLAAの特徴は、このエッジ検出にあり、エッジのエイリアシング(俗に言うジャギー)の形状を認識します。
(※論文内の図より抜粋です)

2011-02-16-1.jpg

そしてそれぞれの形状に適した専用のブレンドフィルタ処理を行ないます。
(※論文内の図より抜粋です)

2011-02-16-2.jpg

これによって必要最小限のブレンドぼかし処理となり、エッジ検出系のフィルタのなかで一線を画した高品質なものになっています。
原典の論文には品質は16xMSAAに匹敵すると記述されています。
実際にも高品質な見え方になっていました。

【出典】
■Morphological Antialiasing (pdf)

Alexander Reshetov - Intel Labs
http://visual-computing.intel-research.net/publications/papers/2009/mlaa/mlaa.pdf


2010-10-14-0.png



では早速ですが恒例の実験タイムですひらめき
ヘキサエンジンのデモシーンを利用して検証してみます。こちらのシーンです。

2011-02-16-3.jpg

今回は技術デモプログラムとしてではなくスクリーンショットのみとさせていただきます。
デモを楽しみにされていた方には申し訳ありません。ふらふら
又の機会に紹介させていただきたいと思います。
少し上からのアングルで比較検証してみます。
この中から際立って違いがわかる部分を拡大してみます。目

2011-02-16-4.jpg


2010-10-14-0.png



上の図のA・B・Cの部分を拡大してみます。特に注目の部分は赤い矢印で示します。
まずはの部分から。

2011-02-16-5.jpg

劇的ですね。エッジのギザギザ感が完全になくなって綺麗になっています。
16xMSAA相等というのも頷けます。非常に美しい結果になっています。グッド(上向き矢印)

続いての部分。

2011-02-16-6.jpg

グリとブランの石像の曲面の滑らかさが良く出ています。
階段の段差の縁もツルッと綺麗ですね。グッド(上向き矢印)ぴかぴか(新しい)


そして最後にの部分。

2011-02-16-7.jpg


右上の石柱の根元は非常に美しいエッジになっています。
…ところが、ヘキサドライブのEのマーク部分を見てみるとどうでしょうか。
なんだか歪んでいますあせあせ(飛び散る汗)。縁が削り取られたように丸くなっています。バッド(下向き矢印)
画像認識処理でアンチエイリアシングを行なうMLAAの弱点がここです。
どうしても誤認識は起きてしまい、その場合にこのような意図しない結果を生む場合があります。
HUDなどのメニュー表示や文字の描画などに影響がでてしまう場合がありますので、MLAAをかけた後にメニューHUDを描画していくのが得策でしょう。手(チョキ)


2010-10-14-0.png



この技術はPlayStation3のCellの独壇場かと思われがちですが、Xbox360のGPUやPC上でも同様に実現が可能です。
AMD Radeon HD6000シリーズの発表以後、WindowsではCatalystドライバでも標準でサポートされました。
興味のある方はお手持ちのゲームでこのMLAAの威力を体験できますよわーい(嬉しい顔)

下記4Gamerのサイトの記事の中にもMLAAに関する技術紹介記事がありました。

■「Radeon HD6800」徹底分析。HD 5800から何が変わったのか?(4Gamer.net)
http://www.4gamer.net/games/016/G001684/20101105022/

このMLAAはその他にも大きな可能性を秘めており、MLAAのコストがMSAA有効時の増えるコストよりも下回るのであれば利用する価値が大いにあります。
MSAAを使わないことでメモリ帯域の消費が抑えられます。
各プラットフォームの性能を最大限に発揮できる足がかりがこのMLAAでもたらされたとも言えると思います。

誕生日で一歳年を取りました。アンチエイリアシングよりもアンチエイジングがまず開発されてほしい今日この頃です


ヘキサエンジンはこれからもどんどんパワーアップしていきます。パンチ
ぴかぴか(新しい)


posted by 管理人 at 22:23 | 研究・開発

2010年09月10日

ヘキサリウム

こんにちは、ケイタですわーい(嬉しい顔)
昨日iPhoneユーザーにはお待ちかねのiOS4.1がリリースされましたグッド(上向き矢印)
多くの機能追加と不具合修正が含まれたマイナーバージョンリリースでしたが、
個人的に一番大きな機能追加はカメラカメラにHDR撮影機能が追加されたことでしたひらめき
今までは晴天の昼間などに撮影を行うと、太陽晴れの明るさで白飛びや黒つぶれしてしまうことが多かったのですが、HDR撮影をONにすると今まで白飛びしてしまっていたのがかなり改善されているのが確認できましたわーい(嬉しい顔)るんるん
これから昼間や夜間に撮影するときはHDR撮影をONにして写真を撮るのを楽しみたいと思いますパンチ

さてiPhoneと言えば、ホームページやApp Storeを見て気付いた人がいるかもしれませんが、
ヘキサドライブの研究開発で作成した「ヘキサリウム」がApp Storeにて配信されましたNEWぴかぴか(新しい)

20100910_hexarium.jpg

App Storeやプロダクトのページの説明にもあるように、
iPhoneの画面内をかわいいグリとブランが動き回ります揺れるハート

何もしないとグリとブランが前に居るホタルを追いかけるだけですが、
もちろんiPhoneならではのタッチパネル入力を活かした試みをしていますパンチ

まず、アプリを起動したときのタイトルロゴで画面をドラッグするとヘキサドライブロゴをくるくると回すことが出来ます。
そしてグリとブランが歩き始めてから、グリかブランどちらかをタップすると「何かに触られたexclamation&question」と驚いた反応を見せ、ホタルをタップするとホタルの色が変化しますひらめき
ホタルをダブルタップするとホタルがキラキラしながら飛び散り、アプリが最初からスタートします。
また、画面をなぞるとカメラ映画を操作できるので、思うがままにグリとブランを眺めることができまするんるん

ヘキサリウムはApp Storeで配信されているので、是非iPad, iPhone, iPod Toutchを持っている人は
ダウンロードして遊んでみてくださいわーい(嬉しい顔)
遊んでみたいけどヘキサリウムを動かせる製品を持っていない!という人は、
昨日松下が日記に書いたように、東京ゲームショウのビジネスソリューションブースのヘキサドライブブースにて
ヘキサリウムも展示予定ですので、是非ビジネスデーに東京ゲームショウに行く方は足を運んでみてくださいね手(チョキ)

posted by 管理人 at 22:10 | 研究・開発

2010年06月30日

分散シャドウマップ

こんにちは、イワサキです。わーい(嬉しい顔)

梅雨まっただ中で自宅の屋外デッキの塗装ができなくてヤキモキしている今日この頃です。雨雨雨

いつもは技術デモを公開していますが、今回は内製ゲームエンジン「ヘキサエンジン」について一部を紹介してみたいと思いますひらめき


影表現の代表格はPCF(Percentage-Closer Filtering)です。
セルフシャドウ付きソフトシャドウを表現するときに一般的に用いられる手法です。
この手法と双璧をなすのが「分散シャドウマップ」です。海外のゲームエンジンにも採用されていたりして、PCFよりも高速で見栄えも美しいですぴかぴか(新しい)ぴかぴか(新しい)ぴかぴか(新しい)

Variance Shadow Maps
http://www.punkuser.net/vsm/

概念については下記ページがわかりやすくて良いと思います。

3Dグラフィックス・マニアックス 29 影の生成(10)〜改良型デプスシャドウ技法(5)
http://journal.mycom.co.jp/column/graphics/029/index.html

この技法は「チェビシェフの不等式」を応用した影のシルエット生成技法です。
式は次のような式になります。

2010-06-30-0.png

今回は詳細については割愛させていただいて、ヘキサエンジンでの実装例をスクリーンショットで紹介してみたいと思います。
シャドウマップ生成には16bit整数R16G16を使用してレンダリングを行なっています。
精度的にはなんとか足りるということと、32bitフォーマットで高速に動作するということがポイントとなります。
R32G32Fと比較すると2倍以上高速です。又、Zバッファをテクスチャとして読める環境では倍速Z生成を利用可能ですので併用すると効果が高いです。カラーバッファと併用する際にはZバッファを16bitにするなどしてメモリ帯域を圧迫しない工夫が必要になってきますグッド(上向き矢印)
これもリアルタイム性が要求されるゲームだからこその工夫になります。

それにしてもシャドウマップの略称は数が多くて大変です。
今回のバリアンスシャドウマップはVSMと略されますが、他にもPSM, LiSPSM, TSM, LogSM, ESM, CSM, RSM, 等など・・・色々な技法が存在します。
それだけ多様な研究が行なわれているということなのでしょうね。
それぞれの技法に長所がありますので必要な技法を適切に選択して仕事に役立てていくことも大切ですよね。

ヘキサエンジンはPC(Windows環境)・Xbox360・PlayStation3に対応したマルチプラットフォームゲームエンジンです。
ゲーム開発中の画面にメニュー画面などのウィンドウGUIを表示してプレビューや編集、パラメータの変更が可能になっています。
その場で見たままの画面での編集が可能になります。開発を快適に進めることができるようになっています。

さっそくシャドウバッファを表示してみましょう。
今回の例ではバリアンスシャドウマップを平行投影した場合のテクスチャの内容を表示しています。

2010-06-30-1.jpg

実装ではカスケードシャドウマップに対応しています。近景・中景・遠景にあわせて解像度の異なるテクスチャを併用して品質を向上する技法です。

【近景】
2010-06-30-2.jpg

【中景】
2010-06-30-3.jpg

【遠景】
2010-06-30-4.jpg

近くは詳細な遮蔽情報が描画できています。カスケードシャドウマップを使用することで遠景でも品質を損なうことなく解像度感を保つことができます。


ちなみに上図の遠景の小さいスクリーンショットを拡大してみたのが次の図です。
分散シャドウマップだと解像度が下がっても影のエッジが非常に滑らかで綺麗ですね。
2010-06-30-5.jpg

シーンに投影されている様子を表示したものがつぎのスクリーンショットです。
わかりづらいかもしれませんが中央にあるものがシーンで、青いグラデーションが視界の視錐台を表しています。白いボックスはテクスチャの投影のされ方を表しています。

2010-06-30-6.jpg

バリアンスシャドウマップのメリットは美しいソフトシャドウにあります。
ガウスフィルタと併用したものが次のスクリーンショットです。ぼんやりとした柔らかいシルエットが描画できます。

2010-06-30-7.jpg

今回のスクリーンショットでは黒く濃い影表示にしてありますが、本来はこのグレースケールのシルエットが照明の遮蔽項になります。
白いところには照明が当たり、黒い部分には照明が当たらないように計算することで、より正しい照明計算になります。

ヘキサエンジンでは3プラットフォームで同じ結果が得られるように設計・最適化されていますグッド(上向き矢印)ぴかぴか(新しい)
もちろん各環境は全く異なるものですが、ヘキサエンジン上で開発する場合にはそれを感じさせないような工夫が盛り込まれています。
今後もこのようなかたちでヘキサエンジンを紹介できればと思っています。

ヘキサドライブはこれからもどんどん成長していきますパンチぴかぴか(新しい)


posted by 管理人 at 23:51 | Comment(0) | 研究・開発

2010年05月25日

リアルタイムレイトレーシング

こんにちは!イワサキです。わーい(嬉しい顔)

しばらくご無沙汰していました。久々に技術デモプログラムを公開してみたいと思います。

今回のお題は『リアルタイムレイトレーシング』です。
レイトレーシングは最近リアルタイムレンダリングの技術トレンドの一つとして注目されつつある手法ですが、元々はオフラインでのレンダラの独壇場でした。
処理アルゴリズムが一般のリアルタイムのポリゴンラスタライザとは異なり、光跡(レイ)を追跡(トレース)して目に届く色を検索して決定するアルゴリズムです。

このアルゴリズムで相互反射や影や、スペキュラ反射を正確に表現することが可能になります。
光跡の追跡のイメージは次の図のとおりです。

2010-05-25-1.jpg

それぞれの物体との衝突判定を行ない、その時の影響を累算していきます。
そのため、繰り返し反復判定が必要になることと、効率的なオブジェクトカリングが必要になってきます。

これをDirectX9でGPU上でリアルタイムに実行してしまおうというのが今回の話題です。
今回はグローバルイルミネーションを疑似的に導入してみました。
これによってカラーブリーディングが起きて近接する物体の照り返し・干渉が表現できます。

2010-05-25-2.jpg


相互反射の様子は次のスクリーンショットのように球体の反射の中にさらに2次反射・3次反射と複雑な反射が起きていることが確認できます。


2010-05-25-3.jpg





このデモは以下からダウンロードすることができます。
本来は実用するにはもっとシェーダーコード自体を最適化しますが、今回はデモとして素直な実装にしてあります。


◎動作可能な環境

 <動作条件>
 WindowsXP以降、DirectX9.0c
 シェーダーモデル3.0以降

GeForce 6000シリーズ以降
Radeon X1000シリーズ以降


特殊なレンダリング手法を用いていますのでドライバの不具合などで一部動作しない環境があるかもしれません。
なるべく最新のデバイスドライバで実行してください。

2010-05-25-4.jpg2010-05-25-5.jpg

Download
HexaRayTrace.zip (約3.33MB)

【動作確認済ハードウェア】
NVIDIA GeForce GT 220
NVIDIA GeForce 6800

【操作方法】
マウスのドラッグで視点を回転




実行環境を持っていない方のために動画を用意しました。
HD解像度で閲覧可能です。












ヘキサドライブでは自社内製ゲームエンジン「ヘキサエンジン」を開発しています。
いろいろな技術を取り込んでゲーム開発を力強く加速させてみませんか?

新卒・中途ともにご応募お待ちしています。
皆さんに会えることを心待ちにしています手(パー)ぴかぴか(新しい)ぴかぴか(新しい)ぴかぴか(新しい)


posted by 管理人 at 23:20 | Comment(0) | 研究・開発

2010年01月21日

滑らかな軌跡

こんにちは。イワサキです。わーい(嬉しい顔)

今日は1月21日、「大寒」と呼ばれる時期です。暦上では太陽の黄経が300度の時で、寒さが最も厳しくなる頃を指すそうです。
北半球で世界的な規模で大寒波が各地を襲いましたが今週は大寒というわりには暖かいですね。

今日のお題は『滑らかな曲線補間付きでGPUで高速に描画してみよう』という方向でいってみようとおもいます。

GPUで高速なレスポンスを確認するために今回は”ペイントツール”を題材に実験してみます。
Adobe PhotoshopなどもGPU対応が進んできています。

まず、Windowsで一般的なペイントソフトを使った場合に気になるのは、”マウス軌跡が一様ではない”ということに気がつきます。
これはマウスをぐるぐる早く回すように描画した時によくわかります。
原因は加速度対応カーソルにあります。
コントロールパネルの「マウス」の「ポインタオプション」に「ポインタの精度を高める」というチェックボックスがあるのですが、
これをオフにすることで等速マウスカーソルになります。
等速にしておくとマウスセンサの動きがダイレクトに使用されますので意図通りの挙動になります。

今回はこの等速入力に対応するためにデバイスのRAW入力を使用しました。
RAWマウス入力とは?という方はGoogleにてご覧ください。より詳しい説明が見つかると思います。

これを経由することで上記のOS設定を変えることなく等速運動の「生データ」を取得することができます。
又、秒間1000回などレポートレートが高いゲーミングマウスでも取りこぼしなく拾うことができます。
今回は主に描画のお話といういことでRAW入力については割愛させていただきたいと思います。
もしリクエストがありましたら今後ご紹介したいと思います。

ペンで描いた時の軌跡は本来は滑らかなものですが、マウス入力された時点では移動量として整数化されます。
このときにはレポートレートの周期ごとに送られてきますが、小数点以下が欠落していることと、
周期が標準では125Hzで、ワイヤレスマウスでは50Hzの場合もあります。
カクカクになる原因はこのような部分で失われている情報があるから、と言えます。

今回は取得した軌跡を「スプライン曲線」で補間します。
ここでは通常のスプライン曲線ではなく、「Nonuniformスプライン」を利用します。
スプライン曲線では、通過する時間tと座標を指定することで、それを結ぶなめらかな補間曲線を描く曲線です。
このときに、時間と距離にムラがある場合には滑らかさと均等さを失います。

これをNonuniformスプラインで滑らかに生成しよう、というのが今回のお題です。

参考書籍は『Game Programming Gems 4 : 2.4 不均一スプライン (P166)』です。

Game Programming Gems 4 日本語版

2010-01-21-gems4.jpg

編者:Andrew Kirmse
監訳:川西 裕幸
翻訳:中本 浩
ISBN:4-939007-90-1
発行・発売: 株式会社ボーンデジタル


この中には3種類のNonuniformスプラインが紹介されています。

ひらめき丸み不均一スプライン(Rounded Nonuniform spline)
ひらめき平滑不均一スプライン(Smooth Nonuniform spline)
ひらめき時限不均一スプライン(Timed Nonuniform spline)

この中で手書き補間は平滑不均一スプラインが用途として適しています。
せっかくですので丸み不均一スプラインも実験してみました。

丸み不均一スプラインは指定した点を通過するのは通常のスプラインと同じです。
特徴は「補間点の移動速度がほぼ均一になるスプライン」で極端に折れ曲がらないスプラインになります。
記述では、レースゲームなどのコースの軌道補間などに適しているようです。

下の図が実際に丸み不均一スプラインを計算した結果になります。GPUでリアルタイムで描画しています。

2010-01-21-spilne.png

緑色の点が通過点、オレンジの丸が補間点になります。
オレンジの丸印が比較的等間隔に並んでいることがわかりますね。
すこし描画に工夫して一般的なGPUのMSAAとは異なる高品質なスムーシングのかかった描画にしています。
階調は256階調出ますので256xMSAA相当の高品質アンチエイリアシングになっています。
実際には256回サンプリングしているわけではなく、衝突判定で遮蔽量を計算しています。

2010-01-21-zoom.png

ルーペで拡大してみました。非常に滑らかで品質の高いアンチエイリアシングということがわかると思います。
ピクセルシェーダーでサンプリングしているのですが原理としては次のような仕組みになっています。

2010-01-21-line.png


このようにすると普通に矩形で描画するよりも滑らかな丸い角で、綺麗なアンチエイリアスをかけることができます。
シェーダーで処理していますのでポリゴン分割なども発生しませんので頂点が増えたりしないのもメリットになります。


この滑らかなボリュームライン描画と前述のNonuniformスプラインを組み合わせて簡易的なペイントツールを作成してみました。
GPUでアクセラレーションがかかりますので応答が高速です。
すべてをGPUに依存していますのでGPUが弱いと逆にレスポンスが低下する可能性もあります。
マウスの軌跡をスプラインで補間していますので、高速にマウスをぐるぐる動かしても滑らかな軌跡を得ることができます。ぴかぴか(新しい)

2010-01-21-draw1.png2010-01-21-draw2.png
左】一般的なペイントツール     【右】今回のデモの軌跡補間




このデモは以下からダウンロードすることができます。
今回はスプラインのデモとペイントのデモの2種類を同梱しています。

◎動作可能な環境

 <動作条件>
 WindowsXP以降、DirectX9.0c
 シェーダーモデル3.0以降

GeForce 6000シリーズ以降
Radeon HD1000シリーズ以降


特殊なレンダリング手法を用いていますのでドライバの不具合などで一部動作しない環境があるかもしれません。
なるべく最新のデバイスドライバで実行してください。

Download
HexaSpline.zip (約2.01MB)

【動作確認済ハードウェア】
nVIDIA GeForce9800GT

【操作方法】
■HexaSpline

カーソルを動かすと代表点の一つが操作可能です。

■HexaPaint

左クリック・・・オレンジでペイント
右クリック・・・黒でペイント
マウスホイール・・・ペン先の太さを変更



DirectX11でComputeShaderが実装され、CUDA, ATIStream, OpenCLなど、GPUを他の目的で活用しようとする流れが今後のトレンドになっていくと思います。
GPGPUのデモも今後紹介できればと思います。



ヘキサドライブでは自社内製ゲームエンジン「ヘキサエンジン」を開発しています。
いろいろな技術を取り込んでゲーム開発を力強く加速させてみませんか?

新卒・中途ともにご応募お待ちしています。
皆さんに会えることを心待ちにしています手(パー)ぴかぴか(新しい)ぴかぴか(新しい)ぴかぴか(新しい)


posted by 管理人 at 23:25 | Comment(0) | 研究・開発

2009年11月16日

滑らかなフォント描画

こんにちは!イワサキです。わーい(嬉しい顔)
実は2カ月ぶりのブログ書き込みです。前回のときはまだ暑かったですがもう木枯らしが吹く季節になってきました。時が経つのは早いですね。

今回のお題は『テクスチャ画像のベクトル化』です。

解像度の低いテクスチャでもシャープでくっきりした画像を描画できるようにしよう、という内容です。ぴかぴか(新しい)
一般的にはゲームのようなリアルタイムレンダリングでは拡大縮小にバイリニア補間をつかった補間を行ないます。
これによってギザギザした四角いドット形状を和らげることができます。

しかしそれでも解像度が極端に低い場合で引き延ばしを行なうと、この補間では滲んだようにぼやけてしまいます。
フォント描画などでアルファテストでくっきり境界線を作ろうとすればガタガタの境界線になってしまいます。

SIGGRAPH2007ではValve社によってこれについての新しい手法が発表されました。
Valve社は、「Half-Life 2」「Team Fortress 2」「Left 4 Dead」など非常にクオリティの高いゲーム作品を手掛けるメーカーです。
下記がSIGGRAPHのドキュメントです。

■Improved Alpha-Tested Magnification for Vector Textures and Special Effects (PDF)
http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf

画像のカラーを補間するのではなく、まず距離を補間する
という視点が面白いです。
早速今回試してみましょう。

この手法のポイントは「境界線からの距離の情報を事前処理で生成しておき、レンダリング時に境界線を検出する」というところです。
さらにこの距離情報(Distance Field)はピクセルデータとして等間隔に格納されることになりますが、この距離情報をバイリニア補間することで均一の距離フィールドを参照できるようになります。

【元イメージ】
2009-11-16-3.png

【距離情報(DistanceField)】
2009-11-16-4.png

2009-11-16-5.png

画像イメージの白い部分からの最短距離を計算してグレースケールのグラデーションを生成します。
これが黒くなればなるほど元データから遠い場所にあるといえます。

そうして出来上がったデータに試しに同一距離にある部分を赤く着色してみます。

2009-11-16-6.png

まるで地図の等高線みたいですよね。このように特定の距離にある部分に着色をします。その結果次のような見え方になります。

2009-11-16-1.jpg

左から順に、バイリニア補間、アルファテスト、距離フィールドのレンダリングです。
拡大した時の斜めの線の品質がかなり違いますよねわーい(嬉しい顔)
今回の技法のものはツルっとした線になっています。同じ解像度なのに鮮明さが格段に良くなっていて、なおかつさらに大きく拡大してもこの鮮明さは失われませんぴかぴか(新しい)

文字フォントの描画以外にも応用の幅が広そうです。
キュー・ゲームスの PS3「PixelJunk Eden」でもこの技法が応用されているそうです。
http://pixeljunk.jp/library/Eden/
先日のCEDEC2009ではPixelJunk Shooterにもこの技法が積極的に応用されているということが発表されていました。
PixelJunk Edenのオブジェクト描画は本当に滑らかで鮮明ですよね



技術デモは下記よりダウンロードできます。



◎動作可能な環境
基本的にはシェーダーモデル2.0以降で動作します。
なるべく最新のデバイスドライバで実行してください。

Download
HexaFont.zip (約2.0MB)

── 2009-11-20 追記──
GeForce6000シリーズで境界スムーシングが効いていなかったため修正しました。


2009-11-16-2.jpg

【動作確認済ハードウェア】
nVIDIA GeForce9800GT
AMD RadeonHD4350


この技法については書籍GameProgrammingGems6の 「5.8 道路標識をシャープにレンダリング」で見え方の調整の方法について紹介されています。
興味のある方はご覧になってみるのも良いかと思います。


ヘキサドライブでは自社内製ゲームエンジン「ヘキサエンジン」を開発しています。
共にゲーム作品を作っていきませんか?目
新卒・中途ともにご応募お待ちしています


posted by 管理人 at 22:52 | Comment(2) | 研究・開発

2009年08月27日

空気や水の対流を表現してみよう

こんにちは!イワサキですわーい(嬉しい顔)

とろけるような暑さがあると水!プール!海!な感じな私です。
川で泳いだりするときの水の流れや扇風機であ゛〜としているとき風の涼しさを感じる機会がある季節です。
特に冷え症の方では冷房空調で空気の流れが気になったり、淀んだ場所は暑くなったりと室温のムラを感じることもありそうです。
ここ数日多少ましになってきましたがまだまだ暑い日は続きますね!

風や水流台風っていったいどんな風になっているんだろう?
そんなわけで今回はそんな興味から、お題は『空気・液体の流れのシミュレーション』をやってみたいと思います。

最近のゲームをプレイすると水面などはチャポチャポ揺れるものはあっても川に落ちた落ち葉の流れなんかが自然に流れていく、といったものはまだあまり正確に表現されていません。
これはもちろん現在のゲーム機自体の性能でそういった表現にパワーを割く余裕がないから省略されているわけですが、この「流れ」自体にゲーム性を持たせられないかなぁ?と思ったりもしています。
以前に流体シミュレーションということでSPH法を使った粒子法を紹介しました。今後MPS法にも挑戦してみたいと思います!

粒子法のようなパーティクルベースの流体では「水しぶき表現が柔軟に実現可能」というメリットがあります。
今回は粒子法ではなく、別の方法を紹介してみようということで格子形状を使ったグリッドベースの実装をしてみたいと思います。
グリッドを使ったシミュレーションはシミュレーションする領域が均一に広がるということや流れの解析にメリットがあります。
(もちろん粒子法のMPS法でもこのような表現は可能です)

個人的にはゲームの中で、舞い散る落ち葉の動きや、空気が淀んだ場所には吹き溜まりができていたり、水流で物が流れていったり等インタラクティブに表現できたら良いなぁ…と思っています。
今回、実験で作成したのは『格子ボルツマン法(Lattice Boltzmann Method)』と言われる手法です。

読んでみる書籍としては書籍は下記のものがお勧めです(とはいえ内容は数式に満ちていますが…)



■格子気体法・格子ボルツマン法―新しい数値流体力学の手法


2009-08-27-book.jpg


蔦原 道久 (著), 片岡 武 (著), 高田 尚樹 (著)


構造は実にシンプルです。
空間を格子で区切り、それぞれに圧力(気圧)情報を持たせて高い圧力の部分から隣接する低い圧力の部分へ流れ込むように流れが変化するという格子気体モデルという考え方です。
圧力を均一に保とうとする自然界の物理現象をシミュレートします。
「流れ込む分子量」と「押し出される分子量」の合計でその領域の速度を決定するというアルゴリズムです。

2009-08-27-lbm0.png2009-08-27-lbm1.png2009-08-27-lbm2.png


他の技術系の話と違ってこのアルゴリズムは日本語の文献が多くて助かりますね。

2009-08-27-lbm.png


技術的な計算部分は割愛しますが、今回は3次元27速度(D3Q27)モデルを使っています。

2009-08-27-st1.png2009-08-27-st2.png2009-08-27-st3.png
【格子ボルツマン法の計算フロー】流体は衝突を繰り返しながら直進(並進)します。



Youtubeに同様に流体のシミュレーションをしている動画がありましたのでご紹介しておきます。




大抵このようなシミュレーション系の計算のために文献を読むと難しそうな数式が並びます。
例えば今回のものの中から抜粋するとこんな感じです。

2009-08-27-lbm_math.png

難しそうに書いてありますが、実はC言語で記述すると大して難しい計算ではありません。次のようになります。

2009-08-27-source.png

私個人的にはこの数式たちが理解の敷居を高くしてしまっているような気がするんですよね(もちろん演算の意味を伝えるためにスマートに書くのに適しているというメリットもあるようですが)

この式が今回の挙動計算の肝になっています。
流れの具合がよくわかるように中にパーティクルを配置して流れに乗せて動かしてみます。
これで渦や流れがよくわかるようになります

書籍では「GPU Gems 2」にもこのアルゴリズムが紹介されています。

【参照】Chapter47. 複雑な境界を持つ流れのシミュレーション p687




今回のデモではちょっとゲームっぽくインタラクティブにするためにリアルタイムでいじれるようにしてあります。

2009-08-27-flow_1.jpg2009-08-27-flow_2.jpg

区切られた部屋の中にポンプや扇風機のように流れを強制的に発生させます。
そして、その影響を受けて複雑な対流が発生します。
壁仕切りや球体などの障害物も設置できるようにしました。

技術デモは下記よりダウンロード可能です。

◎動作可能な環境
GeForce 6800シリーズ以降
Radeon X1000シリーズ以降

基本的にはシェーダーモデル3.0以降で動作します。
レイトレーシングなど特殊なレンダリング手法を用いていますのでドライバの不具合などで一部動作しない環境があるかもしれません。
なるべく最新のデバイスドライバで実行してください。

Download
HexaFlow.zip (約2.0MB)

【動作確認済ハードウェア】
nVIDIA GeForce9800GT
AMD RadeonHD4350

【操作方法】
画面左クリック&ドラッグ    視点を回転
    パーティクル配置を初期化
    ポンプ ON/OFF
    横仕切り板 ON/OFF
    縦仕切り板 ON/OFF
    球体 ON/OFF

2009-08-27-flow_3.jpg2009-08-27-flow_4.jpg



実行環境を持っていない方のために動画を用意しました。
HD解像度で閲覧可能です。













複雑な流れで渦巻く様子が楽しいでするんるん
こういう動くものは眺めているだけで面白いですよね。もう少しビジュアル面を強化してスクリーンセーバーにしてみるのも良いかもしれませんね。

「ゲームCG」を切り口にこのような解析系の技術を応用するのは今後増えてきそうです。
最たる例は最近のゲームでは当たり前のように使われている剛体物理シミュレーションです。リアルにするには現実に起こる物理現象をシミュレートする必要が出てきますので、あらゆる分野の知識が求められます。
今回は数値流体力学(Computational Fluid Dynamics)の分野を取り上げてみました。今後は別の分野もご紹介できればいいなと思います。
剛体シミュレーションがメジャーになってきて、今後流体やソフトボディのような柔らかいものが流行りそうな雰囲気です。
CG関連の国際会議SIGGRAPHでの発表論文の中にもゲームに応用できる内容が沢山ありますので注目です!

実はこのデモのGPU版も作成してあります。今回のデモではCPUで約6万個のパーティクルで実験しましたが、GPU版では30倍以上の約209万個(128^3個)でも楽に60fpsが維持できていました。
ということは、数万個程度であればGPUの力を借りることができればゲームにも比較的軽く組み込めるということになります。

この技法を応用することで舞い上がる砂埃や吹雪、落ち葉、煙などの動きがリアルに表現できます。『爆発で周辺のチリが吹き飛ぶ』などの表現も可能になります。
このようにゲームでは今まで無かったような表現が他の分野では当たり前のように利用されていることがあります。
クリエイティブな職種ですのでゲーム業界を超えた他の業種・職種を知ることも大切だと思います。
どこに「ゲームやCG表現のヒントひらめき」が隠されているかわかりませんからネぴかぴか(新しい)ぴかぴか(新しい)ぴかぴか(新しい)

ちなみに以前の流体デモもそうですが、私はこの手の分野を専門的に研究しているわけではありません。
たまたま『見た目が面白そうだったから』という好奇心でちょっと作ってみたものです。
ですので流体以外でもゲームに使えそうで面白そうなものがあればどしどし紹介していきたいと思いますわーい(嬉しい顔)


ヘキサドライブでは自社内製ゲームエンジン「ヘキサエンジン」を開発しています。
共にゲーム作品を作っていきませんか?目
新卒・中途ともにご応募お待ちしています


posted by 管理人 at 11:04 | Comment(0) | 研究・開発

2009年08月14日

魚の視界 -魚眼レンズ-

こんにちは!イワサキですわーい(嬉しい顔)
暑いですねぇ〜夏真っ盛り!晴れみなさんはどのような夏を楽しんでいますか?リゾート

前回の被写界深度レンダリングはいかがだったでしょうか。

実験的な意味合いもありましたので、実際にはもう少し品質と速度も向上したものになります。
周辺減光などもまだ入れていなかったり、絞り形状やボケる範囲はもっと綺麗に出すことができると思います。
そのうち改良版もお目に掛けることができるかもしれませんぴかぴか(新しい)

今回はレンズの話の延長と今後イメージベースドライティング(Image Based Lighting)の紹介ができるように下準備も兼ねています。
お題は『魚眼レンズ』です。実装例とともにいってみましょう!

さて、魚眼レンズ(Fish-eye lens)とは一体どのようなものでしょうか。
そもそも「魚眼」とは?ということで軽く解説してみます。

魚眼とは名前の通り「魚の眼」です。
魚の視界は人間の見ている視界とは大きく違っていて片目で180度に近い範囲が見えています。
図解するとこのような感じです。

2009-08-14-fish.png
【魚の視界の例】

魚類の視界は非常に広くこのような視界のカバー範囲となっています。
草食動物なども肉食動物からの危険を察知するために広い視野を持っています。
これだと横からや上下から天敵に襲われても察知することができますよね。魚釣りをしていると人影を魚たちは察知します。
そっぽを向いているようで実はこちら側が見えているという状態ですのでなかなか侮れません。

魚類は波長300〜330ナノメートルの紫外線光も感知できる4色型色覚を持つと言われています。
又、視力がそんなに良いわけではなく、ぼんやりとした視界だそうです。
人間は3色()しか持っていないのに羨ましい気もしてしまいますネ。

目は丸いですので、仕組み的には水晶体での屈折で180度の視界を網膜・視神経まで届けるような構造になります。
イメージは下記リンク先にあるWikipediaの画像を参照ください。

■魚眼レンズ(wikipedia)
http://ja.wikipedia.org/wiki/%E9%AD%9A%E7%9C%BC%E3%83%AC%E3%83%B3%E3%82%BA

魚眼レンズ(ぎょがんれんず)とは、カメラなどに使用する光学レンズの一種で、180度近くの画角を有するものを指す。フィッシュアイとも呼ばれる。 魚眼という名称の由来は、水面下(魚の視点)から水面上を見上げた場合、水の屈折率の関係で、円形に水上の景色が見えることから来ている


2009-08-14-sample.jpg
【魚眼レンズの見え方の例】 Photo by (c)Tomo.Yun

前方180度の範囲から光を集めますので、レンズ自体も本体から出っ張って膨らんだような構造のレンズになっていて、真横から来る光も集められるような特殊なもので実現されています。
例として実際の製品のひとつに下記ようなレンズがあります。ほ…欲しい・・・

■8mm F3.5 EX DG CIRCULAR FISHEYE (株式会社シグマ)
http://www.sigma-photo.co.jp/lens/wide/8_35.htm

2009-08-14-lens.png
【一番外側のレンズの光の屈折のしくみ】

ではこのような見え方をリアルタイムで再現してみましょう。
技術デモは下記よりダウンロード可能です。




◎動作可能な環境
ShaderModel2.0以上に対応したグラフィックボード

2009-08-14-1.png2009-08-14-2.png

Download
HexaFisheye.zip (約1.9MB)

【動作確認済ハードウェア】
nVIDIA GeForce9800GT
AMD RadeonHD4350

【操作方法】
画面左クリック&ドラッグ    視点を回転
    魚眼 ON/OFF

2009-08-14-3.png2009-08-14-4.png



魚眼に切り替えると視界は180度になり、周囲が歪んで見えます。
かなり広範囲が一度に見えているのが分かると思います。

この表現は効果的にシーンの演出にも活用されることがあります。
そして、冒頭で触れた「Image Based Lighting」を行なう際にこの仕組みが重要なポイントになります。
たとえば大域照明(Global Illumination)を計算するにはすべての方向から届く光のすべてを計算する必要があります。
その時に面の一点に届く光を半球でシミュレーションします。

その半球の領域というのはこの魚眼の視界そのものです。
イメージベースで大域照明を実現する場合にはこの魚眼が活躍します。
魚眼表現単体ではゲーム内では使いどころがそんなに多くなく用途が限られると思います。
しかしこれを一つの画像処理の過程の一つとして捉えると応用の幅が広がります。
これについては今後ブログ上でも触れていきたいと思います。

世の中の沢山の物事にもこの魚眼のように広い視野で色々なものを見つけて知識を増やしていきたいですねひらめき
今後も見た目で面白そうなものや綺麗なものを中心に紹介していきたいと思います。


ヘキサドライブでは自社内製ゲームエンジン「ヘキサエンジン」を開発しています。
共にゲーム作品を作っていきませんか?目
新卒・中途ともにご応募お待ちしています手(パー)

posted by 管理人 at 10:07 | Comment(0) | 研究・開発

2009年07月17日

高品位な被写界深度レンダリング

こんにちは、イワサキですわーい(嬉しい顔)
前回はリアルタイムフォトンマッピングのデモを作成してみましたがいかがだったでしょうか?目
DirectX9でもまだまだ活用の余地はありますよねパンチ

今回のお題は『高品位な被写界深度レンダリング』です。
これを前回と同じくDirectX9で実現してみます。

今回は下記のGPU機能と技法を複合して活用しています。
ひらめきハードウェアインスタンシング(Hardware Instancing)
ひらめき頂点テクスチャフェッチ(Vertex-shader texture fetch (VTF))
ひらめきリアルタイムレイトレーシング(Realtime ray tracing)
ひらめきHDRレンダリング(High dynamic range rendering)

今回のアイデアはCEDEC2007, 2008にて講演された川瀬正樹氏の発表内容・技法に基づいた実装となります。
そのため、技術内容の紹介の原典は川瀬氏の発表資料がベースとなっていますので元の資料の補助としてこの実装デモを見ていただけたらと思います。

■4Gamer.net ― [CEDEC 2007]写真光学技術を取り込んだレンダリングについて
http://www.4gamer.net/games/000/G000000/20071001016/

初めて見るという人のために講演の内容を私なりに簡易版で少し紹介してみたいと思います。

まず、カメラレンズの仕組みですが、
カメラとは外からやってくる光を受けて一点に焦点を合わせて、そのピントが合うところにCCDやCMOSなどの撮像素子・センサーフィルムを配置しておき記録するものです。

2009-07-17-lens1.png

レンズで光を屈折させて一点に光を集めることになりますので焦点で合焦した光は再び遠ざかりながら拡散します。
このときに光の位置関係は反転しますので写像も逆転したものになります。
理科の実験でやったようなピンホールカメラで映像が反転した経験のある方も居るのではないでしょうか。

2009-07-17-lens2.png

実際のカメラはこれに「絞り」が付いており、絞りの隙間をピンホールカメラのように通過させて、その光をレンズで一点に集めています。

2009-07-17-lens3.png
2009-07-17-lens4.png

上記のようにピントの合わないところはボケてしまうことになります。
絞りを通過する際に絞りの羽根の形状でシルエットが出来上がり、そこを通ってくる光で描き出されるイメージはその絞り形状が積層されたようなイメージになります。

2009-07-17-lens5.png

下記は実際の絞り形状で描き出される撮影結果の実際の例です。

2009-07-17-bokeh02.jpg2009-07-17-bokeh03.jpg
2009-07-17-bokeh05.jpg2009-07-17-bokeh04.jpg

広角レンズなどは光を拾ってくる角度が非常に広く120度近くまで拾うことができます。
その場合は一番外周の場所からレンズへ入ってくる光の入射角も角度がついて入射するわけですが、ここでレンズユニット本体のフードや鏡筒そのものに光が遮蔽されてしまい、届かない光が出てきます。
その欠けた部分が月の蝕のように半月のようなケラレを発生させます。
この写真では外周部の光の丸い形状が欠けたようになっているのが確認できます。

2009-07-17-bokeh01.jpg


では実際にこれをどのようにDirect3Dで実現させるかについてですが、今回の実装のポイントは「1パス多段LODレンダリング」と「スキャッタベースの描画をハードウェアインスタンシングで実装」です。
DirectX9での実現方法についてですが
絞り形状の粒子生成にShaderModel3.0のハードウェアインスタンシングで約23万個(!)のパーティクルを生成するようにしています。

これをすべてのピクセルに並べてピントやケラレに応じて形状をリアルタイムで変化させています。
頂点シェーダー内で深度テクスチャ参照を行ないピントを計測し、その場でスプライト形状を決定しています。
又、今回の独自のアルゴリズムとして1パス多段LODを実現するために複数のテクスチャを1枚に格納できるように最終イメージサイズよりも大きいアキュームレーションバッファとしてレンダーターゲットを作成し、頂点シェーダー内でXY座標をずらすことでLOD切り替えレンダリングを実現しています。
これによって1枚のテクスチャ内に複数枚のLODイメージが1パスで生成できます。DirextX9の既存の機能で実現可能になります。
この生成結果は実際のデモを実行して確認することができます。

2009-07-17-hexa00.jpg

さらにこの複数枚数の縮小バッファを多層合成して最終イメージを生成しています。

パーティクルの形状に今回は5枚羽根の絞りを想定して5角形を使用しています。
6枚羽根、8枚羽根も対応してみましたが点対称な形状ですので後ボケ・前ボケの差が分からないということで非点対象の5角形を選択してみました。

2009-07-17-hexa03.jpg

前ボケ・後ボケの形状も頂点シェーダー内で決定しています。
ボケた部分に絞り形状が出ているのが確認できます。
ケラレの鏡筒との口径蝕衝突判定はピクセルシェーダー内で行なっています。
画面の外周部にカマボコ形・レモン型のケラレの入ったボケが発生しています。
私が実際に所有している10mm-20mm広角レンズもカマボコ型のケラレが発生していましたのでそれに近い見栄えに調整してみました。

2009-07-17-hexa04.jpg




このデモは以下からダウンロードすることができます。

◎動作可能な環境

 <動作条件>
 WindowsXP以降、DirectX9.0c
 シェーダーモデル3.0以降
 頂点テクスチャフェッチ(VTF)対応GPU

VTFを使用している関係でRadeonはHD2000シリーズ以降でのみ動作します。

GeForce 6000シリーズ以降
Radeon HD2000シリーズ以降


特殊なレンダリング手法を用いていますのでドライバの不具合などで一部動作しない環境があるかもしれません。
なるべく最新のデバイスドライバで実行してください。

Download
HexaDOF.zip (約7.84MB)

【動作確認済ハードウェア】
nVIDIA GeForce9800GT
AMD RadeonHD4350

2009-07-17-hexa05.jpg2009-07-17-hexa06.jpg
2009-07-17-hexa07.jpg2009-07-17-hexa08.jpg
【操作方法】
画面左クリック&ドラッグ    視点を回転
    1パス多段LODバッファ表示 ON/OFF



実行環境を持っていない方のために動画を用意しました。
HD解像度で閲覧可能です。












今回のデモは「被写界深度」のためのデモということで、かなり被写界深度を浅い設定にして強くかかるようにしてあります。
スキャッターベースのレンダリングは従来までのガウスぼかしとは違った美しく鮮やかなビジュアルを得ることができます。実際の光学理論に沿った形で忠実に実装することでより本物に近くなったと言えますよね。
CEDEC2007/'08でこの技法の講演をされた川瀬正樹氏にこの場を借りてお礼申し上げます。

前回のリアルタイムフォトンマッピングひらめきも、このスキャッターベースの概念の応用で実装しています。

私は個人的に一眼レフカメラを趣味にしていましたので、実際にゲームCGでこのようなシミュレートができることがとても新鮮で、作っている最中がとても楽しかったですわーい(嬉しい顔)
何事も楽しまないと!ですねるんるん

ちなみに海外でもピントのボケのことを"bokeh"と呼び、日本語がそのままその意味を表す言葉になっています。
味覚の旨みを表す言葉も"umami"だったり、文化の中に日本語も広がっているのですねぴかぴか(新しい)

■関連リンク

【川瀬正樹氏のホームページの講演資料】
◎CEDEC 2007 − Imagire Day
『レンダリストのためのカメラ(光学)理論とポストエフェクト』
http://www.daionet.gr.jp/~masa/column/2007-10-01.html
今回のデモの実装アイデアの元となった講演資料です。

◎GDC 2003 Presentation

http://www.daionet.gr.jp/~masa/column/2003-03-21.html
今回のデモにはStarGlareとCEDEC2004のときのMultipleGaussianFilterを実装しています。
この資料にあるGhostも組み込むとさらにレンズの説得力が増します。




ヘキサドライブでは自社内製ゲームエンジン「ヘキサエンジン」を開発しています。
いろいろな技術を取り込んでゲーム開発を力強く加速させてみませんか?

新卒・中途ともにご応募お待ちしています。
皆さんに会えることを心待ちにしています手(パー)ぴかぴか(新しい)ぴかぴか(新しい)ぴかぴか(新しい)


posted by 管理人 at 11:34 | Comment(0) | 研究・開発