Upgrade to Pro — share decks privately, control downloads, hide ads and more …

『呪術廻戦 ファントムパレード』ストーリー制作を支えるグラフィックシステム【CAGC2024】

CyberAgent
March 08, 2024
610

『呪術廻戦 ファントムパレード』ストーリー制作を支えるグラフィックシステム【CAGC2024】

『呪術廻戦 ファントムパレード』のストーリー制作において重要な役割を果たした表現技法について解説します。
陰影の表現、Live2Dに対するライティングによってキャラクターはより魅力的になり、背景にも馴染みやすくなりました。
レイヤ指定ポストエフェクトでは、疑似的な被写界深度や戦闘シーンのアニメ風な効果を作り出しています。
これらの技術がどのように活用されたか具体的な事例を交えてご紹介します。

https://cagc.cyberagent.co.jp/2024/session/index.html?id=fd2cdksmji

©芥見下々/集英社・呪術廻戦製作委員会 ©Sumzap, Inc./TOHO CO., LTD.
Copyright © CyberAgent, Inc.

CyberAgent

March 08, 2024
Tweet

More Decks by CyberAgent

Transcript

  1. 自己紹介 - 名前 - 二宮 章太(Ninomiya Shota) - 経歴 -

    2015年新卒でサイバーエージェントに入社 - ゲーム事業にていくつかの新規開発を担当 - 『呪術廻戦 ファントムパレード』 - クライアントのテックリードとして開発に従事 - 特に, 演出周りの仕組みを多く担当 2
  2. 陰影/光の表現 要望/要件 - 光彩やグラデーションを手軽にかけたい - 加算/乗算/アルファブレンドで元絵と合成したい - 対象はLive2D, Spine, SpriteRenderer

    - 共通化したい - 応用の効きやすい手法を取りたい シルエットのキャプチャを加工して、上から載せる方法をとることに 12
  3. パフォーマンスについて 負荷対策 - シルエット画像のサイズを512 x 512に固定 - 描画用カメラを1台に絞り, カメラ増加によるコストを抑制 -

    詳細: 2Dキャラをリッチに魅せる描画テクニック https://learning.unity3d.jp/9586/ RenderFeatureを駆使して, カメラを増やさずにキャプチャするテクニックについて解説しています とはいえ重めな処理ではある - 開発中, バトル画面で表示キャラ全8体のソフトシャドウを同じ仕組みで付与し ていたが, 負荷軽減のために仕組みを変更した - ストーリーパートで使用する程度なら問題なし (数が多くなりづらい) 29
  4. - 物体の向きによって, 光が当たることでどれくらい光って見えるかが変わる - Live2Dの絵が描画される時、各ピクセルの3D空間上での向きが分かれば, 当たる光の強さを計算できる - NormalMapとは, テクスチャにピクセルごとの向き (法線)

    を書き込んだもの - rgb = xyzに対応 - Live2Dの絵はモーションによって回転する - 同様に, NormalMapから取り出した法線も絵に合わせて回転してあげればよい Live2D x NormalMapによるライティング 36
  5. 2頂点からモーションによる回転角を推定 37 パーツのMeshごとに2頂点を適当に取り出し, 位置の差分を diff_pos, UVの差分をdiff_uvとおく. 回転角は var cos =

    Vector2.Dot(diff_pos.normalized, diff_uv.normalized); var sin = Vector3.Cross(diff_pos.normalized, diff_uv.normalized); と推定できる. さらに, フラグメントシェーダでNormalMapから取り出した法線を回転すれば, ピクセルごとの3D空間における向き normal_wsが算出できる. const half3 normal = UnpackNormal(tex2D(_NormalMapTex, IN.texcoord.xy)); const half x = normal.x * cos - normal.y * sin.magnitude; const half y = normal.x * sin.magnitude + normal.y * cos; const half3 normal_ws = half3(x, y, -normal.z); 最後に, 3D空間におけるライトの位置とnormal_wsから反射率を求めてあげれば 光の強さを計算できて, めでたくライティングが行える
  6. 合成可能な手前レイヤーには制約があり, 背景に対して加算またはアルファブレンドする絵 にしか対応していない - 手前レイヤーのRenderTextureは, 事前乗算テクスチャ (RGBにあらかじめ Aを乗算した値が格納してあるテクスチャ) となる必要がある -

    ファンパレではストーリーパートで使用するほぼ全てのシェーダーのブレ ンドモードを Blend One OneMinusSrcAlpha にすることで対応している 合成可能な手前レイヤーの制約について 46
  7. Live2Dの半透明描画に関するチューニング Live2D x 半透明描画を綺麗に出すための従来手法 - Live2Dを半透明で描画すると、関節が重なってしまって汚れる - よくある解決手法 - 専用カメラを用意

    <CPUコスト増> - キャラをそれぞれRenderTextureに焼き込み <メモリ増> - RenderTextureを描画する際に一律透明化する ファンパレではこのコストを許容できずチューニングを行った. 53
  8. Live2Dの半透明描画に関するチューニング 従来のフロー 1. Live2D全体が映るようにRenderTextureを用意 (1体につき約10MB) ※ キャラ全体を映してQuadに差して描画するため, 1800pix * 1500pix

    * 32bit ※ 簡単に実装する場合を想定すれば, 出てくるキャラ x 10MB. 頑張っても同時表示数 x 10MB. 2. 専用カメラを用意してLive2Dを撮影 (描画コスト高) 54
  9. Live2Dの半透明描画に関するチューニング ファンパレの描画フロー 1. 1枚だけ半透明のRenderTextureを用意 ※ フルスクリーン 2. 透明オブジェクトの描画を開始 3. Live2Dの描画順の直前に,

    対象のLive2DをRenderTextureに書き込む 4. 1で利用したフレームバッファにRenderTextureを合成 5. まだ描画すべきオブジェクトがあれば2に戻る 55 すぐにFrameBufferに移すため RenderTextureが1枚で済む
  10. Live2Dの半透明描画に関するチューニング 主なメリット - 何体同時表示してもRenderTextureが1枚で済む - しかも手前レイヤーのポストエフェクトに使うバッファの使い回し = 何体出しても実質タダ - 描画用カメラを1台に絞り,

    カメラ増加によるCPUコストを抑制 デメリット - 実装コスト大 - 全オブジェクトの描画順コントロールが必要. - レンダリングパイプラインの拡張が必要 - 半透明の合成が必要なので, Live2DのShaderも Blend One OneMinusSrcAlpha でブレンドするという制約がつく 56
  11. まとめ 呪術廻戦ファントムパレードで広く活用しているグラフィックシステムについて紹介 しました. - 陰影/光の表現 - キャラライティング - レイヤー指定ポストエフェクト -

    Live2Dの半透明描画に関するチューニング どの手法も使い勝手がよく, クオリティをぐっと引き上げる仕組みなので, 今後のタイ トルにも活用されていくと思います. 皆様の開発するプロジェクトにとっても良いノウハウとなっていたら幸いです. 59