2017年5月9日，都内で開催されている「Unite 2017 Tokyo」で，ユニティ・テクノロジーズ・ジャパンのコミュニティエバンジェリスト小林信行氏による「Unityで楽しむノンフォトリアルな絵づくり講座：トゥーンシェーダー・マニアックス」と題した講演が行われた。

　ゲームで3Dグラフィックスを扱うにも表現方法はさまざまだ。海外の最新ゲームのようにリアルタイム処理でひたすらフォトリアリスティックな表示を追い求める方向もある一方で，まったく写真調でない絵柄，つまりノンフォトリアリスティック（NPR）でのレンダリングもゲームでは多用されている。いわゆるアニメ調のキャラクターが登場するような作品だ。世界的にはさほど人気があるとは言えないのだが，こと日本国内ではフォトリアルよりも好まれる傾向にある。
　そこで用いられる，一般にセルシェーディングやトゥーンシェーディングなどと呼ばれる描画法は，基礎的な技術が確立してかなり経過しており，すでに枯れた手法であるためSIGGRAPHなどでの最新技術の発表はほとんどない。
　アルゴリズムの基本は簡単なのだが，アニメ調の絵をほしがる人が満足するような結果を出すには多くのノウハウも必要であり，作り手の好みが大きく反映されるものでもあるため細かいこだわりでカスタマイズする人が多く，CEDECなどでは人気のセッションになる傾向があるという。映像制作で使えるレベルの本格的なトゥーンシェーダはそうそう転がっていないというのが実情だ。
　ということで，ユニティが提供しているキャラクター「Unityちゃん」用に本格的なトゥーンシェーダが提供されることになった。そこに使われた技術について解説するのが本セッションとなる。


　混乱を避けるためUnityちゃん用のシェーダのバージョンについて少し説明しておくと，最初にUnityちゃんが公開されたときに指定されていたのは「ユニティちゃんシェーダー」だ。その後，よりアニメのセル画的な表現に対応できるようにと作られたのが「ユニティちゃんトゥーンシェーダー」（Ver.1）であり，今回発表されたのはそれをさらに進化させた「ユニティちゃんトゥーンシェーダー2.0」（Ver.2）ということになる。


　ではVer.2ではなにが変わったのだろうか？　以下はVer.2の機能を列挙したスライドだ。


　そのうち，新規の機能は次のようになる。


　つまりほとんどの部分が一新されたわけだ。そのうちの大まかなところを挙げておくと，よりアニメ的な指定方法でシャドウの設定ができるようになったほか，Unityのシステムシャドウやグローバルイルミネーション（GI）に対応した。もう少し具体的に言うと，パラメータの調整によってセル画的な描画もイラスト風の描画も対応でき，環境光の影響が正しく反映されるようになった。全体的に柔軟で幅広い表現ができるようになっている。

パラメータによる描画の違い。テクスチャなどは同じものが使われている

ステージ上にさまざまな色のライトが配置されているため，金髪のUnityちゃんがピンク髪にしか見えないが，これもGIの効果である

髪の毛などを見ると，上は緑がかっていて，下はピンクがかっているという周辺光の影響が分かる

　GIの反映は，ゲームでは必須というわけではないだろうが，映像制作ではちゃんとできてくれないと不自然な絵になってしまうだろう。Ver.2ではそこまで対応できる。

　また，アニメではキャラクターごとに色指定が行われているわけだが，トゥーンシェーディングでべた塗りに近い絵ができたとしても，ちゃんとデザインした色になってくれないと統一が取れない。そこで，Ve.2では一般的なアニメと同様に，彩色の際にシャドウを2段とハイライトの色を設定していくような処理もできるようになっている。


　また，光源の位置に関わらず，必ず影が落ちる場所を設定できたりと，必ずしも物理的に正しくない仕様の影をつけることができるという。これはキャラクターの立体感を強調するためのものだそうだ。
　そのほか，特定の色の部分だけ環境光の影響を受けるようにしたりこともできる。顔などはそのままだが，衣服には反映されるといった感じだ。ちなみに，これはエヴェンゲリオンなどで知られる貞本義行氏が多用する手法とのこと。


　Ver.2には，前述の色指定によって制御する標準トゥーンシェーダと拡張トゥーンシェーダの2種類が用意されている。このように意図的に影を付ける場合には，標準トゥーンシェーダーでは，一定の部分に常に影が出るようにポジションマップで影を置いていく手法と，拡張トゥーンシェーダーで，影が非常にできやすい場所を設定するような手法が紹介されていた。


　そのほか，影の位置をずらして主線に強弱を付けたり，距離によって線の太さを変えたり，アニメでありがちな髪の毛よりも目の表示を優先したり，「天使の輪」を加えたりするような機能が備わっている。ちなみに，以前紹介した「オルタナティブガールズ」ではZ座標をいじって髪の毛よりも上に目を描くような処理がされていたが，Ver.2ではステンシルを使って髪の表示を抜くような手法が取られている。


　また，映像制作分野でセル調シェーディング時の主線処理に定評のある「Pencil+4 Line for Unity」にも対応しており，より高品質なアニメ調キャラクターを描画できるという。これはゲームで使えるようなものではないが（ほとんどCPU処理であるため12fpsくらいしか出ず，処理的にもゲームではオーバースペックとのこと），従来3ds Maxでしか使えなかったものが，Unityに対応したことで，より多くのツールで使える可能性が出てきたという。


