［SQEXOC 2012］「Agni's Philosophy」に用いられたグラフィックス技術解説（中編）。Agniの毛髪表現はいかにして実現されたのか

Remi Driancourt氏（スクウェア・エニックス テクノロジー推進部 シニア R＆D エンジニア）

　2012年11月23日および24日に開催された「スクウェア・エニックス オープンカンファレンス 2012」では，次世代のゲーム開発を示唆するような最新技術が多く提示されていた。年を越してしまったが，前編に引き続き，オープンカンファレンス2日めに行われた，「Agni's Philosophy」に関するリアルタイムグラフィックス技術の解説セッションのレポートを中編としてお届けする。
　前編では，Agni's Philosophyの基本情報や，「レンダリングパイプラインについての詳細」「影生成」「大局照明」「環境光からの自己遮蔽」「人肌表現」「眼球シェーダ」についての解説部分をレポートしたが，今回の中編では，主にAgniや老人などのキャラクターに使用された毛髪の部分を解説していく。

SQEXOC 2012関連記事はこちら

毛髪と髭に込められた先端技術（1）〜「線分アプローチ」と「バナナの葉」

　存在感は地味ながらも，顔をリアルに見せることにおいてはかなり重要な要素となるのが「毛髪」と「髭」だ。現実世界において，「カツラ」や「付け髭」が「それ」と見破られやすいのは，そうしたものに対する，人間の「顔を見る眼」が厳しいからである。

　それゆえ，Agni's Philosophyにおいても，髭と毛髪の表現は，かなり気合を込めて取り組んだテーマだったようだ。実際，技術的にもチャレンジングな部分は多かったようである。

髪の毛の構造と光の伝搬模式図

　髪の表現については，リアルタイム3Dグラフィックスにおける実装として，いくつかのアプローチがあるということをRemi Driancourt氏（スクウェア・エニックス テクノロジー推進部 シニア R＆D エンジニア）は紹介した。

　一つめは，やや負荷は高いものの，近年のハイエンドGPUであればそれなりに現実的な手法となった「すべての髪を線分（Line Strip，Strand）で表現するアプローチ」だ。
　二つめは，PlayStation 2時代から10年以上も使われてきた古典的な手法で，適当な大きさの板ポリゴンに髪の毛テクスチャを適用して，これを「ひとかたまりの髪」として植え込む手法だ。これは一般には「毛ヒレ」といわれることがあるが，テクノロジー推進部では「バナナの葉」（Banana Leaf）と呼称していた。

　なお，Driancourt氏は紹介しなかったが，毛髪表現でよく使われる手法がもう一つある。それは毛の断面図テクスチャ適用したポリゴンを積層させてレンダリングする方法だ。これはShell法と呼ばれ，近年でも動物の体毛表現に用いられることがある手法で，実際，CEDEC 2012でも，このテクニックにまつわる研究が発表されていた。

Agni's Philosophyにおける髪表現では，Banana Leaf法と，線分アプローチの二つの手法をLOD的に混合させて使う実装を採用した

　Driancourt氏は，こうしたいくつかの手法の中から，線分で表現するアプローチと，Banana Leaf（毛ヒレ）で表現するアプローチを選択。両者を適宜，組み合わせて用いる決断をしたという。

　線分アプローチの負荷は高めだが，その分リアリティも高いという特徴がある。一方で，Banana Leaf法は，リアリティこそ線分アプローチには劣るが，手軽にボリューム感のある髪が表現できて低負荷だ。そこで，実際の両手法の使用においては，遠景のときにはBanana Leaf法の使用率を上げていくような，LoD（Level of Detail）的な制御を行い，品質と性能をスケーラブルに変更できる仕組みを構築したという。

髪と髭なし
Banana Leaf法による髪のみ
Banana Leaf法による髪と，線分アプローチの髪との合わせ技状態

毛髪と髭に込められた先端技術（2）〜線分アプローチの髪のシミュレーションとテッセレーション

