この記事で基本的に原作のストーリーには触れませんが、必要最低限の設定内容と数枚のリファレンス画像を含んでいるので、一応ネタバレ注意です。
Demo
1 はじめに
先日、最近大ヒットしたアニメ映画『超かぐや姫！』を映画館で観ました。（ちなみに立川のシネマシティに行ったので、映画館のすぐ外が聖地であることはめっちゃ新鮮でした。）
映画自体はもちろん楽しみましたし、本作の3DCGを活用した演出にも興味を引きました。その中で特に印象に残ったのは、これです。
©コロリド・ツインエンジンパートナーズ
©コロリド・ツインエンジンパートナーズ
仮想世界「ツクヨミ」での人気ゲーム、「KASSEN」のステージにある、空中に浮いている円形劇場・中継会場のような建築です（なお、CGWORLDのインタビューによると、公式の名前はただの「観客席」だそう）。
興味を持った理由は、ちょうど私は少し前に、UE5のPCGを使って、ライブ会場の観客演出を作ったことです。階段席や、観客、ペンライト、共通する要素がかなり多いと思います。
そのため、さっそく元のプロジェクトに基づいて、劇中の観客席を再現してみました。
今回の記事は、私が再現した手順を簡潔にメモしてまとめます。PCGシステムの基本操作や仕組みについての紹介は省略します。
2 実装
2.1 観客とペンライト
観客席と観客の部分は基本的に前に作ったものをそのまま使えます。詳しい紹介とソースコードはこの記事をご参照ください。
半径約20mの円形のSpline Componentを配置し、10列くらいの席を生成します。VAT（Vertex Animation Texture）を活用しているので、Skeletal Meshを使用しなくても観客を動かせる、こういう大規模な群衆の演出も軽く実装できます。なお、前回はInstanced Actorを使用しましたが、ここではもっと直接的にVAT Static Meshだけを生成します。
原作の観客は座った状態ですが、私はアニメーションがあまり得意ではないので、この部分を割愛し、前回作った立ちポーズアセットを流用します。
また、前回はMegaLightsを利用するため、ペンライトが同時に一色しか表現できませんでしたが、今回は映画のようなカラフルなペンライト演出を再現したいと思います。
ペンライトのマテリアルのEmissive Colorに、PerInstanceRandomノードを利用して擬似乱数を作って、一つのマテリアルで多色のペンライトを表現することができます。
ただし前述の通り、こうするとペンライト全体の照明効果が近似しにくくなり、Lumenに頼るしかありません。Emissive値が大きすぎると、Lumenによるノイズが激しくなるので、ご注意ください。
2.2 内側リング
次は、観客席内側にあるストライプ柄の縁を作りましょう。
©コロリド・ツインエンジンパートナーズ
アセットとして、このような、通常マテリアルと発光マテリアル2つの部分がある立方体をUnreal EngineのModelingモードで作ります。
そしてPCGシステムで、一番内側の観客席のSplineをさらに内側に移動します。観客席の地面と同じく「Spawn Spline Mesh」ノードを利用し、キューブを生成すると、連続したストライプのリングが見えます。
また、この縁は斜面になっているので、生成するメッシュのサイズは三角関数を用いて調整する必要があります。
同じ方法で、縁の下の部分と、一番前の列にある柵も比較的簡単に作れます。
2.3 アーチ
最後は、観客席の外側に立っているアーチ形の構造を作ります。
©コロリド・ツインエンジンパートナーズ
この記事を書いている最中、CGWORLDで『超かぐや姫！』のCG監督さんたちのインタビュー記事が発表されました。その記事の中で、例の観客席の3Dレンダー画像が公開されました。
https://cgworld.jp/article/cgw331-chokaguyahime02.html
この新しい情報により、これまで映画の2D画像を参照して推測したアーチの形は異なることが分かりました。具体的には、これまでアーチの上部は外側に伸びると思っていましたが、公式画像を側面から見ると、アーチは全体が曲がって内側を包み込むような形です。
とはいえ、この問題はSplineの形だけに影響し、PCGの仕組みや実装方法など他の部分は、基本的に変わらないと思います。そのため、ひとまず、元の記述のまま公開します。後日Splineの構成を変更したら、この記事を更新するつもりです。
まず全体は、6個のアーチが1組になり、複数組のアーチが重なって一周する仕組みが分かります。さらに、一つのアーチ組の頂点はちょうど隣の組の脚の位置となります。つまり、もしn個の組があれば、各組の脚と頂点の位置は円周上のn点で表せます。
一番外側の観客席Splineをサンプリングし（ここではn=8）、こんな感じです。
次は、アーチを表現するためのPCG Dataの構造を整えます。まずは、サンプリングした8個のPointに、0-7のArchIndexAttributeを付けます。
そして、Point Arrayを3つコピーし、そのうち2つのArchIndexを、それぞれ1と2ずつずらします（例えば、元の0-7のポイントは、1つずらすと1,2,3,4,5,6,0になる）。
PosOnArchのAttributeも追加して、Arch上の位置を表現します（0は先頭、0.5は真ん中、1は最後）。ついでに、中間のPointをZ方向に上げます。
再度3つのArrayをMergeし、Attribute PartitionでArchIndexに基づいてポイントを分別します。出力は、8つのPoint Array Dataになり、それぞれ1つのアーチを構成する3つのポイントが含まれています。
Debugするとこんな感じです。
この3つのポイントからSplineを作って、再度Subdivideすると、アーチが見えるようになります。
しかし、側面から見ると、アーチはまだ真っ直ぐ上にいく形です。原作ではアーチに傾きがあるので、それも再現しましょう。いろんなアプローチで実現できますが、今回はあくまで私が使用した方法を紹介します。
具体的に、現在生成したポイントに対して、XY平面上の方向と、Z方向の高さで定まる、中心角が一定の円錐面との交点を計算し、ポイントをこの点に移動させます。これで、実質的にポイントの方向と高さを変えずに、外側に移動させることができます。
青色のポイントを緑色の位置に移動します
PCGでこの計算を実装します。
結果はこんな感じです。
ここまででアーチの形は定まりましたが、まだ1組あたりアーチが1つしかありません。
作ったアーチデータを効率的に複製するため、PCG Sub Graphを作ります。
Sub Graph内では、回転行列を用いて、回転したポイント位置を計算します。
これでアーチのデータが一旦完成し、Spawn Spline Meshを使用して、アーチを生成できます。
メインGraphに戻って、原作は1組に6つのアーチがあるので、ここもSub Graphを6つ複製して、それぞれ違った角度で回転します。
既になかなかいい感じになっていますが、まだ細かい調整が2つあります。
1つ目は、現在すべてのアーチが同じ円錐面にあるので、アーチ同士が必ず交差します。
しかし、原作を見ると、2つの組間は、少し前後がずれていて、ぎりぎり交差しません。
©コロリド・ツインエンジンパートナーズ
完璧ではないが、ここではシンプルな解決策を使っています。元の円錐面より、少しだけ中心角が大きい、もう一つ円錐面のポイント位置を計算します。そして、PosOnArchを活用して、2つのArray間をLerpします。これにより、アーチの末尾は先頭より後ろになります。
2つ目は、アーチの頂点はちょっと太く見えます。そのため、もう一度PosOnArchを使って、メッシュのサイズをLerpし、中間部を細くします。
調整前
調整後
最終の効果はこんな感じです。
2.4 おまけ
原作にはないが、夜のシーンになると、アーチがはっきり見えないと感じたので、アーチのポイントを再利用し、Spot Lightを生成しました。光と影で、迫力ある建築構造をより一層強調できると思います。
Spot Lightなし
Spot Lightあり
3 おわりに
今回は映画『超かぐや姫！』にあるシーンをUnreal Engineで再現してみました。PCGシステムの力で、大規模な建物と数千名の観客をすべて一つのSplineから生成することができます。
『超かぐや姫！』には、他の3DCGが活用された魅力的なシーンがたくさんありますので、またしっかり考察・勉強したいと思います。