はじめに
「Happy Elements Advent Calendar 2023」 12月22日の記事です。
こんにちは。Happy Elements株式会社 カカリアスタジオで『あんさんぶるスターズ！！Music』（以下『あんスタ！！Music』）のゲームエンジニアをしている H.K. です。主にあんスタ！！Musicの3DライブMVの開発・運用を担当しています。
本記事では2023年に公開された『あんスタ！！Music』のMVで使われている演出技術のうち、特にエンジニア視点で注目したいものを振り返り、技術的な要素について軽く解説したいと思います。分量の都合上すべてのMVに触れることができませんがご了承ください。
流星隊「Colors Arise」
本MVの特徴として、キャラクターの入れ替えに対応する必要がない一部のカットにおいて全画面のプリレンダ映像を使っていることが挙げられます。一番最初やユニットロゴが映る箇所などがそれに該当します。このような全画面の映像を再生する仕組みは、実は3Dステージ上のモニターに映像を流す仕組みと大きく異なっています。全画面映像には CRI Sofdec2 の動画ファイルを用いており、3D中のモニター映像ではできなかったリッチな表現が可能となっています。[1] 「あんさんぶるスターズ！！アニメーションMVシリーズ」の映像をゲームで再生するときにもこの仕組みが使われています。
MVの途中で3Dと全画面映像を切り替える仕組みは 「エンドレスヴィーデ」 で実装されました。動画ファイルは3Dデータとは独立の単一のファイルとなっており、全画面映像の箇所だけが（多少の余尺を挟みつつ）連続して書き出されたものになっています。MV再生時、プログラムは動画の再生タイミングを指定するデータをもとに、適切なタイミングで3Dと動画の切り替えを行います。動画の再生制御は CRI のプラグインが提供する非同期な API で行っているため、タイミングを完全に制御できるわけではありません。そのような状況でも可能な限りMVの再生が安定するように、動画ファイルをひとつながりの構造にすることで 動画の読み込み負荷 や 動画切り替え時のシーク負荷 を最小限に抑えるなどの工夫をしました。
反省点として、3Dと全画面映像の切り替え処理にバグが残ったままリリースしてしまいそうになるというエピソードがありました。実は既存の仕組みではSPPの存在を考慮できておらず、SPP区間内に全画面映像が存在する今回のMVで危うく正常に動画が切り替わらない不具合が発生してしまうところでした。実際はアプリのアップデート前に不具合に気づいて修正することができ、ことなきを得ています。
Valkyrie「迷宮電子回廊」
本MVでは1:49〜2:00にかけてノイズの混ざった映像が画面全体に合成され、サイケデリックなビジュアルを作り出しています。
昨年のハロウィン楽曲MV 「Ghostic Treat House」 および 「Helter-Spider」 で、任意のシェーダーで画面に映像を合成する機能を実装済みでしたので、今回もその機能を使っています。映像を合成するシェーダーについては、デザイナーに映像制作ソフトで試作・検討してもらって決まった計算式「差の絶対値」をシェーダーに移植することで作成しました。計算自体は非常に単純ですが、計算を行う 色空間 がリニアなのかガンマなのかによって結果が大きく変わるため、実装時に注意が必要なポイントとなります。
本MVのステージは比較的シンプルなつくりですが、そのぶん細かな演出上の工夫によって独特の雰囲気を補強しています。そのうちの1つが レーザービームの接地エフェクト です。
このエフェクトを実現しているのはビームと床の交点にメッシュを描画する機能で、 「魅惑劇」 と 「Melody in the Dark」 で実装されて以来、他のMVでは（同じ用途では）使われることはありませんでした。なんと約3年ぶりの再登場ということになります。『あんスタ！！Music』リリース以降、3D担当のゲームエンジニアも当時より3Dのグラフィックに対する理解が深まってきたため、古い機能でもより自然に効果的に利用できるようになったと思います。
ビームと床の交点には、実際には2種類のメッシュが描画されています。1つは床面に平行な正方形のメッシュ、もう1つは床から垂直に折れ曲がったメッシュです。
- 床面に平行なメッシュは 投影機能 （参考: 『あんさんぶるスターズ！！Music』における3D演出開発の工夫 〜U.S.A.のプロジェクションマッピング〜 ）を使い、床を照らすように描画しています。これは床の表面の粗い構造により、ビームが直接当たっている部分よりも少し広い範囲まで照らされるのを表現しています。
- 折れ曲がったメッシュは半球をY軸ビルボードで表現したものといえます。これは床面で拡散反射した光が床付近のスモークによって散乱し、接地点周辺の空間が光って見えるのを表しています。
Crazy:B「Crazy Anthem」
本MVには『あんスタ！！Music』の3DMVとしては過去最大級の多様な背景が登場します。全ての背景を3Dで作成することは現状の制作体制では現実的ではないため、背景に 2Dのイラスト を多用しています。例えば下の画像のカットでは、キャラクター・紙袋・キャラクターの影・太陽のレンズフレア以外の部分は1枚のイラストで作られています。キャラクターを馴染ませるため、シーン上に水平な透明の板を置き、キャラクターの影を乗算で描画しているのが工夫ポイントです。
ドライブのシーンでは、比較的少ないオブジェクト数で表現できるように企画段階から道路周辺のデザインやカメラアングルが考慮されています。道路のオブジェクトを後ろにスクロールし、キャラクターの髪を風で揺らすことで走行しているように見せています。エンジニア的な細かいこだわりポイントは車体への背景の映り込みです。Parallax Corrected Cubemap （参考： 『あんさんぶるスターズ！！Music』MV「Heart aid Cafeteria」の小物の受け渡しについて ）をスクロールしながらサンプリングし、ループするように処理するシェーダーを作成しました。以下の画像は背景の映り込みがわかりやすいカットと実際に使っているキューブマップのプレビューです。
Double Face「Bye-Bye Buddy」
本MVは、キャラクターが映ったスクリーンが割れる演出、新聞紙に直前のカットが写真として印刷される演出、画面分割のアニメーションで2つの視点が楽しめる演出など、サブカメラをフル活用したテクニカルな演出が特徴です。
スクリーンが割れる演出では、デザイナーが Maya で制作したアニメーションを Unity 上で頂点アニメーションテクスチャの形に変換して使っています。これは以前ご紹介した 『あんさんぶるスターズ！！Music』MV「Heart aid Cafeteria」の小物の受け渡しについて のコーヒーと同様の制作方法となっています。頂点アニメーションテクスチャの手法は昨年の 「Romancing Cruise」 以来何度か採用してきましたが、テクスチャに記録するアニメーションの形式など細かな点は毎回最適なやり方を模索しています。今回はガラス風の表現をするため、移動・回転する剛体の集合を法線付きで効率よく扱えるような形式を実装しました。破片は激しく回転しながら移動するため、頂点アニメーションテクスチャに記録される 数値の精度 が問題となりがちでした。ただ、振り返ってみると必ずしも頂点アニメーションテクスチャを使う必要はなく、単に破片ごとに Animation Clip でトランスフォームを制御し、描画の効率化は Unity のダイナミックバッチングに任せるのでも十分だったかもしれません。[2]
新聞の写真はもちろんキャラクターの入れ替えに対応しており、三毛縞 斑のポジションに編成したアイドルが写ります。直前のカットの描画結果を加工して Render Texture に記録しておき、紙面上に表示する仕組みになっています。単にモノクロ加工するだけでは暗い写真になってしまうので、事前に明るさを上げておいたり、紙と馴染ませるためにノイズテクスチャを乗算するなどの工夫をしました。
fine「Dreaming Ocean」
本MVではまず第一に、水の表現が大幅にクオリティアップしました。『あんスタ！！Music』の既存の水面シェーダーと比べて、 頂点シェーダー で 尖った波 （ゲルストナー波）を生成する機能が追加されています。これまではフラグメントシェーダーでのみ波を生成していましたが、それだけでは水面をメインで見せたい場合の説得力に難がありました。この手法はメッシュのグリッドをかなり細かく刻む必要があるため、遠くの海では頂点の波をフェードアウトさせて粗いグリッドで済むようにしています。
海底遊園地のシーンで上空に表示される水面には、陸上から見た海面とは異なるシェーダーを用いています。こちらのシェーダーでは、空から差し込む光を物理的な正しさよりも意図した見栄えに近づけやすいことを重視して実装しました。具体的には、光が透過して明るく見える領域が現実よりも広く、緩やかにフェードしていくようになっています。なお、ライトシャフト（光の筋）は海面のオブジェクトとは別にパーティクルシステムを使って描画しています。
海のほか、魚群も少し工夫したつくりになっています。近くを泳いでいる魚は1匹ずつアニメーションが付けられていますが、遠くを泳いでいる魚は数が非常に多いので、負荷対策のために十数匹単位でグループ化した魚群に頂点アニメーションテクスチャを適用するような方法をとっています。また、各グループは曲線に沿って進んでいきますが、その曲線の配置には Cinemachine の Path 機能を使いました。魚群の軌跡を直感的に配置できるため、制作にはかなり便利な機能です。
アルバムシリーズ『TRIP』用新規ステージ
あんさんぶるスターズ！！アルバムシリーズ『TRIP』 の各ユニットのリードトラックMVでは、事務所ごとの4つのステージ（以下「アルバムステージ」）が使われます。これらのステージを追加するにあたりエンジニア泣かせとなったのは ステージを取り囲むような特異なスクリーン形状 でした。このような形状では、映像の内容を決める段階から注意しておかないと映像データが肥大化しがちであるという問題があります。
3Dのダウンロード容量に占める最大勢力はキャラクターのアニメーションデータですが、映像のデータも無視できない割合で含まれています。再生時のメモリ負荷などパフォーマンスにも影響するため、データが現状よりも大幅に肥大化するのは許容できないといえるでしょう。
標準のスクリーンの仕組み
アルバムステージのスクリーンの課題を説明しようとすると話の前提が非常にややこしいため、まずは現在使っている標準のスクリーンの仕組みを説明します。『あんスタ！！Music』のMVでは、「Colors Arise」の節で述べた CRI Sofdec2 の動画ファイルを用いた全画面映像を除き、動画をテクスチャシート（連番画像をまとめたもの）の形で利用しています。下の画像はテクスチャシートの例で、 「Turbulent Storm」 のメインスクリーンで使っているものです。
また、スクリーンには単一のテクスチャシートの動画を表示するだけでなく、複数のテクスチャシートやサブカメラで撮影した Render Texture などを レイヤー として任意の位置に合成したり、全体に色を加算・乗算したりする機能も備わっています。（下の画像は機能の説明のために設定したもので、実際のMVとは異なります。）
サブカメラの撮影内容はシーン上で自由にセットアップ可能なため、スクリーン機能で対応しているレイヤー数では足りない場合や、任意のカスタムシェーダーで映像を動的に生成するのに使うことができます。容量肥大化の回避のためサブカメラとカスタムシェーダーを使った例について、 I.S. さんが今年のアドベントカレンダーに投稿していますので、是非ご覧ください。
『あんさんぶるスターズ！！Music』MV軽量化の取り組み(レーダー風扇形シェーダー)・新卒入社して一年の感想
テクスチャシート動画の制約
テクスチャシートは動画の全てのコマをテクスチャに収めるため、解像度・フレームレート・動画の数が全体の容量に直結します。また、1個の動画が1枚のテクスチャに収まらず2枚以上にまたがる場合は、容量肥大化だけでなく設定の手間も大幅に増加します。そのため、基本的に動画はできる限り小さい解像度・フレームレートにせざるを得ません。
モニター自体が非常に大きく、ゲーム画面から常にはみ出しているような場合は、動画解像度の制約は深刻なものとなります。低解像度の動画を無理に引き伸ばすと見苦しくなってしまうため、 演出内容をチェックする段階から 以下のような対策を提案しています。
- 映像が短時間でループするようにし、少ないコマ数で済むようにする。
- 動画を上下左右に タイリング させ、小さい解像度で済むようにする。（スクリーン機能には動画をタイリングさせる機能があります）
- 静止画のスクロールや回転で済むようにする。
- 滑らかなグラデーション映像にして、低解像度でも汚くならないようにする。
- 変化が緩やかな映像にして、 フレームブレンド （これもスクリーン機能に実装済み）により極めて低いフレームレートでもガタガタに見えないようにする。
その他、前述のようにサブカメラで映像を動的に生成する方法が使えそうであればそれも検討します。
アルバムステージのスクリーンで実装したこと
データが肥大化しすぎないように映像を調整してもらう以外に、機能開発面でのサポートとして映像の多様な投影方法にできるだけ柔軟に対応できるようにしました。具体的には、レイヤーごとに映像のマッピングに使用するUVや投影カメラを選択する機能を実装しました。
例えばコズミック・プロダクションのステージの帯状スクリーンのメッシュには、全体をUV座標 (0, 0) 〜 (1, 1) に収まるように展開した通常のUVの他、帯の方向に沿って展開されたUVも格納されており、映像によって使い分けることができます。 「トゥウィンクル空中戦」 では、帯の方向に沿ったグラデーションと通常のUVでタイリングされたテクスチャシート動画が組み合わせて使われています。（ちなみにスクリーンの床の部分と壁の部分は別制御になっています。）このように、さまざまなUVをレイヤーごとに使い分けることで、全体としては複雑な映像を比較的軽いデータで表現することができました。
「NA NA NA SUMMER NIGHT BeeAT」 では投影カメラが使われている箇所もあります。これはどのような機能かというと、投影角度を制御するためのダミーのカメラを設定することで、プロジェクターのような映像のマッピングが行われるというものです。[3] スクリーン全体を (0, 0) 〜 (1, 1) に展開したUVを使えば十分に思えるかもしれませんが、スクリーンが 曲面 であることから映像の歪みが気になることが多く、そんな時はメインカメラに近い角度に配置した投影カメラを用いることで歪みを緩和しています。
おわりに
各MVについて振り返る中で、工夫やこだわりのポイント、過去のMVからパワーアップした点、エンジニア視点での悩みどころなどについて触れてきました。弊社エンジニアがMV制作にどのように関わり、MVのクオリティアップにどのように貢献しているかが雰囲気だけでも伝われば幸いです。
『あんスタ！！Music』のMVがどのように制作されているのかについてさらに興味のある方は、他職種のアドベントカレンダー記事も是非ご覧ください。
- MV企画: 「あんさんぶるスターズ！！Music」MV企画時のお仕事内容・こだわりについて｜Happy Elements株式会社 カカリアスタジオ
- 3DCGデザイナー: Happy Elementsの仕事 『3DCGデザイナー』職種の紹介｜Happy Elements株式会社 カカリアスタジオ
Discussion