　小林氏は，昨年のUniteのマーザアニメーションプラネットによる事例で紹介されたような，3DCGツールで作成したシーンを丸ごとAlenbic出力したものをUnityで読み込んでレンダリングするという手法を使えば，メインの3DCGソフトがなんであってもPencil+4 Lineの処理を使うことができるため，非常に強力な手法だと評価していた。ゲーム向きではないが，Unityでアニメ制作を試したい人は覚えておくといいかもしれない。
　ちなみに，UnityとPencil+4 Lineを併用するとどんなものができるのかの例では，「あんさんぶるスターズ！」のMVが紹介されていた。

Ver.2はどのように作られたのか

　機能紹介に続いて行われたのは，Ver.2がどのように作られたのかについてだ。テクニカルな話というよりもどういったコンセプトで設計されたのかを中心に解説されていた。
　まず小林氏は，トゥーンシェーダとは光の状態によってオブジェクトを塗り分ける処理だと定義した。ここで重要なのは「塗り分け」であり，それをどうやってやるものかということへの理解だ。すなわち，塗り分けとはなんらかのマスクを作成して領域を分けて別処理をすることであり，どこを塗ってどこを塗らないのかの判定に使用する「マスク」をいかに作っていくかが重要だという認識である。このマスクは，Photoshopなどで塗り分けを行うときに使うレイヤーのマスクと同じものという。


　ここで小林氏は，3つのベクトルを挙げて，ポリゴンの法線（ノーマル）ベクトル（＝面の向き）とそれぞれのベクトルの内積が持つ意味を示した。

　光源ベクトル
　視点ベクトル
　光源と視点の中間（ハーフベクトル）

　すなわち，光源に対して内積を取る処理は，その面の明るさ（光源由来）そのものであること，そして，視点ベクトルは輪郭部，ハーフベクトルはハイライトの位置を示すということを示していた。つまり，後者2つで輪郭部とハイライト部という場所の情報と，前者で影で重要になるどれくらいの明るさかという範囲を決めるための情報が手に入るわけだ。


　ただ，単に内積で光源からの明るさを求めると，光が当たらない側の占める面積が大きくて扱いづらい。そこで本来光源と90度を成す角度の明るさを0.5と置くように明るさをリマップする手法（ハーフランバート）が紹介されていた。これならばグラデーション範囲がほぼオブジェクトの全域にわたるため，制御可能な範囲が格段に広げることができる。


　塗り分けは，一定の濃度以上か以下かで処理が分けられる。ここはシンプルだ。ただし，単純な塗り分けだけでなく，境界線をグラデーション処理する境界ぼかしの機能も盛り込まれている。これにより，より豊かな質感を実現できるようになる。


　次に考えるのは，表示するキャラクターだけではなく，Unityのほかのオブジェクトから落ちてくる影など（システムシャドウ）をどう処理するかだ。
　システムシャドウについては，シェーダでLightAttenuationのノードを参照するだけで取得できるという。ただ，それを全体のどこで入れるかには注意が必要だと小林氏は注意していた。
　単純にキャラクターの影を付け終わって全体を合成するときに一緒に処理するようにすると，確かにほかのオブジェクトの影は落ちるのだが，本来そのオブジェクトが塗り分けようとしていた色ではなく，影が落ちた部分を単純に暗くした色で塗られてしまうのだ。


　よって，システムシャドウも直接影を落とすのではなく，その影を使ってマスクを作り，トゥーンシェーダの処理に加える必要がある。


　なお，LightAttenuationで得られた陰影の濃さは，ハーフランバートをベースにしていたこれまでの処理よりも急峻になるので注意が必要とのことだった。まあ，陰影を広げるためにハーフランバート処理で緩くしているわけだから，普通の陰影と合わないのは当然かもしれない。そこで，LightAttenuationも同様にリマップしたうえで合成してやる必要がある。


　こうしてシステムシャドウを加えたら，さらにシステムのGIも反映していく。これは先ほどの例とは逆に，トゥーンシェーダによる塗り分けにさらに影響を与える要素となるので，処理の後半，合成処理の部分で加えればよい。


　さらに輪郭線を付ければできあがりだ。トゥーンシェーダで輪郭線を作る手法にはいくつか種類があるが，Ver.2ではオブジェクトのノーマルを引っくり返して重ね描きをする手法が採用されている。この手法ではオブジェクトの輪郭部以外に線が入らないが，互換性が高く，線に変化を付けるなどの処理も行いやすい。オブジェクトの交差部や輪郭ではないエッジに出るクリース線については，あとから加えることもできると小林氏は話していた。
　ノーマル反転（面の向きを反転）して輪郭を作る手法については，こちらが参考になるだろう。


　UnityちゃんシェーダーVer.2はすでに公開されているが，最後に自分でシェーダをいじりたい人のためのTipsが紹介されていた。それは，複雑になりそうな部分は，一度結果を変数に代入して参照しろというアドバイスだった。あちこちから参照されるノードなどは，いちいち線をつないでいたら煩雑で分かりにくくなっていく。Setノードで変数化したものを，必要な箇所でGetノードで取得すれば全体にすっきりするとのことだ。


　トゥーンシェーディングで要求されるさまざまな要素を，明るさからマスク領域を指定して塗り分けるという処理に還元して実装していくというのは，ある意味非常に自然なものにも思える。しかし，それをまとめあげる過程では，数多くのトライ＆エラーがあったという。その成果は商用・非商用を問わずユニティちゃんライセンスの下，無償で利用できる。キャラクターゲームを作成する人，UnityのTimelineなどを活用してセル画調の映像制作をやりたい人などなど，みんなで感謝しつつ利用したいところだ。

Unityちゃん公式サイト