CEDEC2024ギルティギアトゥーンライン制御テクニック

本日の講演について

講演概要 背面法アウトラインの基礎と応用を身に着けよう 「背面法」によるアウトラインは20年以上の長い歴史のある手法ですが、現在も最前線の ゲームで採用され続けている、実戦的、効果的な表現手段です。 弊社の格闘ゲームタイトル「ギルティギア」シリーズにおいても、３Dビジュアルを採用す るようになってから輪郭線の描画はずっとこの手法を活用し続けています。 非常にメジャーな手法ではあるのですが、それだけにその理屈や仕組みをしっかりと理解し ないまま使用している人も多いと思います。本セッションでは「背面法」のアウトライン描画 の基礎、その理屈や仕組みをわかりやすく解説するとともに、そのポテンシャルを最大限活用 するための応用方法、直面しがちな問題とその解決方法を解説したいと思います。 モデラーはより意図したビジュアルの表現に近づくことができ、シェーダー作成者はどのよ うな要件を満たす必要があるのかについて理解を深められるのではないかと思います。 想定受講者: ・アニメ調のキャラクターモデリングに興味のあるモデラー ・アニメ調ビジュアル作成に興味のあるシェーダー作成者

講演者プロフィール 本村・C・純也 アークシステムワークス株式会社 リードモデラー / テクニカルアーティスト / 他いろいろ モデラー出身でシェーダーも書きたくてテクニカルアーティストに。 モデリング・リギング・シェーダー作成、講演とかいろいろ。 現在はテクニカルアートサポートおよびR&D、後進モデラーの育成を担当。 代表作： GUILTY GEAR Xrdシリーズ リードモデラー/テクニカルアーティスト DRAGON BALL FighterZ(バンダイナムコエンターテインメント) ディレクター/モデリング監修/テクニカルアーティスト DNF Duel(ネクソン) シェーダー、リグ基礎開発/モデリング監修

講演の流れ PART１: そもそも輪郭線とは何か。その役割 PART２: 主要な輪郭線手法の利点と弱点 PART３: 背面法による輪郭線描画の理屈 PART４:「マルチパスシェーダー」による背面法 PART５: GGシリーズにおける背面法実装の工夫 PART６: GGシリーズにおける背面法の表現テクニック

最初に シェーダー初心者～中級者向けの内容です 本講演は背面法シェーダーの具体的なコード内容については触れません。かわりに「何が起こっているの か」「どうすればそれを活用できるか」という「運用のためのノウハウ」にフォーカスします。 そのため、モデラーなど、シェーダーについては初心者の方でも問題なく理解できる内容になっていると 思います。一方で、背面法を活用するための様々な課題とその解決法については、シェーダー中級者にとっ ても益のあるお話ができると思いますのでお付き合いいただければ幸いです。 特定のエンジン、３Dソフトに依存しない内容です 背面法アウトラインはこれまでも様々な３Dソフトやゲームエンジンで活用されてきました。そのため、 本講演での背面法のノウハウはその大部分が特定のエンジンや３Dソフトに依存しないものになっています。 一部、ギルティギアシリーズで使用しているUnreal Engineでの実装例を紹介しますが、原理的には他エン ジンでもほぼ同様の対応ができる手法になっています。 ややハイペースで進めます スライドの枚数が多いのでテンポよく進めます。 資料は後日公開するのでメモなどは取らなくてもOKです。

Part１ そもそも輪郭線とは何か。その役割

「輪郭線」があったら、なかったら

輪郭線は「AとBの識別を助けるもの」 この例では、キャラクターと背景の間に 輪郭線が存在することで、「この範囲はキ ャラクター」「この範囲は背景」というの をよりわかりやすく見る人に伝える効果が 発生しています。 キャラクターの右肩付近を見ると顕著で すが、衣服の白と背景の白とが混ざりあっ てしまうのを、輪郭線が防いでくれている のがわかると思います。 逆に言えば、人間の視覚には「線」によ ってＡとＢを区別するという機能が備わっ ているということができるでしょう。

どっちが目に飛び込んでくる？ 新発売

「輪郭線」ってそもそも何？ 輪郭線は「強調」するための道具 日本語に「際立たせる」という言葉があ るように、「キワ」を「目立たせる」こと で特定の事物を強調、誇張することができ ます。 雑誌や新聞の見出し、広告などでは、大 きな文字に二重三重に強いコントラストの 色で輪郭線をつける強調表現が多用されて います。 これらはまさに「輪郭線」の持つ「強調 表現」を極限まで活用したものといえるで しょう。

