ゲームエフェクトデザイナーのブログ (新)

レポート記事とかUE4のマテリアルとか。C#とかも触ったり。

「ドラゴンクエストXIへの道~グラフィックスの作り方~」講演メモ

Unreal Fest 2017 横浜のセッション
ドラゴンクエストXIへの道~グラフィックスの作り方~」
の講演内容のメモになります。

講演者:SQEX 高木 和博さん(TA)
・聖剣4
FFXIII
ドラクエ10
主にTAとしてツール開発、キャラのリグ・セットアップ 物理シミュレーション

今作では主に「水の表現」と「キャラの揺れ物」の監修、その他いろいろ
UE4使用歴は約2年

1.ドラゴンクエスト11が目指す表現は?
 Visual Works のOPのプリレンダムービーのようなルックを目指した
 紹介する主な要素
 ・キャラクター
 ・輪郭線
 ・肌の質感 SSSによる透過光表現
  髪の毛はモデル ファーは無し
 ・背景
  汚しはやり過ぎず視認性よく
 ・草はできるだけ生やしたいが30FPS基準
 ・モンスター
  皮膚や金属など
 ・水
  誇張はしつつリアルな表現を目指す

 PS4ならではの表現
  PBR、GI、動的シャドウ、SSRなどのリフレクション
  風に揺れる生い茂った草木、クロスや物理シミュ

2.キャラクター編
 「鳥山明先生の絵」をどうやってUE4で表現したか?
 輪郭線
  背面法(Back-facing)を使って表現した
   モデルを複製して真っ黒にして法線方向に少し押し出して法線を反転
   お手軽 昔ながら お安く輪郭線を出せる手法
  欠点 モデルを2体分持っていることになるので、メモリも描画負荷も少し高い
  利点 部分的に、輪郭線を補足したり、出にくくしたりをデザイナー側で調整できる
    (頂点カラーを使用)
  まぶたに出てほしくない輪郭線が出てしまうケースがあったため
  頂点カラーのR値を利用して出にくいように調整した
 背景に出る輪郭線はポストプロセスを使用
 輪郭線を馴染ませるために
  色相と彩度は輪郭線の内側(法線方向)のピクセルが影響
  明度は周囲8ピクセルが影響
  これでかなり自然に馴染むように
  マテリアルで Screen Position > Scene Color を使っている
   8方向は Scene Color ノード8つで取得
 肌のマテリアル
 ・Shading Model は Preintegrated Skin を使用
  人の肌に適した最も高速なSSS手法
 ・LUTを使用したハーフランバートのような方式
  陰影が綺麗になる 光が当たらない部分までグラデーションさせる
 モンスターのマテリアル
 ・スライム用シェーダー
  どこから見ても左上にハイライトが入る
 ・構造色マテリアル
 CDの表面やシャボン玉のような ダイオウイカの例

3.アニメーション編
 主に揺れ物の話になる
 ・「リアルタイム」で揺れること
 ・「風でなびく」髪の毛や、服、スカートの表現
 ・「背景の草木」とともに風で揺れる
 同期して揺れる
 ・天候によって「リアルタイムに風が変化」する
 ・カットシーン中での風の「演出」

 揺れ物で「考慮すべき点」
 ・ランタイムで動く「首のLookAt」と「足IK」の補正
  ランタイムで首の方向、IKによる足の角度が変わるため
  揺れ物はモーションではなく物理シミュレーションで対応
 ・膨大なモーション数、カットシーン、装備の見た目が変わるもの
  モーションのリテイクや変更に対応できるように
  なるべく「物理シミュレーション」でやっておくことが大事!
  手付けだとブラッシュアップした際に揺れ物の動きを付け直しになるため

 UE4の物理シミュレーション
 ・まずはApxCloth、PhysXを検証 負荷が高かった 安定しない
 ・UE4.12から入ったAnimDynamicsを検証
 ・AnimDynamicsによる「骨ベース」のシミュレーションにした 高速で
  ソフトボーンチェーンがなくても事足りた
 UE4.13でバージョンロックした
 「抜け」の対策
  スカートから抜けて太ももが見えてしまったり
  幅広い年齢層で遊んでもらうCERO Aなのでここで引っかかる可能性がある
  丁寧に対応していく必要があった
  「BlendSpace」を使用して、親の骨をランタイムに補正を入れる
   複数のモーションをブレンド
  自動補正である程度、都合の良い方向に避ける
   AnimDynamicsによるシミュレーション
   それでもアニメーションによっては抜けてしまう
   その場合はキーアニメーションとブレンドして対応
 4段階の風を作成 無風~強風
  はじめの石の村 山の上の方にあるので中風
  デルカダール城下町は弱風 マップごとに強さを決めた
  カットシーンは場合によっては強風より強い風を当てられるようにした
  破たんするギリギリを責められるようにした
 風による「抜け」対策
  強い風を横から当てると服が抜けてしまう問題
  ⇒ 風を受けた真正面の骨の影響度を下げる 10% AnimDynamicsをカスタマイズ
    反対側は100%の影響度
 これにより風でなびいている絵は残しつつ抜けやすいところの風を抑える!
 キャラクターが「ワープ」するとき
  キャラが1フレでワープすると揺れ物が暴れてしまう
   カットシーンのカット切り替えタイミング
   バトル開始タイミング(キャラ4人を整列させる)
  「空回し」で対策 AnimDynamicsをカスタマイズして実装した
  1フレの間で30フレーム分の計算をさせて揺れの動きが「収まった状態」から開始する
  キャラが多いと処理落ちする可能性があるのでそういう場合は空回しのフレーム数を抑える

4.背景編
 時間変化、天候変化、Enlightenによる動的GI、Foliegeによる草木
 背景の目指すところ
  現世代機表現もありつつキャラクターとも調和する
  「現世代機感+ドラクエらしさ」
 ・たくさん生えた草の表現
