［CEDEC 2013］さらさらヘア実現の秘密が明らかに。「TOMB RAIDER」PC版の毛髪レンダリング技術「TressFX Hair」はこうして実現された

　8月21日から開催されている「CEDEC 2013」では，開発系のセッションでゲームグラフィックスを扱うものが多数ある。その1つとして，「TOMB RAIDER」のPC版に実装された毛髪レンダリング技術「TressFX Hair」（以下，TressFX）を解説するセッション「Real-time Hair Simulation and Rendering for Games」が，21日に開催された。

こちらはTressFXの発表時に公開された，その効果を示す画像。右の画像ではTressFXにより，風に吹かれた髪が自然になびいている

　TressFXについては，「Game Developers Conference 2013」（以下，GDC 2013）でもレポートしているが（関連記事），このときにはあまり深く語られなかったレンダリングの実装に関する情報が，今回は詳しく説明された。本稿では，明らかになったTressFXの仕組みをレポートしたい。

TressFXの解説を担当した，AMD本社の原田隆宏氏（左）と，共同講演者のDongsoo Han氏（Senior software engineer，Advanced technology initiatives，GPU technology group，AMD）

1ピクセルよりも細い毛髪をどうやって描くのか？

　TOMB RAIDERで使われたTressFXでは，主人公ララ・クロフト（以下，ララ）の毛髪を表現するために，ポリゴンに毛髪のテクスチャを貼り付けた「毛ヒレポリゴン」（フィン）を植える従来の方式ではなく，現実の人間と同じように，「線分としての毛髪」を頭皮に植え込む方式で表現している。

　実際にこれをレンダリングするときには，まず線分を極細の板ポリゴンに変換して処理するわけだが，この変換処理には当初，ジオメトリシェーダを用いていたそうだ。ところが，この処理に時間がかかることが判明したため，線分をあらかじめ縮退ポリゴン的に6つの頂点で表現しておき，これを頂点シェーダで押し広げて板ポリゴンにする手法が，最終的に選ばれたという。

頂点シェーダで線分を板ポリゴンに変化させた

ピクセルのサンプル点から外れた線分は描画されない

　板ポリゴン1枚はあまりにも細いため，それをレンダリングするには工夫が必要になるそうだ。というのも，板ポリゴンが視点から離れていると，その太さが1ピクセル未満となってしまうこともある。そして1ピクセル未満の板ポリゴンが，ピクセル中央の「サンプル点」から外れてしまうと，画面に描かれなくなってしまうからだ。
　マルチサンプリングである程度解消できることもあるが，それでも外れることはあり，根本的な解決にはならない。

　これを解決するには，特別な処理系を実装する必要があったと，原田氏は言う。まず，線分板ポリゴンの面積が該当ピクセルの面積をどのくらい占めているか計算し，その割合をα値（透明度）と見なすようにした。要は，線分板ポリゴンが占める面積で，1ピクセルの半透明値を決めるわけだ。

毛髪となる線分板ポリゴンが，そのピクセルをどのくらい専有しているかで，半透明値を算出する

右は，サンプル点から外れた線分（毛髪）がとても多い例で，左は上記の処理により，線分を比較的正しく描画できている例だ

1ピクセルを画面奥に向かって広がる円錐と仮定して，線分板ポリゴンがどのくらい重なるかで面積を計算する方法。しかし処理負荷が高く廃案に

　「1ピクセルの面積に対する板ポリゴンが占める割合」は，当初，1ピクセルを「画面手前から視線方向に向かって広がる円錐」と見なし，線分板ポリゴンが円錐にどれくらい重なるかを調べて計算したそうだ。しかし，この計算は正確だが処理負荷が高く，ゲームに応用するのは実用的でなかった。

　そこで代替案として，線分板ポリゴンの輪郭線とピクセル中央（重心点）との距離に応じて，透明度を大ざっぱに計算する手法に変更したそうだ。ちなみに，ピクセル中央が線分板ポリゴンと重なっていれば，半透明ではなく不透明と判定される。

処理負荷の低い方法として，ピクセル中央から，線分板ポリゴンの輪郭線までの距離に応じて，透明度を計算する仕組みを導入。これで処理負荷は劇的に軽量化されたという

順不同の半透明描画「OIT」をどう実現したのか？

　GDC 2013でのレポートでも触れたのだが，線分板ポリゴンの髪は，1本1本が物理シミュレーションによって動くので，毛髪同士の前後関係が互い違いになったりする。たとえば，頭皮近くでは手前にある髪が，先端付近では別の髪の後ろに来ることが起こりうるわけだ。

　ところが，前述したような半透明の描画は，後ろから正しい順番で描画して透明度に配慮しながら合成しないと，見た目がおかしくなってしまう。板ポリゴンにテクスチャを貼り付けただけの半透明パーティクルとは違い，毛髪は曲線が入り乱れているので，単純な「奥行き値による後ろから前へのソート」だけでは，正しい描画は行えない。言うなれば，「ドット単位に後ろから前へのソートし直し」が必要になる。