まとめ 理由はさだかではありませんが人間の視覚は輪郭線に反応し、輪郭線はそれを利用し て物体の識別をしやすくする機能をもちます。そのため、輪郭線は図やイラスト、文字 の装飾などあらゆる形態で活用される表現手法となりました。 当然、ゲームにおいても同様です。むしろ、「AとBを識別」して瞬時になんらかの判 断をすることが多いゲームにおいては、輪郭線は特に有用な表現手段と言えます。

Part２ 主要な輪郭線手法の利点と弱点

主要な輪郭線手法 ポストプロセスアウトライン 背面法アウトライン ポストプロセスシェーダーで隣り合 うピクセルと深度情報や法線情報を 比較して輪郭部分を検出し、輪郭線 を描写する手法 頂点シェーダーなどでメッシュを一 回り大きく裏向きに再描画すること で輪郭線を作る手法 本セッションで解説するのはこっち

ポストプロセスアウトラインの概要 ポストプロセスの一種として、全画面を対象に適用できる処理です。 描画済みの画面上のピクセルの一つ一つについて、近隣のピクセルとの深度の差や、法線の差を 計算し、一定以上の差があればそこを抽出して、輪郭線として任意の色でラインを引きます。 メリット ・画面全体に対して常にほぼ一定の負荷、品質でかけられる ・カメラ距離が変わっても線の太さを一定に保てる ・法線が大きく変化するポリゴン同士が交差する部分にも ラインを描画できたりする デメリット ・部位ごとの線の強弱や色などの細かい調整が難しい ・ポスト処理なので３Dソフト上で確認、調整するのが難しい ・画面全体にかかるエフェクトなので「どこにラインを描画 するか、あるいはしないか」を細かく指定するのが難しい

背面法アウトラインの概要 同じオブジェクトを少しだけ膨らませて裏返したメッシュを重ねて描画することで、はみ出 した部分を輪郭線として表示させる手法です。 主に頂点シェーダーなどを使って同じメッシュを二回描画する手法を使うことが多いです。 メリット ・輪郭線を出す場所、出さない場所を個別に指定しやすい ・３Dソフト上でプレビューするのが容易 ・部位ごと、あるいは頂点ごとに輪郭線の太さや色を 調整しやすい デメリット ・ 処理負荷は表示する輪郭線ありオブジェクトの数で変動 ・線の太さを一定にたもつのに工夫が必要 ・ポリゴン同士が交差するいわゆる「めり込み」部分を 輪郭線として検出できない

ギルティギアシリーズで背面法を選んだ理由 「GUILTY GEAR Xrd」以降のアークシステムワー クスの３D格闘ゲームでは、輪郭線表現に背面法を選 択しています。 その主な理由は...... ●輪郭線の調整による表現の幅広さ シェーダー上の工夫により任意の部位の輪郭線を太くし たり細くしたり、色を変えたり、あるいは輪郭線をを部分 的にOFFにしたりできるため、目指しているアニメ調ビジ ュアルの再現に適していた。 ●３Dソフト上での再現、調整が可能 モデリング、モーションなどの作業中もゲーム中と同等 のビジュアルを確認しながら作業できるため、クオリティ 向上をしやすかった。 また、細かい輪郭線の調整そのものも３Dソフト内で完 結する形で作りこむことができ効率が良い。

Part３ 背面法による輪郭線描画の理屈

「背面法」の始まり 「背面法」が初めて登場したのは２０００年に発売されたSEGA社の 「ジェットセットラジオ」でした。細かな実装方法は時代によって変化していますが、 その基本的な原理は２０年以上変わらずに様々なゲームで活用され続けています。 ©SEGA (2000) 「JET SET RADIO」 (ドリームキャスト)

「背面法」を理解するための基礎知識：表裏① ポリゴンには「表」と「裏」があります。多くの場合、ポリゴンメッシュは 「表」だけを表示する設定になっています。この設定ではカメラがメッシュの内 側に入ってしまった時など、裏から見たポリゴンは表示されません。 メッシュの外側からはポリゴンの「表」 が見える メッシュの内側に入ると、ポリゴンを「裏」 から見ることになるので表示されなくなる GIF

「背面法」を理解するための基礎知識：表裏② ポリゴンメッシュはシェーダー側の設定によって、「表面だけ表示」 「背面だけ表示」「両面表示」の中から、どの設定で描画するかを選べます。 「表面だけ表示」では、裏 を向いた面は表示されない 「背面だけ表示」では、裏 を向いた面だけ表示される 「両面表示」では、表裏ど ちらの面も表示される

