西川善司の「試験に出るゲームグラフィックス」（1）「GUILTY GEAR Xrd -SIGN-」で実現された「アニメにしか見えないリアルタイム3Dグラフィックス」の秘密，前編

ライティングとシェーディング（2）

〜鏡面反射の制御と疑似表面下散乱テクニック

　セルアニメ的な2Dグラフィックスでは，鏡面反射によって出現する「スペキュラハイライト」（Specular Highlight，視線依存なハイライト）の存在感をそれほど感じないことが多い。だが，GUILTY GEAR Xrd -SIGN-では，このスペキュラハイライトも，「手描きイラストでハイライトを付加するときの文法」に基づいた調整の結果として，ライティングにしっかり付加されている。

イノのilmテクスチャ

イノのilmテクスチャBチャネル

イノのilmテクスチャRチャネル

イノのスペキュラハイライトを無効化した状態（左）と有効化した状態（中央），有効化した状態から，角度を変えて寄ったところ（右）

　ではその文法とは何なのか。
　一言で表現するのは難しいのだが，いくつか例を挙げるならば，肌と衣装のように，互いが近い位置にあっても材質が異なるときにはハイライトがくっつかないようにしたりとか，物理的にはまったく正しくないのを納得ずくで凹凸境界や材質境界に沿ってハイライトを出したりとかいったものだ。

胸元のエリや髪の毛，額当ての下端，頬，唇などのハイライトはほぼ固定だが，角度によって太さが変化し，極端な角度では消える

ポチョムキンでは，筋肉を強調するため，服の上からも筋肉にハイライトが入るよう，テクスチャで設定されている

金属光沢は固定されていると違和感が出るため，角度によって変化するようになっている

カメラとライトの角度によって常にハイライトが最適な位置に出るようにして，説得力を上げている

　スペキュラハイライトの制御は，照明制御用のテクスチャのB（＝青）チャネルに格納される「ハイライトの入りやすさ」パラメータによって行われる。このパラメータは鏡面反射の計算結果に対して強弱を調整するものなので，最大値なら焼き込みのハイライトになり，逆に値が小さい領域ほどハイライトが減退しやすくなる。
　ちなみに，照明制御用テクスチャのRチャネルは「スペキュラハイライトの強度」パラメータとなっており，金属やツルツルとした材質の部分には大きめのが設定されることになる。

ilmテクスチャ（左）と，それを順にα，R，G，Bへ要素分解したテクスチャ

　ただ，これだけの工夫を盛り込んでも，開発チームはまだ納得できなかったという。目指す「完全なセルアニメ風テイスト」に向けて，何が足りないのか。

本村・C・純也氏（リードモデラー兼テクニカルアーティスト）。GUILTY GEAR Xrd -SIGN-でキャラクターモデルの制作全般やボーン＆リグ設計を担当。過去参加作品にはブレイブルーシリーズや，格闘ゲーム版のペルソナ4シリーズ，「ギルティギア2 オーヴァチュア」がある

本村氏：
　「色」ですね。トゥーンシェーダの結果として明暗ができますが，その明暗に，どこか単調な印象を受けたんです。陰になった箇所に単色の陰色を乗算で載せちゃうだけの，単純なトゥーンシェーダ処理だと，そこの素材感に説得力や豊かさが不足しているように感じたというか。
　一方で，テレビアニメの制作現場には，色彩設計という，専門職のアーティストがいて，「このキャラクターのこの部分は，日が当たるとこの色，陰になっているところはこの色」とった感じで，色を個別に細かく設定しているんですよ。違いはここにあるんじゃないかと考えたわけです。


　もちろん，セルアニメのように事細かく個別設定するわけにはいかない。そこで，系統立てて実装するための研究を進めた結果，テレビアニメの色彩設計担当は本能的に，「そのシーンの環境光色」と「表現対象の材質の光の透過率」を吟味して，設定する色を決めているのではないか，という推論に辿り着いたそうだ。この推論に基づいて実装してみたところ，理想にかなり近い結果が得られることになり，最終仕様に盛り込むことを決断したと，本村氏は語っていた。

　実際の仕組みは，それほど複雑なものではない。
　まず用意するのは，3Dモデルに適用する基本テクスチャ（Base Texture，ベーステクスチャ）に対応する「陰となったときに出やすい色」分布のテクスチャだ。このテクスチャは開発チーム内では便宜上「SSSテクスチャ」（SSS：SubSurface Scattering）と呼ばれているという。

　ライティングの結果で陰となった場合，当該ピクセルは，このSSSテクスチャの値と「環境光の色」を乗算して得られた色を陰色として決定する。一方，ライティングの結果で明となった場合は，SSSのテクスチャの値を無視するので，結果，光源色だけが影響することになる。
　この切り分け処理により，セルアニメ風の彩色に近づくことになり，開発チームは満足したのだそうだ。

