オススメ機能
Twitter
お気に入り
記事履歴
ランキング
パッケージ
BLUE PROTOCOL公式サイトへ
レビューを書く
準備中
お気に入りタイトル/ワード

タイトル/ワード名(記事数)

最近記事を読んだタイトル/ワード

タイトル/ワード名(記事数)

LINEで4Gamerアカウントを登録
[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは
特集記事一覧
注目のレビュー
注目のムービー

メディアパートナー

印刷2021/08/26 12:25

イベント

[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

 2021年8月25日,オンライン開催されている日本最大のゲーム開発者会議「CEDEC 2021」で「BLUE PROTOCOLにおけるアニメ表現手法について 〜実装編〜」と題した講演が行われた。講演者は,バンダイナムコスタジオの大井隆義氏だ。氏はエグゼクティブテクニカルディレクターとして本作に関わっている。

画像集#001のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

「BLUE PROTOCOL」公式サイト


 さて,バンダイナムコオンラインとバンダイナムコスタジオが開発しているBLUE PROTOCOLは,最近ではめっきり少なくなった国産のPC用オンラインゲームである。Unreal Engine 4(以下,UE4)を使いつつ,アニメ風のビジュアル表現を採用しており,先行公開されていたプロモーションムービーが大いに話題を呼んだ。
 2019年6月に発表され,8月にクローズドαテストという名の実質クローズドβテスト,2020年4月にクローズドβテストが行われ,現在も開発が続けられている。


 ここで紹介するのはBLUE PROTOCOLにおける,主にキャラクターのセルシェーディング関連の実装についてだ。
 大井氏によると,一般的なセルシェーディングには,ゲームエンジンでのライティングを使わず自前でライティング処理をする方法や,ゲームエンジンでレンダリングした画像に対してポストプロセスでアニメっぽい仕上がりにする方法がある。
 こういった手法は参考資料も多く,エンジンを改造することもなく実装できるというメリットがある半面,ライティングをオフにすればUE4のウリともいえる豊富なグラフィックス表現も使えなくなり,ポストプロセスにすれば,きっちりレンダリングしたものを塗りつぶすようなパフォーマンスの無駄が出てしまう。
 そこでバンダイナムコスタジオでは,UE4の機能を殺すことなく,希望する表現ができるように最小限のエンジン改造を行うことにしたという。


ライティング


 まずは影を落とすためのライティング処理だ。BLUE PROTOCOLでは,キャラクターモデル1個に対して2種類の法線データを扱うことが特徴となっている。1つはモデリングデータ自体の法線,もう1つはアーティストが調整した法線だ。

右上がオブジェクトの法線。右下がアーティストによる法線だ
画像集#002のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

 見比べてみるとよく分かるのだが,物体自体の法線は3Dキャラクターだけあって,立体感に富んだものとなっている。一方でアーティストが調整した法線は,とくに顔の部分を見ると,ずいぶんんとのっぺりしている。
 一般的なアニメでは,たいていの角度で,顔に落ちる影は光源と反対側の頬のエッジ付近にシンプルな線で区分けされたものとなることが多い。飛び出ているはずの鼻の影などは(絵柄にもよるが)ほとんど描画されない。影付けにこののっぺりした法線データを使うことで,アニメのような影が実現できるのだ。

画像集#003のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

 こういった「いい感じの影が出るように法線いじっちゃえ」というのは,アークシステムワークスもUE3でやっていたことだが,アニメっぽい表現をするには必須なのだろうか。
関連記事

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

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

 新連載「試験に出るゲームグラフィックス」では,西川善司氏が特定タイトルのグラフィックスにスポットを当て,その解説を行っていく。初回シリーズのテーマは,アークシステムワークスが開発した「GUILTY GEAR Xrd -SIGN-」。前後編に分けて,セルアニメにしか見えないリアルタイム3Dグラフィックスの正体に迫っていきたい。

[2014/07/12 00:00]
 また顔はカスタマイズ要素もあって,全体で6つのパーツから構成されている。これらを別オブジェクトとしてインポートするとそれぞれのエッジが出てしまうので,まとめてインポートしてエッジ部の法線を滑らかにつないでいるとのことだった。

画像集#004のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

アーティストが作成した法線データと主光源からキャラクターの影を求める。BLUE PROTOCOLで使われている肌の影は,アニメでいう1段シャドウなので単純に2値化したマスク的な画像を作っておく。たくさん光源があったとしても,キャラクターの影で用いられるのは主光源だけだ
画像集#005のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

そして,主光源とアーティストが作った法線から得られた2値の影データに対し,明るいところはベースカラー,暗いところはシャドウカラーで塗り分ける。これでアニメ的なキャラクターの塗り分けが大半完成する。キャラの影は主光源だけというあたりがポイントだ
画像集#006のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

主光源以外にポイントライトがあった場合,影的な効果が出ないように法線は無視して光源との距離だけを反映したライティングが加えられる。その場合,明るくなりすぎることが多いので調整が必要とのことだった。スライドの例は明るすぎる例でもある
画像集#007のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

スカイライトや間接光も,法線はほぼ無視してレンダリングされ,外光の色彩的な影響は低く抑えられている。まったく影響がないわけではないようだが,キャラクター自体の色を優先するという考え方のようだ。青空で背景球が青みがかっているからといって,キャラクターが青っぽくなるのは確かに変な感じではある
画像集#008のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

 スペキュラー要素(鏡面反射光)でも,いくつか特殊な処理が行われている。とくに目立つのは髪の処理だろう。スペキュラー処理では,Blinn-Phongモデルを2値化したスペキュラーマスクを作っておき,スペキュラーが出るところに張り付ける感じで実現されている。……のだが,髪の毛では中心部分のスペキュラーは丸く小さく,周辺部に行くほど細長い感じの光沢が入るようにしているという。言われてみれば確かにそうなっている。これはオブジェクトの重心からの距離に応じてスペキュラーマスクを拡大縮小することで実現されている。アニメの髪の光沢ってそうだっけ? と考え込んでしまうのだが,これで自然に見えるのでそういうものなのだろう。

画像集#009のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

 さらにキャラクターの輪郭には逆光でなくてもリムライトが加えられ,背景と切り分けて立体感を加えられている。リムライトは,デプスバッファの内容を基にSobelフィルタを使うことでエッジを抽出して追加で明るくする処理がレンダリングパイプラインに追加されているとのこと。
 またフィルタ時にオフセットを付けることでエッジの太さを調節し,輪郭に沿って幅を持ったリムライトも加えられている。さらに,リムライトが出てほしくないところ(背後からの光に対して影になっているところなど)にはマスクを施すというこだわりようだ。

画像集#010のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは
画像集#011のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは


輪郭線


 アニメ絵でかなり重要な位置を占める輪郭線の処理もなかなか凝っている。
 輪郭線はデプス値によって判定され,Sobelフィルタでエッジとなる部分を検出し,デプス値が大きい側に輪郭線を入れる処理となっている。キャラクターデータには頂点カラー2に輪郭線用のデータとして,太さとパーツごとのIDが入っており,輪郭線描画の際に利用される。また顔などの線が出てほしくないところでは,デプス値を操作して線を出にくくしている。

頂点カラーに仕込まれた輪郭線用の情報。デプスシフトは反転して輪郭が出てほしくない部分を指定する
画像集#012のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは
画像集#013のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

 輪郭線はオブジェクトの輪郭の外側に描かれるようになっている。これは絵が小さくなった場合に,オブジェクトの中に輪郭線を描き込んでいると,オブジェクトが細く見えてしまうからだそうだ。
 さらに前述のパーツのIDも,境界部分で輪郭線を発生させている。IDでのエッジを検出して,値が大きい側に輪郭線を描くルールにしているとのこと。
 また,指などのデプス値の差が小さく,ID分けもしにくい部分では,法線から判定された輪郭線も利用されている。さらにアーティストによる手書きの輪郭線というものも別途用意されており,それも合成されている。

画像集#014のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは
画像集#015のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

 BLUE PROTOCOLのキャラでは,アニメやイラストでよく見られる,髪の毛の上に眉毛が見える仕様が採用されている。実際には,髪の毛を透過して眉毛が見えているのだが,これは眉毛の形でマスクを作って,髪の毛の上書きを止めるような方法で実現している。つまり,この処理だけのためにレンダリングパイプラインが1段追加されているわけだ。

画像集#016のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

 そのほか,輪郭線はTemporal AAに弱く,溶けてしまいがちになるので,Responsive AAが使われているとのことだった。Responsive AAはステンシルを使って現状フレームの輪郭を保護し,強めに出すTemporal AAのようなもので,ブレンドされるフレーム数が少ない分,アンチエイリアス効果は低くなるのだが,動きのある絵ではこちらのほうが好ましいと判断したという。

画像集#017のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

 また外部のオブジェクトの影はキャラクターにも落ちるが,顔の陰影などではない影ではキャラクターはセルフシャドウを受けず,キャラクターのシャドウマップは(地面などに落ちる)キャラクターの影でのみ使われる。
 セルフシャドウを使わない代わりに一部でセルフシャドウっぽい表現も行われているのだが,それはオフセットシャドウを使い,ちょっとずらした物体のデプス情報と通常画像のデプス値を比較して,ベースカラーとシャドウカラーを使い分けるための2値情報バッファに描き込む。これによりシャドウ部分が広がることになる。

画像集#018のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは
画像集#019のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

 最後に,ポストプロセスとしては明るい部分が拡散するようなディフューズ処理が行われてる。これはブルーム処理で代替もできるが,エフェクトでのブルーム処理とぶつかるので,別で実装したとのことだった。

画像集#020のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

 これらの一連の処理を行ってBLUE PROTOCOLのアニメ絵表現が実現されているわけだが,通常のUE4のレンダリングパイプラインに何段も処理パスが追加されており,ディファードレンダリングのGバッファも6枚のほぼ全チャンネルが使用されている。アニメ絵だと処理が軽いように思う人が多いが,決してそんなことはないと大井氏は語っていた。

画像集#021のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは
画像集#022のサムネイル/[CEDEC 2021]「BLUE PROTOCOL」のテクニカルディレクターが語る,UE4のアニメ表現。エンジン改造で実現したこだわりの実装とは

 バンダイナムコスタジオでは,今回UE4のエンジン改造に手を出したわけだが,レンダリングパスの追加を主体にした拡張だったので,エンジンのアップデートでも一応なんとかなっているようだ(かなりしんどいらしいが)。

 今回実装されているさまざまな処理は,物理的な根拠があるものというよりは,理屈を超えたアーティストのこだわりを実装したようなものが多い。そういう処理を付けると,よりそれっぽく見える。アニメ表現へのこだわりが大事だと大井氏はまとめていた。
 しばらく動きを潜めていたBLUE PROTOCOLだが,テーマ曲も発表されて少しずつ動きが見えてきた。まだまだ開発中なので,今回解説された内容からさらに発展していくことも考えられる(というか,確実に変わるとのこと)。正式サービスに向けた今後の展開にも注目しておきたい。

「BLUE PROTOCOL」公式サイト

  • 関連タイトル:

    BLUE PROTOCOL

  • この記事のURL:
4Gamer.net最新情報
プラットフォーム別新着記事
総合新着記事
企画記事
スペシャルコンテンツ
注目記事ランキング
集計:04月18日〜04月19日