「背面法」を理解するための基礎知識：表裏③ 「表面だけ表示」に設定されたメッシュと、それよりも一回り大きな「背面だけ表 示」に設定されたメッシュの二つを重ね合わせると、下図のようになります。 表面 背面 合体 この時点で、ある程度「背面法」の理屈が垣間見えてきたのではないでしょうか。

「背面法」を理解するための基礎知識：表裏④ 「背面だけ表示」のメッシュのほうがほんの少し大きい場合、そのはみ出した分 だけが余分に表示されます。このはみ出した部分を輪郭線として利用するのが 「背面法」の基本原理となります。 ラインになる部分 表面 背面 GIF カメラ カメラから見てはみ出た部分がラインになる

「背面法」を理解するための基礎知識：法線 どうやって「一回り大きなメッシュ」を得るかというと、オリジナルのメッシ ュを「法線」の方向に一定量膨らませることで用意します。 「法線」というのは、メッシュを構成する一つ一つの頂点がそれぞれどっちを 向いているのかという方向です。 メッシュを構成する頂点それぞれが もつ「向き」と考えればOK 「法線方向」に少し膨らませること で、一回り大きい形を得られる

「背面法」のための基礎知識：メッシュ複製 一回り大きなメッシュの作り方について、３Dソフト上で手作業でメッシュを複製し て加工してもいいのですが、それだとポリゴン数や管理コストが増えてしまいます。 手作業でやるとめんどくさいしヒューマ ンエラーも発生しがち シェーダーの機能で膨らませて 再描画したほうが描画も工数も軽い これを解決できる「マルチパスシェーダー」という方法があるので紹介します。

Part４ 「マルチパスシェーダー」による 背面法

シェーダー基礎知識① 通常、シェーダーは主に「頂点シェーダー」と「ピクセルシェーダー」に別れます。 ※ピクセルシェーダーはフラグメントシェーダーと呼ばれることもあります 頂点シェーダー ピクセルシェーダー 形を決める！ 色を塗る！ ※概念図 そのメッシュがカメラ内でどの位置 に表示されるかを計算 ライト方向やテクスチャから最終的 な色を計算

シェーダー基礎知識② 「頂点シェーダー」内で各頂点を法線方向に押し出すようにコードを書くことで、描 画するメッシュを一回りふくらませることができます。 法線方向に 押し出す さらにこのメッシュについては「背面のみ表示」に設定すると 輪郭を構成する背面メッシュの用意ができます。

二つのメッシュで背面法 「中身」を描く本体メッシュと、「輪郭」を描く背面メッシュを用意して、二つ を重ね合わせると、「背面法」による輪郭線付きのビジュアルが得られます。 本体メッシュ 色！ 形！ 合体！ 背面メッシュ 色！ 形！ でもメッシュを二つ用意する のって効率悪いよね......

マルチパスシェーダーの基本① おおざっぱに図解すると普通のシェーダーはこんな感じに処理が行われます。 そのフレームに 表示したい メッシュデータ （ボーン変形済みのメッ シュ形状など） 頂点シェーダー ピクセルシェーダー 画面内の頂点の位置 を決める処理 ピクセルの色を決め る処理 （カメラ位置、頂点位置オフ セットなど） （ライティング、テクスチャ など） いわゆる「シェーダー」と呼ばれてる処理 フレーム を表示

マルチパスシェーダーの基本② 「マルチパス」シェーダーを使うと、同じメッシュを設定を変えてもう一回描画することがで きます。GGシリーズの「背面法」のアウトラインはこの手法で作られています。 パス１：まず本体メッシュを描画 二つの描画結果が 重なって表示される そのフレームに 表示したい メッシュデータ （ボーン変形済みのメッ シュ形状など） ※２回描画するけど、ボ ーン変形の計算は 一回だけでいいので メッシュを二つ持つより も安上り！ 頂点シェーダー ピクセルシェーダー パス２：次に「背面メッシュ」を描画 メッシュ一個で 背面法輪郭線が実現！ 頂点シェーダー ピクセルシェーダー