　前編でも触れたが，本作の「髪」や「髭」では，キャラクターを「Maya」上で3Dモデリングする時点で与えていたNURBS（Non-Uniform Rational B-Spline：非一様有理Bスプライン）カーブの制御点パラメータを，そのまま，Luminous Studioのリアルタイムレンダリングエンジンに継承する形で描画される。
　キャラクターのアクションやそのほかの外的要因で髪や髭が揺れたり動いたりする場合は，物理シミュレーションやアニメーションを，これらのNURBSカーブの制御点パラメータに適用することで実装されている。


　髪に挙動を与える処理は，この「NURBS制御点」をパーティクルと見なして，バネで接続したうえで基本的なバネ物理を実装することで行っている。制御点が回転してしまうと不都合が起きて不自然になるので，そうならないように各ジョイント部には角度制御が入るようだ。なお，このパーティクルベースのバネ物理はGPU内でGPGPU的に行われており，CPUはほとんど関与していないとのこと。



　髪のNURBS制御点の位置がアニメーションに対応できるようになったのはいいのだが，制御点をそのままつないだのでは，折れ線グラフのような髪になってしまう。そこで，これを「しなやかな髪」にする必要があるわけだ。パッと思いつくのは，DirectX 11で追加されたプログラマブルシェーダの「テッセレーションステージ」を活用する方法なのだが，Agni's Philosophyでは，DirectX 11プラットフォームのGPGPUにあたる「Compute Shader」を使用して髪のテッセレーションを行っているという。

「しなやかな髪」とするためのテッセレーション処理は，Compute Shaderで行っているというのが面白い

　Mayaによるモデリング段階で植え込まれた，線分としての髪や髭は，実はすべての毛髪ではない。作られたのは，いわば“代表”髪，“代表”髭とも言うべきもので，これをそのまま描画したのでは本数が足りず地肌が透けて見えてしまう。髪ならば「超薄毛」状態といった感じだ。

　そこでなんらかの「増毛」処理が必要になる。そう，髪としての線分を増やす必要がある。
　「線分を増やす」と言うと，ジオメトリの増減が行えるジオメトリシェーダを活用するのか……と思いきや，Agni's Philosophyでは，この増毛処理をテッセレーションステージで行っているという。先ほどの「線分の分割にCompute Shaderを使用」に引き続き，ここも意表を突いた実装だ。

　「テッセレーションはポリゴンを細かく分割するシェーダステージ」として理解していると，この「テッセレーションステージで線分を増やす」という言い回しからして分かりにくいかもしれない。
　DirectX 11のテッセレーションステージでは，分割対象となるプリミティブとしてポリゴン（三角形）やクワッド（四辺形）以外に線分も選択できることを知っている人は多いだろう。実は，その際，入力された線分に平行線を引くような感じの等値線（Isoline）を生成することができるのだ。

オレゴン州立大学の論文より。テッセレーションパターンの図解

Isoline Tessellationとは入力された線分から等値線を生成するもの。NVIDIAのSarah Tariq氏の論文より

Agni's Philosophyにおいては，線分で生やした髪はテッセレーションステージのIsoline Tessellationで増毛される

　この「Isoline Tessellation」で複製増毛された線分の髪は，何もしなければお行儀よく並んだ「ひとまとまりの髪」に見える。単純な表現ならば，まさにこれだけでOK……ということになる。
　しかし，もう一手間かけてドメインシェーダで，この複製された髪達をそれぞれ異なる方向に変移させることもできる。例えば，螺旋状に変移させればドレッドヘアーのような髪が，あるいは適度な振幅で変移させれば，縮れ毛や巻き毛状の髪が実現できる。いわば「Isoline Tessellation」で生成された平行線に対してディスプレースメントマッピングを行うようなイメージだ。

　作中冒頭に出てくる老人のワサワサとした髭は，まさにそうした手法によって実現されている。
　なお，その変移の与え方を変えることで，バリエーション豊かな縮れ毛を作り出す様子を見せてくれる動画を下に示しておこう。

各線分の髪に対してディスプレースメントマッピングを行えば縮れ毛のような表現も可能