SSSテクスチャなし（左）とあり（右）の比較

　具体的にどのような効果が表れているかというと，たとえば，キャラクターの肌色の部分に出る陰は若干の赤味を帯びるようになる。また，衣服部分の陰には衣服の彩色の彩度が残るようになる。つまり，SSSテクスチャとは，そうした「赤味」や「衣服の彩度が残った色」で構成されたものになる。

環境光と光源色による色調整で，陰色が変わる様子

本村氏：
　SSSテクスチャは表面下散乱をシミュレーションしているわけではないので，この名称は厳密には正しくないかもしれません（笑）。
　補足説明をするとすれば，SSSテクスチャは「その材質が光をどのくらい透過するか」を端的に表していると思います。薄い紙の上に出る陰の色は薄めですよね。そういうイメージのテクスチャです。

輪郭線の秘密（1）

〜背面法

　GUILTY GEAR Xrd -SIGN-のアニメ調ビジュアルを形作る要素において，かなりの根幹部分を担っているのが，輪郭線（線描）の部分だ。漫画でいうところのペン入れ部分だが，この表現にあたってGUILTY GEAR Xrd -SIGN-では，2つのアプローチを組み合わせたものを実装している。

　最も基本的な線描となる3Dモデルの形状輪郭線には「背面法」（Back-Facing，バックフェイス法）が採用されている。
　通常，3DモデルをGPUで描画しようとした場合，視点に対して背面側にあるポリゴンは「見えないもの」として描画対象外として破棄されてしまう。この仕組みは，「正面を向いているキャラクターモデルの背中側のポリゴンはどうせ視点からは見えないので描かない」という発想に基づく「背面カリング」（Backface Culling，裏面カリングともいう）と呼ばれている。
　それに対して背面法の線描では，この背面カリングの仕組みを反転したレンダリングを組み合わせている。「反転」とはつまり，通常は「背面を描かない」とする処理系を反転させる，つまり「背面を描いて正面を描かないようにする」ということだ。

輪郭線なし（左）とあり（右）の比較

　処理の流れを説明しておくと，第一段階として，3Dモデルを若干膨張させつつ，反転させた「背面カリング」を行う。その結果として，当該3Dモデルの真っ黒なシルエットが描かれるので，これをひとまず保存しておく。
　第二段階として，その3Dモデル本来の大きさで，通常の処理系を用いてレンダリングする。
　そして最終段階では，真っ黒なシルエットと通常のレンダリング結果を合成する。真っ黒なシルエットは，通常のレンダリング結果で大部分が上書きされてしまうが，真っ黒なシルエットは3Dモデルを若干膨張させた状態になっているので，結果として輪郭部分だけが残るというわけだ。

　GUILTY GEAR Xrd -SIGN-のレンダリングパイプラインでは，Zバッファの先出しを行っているため，第一段階の時点で，ほぼ完璧に近い輪郭線が得られる。なので最終段階の合成フェーズは不要な気もするが，概念としてはこんな感じになる。

左端が膨張させたうえでの反転背面カリングで描かれたシルエットで，中央が通常描画されたキャラクターモデル。右端が最終映像だ。この部分にはもう1つ秘密があるのだが，それは後ほど

　実のところ，この手法はプログラマブルシェーダ技術が台頭する前から使われてきたクラシックなものだが，GUILTY GEAR Xrd -SIGN-では，頂点シェーダを駆使して，このクラシックな手法を独自に拡張して実装している。

背面法による輪郭線生成はプログラマブルシェーダ以前の3Dゲームグラフィックスでも実用化されていた。スライドは背面法を活用した「XIII」（Ubisoft，2004年）より。オリジナルがPlayStation 2向けで，もちろんプログラマブルシェーダは活用されていない

　アークシステムワークスによる独自拡張部分は，カメラのズーム具合やキャラクターの遠近にかかわらず，線の太さが細くなりすぎたり太くなりすぎたりするのを避ける制御部分や，手描きの作画タッチを再現するために曲線部や直線部で線の太さに強弱を付ける制御部分だ。実際にペンを走らせて描いたかのようなGUILTY GEAR Xrd -SIGN-の線描は，こういった頂点シェーダによる制御から生まれているものなのだ。


本村氏：
　背面法を採用したのは，アーティスト側で線描の強弱を自在に制御できる部分にメリットを感じたためです。GUILTY GEAR Xrd -SIGN-の3Dモデルでは，頂点カラーに「線描するときの太さ制御値」を仕込んでいて，これによって線描の強弱が付けられるようになっています。これで，アニメの手描き作画で見られるような，頬のあたりは太く，顎にかけて細くなっていくというような表現が行えるんですよ。