マルチパスシェーダーのエンジンへの実装 残念ながらUnreal Engineにはデフォルトでマルチパスシェーダーを扱う仕組みがありま せん。そのため、エンジン改造によってマルチパスでレンダリングをできるように手を加え る必要がありました。 このマテリアルを... このマテリアルで もう一回描画して！ エンジンにインポートしたキャ ラクターメッシュのマテリアル設 定内で特殊な設定を行うことで、 「任意のマテリアルを、別のマテ リアルでもう一度描画」 する仕組みが実装されています。

マルチパスシェーダーを扱える環境 ここまでマルチパスシェーダーの解説を行ってきましたが、実はこのマルチパスシェーダ ーを扱えるかはどうか環境によります。ゲームエンジンや３DCGソフトによってレンダリン グのパイプラインが異なるためです。 マルチパスシェーダーを使える３ＤＣＧソフト マルチパスシェーダーを使えるゲームエンジン MAYA 〇 Unreal Engine △（要改造） ３DSMAX 〇 UNITY 〇（HLSLかCGFXのみ） Softimage 〇 GODOT ？（未検証） Blender ✕ ※プレビュー画面でのリアルタイム描画

マルチパスシェーダーまとめ ・特殊なシェーダーの描き方をすれば、一つのメッシュを違う設定で２回描画できる ・一回目の描画をトゥーン、二回目の描画を背面輪郭線とすれば「背面法」が可能 ・ボーン計算は一回ですむからお得！ ・メッシュを二つ持たなくていいから管理コストもメモリコストも効率よい ただし...... ・使える環境は制限あるので注意 ・UnrealEngineで使うには改造が必要だった ・「背面法」を使う上で必須ではない

Part５ GGシリーズの背面法実装の工夫

GGシリーズにおける背面法の実装の工夫 「背面法」の理屈がわかったところで、実際にギルティギアシリーズにおいて背 面法がどのように実装されているのかを紹介していきます。 ２０００年に登場してから多くのゲームで活用され続けている「背面法」です が、各タイトル毎の具体的な実装の仕方は当然ひとつひとつ異なります。 原理は同じでも、実装の仕方の部分ではタイトル毎にさまざまな独自の工夫が されています。当然、ギルティギアシリーズでも多種多様な工夫をしています。 背面法の基本の原理は比較的シンプルなものですが、それゆえに実際に製品に 組み込んで表現に用いるためには、様々なエッジケースへの対応を自前で実装し ていく必要があります。 このパートでは、背面法を実装するうえで立ちはだかるさまざまな問題と、そ れぞれの解決法について、ギルティギアシリーズでの工夫を紹介していきます。

実装の工夫① 大前提：再限度の高いプレビューシェーダー

大前提：再限度の高いプレビュー環境 背面法の大きなメリットの一つが、適切なシェーダーを用意すれば３DCGソフト上でもゲーム中 と同等のアウトライン表現が実現できるところです。 モデラー、アニメーターが「最終結果がどうなるか」を常に確認しながら作業できること、そし て３ＤＣＧツール上で行った調整がゲームにもそのまま反映されることはクオリティを追及するう えで計り知れないメリットがあります。 アークシステムワークスの３D格闘ゲームタイトルではこれを実現するために、各３ＤＣＧ ツール用にゲームエンジンと同等の描画結果が得られるプレビューシェーダーを用意しています。 Softimage Unreal Engine Maya

実装の工夫② どんな構図でも安定した線の太さを実現する

どんな構図でも安定した線の太さを実現する 背面法で描画するアウトラインですが、実際に画面上に表示するうえでどのくらいの 「太さ」のアウトラインを出すべきかというのは避けて通れない課題です。 背面法では、シェーダー内の処理で背面用のメッシュを押し出して輪郭線を作りますが、 では実際にどのくらい押し出せば適切なのでしょうか？ 簡単そうに見えますが、様々な要素が絡み、結構気を使わないといけない問題です。 何mm押し出す？ １mm？ ２mm？ それとも１ｃｍ？

アップでもロングでも適切な太さ？ 最初に直面するのがカメラとの距離の問題です。 顔アップの構図の時と、格闘ゲームのバトル時のような全身が映るロングの構図の時とで は、適切な輪郭線の押し出し距離が変わってきます。 アップ時の顔の輪郭の太さは１~３mm程度？ ロング時の太さは７~１０mm程度？

もしカメラ距離によって太さを変えなかったら もしも、カメラとの距離は考慮せず、常に一定の太さの背面法アウトラインだけで済ませよ うとすると、どうしても齟齬が出てきます。「ロング時に合わせたな太さ」でアップにすると 線が太すぎたり、逆に「アップの時の太さ」をロングで映すと線が細すぎたり。 ロング時の線の太さ１０ｍｍでアップにした場合 アップ時の線の太さ２ｍｍでロングにした場合