　増毛したことで見た目がだいぶリッチになるが，ただの線分では，画面上で太さ1ピクセルとなってしまうため，キャラクターに対してカメラが遠ざかったり，近づいたりすると，髪や髭の見え方が不安定になる。これを改善するため，Driancourt氏は，ジオメトリシェーダを使って線分をポリゴン化（＝ビルボード化）する処理を導入したという。
　具体的には，髪や髭を構成する2頂点からなる各線分に対して，ジオメトリシェーダ2頂点を付加していき，これらを四辺形に変換していったのだ。
　ビルボード化すれば面積を持つようになるので，Banana Leaf法の髪や髭と同じようにテクスチャを貼り付けることもできるようになる。なので，陰影処理の効果，見映えとしてもBanana Leaf法との一体感を出せる副次的メリットも得られるわけだ。

線分だった髪や髭は最終的にはジオメトリシェーダによって頂点を増量してからのポリゴン化がなされる

　たかが髪，たかが髭……といえども，実はのところ，Agni's Philosophyでは，Compute Shader，テッセレーションステージ，ジオメトリシェーダといった最新技術を総動員して実現しているのである。

髪や髭のレンダリングパイプライン。Compute Shader，テッセレーションステージ，ジオメトリシェーダを総動員してレンダリングされている

　なお，Driancourt氏によれば，ここまでで解説してきた髪や髭の生成手法は，基本的にはNVIDIAのSarah Tariq氏の論文を参考にしているとのことなので，より詳細を知りたい人はそちらもあわせて参照するとよいだろう。

髭なし

Mayaでのモデリング時に使用されたNURBS制御点を直線で結んだだけの髭

Compute Shaderを用いたテッセレーション処理後の状態

テッセレーションステージでの等高線テッセレーション（Isoline Tessellation）実装後の増毛された状態

増毛をさらに強化したところ

テッセレーションステージのドメインシェーダを活用し，毛の末端でまとまるような変移を与えるとこうなる

ねじれるような変移では縮れ毛に

ねじれの振幅を大きく（周波数を下げた）状態

毛の末端で分岐するような制御を与えた場合。枝毛になる

毛髪と髭に込められた先端技術（3）〜髪と髭に対する陰影処理

　実際の髪は，微細な円筒状で，半透明でありながらも，その表面では鏡面反射を引き起こす。このとき，生じるハイライトがCGでいう一次ハイライト（Primary Hilight）となるが，これは主に髪の色からの影響は受けずに光源色のままで強く出ることになる。
　そして，髪の内部に浸透した光の一部は，毛髪そのものの色の影響を受けて出射される。この出射光のうち，視線側にやってくるものが二次的なハイライトとして加えられる。
　髪の中に浸透した光には，髪を透過して出射されるものもある。髪を浸透して出てくる光では光原色光源色よりも毛髪色のほうが支配的となる。

　こうした毛髪の独特な陰影処理に関しては，カリフォルニア工科大学のJames T. Kajiya氏らの1985年の論文「Anisotropic Reflection Models」が非常に有名で，今でもKajiya-Kayシェーディングモデルとして毛髪のレンダリングのリファレンスとなっている。

　Driancourt氏は，昨年のオープンカンファレンスの段階では，このKajiya-Kay法による実装だと発表していたが，制作段階でアーティスト陣からハイライトの出方に対して改良を求められたことから，コーネル大学のSteve Marschner氏による論文「Light Scattering from Human Hair Fibers」をベースとした手法に切り換えたという。Marschner法はセガ/トライエースの「End of Eternity」にも採用されており，近年では採用例が増えているテクニックの一つだ。

Agni's Philosophyでは毛髪の陰影処理にMarschner法を採択した

　Marschner法における陰影処理でキモとなるのは，毛髪の接線ベクトル（接平面ベクトル：Tangent）だ。これを摂動させたり，シフトしたりすると陰影が変わってくるため，表現したい髪質に合わせたチューニングができる。
　具体例としてDriancourt氏は，この接線ベクトルに揺らぎを与えることで髪質がざらついたような印象を与えたり，一定方向にシフトさせることでハイライトの出方が移動したりすることなどを，以下のような画面ショットで示していた。

Marschner法オフ。左が線分アプローチ，右がBanana Leaf法による髪だ

Marschner法による一次ハイライトオン

Marschner法による二次ハイライトオン

接線ベクトルをシフトしてみた例。ハイライト群が毛先側に移動している

接線ベクトルのノイズ的な揺らぎを与えた例。髪がごわごわしているような見映えになる

