Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
『GRANBLUE FANTASY: Relink』続・最高の「没入感」を実現するカットシーン...
Search
Cygames
December 10, 2024
Technology
0
130
『GRANBLUE FANTASY: Relink』続・最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
Cygames
December 10, 2024
Tweet
Share
More Decks by Cygames
See All by Cygames
『GRANBLUE FANTASY Relink』キャラクターの魅力を支えるリグ・シミュレーション制作事例
cygames
0
470
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
1
410
『GRANBLUE FANTASY Relink』ソフトウェアラスタライザによる実践的なオクルージョンカリング
cygames
0
360
高品質なフォトグラメトリデータを取得するためのハードウェア&ソフトウェア開発
cygames
0
1.3k
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
1.2k
『GRANBLUE FANTASY: Relink』開発からリリースまでを支えたCI/CDの取り組み
cygames
0
280
『GRANBLUE FANTASY: Relink』専任エンジニアチームで回す大規模開発QAサイクル
cygames
0
330
『GRANBLUE FANTASY: Relink』クオリティと物量の両立に挑戦したフェイシャルアニメーション事例 ~カットシーンからランタイムまで~
cygames
0
370
『GRANBLUE FANTASY: Relink』キャラクターの個性にlinkした効果音表現
cygames
0
150
Other Decks in Technology
See All in Technology
5分でわかるDuckDB
chanyou0311
9
3.1k
継続的にアウトカムを生み出し ビジネスにつなげる、 戦略と運営に対するタイミーのQUEST(探求)
zigorou
0
240
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
490
WACATE2024冬セッション資料(ユーザビリティ)
scarletplover
0
160
NW-JAWS #14 re:Invent 2024(予選落ち含)で 発表された推しアップデートについて
nagisa53
0
150
Amazon SageMaker Unified Studio(Preview)、Lakehouse と Amazon S3 Tables
ishikawa_satoru
0
130
GPTsで模擬問題生成して資格対策してみる
hsg_alf
2
120
OCI Oracle Database Services新機能アップデート(2024/09-2024/11)
oracle4engineer
PRO
0
110
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
2
700
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
220
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
150
Kubeshark で Kubernetes の Traffic を眺めてみよう/Let's Look at k8s Traffic with Kubeshark
kota2and3kan
3
350
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
Done Done
chrislema
181
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
A better future with KSS
kneath
238
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Writing Fast Ruby
sferik
628
61k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
430
Transcript
1/89 『GRANBLUE FANTASY: Relink』 株式会社Cygames コンシューマー シニアエンジニア / 中村 大吾
最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
2/89 はじめに 本講演は写真撮影およびSNS投稿可能です
3/89 2020年にCygamesへ合流 アニメーションパート、サウンドパートのエンジニア統括を担当しながら シネマティクスの全体統括を兼任 カットシーンツールの設計から全体進行まで幅広く携わる 自己紹介 コンシューマー / シニアエンジニア 中村
大吾
4/89 用語について カットシーン 会話シーン シネマティクス プレイアブル ユーザーが 操作できる ユーザーが 操作できない
ゲームの操作シーン
5/89 シネマティクスが抱える問題 シネマティクスを支える大切なこと 没入感を実現した3つの技術 映像美を支えたワークフロー
映像美を産み出す絵作り アジェンダ
6/89 シネマティクスが抱える問題
7/89 ユーザーが映像を見るだけに シネマティクスが抱える問題 操作ができない ユーザー 今はゲームで遊びたいから ここはスキップするぜ ストーリーを伝える事を 重視してしまうあまり 長い演出になりがち
8/89 • ストーリーを盛り上げる要素 • バトルへのモチベーションを 最大限に引き上げる演出 シネマティクスが抱える問題 なぜスキップしてしまうのか 課題 かみ合わないと
一切見られない可能性も シネマティクスは… だが…
9/89 シネマティクスを支える大切なこと
10/89 シネマティクスを支える大切なこと テーマ 没入感 映像美
11/89 シネマティクスを支える大切なこと 没入感を損なう要素とは 課題 • 急な映像への切り替え • 遊んでいるキャラクターの振る舞いが 急に別人のようになる プレイアブルとシネマティクスが乖離
• フェードアウトによる暗転 区切り感が出てしまう
12/89 • イテレーションを回すスピード • ツールの利便性 • 作業の効率化 • 盛り込まれた要素を表現しきれるパフォーマンス シネマティクスを支える大切なこと
映像美を生み出す項目 課題 映像のすごさは アーティストがどれだけ こだわれる時間を作り出すか
13/89 没入感を実現した3つの技術
14/89 没入感を実現した3つの技術 ① リアルタイムレンダリング ② セカンダリフィードバック ③ シームレス遷移
15/89 ①リアルタイムレンダリング
16/89 リアルタイムレンダリング 本作では全てのシネマティクスを リアルタイムレンダリングで実現 動画との違いは? 疑問 動画よりも シネマティクスの没入感◎ 実は…
17/89 リアルタイムレンダリング 高フレームレート 対応 高解像度への対応 武器の反映 プレイアブル中は120fps、シネマティクスでも 同一のフレームレートを利用で違和感が少ない プレイアブル中と全く変わらない解像度◎ (※動画では非常に難しい)
本作では様々な武器を装備し、見た目が変わる プレイアブル中の武器がそのままカットシーンで 利用可能に
18/89 リアルタイムレンダリング いくつかプレイアブル中には可能だった パフォーマンス用の施策は行わない形で 取り組むことに 実現にあたっての前提条件 課題 シネマティクス中では 映像に特化して表現する必要
19/89 リアルタイムレンダリング 制限 Dynamic Resolution 高 低 高
20/89 リアルタイムレンダリング 制限 Model / Texture Streaming 高 低 中
21/89 リアルタイムレンダリング Dynamic Resolutionによる 解像度の低下は行わない ポッピング(LOD、Texture Streaming)が 目視できないように シネマティクス中の制限として
22/89 リアルタイムレンダリング その上で実現した方法について解説 オクルージョンカリングの 最大限活用 LODの事前リクエスト 可変フレーム対応 最適化のチェック体制
23/89 リアルタイムレンダリング • シネマティクスはカメラが固定化されている • 最適化のポイント:無駄な表示を省く 特にパフォーマンスを出すことが困難な場所で 多用している方法として… オクルージョンカリング 方法①
シネマティクス専用 オクルーダーの配置
24/89 リアルタイムレンダリング オクルーダーの配置例 方法① 黄色い部分に カットシーン専用で配置 場面に応じて個別に対応
25/89 リアルタイムレンダリング before after リアルタイムレンダリングを実現するうえでは必須の対応 オクルーダーの配置例 方法①
26/89 リアルタイムレンダリング ポッピングへの対応 方法② • カメラが一瞬で切り替わるため ポッピングへの対応は不可避 • LODの変化やTexture Streamは、表示次第
ロードが始まり高いLODを表示するため 切り替わった瞬間が見えてしまう 先行リクエスト オフラインで リクエスト リストを作成 タイムラインを 全て検索
27/89 リアルタイムレンダリング • オフラインで表示リストを作成 • 登場する2秒前にモデルのロードをリクエスト • どうしても間に合わない場合は個別調整 LODモデル、Textureリクエスト 方法②
2秒前にリクエスト
28/89 リアルタイムレンダリング 本作ではPS4とPS5、Steamと 異なるプラットフォームへ対応 それぞれパフォーマンスは違うため リアルタイムレンダリングをする上で 可変フレームへの対応も必須 可変フレームへの対応 方法③ 同じ尺の
カットシーンとサウンド 常に音と映像の同期
29/89 リアルタイムレンダリング サウンドとの同期 方法③ カットシーン 同期 同期 同期 同期 同期
サウンド
30/89 リアルタイムレンダリング 最後にご紹介するのは、シネマティクスの パフォーマンス計測環境です リアルタイムレンダリングを実現するには 最適化は必須の項目であり 計測環境を充実化させるのは非常に重要である と言えます パフォーマンスチェック体制 方法④
31/89 リアルタイム計測例 リアルタイムレンダリング • 各シーンの計測一覧 • 最適化すべき場所を把握 • どのセクションと相談の 必要があるかを可視化
32/89 VFX 背景 その他 ライト ポスト エフェクト その他 背景 ケースによってネックに
なっている場所は千差万別 効果の薄い最適化は避ける必要が ある リアルタイムレンダリング ボトルネックを明確化 方法④ 差を可視化することで 問題を的確に調査 最適化 ボトルネック要因の違い
33/89 リアルタイムレンダリング 毎日オートプレイを走らせ、全てのシーンでパフォーマンスを 計測しWeb上で遷移を可視化 方法④ オートプレイでの自動計測
34/89 デイリーで全てのシーンを自動再生 何か異常があればすぐに気付ける体制に リアルタイムレンダリングである事は シネマティクス以外の環境変化による影響も 受けやすい ・背景の仕様が意図せず変わった ・異常のあるオブジェクトが紛れている など リアルタイムレンダリング
方法④ オートプレイチェック 計測・チェック体制は必要不可欠
35/89 リアルタイムレンダリング シネマティクスへの没入感を高める事に成功 リアルタイムレンダリングは この後の項目すべてに関係 要素としては非常に重要な項目となります こうして… リアルタイムレンダリングを実現 全てのシーンで制限を クリア
プレイアブル中と同じ状態
36/89 ②セカンダリフィードバック
37/89 セカンダリフィードバック 本講演では… セカンダリ プライマリ ボディアニメーションのみ 揺れものなどのシミュレーションで 動きもついたアニメーション
38/89 セカンダリフィードバック ポイント アニメーション作成ワークフロー キャラクターモデルは、プレイアブル中と同じものを利用 通常衣服などの揺れもののアニメーションはDCCツールなどで カットシーン専用として作成されることが多いが… • 本作ではプライマリのみを再生 •
シミュレーションさせてからエクスポート • 「セカンダリ」アニメーションとして再度入れ込む 本作のワークフロー
39/89 セカンダリフィードバック フローイメージ 制作 のみを再生した実機シミュレーション セカンダリモーション アニメーション を プライマリ セカンダリ
セカンダリ DCCツール 実機作業 DCCツール プライマリ にエクスポート
40/89 セカンダリフィードバック プライマリのみでカットシーンを流し シミュレーション込みでジョイント情報の エクスポートを行うツール ショット ① Export Tool セカンダリデータ
ショット ② ショット ③ shot単位、キャラ単位で個別に出力され セカンダリだけではなくIK情報や 自動Lipsyncを行ったアニメーションも 出力する設計がされています
41/89 セカンダリフィードバック 映像として気に入ったシミュレーションになるまでショット単位で何度 も繰り返し風や向きを微調整しながらの繰り返しを可能に データとしてはプライマリも含んだトータルのジョイント情報を出力 高速なイテレーション
42/89 セカンダリフィードバック 最終データ 過去の セカンダリ データ 新しい プライマリ データ Merge
Tool プライマリのアニメーションと出力した セカンダリデータをマージするツール プライマリに変更があっても 過去のセカンダリをマージできる
43/89 セカンダリフィードバック 本作で選択した手法は • セカンダリのジョイントとプライマリのジョイントを 明確に分け • セカンダリジョイントの上のプライマリジョイントの動きのみ をセカンダリと再連結する このマージは実機を介さずモーションデータ
のみでできるため変更後も高速に確認が可能 髪の毛は頭のジョイントに再追従させるだけでOK 手法について
44/89 セカンダリフィードバック ・特徴的な衣装 ・衣装の揺れにもキャラクターの個性 ゲーム内で独自のシミュレーション作成 その1 特徴的なキャラクター性 プレイアブル中と同じ印象を持たせる 揺れ方もカットシーンで再現する必要
45/89
46/89 セカンダリフィードバック • ボディアニメーションのみでシミュレーションシーンの概要が分かる • 変更にも強い設計 • アニメーションのみを見ても大幅に工数が削減 こちらは大きくワークフローにも関連、後ほどの項目で詳しく紹介 工数が多く
時間もかかりがち プライマリ・セカンダリの 完成が急務 その2 工数の削減 シネマティクス では…
47/89 ③シームレス遷移
48/89 シームレス遷移 シームレス遷移 フェードアウトの廃止 シームレス遷移とは カットシーン プレイアブル
49/89 • 作業者は専任 • ほぼ全ての要素が専用の物 基本的にはプレイアブルの環境を利用 • 追加ライト • 専用のポストエフェクトなどが
調整されている シームレス遷移 全てのパフォーマンスを映像に特化 カットシーン
50/89 シームレス遷移 • プレイアブル中のアセットを利用 • 専用モーション • ライトやポストエフェクトは プレイアブル準拠 シームレス遷移
カットシーンの画のままプレイアブルに
51/89 シームレス遷移
52/89
53/89 シームレス遷移 シームレス遷移 カットシーン プレイアブル
54/89 シームレス遷移 リソースや作業者は別になっていても 制作ツールとしてはカットシーンも シームレス遷移中も同じものを利用し データ構成やロードの仕組みの共通化 を行っています カットシーン シームレス遷移 どちらも同じツールで作成
55/89 ただ連続再生するだけなら… 簡単そうに思えますがしかし、実際は考慮しなければいけない事例がいくつかあります シームレス遷移
56/89 LODのポッピング対策 代表的な項目ですが、当然次の演出のデータのリクエストをしておく必要があります ロードの設計 長尺にわたる演出データを一度にロードする事はメモリの圧迫とロード時間増加を生むため ある程度細かなショットごとにロードをすることができるようにし 連続再生される後続のシーンも一連の流れで読めるようにしています 削除遅延対策 当然の項目ですが実は一番時間がかかった部分でした 直前のカットシーンでは多用されているポストエフェクトやライトを
シームレス遷移画面になった瞬間では1フレの遅延もさせず切る必要があります シームレス遷移
57/89 本作における会話シーンは 専用で作るカットシーンとは大きく違い ある程度プレイアブル中の要素のまま 演技をするシネマティクスです ただしカメラの画角や被写界深度の調整 キャラクターのための追加ライトなど いくつか専用で調整は行われています シームレス遷移 会話シーンの場合
58/89
59/89 シームレス遷移 自動シームレス遷移 ライト ポスト エフェクト 接地 補間
60/89
61/89 シームレス遷移 カットシーンと同じツールで作成 カットシーンから会話シーンへ その逆もまたフェードアウト無しで 隙間なく遷移する事が可能に 開発環境 全て同じツールで作成
62/89 ほぼ全てのシーンが違和感の無いよう カットシーン、会話シーン共にプレイアブル へとシームレス遷移させています ただフェードアウトを無くすだけでもこれだ けの要素が必要になりますが この手間を惜しまない事で、没入感を最大限 継続させる事が可能となっています シームレス遷移 メリット
シームレス化する事で
63/89 映像美を支えたワークフロー
64/89 映像美を支えたワークフロー メリット 前提として 導入の敷居 インターフェース コスト テキスト 演出データ
65/89 テキスト 演出データ 映像美を支えたワークフロー 仕組み 実機との連携 ライブリンク DCCツール
66/89 DCCツールと実機のライブリンク
67/89 この二つの組み合わせは非常に強力で • セカンダリ調整 • フェイシャルアニメーション • ライティング、ポストエフェクト などの工程では 直接映像を作る感覚で作業が可能
映像美を支えたワークフロー ライブリンクとリアルタイムレンダリング
68/89 イテレーションの高速化 背景やVFX、音声など全ての要素を最新の状態で 確認しながら作り出す事ができるように。 リアルタイムで制作から確認が可能 映像美を支えたワークフロー 恩恵 リアルタイムレンダリング技術 作業時間を ギリギリまで確保可能
不具合対応が 素早く修正可能 かなり直前まで 映像にこだわる期間 パフォーマンスを 改善する時間
69/89 映像美を支えたワークフロー 恩恵 セカンダリフィードバック技術 雰囲気を把握しながら 後続工程をスタート セカンダリも込みで 確認する事が可能
70/89 映像美を支えたワークフロー 実機でのシミュレーションを利用 時は風の設定が非常に重要 • シネマティクスでの追い風は絵 として破綻しやすい • プレイアブル中と印象が変わら ない強さにする
風からデザインする シネマティクスの立ち位置と 基準を決める所から突き詰める
71/89 先ほどのライブリンクとリアルタイムレンダリングも併せ、プレイアブル中の風の向きと、 カットシーン中の風の向きも併せながらも、ショットごとに手軽に微調整を加えて絵作りを することが可能 映像美を支えたワークフロー 風のイメージも手軽に確認 変更
72/89
73/89 • プライマリの変更にも対応 • セカンダリの変更にも対応 映像美を支えたワークフロー DCCツール セカンダリフィードバック技術の恩恵 セカンダリ プライマリ
ベイクモーション めり込み回避 パフォーマンス 軽減
74/89 • アーティストのからの希望 • シネマティクスへ導入しても 遜色のないシミュレーション技術 映像美を支えたワークフロー こうしてワークフローが実現 アニメーションの 工数を削減
全体の工数を 大きく前倒し 変更にも強い ワークフロー 映像にこだわる 時間の捻出
75/89 映像美を産み出す絵作り
76/89 映像美を産み出す絵作り
77/89 映像美を産み出す絵作り 厚めの塗り 鎧の照り返し 髪のハイライト 肌はマット 必要な要素
78/89 映像美を産み出す絵作り 動 止め 動 カメラのデザイン 手法①
79/89
80/89 映像美を産み出す絵作り before after 色彩のデザイン 手法②
81/89 映像美を産み出す絵作り 色彩のデザイン 手法②
82/89 映像美を産み出す絵作り
83/89 映像美を産み出す絵作り 輝度のデザイン 手法③ 高 低 中
84/89
85/89 映像美を産み出す絵作り
86/89 まとめ
87/89 まとめ テーマ 没入感 映像美
88/89 まとめ 得られた物 没入感 映像美
89/89