解決法：距離に比例して輪郭線の太さを変える この問題を解決するためには、シェーダー内の処理でカメラと頂点の間の距離に比例して背 面メッシュの押し出し距離が大きくなるようにします。 こうすることで、アップの時は背面メッシュの押し出し距離が相対的に短く、距離が離れる につれて背面メッシュが大きく押し出されるようになります。結果として、アップ、ロングど ちらの構図でも画面上で適切なピクセル数の線の太さを得られるようになります。 視点からの距離に応じて押し出し距離を変える これで万事解決！......ではない！

ちょっと待て！距離だけじゃない！FOVも！ FOV（Field Of View）＝視野角は、おおざっぱにいうとカメラの視界の幅です。 対象までの距離が同じでも視野角が違えば、見える範囲が変化し、それにつられて被写体も 大きく映ったり小さく映ったりします。 カメラ距離：９m FOV：５５° カメラ距離：９m FOV：１５° 上図にて、カメラと被写体の距離が一定でも、FOVの違いによって被写体の大きさが違って見え るのがわかると思います。背面法アウトラインでは、この差にも対応しないといけません。

FOVによるズームインで発生する問題 FOVを絞ることで遠いキャラにズームインした場合、特に工夫しなければ輪郭線は太く表示 されてしまいます。カメラからの距離を考慮して押し出し幅を変えているからです。 FOV：35° 距離：9m FOV：8° 距離：9m ズームイン！ カメラ距離による調整とは別に、FOVによっても押し出し幅を調整する必要があります。

FOV問題への対策：三角関数で解決 FOVに合わせた適切な線の幅を求める一つの方法は三角関数を用いることです。都合のいい ことに距離と角度から幅を求める「そのものずばり」な式があります。 この式でカメラ距離とFOVの両方を加味した適切な線の太さを求めることができます。 B アウトラインの 押し出し幅 要はカメラからの距離Aに tan(FOV/2)を乗算するようにシェーダ ーを組んでやれば良いわけです。 θ カメラ A （距離) メッシュ B＝Atan(θ) ※FOVを扱う上での注意 ３DCGソフトのシェーダーや、ゲームエンジンのマ テリアルでカメラのFOVの値を取得するのはちょっと ややこしいので注意が必要です。 一つの方法は、ゲームのプログラム側で計算量の高 いtan(FOV) を事前に計算しておいてから、その結果 だけをシェーダーに渡すというものです。 他にカメラのプロジェクションマトリクスからFOV を算出する方法もあります。(1 / Proj[0][0]など)

FOV問題解決 距離とFOVによる線の太さの調整が正しく実装されれば、カメラを近づけた顔アップの時も、 FOVを絞ることで作った顔アップのどちらの場合でもアウトラインの太さを安定して描画する ことができるようになり、演出の幅が広がります。 距離：60cm 距離：60cm FOV：55° FOV：55° カメラを近づけた顔アップ構図 距離：350cm 距離：350cm FOV：10° FOV：10° FOVを絞った顔アップ構図

実装の工夫③ 頂点カラーで輪郭線の太さを調整できるように

頂点カラーによる輪郭線の太さ調整 太い 細い 太い 細い 普通 ギルティギアシリーズでは頂点カラーのアルファチャンネ ルの値で、背面メッシュの押し出し量を調整できるようにシ ェーダーが作られています。これにより、ペン画のような強 弱のある線の表現が可能になります。 背面法のメリットの一つが、このような頂点単位での線の コントロールです。 強弱だけでなく、「線 を出したくない所」は線 の太さを０にすることで 意図しない描線を排除す ることもできます。 まぶたや睫毛の立体な ど、あえて輪郭線を出し たくない部位も多くある からです。

頂点カラーで輪郭線の太さを制御する 頂点カラーは「１.0」以上の値を入れられないので、ラインを通常よりも「細くする」「太 くする」両方の調整を行うためにGGシリーズの実装では「0.5」を基準としています。 「0.1」など「0」に近づくほど細くなり、逆に最大値の「1.0」に設定するとデフォルトの 倍の太さに設定することができる、という感じです。 頂点カラーα「0.0」 線なし 頂点カラーα「0.5」 標準 頂点カラーα「1.0」 最大