・風で揺れる草木
 ・昼、夜への時間変化、環境変化(雨、嵐、雪など)
 ・リアルタイムで変化するGI
 ・透明感、流れのある水の表現
 視認性があり分かりやすい落としどころを目指した
 ライティング
 ・太陽光はDirectional Lightを使用、時間変化とともに角度が変化
 ・PointLightやSpotLightも使用(重なりに注意)
 ・影はCascaded Shadows
  遠方にはRay Traced Distance Field Shadow
 ・GIはEnlightenを使用
 ・AOはSSAOを使用
 Enlightenを使用しているのでSkyLightは使用していない
  ライトマスも同様
 時間変化について
  影も動的に動いている アンビエントの色も変化 夜は青い環境光カラー
  昔ながらのドラクエの夜の表現を大切にしている
  夜は暗くするのではなく青にする
 時間変化
  以下のパラメータを24時間分作成して変化させている
 ・天球 ライティング、天球ドームの色、雲、太陽の見え方
 ・ポストプロセス Bloom、Scane Color、DOF、その他
 ・フォグ
 天候変化について
  リアルタイムで天候が変化する 雨が降ってきて風が強くなったり
  先ほどの基本のデータをそれぞれの天候文作成
  晴れ、曇り、雨、雪、吹雪‥は天球24・ポスト24・フォグ24
  風(時間変化なし)
 天候変化で風も変化
 EnlightenのGI
  「リアルタイムなGI」による間接光が表現できるライティングミドルウェア
  動的に変化させることができるのが最大の特徴であり利点
 動的GI
  ライトプローブで間接光の変化を視認できる
 Enlightenの特徴
 ・Lightmassの性的なGIに対して動的なGI
 ・Precomputeのデータサイズが「かなり小さい」
 ・ライトビルド時間は、かなり短縮できる
 ・「ダイナミックマテリアルインスタンス」への組み込みも簡単!
  このアセットは今トリビュート、このアセットはプローブ
  フォリッジはディテールにする、など使い分け
  背景アーティストが理解しておく必要がある
 草木の表現
  なるべくリッチに草を生やした PivotPainter
  「透明部分の重なり」を極力減らした
 シェーダー複雑度で確認 重さではなく、あくまで透明部分の重なりの面積を確認する
  エフェクトの半透明の重なりを見るのにも有効
  最終的にはちゃんと実機で負荷を確認する
  Masledで抜かずにメッシュだけの草も多く使っている
 PivotPainter
・草揺れはPivotPainter 
・草の回転軸(Pivot)と「回転」 3dsmaxで使えるツール
 ・「マテリアルパラメータコレクション」で風向きと強度を制御
 ・「Maya版」のPivotPainterを作成(Mayaに移植)
 ・草が暗くならないよう「法線を上向き」に編集
 ・負荷を考慮して草のメッシュは片面ポリゴン、マテリアルで両面処理
 このままだと裏面が暗くなる
  なのでTwoSidedSineを適用して裏面の法線を表面と一致させて全体的に自然に馴染ませる
  表も裏も同じ明るさになる
 「木」も同様に
  法線編集+TwoSidedSine
  立体感のある期の表現ができる

5.水の表現編
 水の表現の「3大要素」
  反射 屈折 流体表現
  個人的なチョイスキーワード
 流体表現
  Flowmapを利用 FlowmapGeneratorを利用
  速度や白波の調整ができるようにした
 Flowmapとは?
  流体の方向と速度をRとGチャンネルに保持したテクスチャ
   R128、G128では全く動かない
   フリーハンドで作るのはなかなか難しい
  頑張れば手で描けないことはない 最近手で描けるようになった
  Flowmap Generatorで流れをシミュレーションして生成する
   蛇口アイコンを配置するなどして流れを起こす
 川の流れ、噴水、湧き出る温泉などが表現できる
  ドロドロした溶岩も応用で可能
 Flowmapマテリアルの仕組み
  TimeとFlowmapを乗算したものをTexcordに加算
  Fracノードを使って一定時間で折り返す
  半周期ズラしたものを交互にブレンド
 半透明マテリアルの特徴
  OpaqueとTranslucent
 反射の表現
  RefrectionVectorノードを使ってHDR画像を環境マップにして輝度の高いハイライトを描き足した
  フェイクになるが、周囲にライトを置いたような結果になる
  夜になってもハイライトが変化しないのが欠点にはなるが調整によって綺麗な表現が可能
 屈折の表現
  Refractionが使えるが水面ではそれは使用していない
   屈折する絵がキャラクターからどんどんマイナス方向へ離れていきがち
  SceneTextureをノーマルマップで歪めている
   歪める強度を調整しやすい
 平面反射
  白の入り江のみ使った ウユニ塩湖のような表現
  SSRよりも「正確な映り込み」ができる
   SSRは画面に映ってない部分は反射しない
   はっきりと映し出すような水面では厳しい
  平面反射だったら負荷は高いけど(二回描画しているようなものなので)映り込みが綺麗
   反射するアセットを種類ごとに選べる
   Sprite ParticleのみOFF
    魔法などのエフェクトは写り込まないようにしている
    一時的に処理落ちしがちなので、そこで二回描画は厳しい

6.まとめ

水の表現は突き詰めれば色んな要素を入れたいが負荷もあるので
要素を絞って突き詰めていくだけでも良い表現に繋がるのではと思う
ポイントを絞って実装すると良い

スクウェア・エニックス第6ビジネスディビジョンでは現在TAを大募集しています!
新しい表現に興味を持っている方、新しいことにチャレンジしてみたい方

<講演メモここまで>

こちらの方のメモも併せてお読みいただければと思います。