CEDEC2020 『ラブライブ！スクールアイドルフェスティバル ALL STARS』（スクスタ）のライブ演出制作秘話～超高品質な3Dライブ演出を表現するための制作概要とオリジナルTimelineツールについて
- 1. 『ラブライブ！スクールアイドルフェスティバル ALL STARS』（スクスタ）のライブ演出制作秘話? 超高品質な3Dライブ演出を表現するための制作概要とオリジナルTimelineツールについて? ? ?KLabGames?SUNRISE?bushiroad All Rights Reserved. KLab株式会社 大貫 詩織 / 伊東 勇輔 / 細田 翔 ?
- 2. 2 2013年にKLab株式会社へ入社。? 各プロジェクトにて3D全般のエフェクト制作?演出制作?演出ディレクションなどを担当。? 『ラブライブ！スクールアイドルフェスティバル ALL STARS』では3Dライブ制作に関する演出提案や実制作、? ディレクション等を行っている。? KLab株式会社 KLabGames事業部 FXアーティスト ? 大貫詩織? 自己紹介? CG制作会社を経て2016年 KLab株式会社にエフェクトデザイナーとして入社。? 『ラブライブ！スクールアイドルフェスティバル ALL STARS』では3Dライブの演出制作全般を担当。? KLab株式会社 KLabGames事業部 FXアーティスト ? 伊東勇輔? 2015年にKLab株式会社へ入社。? 『ラブライブ！スクールアイドルフェスティバル ALL STARS』では3Dグラフィックス開発を担当。? 3Dライブの演出機能の実装、描画のパフォーマンス最適化を行う。? シェーダーやレイマーチングによる映像制作やデモシーン制作が趣味。? KLab株式会社 KLabGames事業部 グラフィックスエンジニア / テクニカルアーティスト ? ? ? 細田翔? 画像
- 3. 3 スクスタとは？?
- 4. 4
- 5. 5 スクスタとは？?
- 6. 6 目次? ● スクスタのオリジナル演出ができるまで? ? ライブ演出内容の構築? スクスタ独自の制作環境? ● UnityのTimelineでここまでできる！? ● スクスタのオリジナルTrack紹介? ● ライブ演出の制作手法? ● 軽量化と品質向上を実現したカスタムシェーダー?
- 14. 14 オリジナル演出の考案?
- 17. 17 ライブ演出の構成を決める? ● 楽曲のイメージから演出内容を決める? ● 原作PVのイメージから演出内容を決める? ● メンバーの特徴から演出内容を決める? ● 現実と架空の表現を組み合わせたオリジナル演出?
- 20. 20 対象の季節から連想するモチーフを使用した演出内容を構築? ? ? 季節をテーマとした演出? 夏色えがおで1,2,Jump!? ?タイトル? 夏、海、水、シャボン玉? ?連想するモチーフ?
- 22. 22 タイトル?歌詞をテーマとした演出? 対象の言葉から連想するデザイン?モチーフを使用した? 演出内容を構築? KOKORO Magic “A to Z”? ?タイトル? A to Zの文字? ?連想するデザイン?
- 31. 31 スクスタ独自の制作環境?
- 34. 34 Unity標準のTimelineを採用するにあたって? ● 開発当初はUnity標準のTimelineが未実装だったため? スクスタ独自のライブエディタを開発していた? ● Unity標準のTimelineの登場? ○ 基本的なUI等が備わっており開発期間が短縮可能? ○ 会社?個人ともにノウハウの流用が可能? ○ 将来的に更に拡張される可能性がある?
- 35. 35 Timelineとは？? ● 時系列順に複数の要素を同時に再生できる? ● 視覚的に要素を組み合わせられる? ● 罢谤补肠办を拡张できる?
- 36. 36 スクスタで使用しているUnity標準Track? ● Activation Track? ○ シーン上のオブジェクトのActive制御? ● Animation Track? ○ シーン上のオブジェクトのAnimationクリップを使った制御? ● Control Track? ○ Prefabの呼び出し?
- 40. 40 スクスタのオリジナルTrack? ● 専用シェーダーをTimelineで直接制御? ○ 直感的で効率良く制作可能に → 制作コスト減? ● ライブ編成やテンポ情報を取得し演出に反映? ○ 没入感のある表現が可能に? ● 不必要な機能を削り負荷軽減? ? 標準TrackとオリジナルTrackを組み合わせる事で? 効率良く多くの表現が可能に！?
- 42. 42 ライブ演出の制作手法?
- 43. 43 ライブ演出の制作手法?
- 45. 45 ライティング演出?
- 47. 47 ライティングによる表現? ● 時間帯? ○ 昼間：明るめ+薄い水色? ○ 夕方：やや暗め+オレンジ系の色? ○ 夜：暗め+青紫系の色? ● 感情? ○ 情熱的：コントラスト強め? ○ 感傷的：コントラスト弱め? ● 曲調? ○ テクノポップ感：鮮やかに? ○ 落ち着いた雰囲気：淡く?
- 51. 51 ライト系アセットの表現方法? ● 光のアクセントや盛り上がりをよりダイレクトに表現? ● HDRで色を設定しBloom使用時の品質を向上? ● 独自のカラーリングシェーダーを使い低コストで自由に表現? ベースの色味? 反射する光? 自己発光?
- 52. 52 ステージ演出?
- 53. 53 ディスプレイ? ● 自由度の高い演出を表現? ● 映像ではなくUnity内でアニメーションを作成? ● ディスプレイ専用シェーダーを使用? ○ ステンシル機能でディスプレイ内にパーティクルを配置? ?
- 54. 54 ステージエフェクト? ● 紙吹雪や床に投影するライトなどの賑やかし要素? ● Prefabを負荷最適化したCustomControlTrackで配置? ● 笔谤别蹿补产として作成するので幅の広いエフェクトを使用可能?
- 57. 57 ポスト処理?
- 60. 60 DoF（被写界深度）? ● 被写体をより魅力的に表現? ● 実際のライブ感のある映像を表現? ● 罢颈尘别濒颈苍别から细かい设定が可能?
- 61. 61 Flare? ● 空気感やライティングの補助? ● 専用シェーダーで擬似的なフレアを再現? ● 罢颈尘别濒颈苍别から细かい设定が可能?
- 62. 62 オーバーレイエフェクト? ● 平行投影カメラを使ったエフェクト? ● TimelineではなくAnimationTrackで制御? ● 细かいレンズフレアや画面上の特殊効果等に使用?
- 63. 63 負荷問題? 演出を盛りすぎて負荷が問題に‥? ● テクスチャのアトラス化やワンメッシュ化を行い、? テクスチャ?マテリアル数の削減? ● 専用シェーダーによる最適化? ● ActivationTrackを使いオブジェクトの非表示化? ?
- 64. 64 ライブ演出の制作手法のまとめ? ● アニメらしさ、現実感を意識したライティング? ○ 負荷軽減のため要素を分けて疑似ライティング? ● リアルでリッチな光の表現? ○ HDRで高輝度な色を使用? ● 少しでも高品質な映像を提供? ○ 最適化、新しい表現の模索? ● ライブ演出に特化したオリジナルTrackの作成? ○ 柔軟なライブ演出を制作する事が可能に?
- 65. 65 負荷対策?
- 66. 66 ポストエフェクトの軽量化?
- 67. 67 ポストエフェクト? Post Processing Stack v1を軽量化? Bloom? 光をブラーして拡散するエフェクト ? DoF（Depth of Field） ? カメラのピンぼけを再現するエフェクト ? Flare? 円形のグラデーションを加算するエフェクト ? ? Unity公式アセット?
- 68. 68 ポストエフェクトの軽量化? ● ポストエフェクト内部のRenderTextureの解像度を下げて軽量化? ○ 対象はBloomとDoF? ○ 垂直解像度を420px? BloomもDoFも内部ではブラー処理? 解像度の劣化は目立ちにくい? ポストエフェクトの? GPU負荷は面積にほぼ比例?
- 69. 69 ポストエフェクトの軽量化? ● ポストエフェクト内部のRenderTextureの解像度を下げて軽量化? ○ 対象はBloomとDoF? ○ 垂直解像度を420px? ポストエフェクトの? GPU負荷は面積にほぼ比例? BloomもDoFも内部ではブラー処理? 解像度の劣化は目立ちにくい? GPU負荷を大幅削減?
- 70. 70 ポストエフェクトの軽量化? DoF：ブラーのアルゴリズムを変更? before: Diskサンプリングによる円形ブラー? ○ 品質は高い。レンズの絞り形状の光学的に正しいブラー（丸ボケ） ? ○ GPU負荷もとても高かった?（ブラー処理だけで 全描画のGPU負荷の45%程度）?
- 71. 71 ポストエフェクトの軽量化? DoF：ブラーのアルゴリズムを変更? before: Diskサンプリングによる円形ブラー? ○ 品質は高い。レンズの絞り形状の光学的に正しいブラー（丸ボケ） ? ○ GPU負荷もとても高かった?（ブラー処理だけで 全描画のGPU負荷の45%程度）? after: 縮小バッファによるブラー? ○ BOXフィルターで、数回ダウンサンプリング + 数回アップサンプリング ? ○ 品質は低いが、GPU負荷はかなり削減できた?（全描画のGPU負荷の6%程度）?
- 72. 72 ポストエフェクトの軽量化? Flareの技術解説? Post Processing Stack v1には? Flareは存在しない?
- 73. 73 ポストエフェクトの軽量化? Flareの技術解説? Post Processing Stack v1には? Flareは存在しない? スクスタ独自に追加実装?
- 78. 78 3D描画全体の軽量化?
- 82. 82 ペンライトシェーダー?
- 83. 83 開発当初のペンライトが抱えていた課題? ParticleSystemによるペンライトでは2つの課題が発生? ● 課題① ParticleSystemのCPU負荷が高い? ○ パーティクル数に比例してCPU計算が増える? ■ 粒の動きのシミュレーション計算? ■ ドローコールバッチングのMesh結合計算? ○ すべて毎フレーム必要な計算となってしまう…? ? ● 課題② ライブ編成と連動した動的なカラー指定が困難?
- 86. 86 専用シェーダーで課題を解決！? 専用シェーダー? 静的な1Mesh（ツールで生成）? アニメーションと色を適用！? 課題① CPU負荷?? 頂点シェーダーでアニメーションをGPU計算に?? 課題② カラー指定??
- 87. 87 専用シェーダーで課題を解決！? 専用シェーダー? 静的な1Mesh（ツールで生成）? アニメーションと色を適用！? 課題① CPU負荷?? 頂点シェーダーでアニメーションをGPU計算に?? カスタムシェーダーで動的なカラー指定を実装?? 課題② カラー指定??
- 93. 93 動作モードの指定? ● Basic YZ: 打ち（普通の縦振り）? ● Growth YZ: 伸び（ゆっくりした縦振り）? ● Basic X: 横振り? ● Stop: 待機（少しだけ動く）? Basic YZ? 打ち? Growth YZ? 伸び? Basic X? 横振り? ペンライト用のTimelineのカスタムクリップ ?
- 94. 94 楽曲のビートとタイミングを同期? CRIのビートシンクに連動した速度同期を実装? 秒数ではなくビート数をシェーダーのプロパティに? ● 制作側のペンライトの速度調整の工数削減? ? ● 楽曲の途中でBPM（テンポ）や拍子が変わる曲に対応? ○ Music S.T.A.R.T!!（サビ前のみ2/4拍子）? ○ Wonder zone（テンポチェンジ）? ○ One More Sunshine Story（テンポチェンジ、拍変更あり）? ○ おやすみなさん！（introにテンポチェンジあり）? ○ さかなかなんだか？（拍変更あり）?
- 95. 95 ライブ編成に応じたカラー指定? 3種類のカラー指定モード? ? ペンライト用のTimelineのカスタムクリップ ? ● Direct? ○ 色を直接指定? ? ● Member? ○ ライブ編成（ダンスしている）の? メンバーカラーを指定? ? ● Original Member? ○ オリジナル（楽曲を歌っている）の? メンバーカラーを指定? ライブ編成（推し）に? 応じたカラー指定ができる?
- 98. 98 ズームすると…? ?
- 99. 99 シェーダーの詳細は、この後すぐのセッションで? 09月04日(金) 16:45 ? 17:45 第3会場? ? 高品質かつ低負荷な3Dライブを実現するシェーダー開発 ? ～『ラブライブ！スクールアイドルフェスティバル ALL STARS』（スクスタ）の開発事例～ ? ● ペンライトシェーダーの実装? ● カラーリングシェーダーの仕組み? ● 描画のパフォーマンス最適化?
- 100. 100 最後に?
- 101. 101 まとめ? ● スクスタのオリジナル演出を入れることで? 新しいライブ体験を提供? ● 楽曲のイメージや原作PV、キャラクター性の観点から? 演出内容を決める? ● スクスタ独自開発のカスタムTrackを使用することで? 標準機能では出来ない演出制作が可能? ● スクスタオリジナルShaderを開発することで? 色の変化や負荷削減をメインとしたペンライトの制作が可能?