部位毎の頂点カラーによる輪郭線の太さ調整 部位ごとの特性に併せて輪郭線の太さを調整するのが重要です。 髪の毛や羽毛などの繊細なものや、入り組んだ形状の小さなパーツなどは意図して輪郭線を細 くしたりします。逆に筋肉などボリューム感を強調したい部分は太くしたり。 この辺の強弱のつけ方は手書きイラストや漫画における線描のテクニックと重なる部分が多分 にあります。どの媒体でも「見やすく表現する」という目的は同じだからです。 毛先などデリケートな部分は細め 細かいパーツも細くしておく 筋肉などはボリューム感を強調

実装の工夫④ 背面メッシュを「奥」にずらせるようにする

アウトラインの描画深度を調整できるようにする キャラクター表現を行う際にはアウトラインを「出す」ことと同じくらい意図しない部分に 「出さない」ことも重要になります。「表現としてここには線を出したくない」というケースに も対応できるようにしておく必要があるわけです。 幸い、背面法のアウトラインはシェーダーでの記述次第で頂点単位でアウトラインの表示をい じることができます。キャラクターの任意の部位のアウトラインを出したり出さなかったり、あ るいは、「一番外側の輪郭部分だけに線を出す」ように設定することができたりします。

アウトラインメッシュを「奥」にずらす 「一番外側のアウトラインだけ残す」処理は、実は結構シンプルです。アウトラインを構成す る背面メッシュを、頂点シェーダー内で実際の位置よりも「奥に」あるものとしてレンダリング してあげれば実現できます。これはシェーダーで各頂点のDepthの値をずらすことで実現でき ます。アーティストにわかりやすい表現に言い換えると、 「カメラの視線方向に背面メッシュをずらして描画」するのとほぼ同じです。 通常の描画 アウトライン用の頂点を奥にずらして描画 メッシュ カメラ アウトライン用メッシュ 結果、一番外の輪郭だけが残って見える

背面メッシュを「奥」にずらす処理 「背面メッシュを奥にずらす」処理をかけることで、任意の場所に「線を出したり」「出さな かったり」を設定できるようになります。 ギルティギアシリーズでは、どの部 位の線を出すのか、あるいは出さない のか、は頂点カラーのBチャンネルを 使って指定できるようになっています。 左図の例では、髪の毛の部分だけ頂 点カラーBをいじって、「一番外の輪 郭」を残して髪の毛のアウトラインが 描画されないように設定しています。 通常の表示 髪の部位だけ頂点カラ ーを編集

実装の工夫⑤ ハードエッジ、カスタム法線の問題と解決法

ハードエッジの問題 背面法では「法線」の方向にメッシュを押し出すことで輪郭線を描画します。この時、法線が ハードエッジに設定されていたり、ライティングを調整するために法線がカスタム化されてたり すると、その結果が輪郭線用のメッシュを押し出す方向に影響を与えてしまいます。 特にハードエッジの場合は、ポリゴン毎に法線が異なる方向を向くため、押し出されたメッシ ュがバラバラになってしまい、輪郭線もとぎれとぎれになってしまいます。 ハードエッジはシャープな陰影が 得られるが、これは法線がポリゴ ンごとに別方向を向いているため 法線がバラバラなので、押し出さ れた背面メッシュもバラバラにな ってしまう 背面メッシュがバラバラだと、 アウトラインに途切れる箇所が 発生してしまう

カスタム法線の問題 トゥーンシェーダーを用いた３D表現では、法線を編集することで陰影のラインティングをコン トロールする手法がよくとられます。この法線の編集は、実は背面法による表現と相性が良くあ りません。ライティングのために編集されたカスタム法線が、必ずしも適切な背面メッシュの押 し出し方向になるとは限らないためです。 法線を 球状に編集 ポピュラーな「球状法線の焼き付 け」手法で表現された髪の陰影 この法線の向きに 押し出しても ラインにならない 部分がある 結果、背面の押し出し方向も影 響を受け、内側に線が出ない！

ハードエッジやカスタム法線の解決法 ハードエッジはシャープな陰影 しかし線は途切れる 非ハードエッジは線はつながるが陰影を シャープにできない ＋ なんとか両方のいいとこどりをしたい！ ＝ この問題の解決法の一つが「法線を二つ持つ」こと。つまり、ライティング用の法線とは別に、 背面法のための法線を用意して、その二つを使い分けるという手法です。 法線を二つ持つことで、ライティング時にはハードエッジやカスタムされた法線によるデザイ ンされた陰影を表現でき、背面法メッシュ生成時には線が途切れないようにスムーズな法線を使 う、という「いいとこどり」が可能になります。