光源色を黄色にした陰影処理結果の例

毛髪内に浸透して出てきた二次ハイライトに，意図的にカラーシフトを起こさせることもできるという例

　さて，Agni's Philosophyにおける髪や髭は，線分アプローチによる生成法とBanana Leaf法によるポリゴンベースのモノを混在させているとここまで説明してきた。
　Driancourt氏が，次に取り組んだのは，この二つの異なる生成法の髪や髭の見映えを一体化して，違和感をなくすことだった。かたや線分，かたや板なので，なにか対策しないと「2種類の髪がある」とバレてしまう。
　とくに問題となるのが，二つの手法で作られた髪に，キューブ環境マップテクスチャの適用した際の情景の映り込み表現や，前編で解説した大局照明システムの適用によるライティング結果の不一致感だ。

　主に問題になってくるのは，線分アプローチのほうだ。元々が線分であるがゆえに，「面の向き」を表す法線ベクトルを持っていないのである。そこで，Driancourt氏は「二つの疑似的な法線ベクトル」を算出し，それらを合成して用いる方策をとることにしたと語る。一つは接線ベクトルと視線ベクトルの外積から求めたもの，もう一つは，陰影処理の当該ピクセルの座標と毛髪領域の中心座標（Bounding Boxの中心）から算術合成で求めたものだ。
　前者は視線移動に対して算出される法線が大胆に変化する特性を有し，後者は逆に視線移動に対して安定した法線を返す特性を有する。Agni's Philosophyでは，この二つを合成して中間的な特性を得ているというわけだ。

疑似法線ベクトルを二つの手法から算出

接線ベクトルと視線ベクトルの外積から求めた疑似法線ベクトル

陰影処理の当該ピクセルの座標と毛髪領域の中座標（Bounding Boxの中心）から算術合成で求めた疑似法線ベクトル

二つの疑似法線ベクトルを合成した結果

　実際に，前編で紹介したSH放射輝度ボリュームによる大局照明効果を適用した画面ショットと，キューブ環境マップを適用した画面ショットを下に示す。
　線分アプローチとBanana Leaf法の二つの方法の毛髪の陰影の出方に大きな違いがなければDriancourt氏の思惑どおりということになるわけだが，確かに近い結果になっていることが分かる。

左が線分アプローチ，右がBanana Leaf法による髪。大局照明効果の結果の両者の比較

右が線分アプローチ，左がBanana Leaf法による髪（後方から見ているので逆転している）。大局照明効果の結果の両者の比較

左が線分アプローチ，右がBanana Leaf法による髪。キューブ環境マップの適用結果の両者の比較

右が線分アプローチ，左がBanana Leaf法による髪（後方から見ているので逆転している）。キューブ環境マップの適用結果の両者の比較

毛髪と髭に込められた先端技術（4）〜髪と髭の描画パフォーマンスとLoD制御の導入

　Driancourt氏は，Agni's Philosophyにおける毛や髭の生成手法の実行性能についても言及した。
　作中冒頭に登場する老人では，モデリング段階で設定されたヒゲの本数が295本あり，NURBS制御点は1656個与えられている。これをCompute Shaderによってテッセレーションを行うことで，1656個のポイントデータを7100個に増量している。ここからテッセレーションステージのIsoline Tessellationを実施することで100倍に増毛して，頂点としては71万個に増加させているという。
　このときのパフォーマンスをまとめたのが下表になる。表中の数値の単位はミリ秒（ms）だ。

髪や髭の描画パフォーマンス

　この表は少々分かりにくいので解説が必要だろう。
　横軸は，Compute Shaderとテッセレーションステージの合わせ技で行われる増毛処理における「増毛倍率（毛の本数）」を1〜100のパラメータで表している。ここは実質的には頂点量を表していると思っていい。
　縦軸はジオメトリシェーダによってビルボード化する際の「ビルボートの幅（毛の太さ）」に相当するパラメータで0.1〜2.0で与えられている。ここは実質的にはピクセル量を表していると思っていい。
　Driancourt氏は，このパフォーマンス測定表からキャラクターとカメラとの距離の関係に対するLoD（Level of Detail）制御の指針が見出せたという。「髪の本数」×「髪の太さ」で与えられる値が，「視覚的な髪の量」を表せると仮定して，どういう描画指針を選択すべきかを検討したというのだ。