輪郭線の太さ調整結果

輪郭線の太さ調整（頂点カラーAチャネル表示）

輪郭線強弱なし（左）とあり（右）。鼻と頬，顎まわりに注目してほしい

こちらは肩から腕まわりの輪郭線強調を比較した画像。左がなし，右がありだ

　本村氏によれば，GUILTY GEAR Xrd -SIGN-における頂点カラーの活用内訳は以下のようになっているという。

• R：陰影判定の閾値に対するオフセット。1が標準で，影になりやすい部分ほど暗く。0だと必ず影になる
• G：カメラからの距離に応じて輪郭線をどの程度膨張させるかの係数
• B：輪郭線のZオフセット値
• A：輪郭線の太さ係数。0.5が標準で，1にするとMAXの太さ，0にすると輪郭線なしになる

　GとAが輪郭線の太さ制御に関わるパラメータだ。Rは，ライティングとシェーディング（1）の段でも触れた，手仕込みのアンビエントオクルージョン的な自己遮蔽率係数だ。Bは，背面法で膨張させるとき，視点に対してどのくらい奥行き方向（Z方向）にずらして（＝オフセットして）膨張させるかの係数で，この値を大きく設定すると，膨張モデルが隣接する面に埋没しやすくなって結果的に輪郭線を消すことができる。本村氏によれば，頭髪や顔面の鼻下などに，歓迎されないシワのような輪郭線が出てしまうのを防ぐために盛り込んだパラメータだとのことだった。

実際の形状（左）と，輪郭線のZオフセットを行っていない状態（中央），行った状態（右）

石渡氏：
　ポストエフェクト的なアプローチを採用しなかったのは，今回のような「線の太さの強弱制御」を行いにくいと思ったからです。この背面法の線描の仕組みだと，アーティスト側で行われる3Dモデル制作の段階から，実機でどう線が出るのかを調整できますから，モデルの作り込みと輪郭線の出方を同時に作り込めるんですね。


　石渡氏の言う「ポストエフェクト的なアプローチ」とは，レンダリング結果に対して，ピクセルシェーダによるリアルタイムフォトレタッチ的に線描を行うものだ。具体的には，レンダリング結果の深度値段差を検出したり，あるいは画素単位の視線（＝視線ベクトル）と面の向き（＝法線ベクトル）の内積値の段差を検出したりすることで，輪郭線ピクセルを決定していく。この方法は，背面法ではジオメトリ負荷が高すぎると判断される場合に採用されることが多く，最近では「GRAVITY DAZE/重力的眩暈：上層への帰還において、彼女の内宇宙に生じた摂動」が背景3Dモデル専用の線描手法に用いていた。

「GRAVITY DAZE/重力的眩暈：上層への帰還において，彼女の内宇宙に生じた摂動」より。キャラクターモデルの描線は背面法，背景の描線はポストエフェクトによって実装されていた
（C）2012 Sony Computer Entertainment Inc.

輪郭線の秘密（2）

〜新開発!? の「本村式ライン」

　GUILTY GEAR Xrd -SIGN-では，輪郭線の表現にあたって，衣服やアクセサリ類の溝，縫い目，筋肉の隆起といったところに，もう1つ別の手法による線描を加えているという。


本村氏：
　3D構造的に溝になっている部分など，背面法では輪郭線が出せないところが存在します。そうした箇所にはテクスチャマッピングで入れ込むしかないわけですが，普通にテクスチャマッピングすると，カメラのズームインで拡大されたときにジャギーが出てしまい，背面法による綺麗な輪郭線との差が目立ってしまうんです。そこで，「テクスチャの解像度に依存しない綺麗な線分」をいかにして出すかを，「テクスチャマッピングでジャギーが顕在化するのはどういう状況か」という基本にまで立ち返って研究しました。


　その結果生まれたのが，開発チーム内で「本村式ライン」と呼ばれる，ユニークな線描テクニックだ。

膨張モデルによる背面法の輪郭線のみでは，輪郭内で任意の部分にラインを引くことができない

膨張モデルによる背面法の輪郭線だけだと描画できないラインはテクスチャで描画する必要がある

従来のようにフリーハンドでラインを引いた結果。ジャギーが顕著なのがわかる

対して本村式ラインで描かれたラインは，同じ解像度でもシャープに描画されている

本村式ラインに寄ったところ（ワイヤーフレーム表示）