　そこでAMDは，順不同の半透明ピクセルを描画する手法「Order Independent Transparency」（以下，OIT）を，TressFXで実装した。
　といっても，OITの実装は，AMDにとって初めてのことではない。実は2009年に公開された，ATI Radeon HD 5800シリーズ用デモで，半透明のロボットが暴れ回る「Mecha Demo」（関連記事）でも，OITが実装されていたのだ。TressFXのOITも，Mecha Demoとほぼ同じ手法を採用しているという。

TressFXに採用されたOITはMecha Demoと同じ手法だというスライド

　OITの処理方法を順に見ていこう。まず，2つのワークバッファを用意する。1つめは「Start Offset Buffer」というもので，レンダリング解像度と同じ解像度を持つ，2次元的なインデックスバッファだ。もう1つは「Fragment and Link Buffer」で，描画されるピクセルを深度値などともに溜め込んでおく，1次元のプールバッファである。
　このStart Offset BufferとFragment and Link Bufferの活用方法については，GDC 2010で発表された論文のスライドを，下にムービーの形で掲載しておく。これを見れば，両バッファの使用法がイメージできるだろう。以下の解説はこれを見た前提で進めていくので，まずは参照してほしい。



　まずStart Offset Bufferには，その画面座標（x，y）に対して“最後に描かれたピクセル”が，「Fragment and Link Bufferのどこに格納されているか」が記録されている。
　この仕組みでは，同じ画面座標（x，y）に描かれたピクセルは，Fragment and Link Buffer上では別々に格納されるが，そのピクセルが本来どこの座標に描かれていたのかは，Start Offset Bufferとのリンク構造で記録されている。つまり，Fragment and Link Buffer上にあるピクセルに着目して，そこに書かれているリンクアドレスを辿れば，同一の画面座標にあるピクセルすべてにたどり着けるわけだ。

ムービーより抜粋。Viewportで同じ画面座標に書かれたピクセルは，Fragment and Link Bufferのアドレス0とアドレス3にそれぞれ格納されている

　実際に描画するときはこのデータ構造を用いて，同一画面座標にある半透明ピクセルを「視点からの奥行き順」に並べ替え，半透明合成しながら描画していくことになる。
　ただし，この並べ替えを真面目に全部やると，処理負荷が高くなってしまう。そのためTOMB RAIDERでは，Fragment and Link Buffer上にある各画面座標のピクセルに対して，最も視点に近い場所にある「適当な数」の半透明ピクセルだけを拾って並べ替えるという簡易な処理をしている。見た目に関わるのは視点に近い側のピクセルだから，後ろ側（奥側）は無視しても差し支えないだろうと割り切った処理をしているわけだ。
　なお，「適当な数」はGPUのパフォーマンスに応じて調整されるという。

ララの髪は30万頂点以上で描画

PS2なら髪を描くだけで終わるほどの処理

　TOMB RAIDERで，線分で描かれた毛髪は2万1042本あるとのこと。頂点数で言えば33万6672頂点だ。PlayStation 2（以下，PS2）時代なら，1フレームあたり数十万ポリゴンで描かれたゲームがほとんどだったので，仮にPS2でこれを描こうとしたなら，毛髪だけで1フレーム分の描画が終わってしまうだろう。PlayStation 3であっても，数十万ポリゴンの毛髪レンダリングは“重い”処理であり，だからこそTressFXは，PC版専用の機能となっているわけだ。

ララの毛髪は30万頂点以上というスライド。概算では30万ポリゴン程度に相当する

　TOMB RAIDERの場合，TressFXはララの髪にしか使われていない。なぜなら，ララの頭部が「どのくらいの大きさで描かれるか」によって，描画性能が大きく変わってしまうからだ。
　たとえば，頭部が大写しされるカットならば，それだけ髪も大写しになるため，先のOIT処理におけるFragment and Link Buffer処理量が増えてしまうし，半透明描画の絶対量も増えるので，トータルの描画負荷が高くなる。

　以下のスライド2枚は，AMDによる性能テストの結果だ。上側のスライドはララの全身が写っているので，画面上で毛髪が占める面積は狭い。一方，下側のスライドは「弓を引く」アクション時で，ララの後頭部が大写しになっている。そのため，下のほうが描画に要する時間は1.5倍も長く，描画負荷が高いと分かる。

「Radeon HD 7970」で処理した場合，ララの頭部が小さく描画される状況（上）では，毛髪描画の全体処理時間（毛髪の挙動シミュレーション含む）は約4.8ms。大きく描画される状況（下）だと，これが約7.5msまで増大する

TressFXに加えられる予定の改良リスト

　原田氏によれば，TOMB RAIDERに採用されたときよりも，現在のTressFXはさらに最適化が進んでおり，描画性能は向上しているとのこと。今後もAMDでは，さらに機能や表現を進化させていくという。今後は，LoD（Level of Details）処理も加えて性能を上げることで，複数キャラクターへの適用も実用的にしたいと，原田氏は述べていた。

　TressFXはバージョンアップされるたびに，そのソースコードが公開されるそうだ。最新版は「Radeon SDK」のWebページからダウンロードできるので，興味のあるゲーム開発者は，参照してみてほしい。

CEDEC 2013 公式Webサイト