　前出のスライドで「髪の本数」×「髪の太さ」＝10となるデータを抜粋したのが以下の表だが，これを見ると，同じ毛のボリューム感が得られはずの設定でも「毛の本数が多いほうが負荷が高い」ことが分かる。

「髪の本数」×「髪の太さ」で与えられる値が，「視覚的な髪の量」を表せると仮定すると……

　つまり，キャラクターとカメラの遠近関係に応じて，「毛の本数」の増加は緩やかにして，「毛の太さ」をドラスティックに太くしていったほうが良いパフォーマンスが得られそうだということが見えてくる。Agni's Philosophyでは，このLoD指針を取り入れて実装しているとのこと。

LoD制御なしとありの比較。見た目はそれほど変わらないが，LoDありのほうがパフォーマンスは2.5倍もよくなる

毛髪と髭に込められた先端技術（5）〜髪と髭に対する影生成

　Agni's Philosophyでは，髪や髭に対する影生成についても，手法としては簡易的ながら，かなりマジメに取り組んでいる。
　髪や髭に落ちるセルフシャドウには，基本的には近傍比率フィルタリング（Percentage Closer Filtering，以下，PCF）ベースのソフトシャドウ処理付きのデプスシャドウ技法を活用している。各毛髪のピクセル描画時の「影か否か」の判定を，YES/NOで二値判定するのではなく，当該ピクセルから遮蔽物までの距離に応じて影色の濃淡を決定するようにしているのだ。具体的には，奥まった毛ほど影が濃く出て，外界に近い（≒光源側に近い）毛ほど影が明るくなるようなイメージである。この処理を加えることで，周囲の光と透過光の影響を疑似的に表現でき，結果として毛に自然な透明感が生まれるというわけだ。

髪や髭の影生成アルゴリズム。基本的にはデプスシャドウマップ技法を採用するが，遮蔽物との距離に応じた陰影を付けることで毛の透明感を演出している

　なお，シャドウマップ生成に必要な深度（デプス）バッファレンダリングに当たっては，最終的な髪や髭の状態ではなく，「毛の本数」を極端に削減し，「毛の太さ」を極端に太くした状態で行っているという。このほうが影の出方が安定し，なおかつ負荷的にも軽くなるからとのことだ。こうすることで負荷が軽くなるのは，前段で導かれた分析を踏まえれば自明だろう。

シャドウマップ生成は「毛の本数」を極端に削減し，「毛の太さ」を極端に太くした状態で行っている。これにより影の出方が安定しパフォーマンスも向上したとのこと

　以下に，セルフシャドウ付きの髭のレンダリング結果を示す。

セルフシャドウなしの髭

セルフシャドウありの髭

セルフシャドウありの髭。影グラデーションを強調したパターン

毛髪と髭に込められた先端技術（6）〜髪と髭に対するポストエフェクト

　Driancourt氏は，Agni's Philosophyで採用したアンチエイリアシングの仕様についても言及した。
　Agni's Philosophyでは，アンチエイリアス手法として8xマルチサンプルアンチエイリアシング（MSAA）を採用し，なおかつFXAA（Fast Approximate Anti‐Aliasing）も併用しているとのこと。

Agni's Philosophyにおけるアンチエイリアシング戦略。被写界深度（Depth of Field）は厳密にはアンチエイリアス処理ではないが，映像がボカされることの結果としてジャギーが低減されるため，ここにリストアップされている

　FXAAは，PlayStation 3やXbox 360のゲームタイトルでも採用が進んでいる画像処理系のアンチエイリアス手法で，レンダリング結果を垂直水平に走査しつつ輝度差を検出して，輝度差があればそこをグラデーションでボカしていくようなアルゴリズムとなっている。