　そもそも，テクスチャマッピングにおけるジャギーは，とあるテクセル（＝テクスチャを構成するピクセル）がポリゴン面に対して単独テクセルとして描き込まれるときに顕在化する。これに対し，隣接するテクセルがあれば，単一テクセルのときとは違い，四角いテクセル形状の輪郭が事実上消失してまうため，ジャギー感が露呈しにくい。
　ただ，隣接していても斜め上や斜め下にあったのでは，事実上，そのテクセルは単一状態に等しく，ジャギー感が出てしまう。つまり，水平線状や垂直線状にテクセルが並んだピクセル集合なら，ボケ味が付加されることはありこそすれ，ジャギー感が出てしまう状況は回避できるということである。

本村式ラインのためのUV展開サンプル

　分かってみれば当たり前のことなのだが，このことに気が付いた本村氏は，「輪郭線として与える実線を垂直線と水平線だけで構成したテクスチャ」を作成。そのうえで，3Dモデルに適用するとき，斜め線や曲線が欲しいところでは，そうマッピングされるように歪みや曲げを与える形でUVマップ（＝3Dモデル上の各ポリゴンが，テクスチャマップのどこに対応するかを表したデータ）を設計したのだ。
　いざ，この手法でテクスチャマッピングを行ってみると，あら不思議。それほど高くない解像度のテクスチャであっても，美しく滑らかな線描が得られたのである。

　下が，実際に用いられた本村式ライン用のテクスチャだ。なお，本村式ライン用のテクスチャは描線情報のみで構わないため，照明制御用テクスチャマップのαチャネル上に単色で格納されている。

本村式ライン用のテクスチャの例。ここでは垂直のラインが描画されている

本村式ラインをUV展開展開しているところ

本村式ラインの適用結果

本村式ラインの適用結果を拡大したところ。ジャギ―がないことに注目してほしい

こちらはメッシュの構造の例。描画したいラインに合わせてトポロジが設定してある点に注目

参考までに，ラインテクスチャの例も示しておく。とくに左下の画像でジャギーが顕著なのが分かるだろう。メッシュ分割も，描画したいラインとは無関係なトポロジで行われている（右下）

　本村式ラインの例では，直行する線分だけという，なんだか都市計画図のような不思議なテクスチャになっているのが分かるが，たとえば四角い線で縁取られたテクスチャは，筋肉の隆起部に適用される輪郭線だったりする。筋肉の隆起は，楕円形の半球形状になるが，それを本村式ラインでは「四角状の縁取り線を楕円状にマッピングする」ことになるわけである。
　四角が楕円状になる以上，四角内部の領域はかなり引き伸ばされ，歪む。なので，この四角内部に文字や模様などがあると，それも当然歪んでしまうが，あくまでもこのテクスチャは輪郭線付加のためのものなので，そうした文字や模様は盛り込まれていない。見た目として顕在化するのは，あくまでも線だけなので，この手法で生じる歪みは，見た目の問題として露呈しないのである。

　当然，歪みや曲げを与えたUVをベースにテクスチャマッピングがなされ，キャラクターや視点が動けばテクスチャは拡大縮小回転の影響も受ける。となると，描かれる線分もその影響を受けて，曲線になったり斜め線になったりするわけなのだが，テクスチャマッピングにあたってはバイリニアフィルタリング（Bilinear Filtering）を適用しているため，そうした曲線や斜め線には適度なボケ味が与えられる。そして，これがちょうどいいアンチエイリアシング効果になってくれるのだ。

バイリニア設定なし（左）とあり（右）

　ところで，本村式ラインで描かれる線分にも太さの強弱が見られる。しかし，本村式ライン用のテクスチャ自体にそうした微妙な線分の強弱はなく，線の太さはほぼ単一だ。テクスチャの線の太さが均一なのに，どうやって描線の強弱をつけているのだろうか。


本村氏：
　本村式ラインで行う描線の太さの強弱は，UVマップの設計でつけています。太い線を出したいときは，テクスチャ上の線表現テクセル達がポリゴン面に対して広く割り当てられるようにUVマップを工夫すればいいんです。


　この本村式ライン，やり方次第では，アニメタッチ以外のゲームグラフィックスにも広く応用できそうな予感がする。

描線の太さ強弱を設定している例。左は設定なしで，中央はUVとラインの重なり具合で強弱をつけているところだ。右のように，線を自然に途切れさせた表現も行える

　といったところで前編はここまで。
　後編では，よりゲーム表現的な部分の話題やアニメーション（動き）の部分にスポットを当ててお届けするので，お楽しみに。

西川善司の「試験に出るゲームグラフィックス」（2）「GUILTY GEAR Xrd -SIGN-」で実現された「アニメにしか見えないリアルタイム3Dグラフィックス」の秘密，後編

アークシステムワークス公式Webサイト