「二つ目の法線」で解決された結果 ライティング用 法線で描線 第二の法線 で描線 第二の法線によって、線の途切れや押し出し方 向の不備が解消されている ライティング用 法線で描線 第二の法線 で描線

二つ目の法線？どうやって？ しかし一般的なゲームエンジンでは、このような「二つ目の法 線」はデフォルトではサポートされていません。 ギルティギアシリーズでは「タンジェント」のパラメータを 「第二の法線」として扱うことでこの問題を解決するアプローチ をとっています。 「タンジェント」は、主にノーマルマップなどを表現するため に、各頂点が持っているパラメータです。アークシステムワーク スの格闘ゲームのトゥーンシェーダーではノーマルマップを使用 しないため、この「タンジェント」のパラメータが好都合にも使 われずに宙ぶらりんになっていました。 これを利用し、メッシュインポート時に、「タンジェント」の パラメータに、再計算された第二の法線を上書きすることで、実 質的にシェーダー内で二つの法線を使い分けられるようになりま した。（ただし、これはエンジンの改造を要します） メッシュインポート時に再計 算した法線をタンジェントに 上書きする（要エンジン改造）

なんでタンジェント？ タンジェントをではなく、法線パラメータをあらかじめ頂点カラーに格納しておく、という方 法も考えられますが、実は問題があります。 通常の法線はボーンの変形に追随して変化しますが、頂点カラーに格納された法線データはボ ーンの変形に追従しないため、アニメーションさせると法線がついてこないのです。そのため、 ボーンによる変形が起こるとライティングやアウトラインの押し出し方向がマッチしなくなって しまいます。 法線はライティングに使うので ボーンと一緒に回転する 頂点カラーに入れた値はボーン の回転についていかない タンジェントは法線と同じく ボーン変形の影響をうける その点、タンジェントはもともと法線と同じくライティングに使用するため、ボーンの回転の 影響を受けて毎フレーム変化します。そのため、第二の法線として扱うのに適しているのです。

GGシリーズの背面法実装の要点まとめ ・３DCGツールでもゲームエンジンでも同じ見た目を得られるプレビュー環境 ・どんな距離やFOVでも安定した線の太さを得るための工夫 ・頂点カラーで線の太さを調整できる工夫 ・頂点カラーで線を「奥」にずらせるようにする工夫 ・ハードエッジ、カスタム法線でも線が崩れないよう「第二の法線」を持つ工夫

Part６ GGシリーズにおける背面法の 制御テクニック

背面法のポテンシャルを活かす「運用」 ここまで、アークシステムワークスの格闘ゲームにおいて背面法の機能がどの ように「実装」されているのかを紹介してきました。しかし、機能は「実装」さ れているだけでは不十分です。その機能のポテンシャルを引き出す「運用」のテ クニックも同時に非常に重要となります。 このパートではここまで紹介してきた背面法の機能を活用して望む表現を行う ための細かな制御テクニックを二つ紹介していきます。 ①余計な線が出ないようにする ②重要テクニック：「背面を閉じる」

意図しない線が出ないようにする

意図しない線が出ないようにする 特に顔などで、意図していないところにラインが出てしまうと困ってしまいます。特定の表 情、特定の角度、特定の距離など、思わぬタイミングで余計なラインが出てしまうということ はできれば避けたいところです。頂点カラーの編集で局所的に背面メッシュを「奥」にずらす 機能は、このような問題を回避することにも使えます。 意図しない部分に線が出てしまった！ その部分の頂点カラーを調整！

線を消す仕組み 顔部分を上から 見た図 ラインとして 見える背面 カメラ カメラから見て頂点を 奥にずらすことで線が 出ないようにする カメラ 先に説明した頂点カラーを使って「奥にずらす」機能を活用すれば、局所的にラインが出ないように調 整することができます。 単純に線の強弱で消した場合と違い、ずらす方向はあくまでもカメラから見て「奥」なので、一番外の 輪郭は残ることに留意してください。

布の裏地がはみ出ないように「奥」にずらす 揺れ物などの布の一部が大きくひねられた時に、布の裏地のアウトライン用メッシュが表面 を貫通して汚いビジュアルになってしまうことがまれにあります。これも頂点カラーの編集で 裏地の部分だけ、アウトラインを「奥」に飛ばすことで予防することができます。 GIF 布を動かすボーンが強くねじられた結 果、布の裏地のアウトラインが貫通し てしまうことも GIF 裏地部分の頂点カ ラーを調整 裏地部分はアウトラインが「奥」にし か出ないように設定しておけば貫通を 未然に防ぐことが可能