　8x MSAAだけでも十分な気がするかもしれないが，MSAAは，ポリゴンの輪郭がピクセルを横切るときにしか効かないという特性がある。これはMSAAが，ピクセルシェーダ1回分の結果に対し，x倍の解像度（8x MSAAならば8倍の解像度）の深度バッファをサンプルして，輪郭かどうかの判別とアンチエイリアス処理を行っているためだ。ちょうどピクセル境界とポリゴン輪郭が合致していると，まったくアンチエイリアシングが効かないという，よく知られたアーティファクトが発生する。カメラが上下移動，あるいは左右にパンする映像では，一定リズムでピクセルエッジが顕在化することがあるが，あれがこのアーティファクトだ。
　本作で多用される髪や髭は，細いジオメトリ構造を持つため，このアーティファクトが出やすい。FXAAは，レンダリング結果に直接アンチエイリアス処理を適用するので，このアーティファクトを低減する効果があるのだ。

アンチエイリアシングなし

2x MSAA適用後

4x MSAA適用後

8x MSAA適用後

8x MSAA適用+FXAA適用後

8x MSAA適用+FXAA適用後+DoF適用後。最終映像がこれ

　Agni's Philosophyの髪や髭のうち，Banana Leaf法による毛はポリゴンにテクスチャを適用したものであり，ここには半透明要素を持つテクスチャが適用されるので，この描画の品質も意識しなければならない。
　Driancourt氏は「当初はBanana Leaf法のポリゴン髪を遠近でソーティングすることも考えたが，主人公Agniのヘアスタイルの複雑な有様を見て断念した」と笑いながら語っていた。結局，最終的には「Alpha to Coverage」（アルファ トゥ カバレッジ）という現実的な選択を取っている。

　Alpha to Coverageは，当該ピクセルをレンダリングした際に透明要素があった場合に，その透明度に配慮したMSAA処理を適用するもので，DirectX 10世代以降のGPUでは標準装備されている機能だ。
　Alpha to Coverageの効果としては，透明要素を含んだテクスチャを適用したポリゴンに，それなりに正しいアンチエイリアシングが働くというものが広く知られるが，順不同の半透明描画の重ね描きに対してもまずまずの結果が得られるという副次効果もある。そのため，毛髪のような半透明を含むオブジェクトの重ね描きに用いるのが定番化してきている。
　例えば，スクウェア・エニックスが制作を担当し，バイキングが開発を担当した「ガンスリンガー・ストラトス」においても，キャラクターの髪描画にAlpha to Coverageの活用がなされたことが明らかになっている。

髪の描画には「Alpha to Coverage」を採用

　このほか，描画した髪や髭にコントラスト感を増強するために，画像処理系のポストエフェクトとしては定番の「Unsharp Masking」（アンシャープマスキング）を適用している。具体的には，髪や髭のある箇所で深度値の段差がある場合，陰影を強める処理を行っている。

髪や髭にはUnsharp Maskingを適用

Unsharp Maskingの適用前と適用後の比較

異方性反射の陰影処理

　Agni's Philosophyでは，一部のマテリアルで異方性反射のライティングモデルを採用している。異方性反射は，その素材を見る視線の角度によって反射特性が変わる反射モデルで，髪の毛や粗い金属材質面などでもよく見られるものだ。視線角度とそれに対応する異方性反射特性パラメータは一般的にはテクスチャに格納させて置く場合が多い。
　最終的な映像では，主人公Agniや祈祷師キャラクター「Sidoro」の着ているサテン生地調の衣服などでこの反射モデルが採用されている。

異方性反射モデルは衣服などの反射モデルに採用された

Agniのドレスの異方性反射モデル

異方性反射オフ（左）とオン（右）の状態の比較

　前編で解説した大局照明，皮膚，眼球のレンダリングにまつわるテクニックに加え，今回解説してきた毛髪やそのアンチエイリアシング，ポストエフェクト，異方性反射などにまつわるテクニックなどを総動員してレンダリングしたAgni's Philosophyと，ヴィジュアルワークスが制作したプリレンダー版Agni's Philosophyとを比較した画面ショットが下になる。

主人公Agni。ほとんど同等の見映えになっている

祈祷師Sidoro。衣服の異方性反射の効果もうまく表現できている。なお，色味が違うのはチューニングのせい

　ということで，中編はここまで。後編では，本作で使用されているボリューメトリックなレンダリングやガラスなどの屈折表現，パーティクル表現などについて解説したい。