1.はじめに
株式会社セガ 技術本部 技術統括室 ソフトシステムセクションの西濱 高志と申します。 今回の記事では『ファンタシースターオンライン2 ニュージェネシス』におけるトゥーン表示対応について紹介いたします。
2.目次
- 1.はじめに
- 2.目次
- 3.前置き
- 4.トゥーンレンダリングとは？
- 5.『NGS』におけるトゥーン表示対応について
- 6.トゥーン用の顔データの作成について
- 7.その他の対応
- 8.調整するパラメータについて
- 9.まとめ
- 10.最後に
3.前置き
記事内の画像は開発時のゲーム画面となります。実際にリリースされているゲーム画面とは異なるところもありますので、あらかじめご了承下さい。
また、表記として『ファンタシースターオンライン2 ニュージェネシス』のことを『NGS』、『ファンタシースターオンライン2』のことを『PSO2』と呼称することにします。
トゥーンレンダリングに関する最新技術の話はありませんが、何かしら参考になれば幸いです。
4.トゥーンレンダリングとは？
トゥーンレンダリングとは、コンピュータグラフィックスにおいてアニメ風、広くは漫画やイラスト風の作画でレンダリングする手法のことを言います。 セルシェーディングとも呼ばれ、ゲームの表現において個人、企業問わず採用する例が増えています。
トゥーンレンダリングを実現する上で、重要な要素となるのが「陰影のマルチトーン化」と「アウトライン表現」の2点になります。
4.1.陰影のマルチトーン化
トゥーンレンダリングにおける陰影は、物理的な計算を解いて表現するフォトリアルな陰影とは違い、デザイナー(アーティスト)が指定、調整した色で陰影も表現されることが多いです。
一般的な実装としては色の段階を設定したテクスチャ(ランプテクスチャ)を用意し、陰影の表現に使用する形が多いです。
しかし陰影を段階的にする都合上、人間の顔など複雑な凹凸がある物体では陰影が綺麗にならないことが多いです。 このため、トゥーンレンダリングでは物体の法線を調整して陰影を綺麗にし、アニメのような表現に近づけるといった工夫がされています。
この記事では、このようなトゥーンレンダリングにおける陰影の段階化を「陰影のマルチトーン化」と呼称することにします。
4.2.アウトライン表現
イラストやアニメにおける、「線画」を表現するため、アウトラインの表示もトゥーンレンダリングでは重要な要素になります。
実装方法としては、「背面法」と「輪郭線の抽出」の二つがあります。 「背面法」とは対象のモデルについて頂点を法線方向に拡大して裏面を描画した後、通常の描画を上塗りすることでアウトラインを表現する手法になります。1
「輪郭線の抽出」とは、レンダリング途中で生成した深度情報等をもとにフィルタ処理をすることで輪郭線の抽出を行い、アウトラインを描画する手法になります。 下記図は、出力された画像に対してSobelフィルタを用いてアウトラインを描画する例になります。
それぞれ特徴があり、まとめると下記のようになります。
| 手法 | クォリティ | 処理負荷 | モデルデータの改良 |
|---|---|---|---|
| 背面法 | 高 | 描画する物体が多くなるほど高くなる | 必要 |
| 輪郭線の抽出 | 低 | 描画する物体に関わらずほぼ一定 | 不要 |
このため、プレイヤー等、描画する物体が少ない場合はクォリティが高い「背面法」、背景や小物など描画する物体が多い場合は処理負荷を抑えられる「輪郭線の抽出」と使い分けをすることが、最近のゲームでは多いです。
5.『NGS』におけるトゥーン表示対応について
『NGS』では、元々トゥーンレンダリングを想定してモデルデータを作成していません。 このため、いくつか異なるアプローチで実装する必要がありました。 ここでは具体的にどのような実装をしたのかについて紹介いたします。
5.1.『NGS』のレンダリングシステムについて
『NGS』では、不透明の描画について「ディファードレンダリング」を行い、半透明、カットイン画面で「フォワードレンダリング」を行うという実装になっています。 通常のレンダリングパスを図にしたものが下記になります。
また、描画したGBufferの内容が下記になります。
前述したように、モデルデータがトゥーン表示用のものではないので必要な情報を適宜GBuffer等から取得して、活用していくことで実装しました。 最終的なトゥーン表示におけるレンダリングパスが下記になります。
5.2.拡散反射光(陰影)のマルチトーン表現
最初に拡散反射光(陰影)のマルチトーン表現について説明します。 前述したように、拡散反射光(陰影)のマルチトーン表現を行う際はランプテクスチャを用意して、陰影付けを行うのが一般的です。
しかし、『NGS』の既存のモデルデータにランプテクスチャを追加するのは難しく、GBufferにモデル毎のランプテクスチャの値を入れるための容量もありません。 なので、一律のパラメータを用意し、計算で陰影付けを行いました。
具体的なパラメータは下記になります。
struct ToonDiffuseParameter
{
float brightness; //!< 陰影の明るさ
float subsurface; //!< どの程度表面下散乱の色(血の色)を使用するか
float threshold; //!< どの段階から暗くするか
float gradation; //!< どの程度陰影をくっきりさせるか
}
ToonDiffuseParameter m_diffuse_bright; //!< 明るい部分のパラメータ
ToonDiffuseParameter m_diffuse_middle; //!< 中間部分のパラメータ
ToonDiffuseParameter m_diffuse_dark; //!< 暗い部分のパラメータ
これらのパラメータを用いて、陰影を3段階に分けています。
『NGS』の拡散反射光は「Lambert BRDF」を使用しています。 このため、トゥーンレンダリングにおいてもモデルの法線とライトの内積値を元に、陰影を3段階に分けて陰影付けに使用しています。 実際にパラメータを調整すると下記のように陰影の調整ができます。
また、GBufferにどのシェーダを使用しているかの情報(ShaderID)を格納しているため、陰影をつけている物体の判別ができます。 これを用いて『NGS』では「毛髪用のパラメータ」と、「それ以外のパラメータ」の二つを用意して別々で調整ができるようにしています。2
5.3.鏡面反射光(スぺキュラ)のマルチトーン表現
次にスぺキュラのマルチトーン表現について説明します。 トゥーンレンダリングのスぺキュラ表現では、ワンポイントで表現することが多いかと思います。 実装方法としては、「スペキュラ自体をテクスチャに描きこむ」、或いは「スぺキュラマスクを用意して指定した箇所のみスペキュラを描く」等があります。
しかし、『NGS』ではゲーム中に登場するNPCの「グレン」のように、顔の色がほぼ黒色のキャラクターを作ることができます。 このようなキャラクターは前述した、「拡散反射光(陰影)のマルチトーン化」をしても陰影ができず、真っ黒になってしまうといったことが発生しました。
このため、『NGS』でも「陰影のマルチトーン化」と同様に「スぺキュラのマルチトーン化」を行うことで、黒色のキャラクターでもアニメ調のような陰影が見えるように実装を行いました。 下記が調整するパラメータになります。
struct ToonSpecularParameter
{
float brightness; //!< スペキュラの明るさ
float exponent; //!< スペキュラの広がり
float gradation; //!< どの程度くっきりさせるか
}
ToonSpecularParameter m_specular_bright; //!< 明るい部分のパラメータ
ToonSpecularParameter m_specular_middle; //!< 中間色のパラメータ
ToonSpecularParameter m_specular_dark; //!< 暗い部分のパラメータ
基本的には「拡散反射光(陰影)のマルチトーン化」とほぼ同じような処理でスぺキュラを3段階に分けて描画しています。
実際にパラメータを調整すると下記のような表示になります。
特にパラメータの調整では黒色のキャラクターでも真っ黒な顔にならないようにしつつ、キャスト(ロボット)等の金属の光沢がカッコよく表現できるように調整しました。
また、スペキュラのマルチトーン化は「肌」、「毛髪」、「その他」で別のパラメータを調整しています。
5.4.アウトライン表現
次に、「アウトライン表現」について説明します。 前述したように、トゥーンレンダリングのアウトライン表現では「背面法」と「輪郭線の抽出」の二つが手法としてあります。 『NGS』では、下記のような制約があり「背面法」を採用することができませんでした。
- モデルについて、片面しかないモデルやハードエッジを使用しているモデルがあり、法線方向に拡大した時にアウトラインがひび割れてしまう等、不自然な描画になってしまうことがある。
- 多数のプレイヤー、NPCをトゥーン表示にする必要があり、「背面法」では処理負荷が高くなってしまう。
- 半透明のアウトラインについて対応することが難しい。
このため、「輪郭線の抽出」を用いてアウトライン表現を実装しました。
5.4.3.輪郭線の抽出
『NGS』ではGBufferのうち「深度」、「法線」、「マテリアル」情報を用いて輪郭線の抽出を行いました。 処理としては、近傍の値と比較して一定以上の差異がある場合、アウトラインを描画するという内容になります。
また、ShaderIDを用いて、「顔と毛髪以外は法線によるアウトラインを使用する」、「毛髪のみ、マテリアルによるアウトラインを使用する」と、カテゴリ毎に分けて使用することで、アウトラインを描画するようにしました。 下記が、それぞれの情報を用いて輪郭線の抽出を行った結果になります。
パラメータとしては、アウトラインの太さや色を調整できるようにしました。 特にアウトラインの色については、近傍の色を元に明度と彩度の調整をすることで色トレスができるようにしています。 また、これらのパラメータは「肌」、「毛髪」、「その他」で調整ができるように実装しています。
struct ToonOutlineParameter
{
float brightness; // 明度
float saturation; // 彩度
}
ToonOutlineParameter skin_outline_param; // 肌のアウトライン
ToonOutlineParameter hair_outline_param; // 毛髪のアウトライン
ToonOutlineParameter other_outline_param; // その他のアウトライン
float outline_weight; // アウトラインの太さ
6.トゥーン用の顔データの作成について
ここまでの処理で、プログラム上の処理が一通り完了しました。 しかし、既存のモデルではやはり顔の陰影が綺麗になりにくいといった問題が発生しました。
これに対処するには、顔モデルの法線を調整する等、データに対して調整を行う必要があります。 『NGS』では、トゥーン表示用に法線等を調整したモデルを新たに用意し、トゥーン表示に切り替えた際に顔モデルを切り替えることで対処するようにしました。3
元々、『PSO2』から『NGS』にアップデートする際、顔のデータは『PSO2』で体のデータは『NGS』といったように、顔と体で別のデータを切り替えることができるシステムとデータを作っていました。 このため顔の切り替え処理については実装をスムーズに行うことができました。
詳細な情報については、CEDEC2022の資料「『PSO2 ニュージェネシス』 長期運営タイトルにおける、大規模バージョンアップの開発事例の紹介」を参照してください。4
トゥーン用の顔データの作成では主に「法線の調整」、「目の陰影を追加」、「ラフネス値の調整」をデザイナー(アーティスト)の方に行っていただきました。 行った調整について簡単にご紹介させていただきます。
6.1 法線の調整について
顔の法線については、モデルの頂点法線について下記のような調整を行っています。
- 頬の陰影が綺麗になるように調整
- 口元や、鼻の陰影がくっきりでるように調整
下図が通常時との比較になります。
6.2 ラフネス値の調整について
一部の顔モデルについては、頬、鼻先、唇にスペキュラが出やすくするためにラフネスの調整をしています。 下記が通常時との比較になります。
6.3 目の影について
イラストの表現では、目に対してまぶたの影をつけることで立体感を表現することがあります。 『NGS』のトゥーン表示でも同様に目に影をつけることでイラスト特有の立体感のある目を表現しています。
7.その他の対応
以上がおおまかな、対応内容になります。 しかし、後付けの処理であるため様々な問題が発生しました。 ここでは、発生した問題や対処した方法について紹介したいと思います。
7.1.カットイン画面のトゥーン表示対応
『NGS』では、キャラクターの顔が小さいウインドウに表示される「カットイン描画」と呼ばれるものがあります。この機能は主に、チャット画面やショップでのプレビュー画面で使用されます。
このカットイン画面は、全てフォワードレンダリングで描画しています。 既存の処理ではGBufferの情報を出力しない設計になっていたので、新しくGBufferの情報を一部追加で出力するように改良する必要がありました。 最終的には下記のように、フォワードレンダリングの結果だけでなく法線、マテリアル情報も出力するように変更しました。
後は、前述した処理と同様に「陰影のマルチトーン化」や「アウトラインの表示」を行っています。 下記がトゥーン表示時における、カットイン描画のパスになります。
7.2.半透明のアウトライン
『PSO2』では半透明を使用しているものが多くあります。例として、プレイヤーが身に着けられるアクセサリーである「フォトンマフラー」は、不透明と半透明の組み合わせで作られています。5
このデータでアウトラインを表示した場合、不透明部分だけ考慮されるため、半透明部分で不自然なアウトラインが描画される問題が発生しました。
この問題に対処するため、新しく半透明部分を表すアルファマスク作成し、半透明部分にアウトラインが描画されない対応を行いました。 下図が対応後の結果になります。
8.調整するパラメータについて
内部で調整できるパラメータの合計は最終的に60個になりました。 実装当初、用意したパラメータは固定値とする予定でした。
しかし、『NGS』では人間、キャスト(ロボット)、或いはその枠を超えた様々なキャラクターを作成することができます。
システムの都合で個別にパラメータを設定することが難しいですがそれでも調整できる方が良いと判断し、上記のパラメータをシンプルな形で調整できるようにしました。
製品では「影の濃度」と「輪郭の強調」の二つのパラメータを調整することで、見た目が変わるようにしています。
9.まとめ
これらの対応を行うことで事前にトゥーンレンダリングを想定していなくとも、ある程度のクォリティでキャラクターのトゥーン化を行うことができました。
リリース前はプレイヤーの皆様に受け入れてもらえるか不安でしたが、「キャラクタークリエイトの幅が広がった」、「過去のコスチュームの見た目がよくなり使用する機会が増えた」といった好意的な意見があり、実装してよかったと感じました。
10.最後に
汎用ゲームエンジンが流行りつつありますが、自社でゲームエンジンを開発することで、どういった処理が最適なのかを基礎から学び、ひいては独自の実装で特徴ある表現を可能にすることができます。特に今回のような「ゲームの表現を途中で変えるような大きな変更対応」は自社のゲームエンジンでしか実現ができないものだと思います。自社でゲームエンジンを「使う」だけでなく、「作る」ことができる環境。 セガで働くことにご興味を持たれましたら下記サイトにアクセスお願いします。
(C) SEGA www.sega.co.jp