意図して線を出すテクニック

線が「浮いて」しまう問題 背面法のアウトラインの弱点として、入り組んだ形状では角度によって「谷」の部分の線が 「浮いて」見えてしまうことがあります。背面用のメッシュを法線方向に押し出すという原理 を理解していると、なぜこうなるのかということが説明できます。 GIF カメラ 隙間 角度によって入り組んだ部分のラインが 「浮いて」見えてしまっている例 ラインとして 見える部分 押し出された背面メッシュと本体の間に実際に 隙間があるためラインが「浮いて」見える

線が「浮いてしまう」問題の解決法 押し出された背面メッシュと本体の間に隙間があるのが「線が浮いてしまう」問題の原因で す。なので、この部位の頂点カラーの値を０にしてこの隙間を「閉じて」やれば、この問題は 解消できます。 GIFGIF 頂点カラーで、この部分の背面メッシュの厚み を０に設定し、「背面を閉じる」 頂点カラーの調整によって線が「浮いて」 しまう問題を解消

「背面を閉じる」技法の活用① シワを閉じる この「背面を閉じる」ことでライン描画を保証する技法はさまざまに応用が可能です。 線が「浮いて」 しまっている 頂点カラー：0.5 「背面を閉じる」 ことで解決 頂点カラー：0.1 衣服のシワの「谷」の部分の輪郭線の厚みを減らして「背面を閉じる」ことで、意図せず線 が「浮いて」しまうのを防げる

「背面を閉じる」技法の活用② 筋肉の谷を閉じる 同様に、筋肉の隆起の「谷」に相当する部分も、「背面を閉じる」ことでラインが整理されま す。調整するとしないとでは描線のキレイさには大きな差が出ます。

「背面を閉じる」技法の活用③ 開口部を閉じる カメラ 開口部の近くで頂点カラーを０にして「背面を閉じる」 手袋、衣服のソデ、スソなど筒状の構造では、開口部に近い 部分で「背面を閉じる」ことでフチ部分に安定したラインを引 くことができます。

「背面を閉じる」技法の活用④ 浅い角度で線を出す 顔部分を上から 見た図 ラインとして 見える背面 カメラ GIF 同じように男性キャラクターの鼻筋の側面などに「背面を閉じる」部分を作ることで、浅い角度でもラ インが出やすくするように設定することができます。意図して「立体を強調」するようなときに非常に効 果的なテクニックです。

背面法の制御テクニックまとめ 「背面法」などのアウトラインを描画するテクニックは多くの場合「自動的に」ラインを引いて くれる便利なものととらえられています。しかし、「自動的」に引かれたラインは、常にアーテ ィストの思った通りの線になってくれるわけではありません。 意図しない部分に線が出たり出なかったり。あるいは「この角度から見たときに線を出した い！」という時に線が出てくれなかったり。そのような線の見え方を「制御」して、意図したと おりの見た目を作れるようになって初めて、「表現」と呼べるものになるのではないかと考えて います。 そして今回紹介した頂点カラーを用いた制御テクニックは、モデラーが「背面法」の特性を理 解していて初めて可能となります。 モデラーが仕組みを理解した上で調整をしていること、そしてシェーダーを作る人が最終的な 表現の要求を理解していること。この両方がそろうことで、より良いクオリティのビジュアルの 追及が可能になります。

この講演のまとめ

この講演のまとめ 技法が発明されてから２０年以上がたちますが、「背面法」アウトラインは今も NPRビジュアルの最前線を支える手法として活用され続けています。 基本となる原理はわかってしまえばシンプルなものではありますが、それを効果的 に表現に落とし込むには様々な工夫と応用が必要なことがわかっていただけたかと思 います。 背面法を使って表現を行うモデラーは、その技法の原理や実装の仕組みを知ること で、より効果的な運用ができるようになるかと思います。 また背面法のシェーダーを実装するテクニカルアーティストやプログラマーも、背 面法を使ってモデラーがどのような表現を行いたいのかの勘所を知ることで、より適 切な実装が可能になると思います。 技法を使う側、実装する側、その双方が技法の根本原理と、そこから派生する様々 な制約や特性を知っておくことは、最終的な表現のクオリティを高めるうえで大いに 有益です。 このセッションがその一助になれば幸いです。