電通総研 テックブログ

電通総研が運営する技術ブログ

UE5 PCGのスプライン機能を用いて、プロシージャルに道を生成する

こんにちは、電通総研金融ソリューション事業部の岡崎です。

今回はUE5.2の機能であるプロシージャルコンテンツ生成フレームワーク(PCG:Procedural Content Generation Framework)に関して、
前回の記事に引き続き、より詳しい機能の紹介を行っていきます。

今回はPCGのスプラインという機能を使用して、PCGで草を配置し、さらに道を生成する方法を紹介します。

検証環境/ツール

実装手順

  1. PCGを使用して草を配置
  2. スプラインを作成し、レベル上に配置
  3. PCGグラフを変更してスプライン上の草を排除
  4. スプラインで任意の範囲を指定して草を配置

1. PCGを使用して森を生成

前回の記事と同様、まずはPCGを使用して森を生成します。
今回は簡潔な手順のみ説明します。詳細な説明は前回の記事を参考にしてください。

「PCGVolume」を作成し、レベル上のViewPort上に配置します。

次に「PCG グラフ」を作成します。
今回、PDGグラフ名は「Tech1PCGGraph」と命名しました。

アウトライナー上で先ほど範囲を決めるために作成した「PCGVolume」を選択し、子要素の「PCGComponent」を選択します。

インスタンス直下に Graph を選択する欄があるので、先ほど作成した「PCG グラフ」を選択します。

次に森を作成するためのノードを作成します。

PCGグラフを開き、「Input」の「Landscape」から「SurfaceSampler」ノードを作成して繋ぎます。
さらに「TransformPoints」を接続し、地上に生やしていく草の大きさや向きなどを指定します。

PCGグラフを編集した際に、リアルタイムにViewportに変更が入るので、
同時に変更点を見る事ができるよう、下記キャプチャのようにエディターを配置をして編集をする方法もおすすめです。

次に「StaticMeshSpawner」ノードを作成し、草のStatic Meshを配置します。
「Descriptor > Static Mesh」の順に開き、配置したい草のアセットを選択します。

ここまででPCGを使って任意のアセットをランダムに配置する事ができました。

より詳しいPCGの作成方法は、前回の記事に記載しています。

次は、現在作成した草原に道を作成して、道の上には草を生やさないルールを作成します。

2. スプラインを作成し、レベル上に配置

ここでは道を作成するためにスプラインを使用します。
UEのスプラインとは、ポイントとポイントをラインで繋いだ形状のアクターのことを指します。

まずはブループリントアクターを作成し、「BP_PathSpline」と命名します。

「BP_PathSpline」を開き、左上のAddボタンから「Spline」を追加します。

レベル上でスプラインを見やすくするために「ScaleVisualizationWidth」を300に設定します。

スプラインも少し伸ばします。

次に画面上部の「クラスのデフォルト」を押下し、詳細パネルから「タグ」を検索し、プラスボタンからインデックスを「Path」と命名します。

コンパイルとセーブをして、「BP_Path」をViewPortに配置します。

作りたい道の向きに合わせて「Alt」キーを押しながら頂点をドラッグしてPathを伸ばします。
(スプラインが見えづらかったので、草を一度非表示に変更しています)

PCGで配置した草の上に道にしたいスプラインを配置できたら、PCGグラフに戻ります。

3. PCGグラフを変更してスプライン上の草を排除

先ほどのPCGグラフ「Tech1PCGGraph」を開いて、PCGグラフを編集します。
「GetSplineData」ノードを作成し、詳細パネルの「ActorSelectionTag」を先ほど設定した「Path」にします。
また、スプラインを複数配置した時にも使用したいので「SelectMultiple」にもチェックを入れておきます。

次に「SplineSampler」ノードを作成し、「Dimension」のセレクトボックスから「OnSpline」を選択します。

次に「BoundsModifier」ノードを作成し、「SplineSampler」のアウトプットに繋ぎます。

詳細パネルから「BoundsMin / Max」のY/Zを300にしてデバッグモード(ノード上で「D」キー押下)にするとキャプチャのように、スプラインの範囲が白い棒状に表示されます。

次に、この棒状のスプラインと重なっている草を排除するために「Difference」ノードを作成します。

草を生やしている「Surface Sampler」ノードのアウトプットから「Difference」の「Source」に繋ぎ、
「BoundsModifier」のアウトプットを「Difference」の「Differences」に接続します。

キャプチャのようにノードをつなげる事で、
スプライン上の道に草のメッシュが排除された形で、ランダム生成された形状を作成する事ができます。

4. スプラインで任意の範囲を指定して草を配置

ここでは、スプラインを使用した応用として、スプラインで任意の範囲を指定して草を配置する方法を紹介します。

この記事では、草の生成を「Surface Sampler」を使用して行いましたが、
スプラインを使用して、任意の形の内部にのみ、草を生やすことなどができます。

まずは草を生やす形を決めるために新しいブループリントアクターを「BP_LandSpline」で作成します。

「BP_PathSpline」の時と同様に、スプラインを作成し、キャプチャのように中心点以外の頂点を削除します。

残った頂点を選択し、右クリックで「スプライン生成パネル」を選択し、サークルを作成します。

頂点の数は6にして、半径を2000ほどにしておきます。

選択されている頂点をキャプチャのように上に移動して削除して、途切れた円形にします。

その後、詳細パネルの「ClosedLoop」にチェックを入れて閉じた丸いスプラインに変更します。

完成したら「BP_PathSpline」と同様にタグに「Land」と命名して作成します。

作成した円状のスプラインをViewPortに配置します。

これから配置したスプラインの内部のみ草を生やします。
PCGグラフに戻ります。

「GetSplineData」と、「SplineSampler」を作成し、ノードをつなぎます。

「GetSplineData」はPathの時と同様に、Tagに「Land」を設定します。

「SplineSampler」の「Dimension」のセレクトボックスから「OnInterior」を選択します。

これで円の内側にPCGキューブが配置されました。

「InteriorSampleSpacing」の値を200に、「InteriorBorderSampleSpacing」の値を50程度に調整してPCGキューブの表示間隔を調整します。
また、キャプチャのように大きく隙間が空いている時は、「TreatSplineAsPolyline」にチェックを入れることで均等に配置されます。

続いて、PCGキューブの向きや配置をランダムにするために「TransformPoints」を追加します。
「Projection」のアウトプットから「TransformPoints」に接続して、「RotationMax」のZ値を360に変更し
「Offset Min/Max」のX/Yの値を-200と200に変更し、キューブの重なりなどを排除するために「SelfPruning」ノードを追加します。

当初使用していた「SurfaceSampler」を使用してメッシュを配置していた方法と、今回の「SplineSampler」を使用したメッシュを入れ替える事で、
Landのスプライン上に生成した草から、Pathのスプラインで生成した道上の草を排除する事もできます。

さらに、LandのスプラインやPathのスプラインはコピー生成する事もできるので、下記キャプチャのように草や道を自由に配置する事ができるようになります。


(円形のLandのスプラインを2つに複製したパターン)


(円形のLandのスプラインを変形して複製し、Pathのスプラインも複製して配置したパターン)

今回の機能の紹介はこれで以上になります。

おわりに

今回は、PCGで使用できるスプラインを利用して、より複雑なルールの作成方法を紹介しました。

どのような仕様でメッシュを配置したいかを、PCGグラフ上でノードに落とし込む方法を調査するのは時間がかかりますが、一度ノードを作成できれば複製や編集が容易になるため、UEで何かを制作する際にはとても有効な方法だと改めて感じました。
また、スプラインを使用したスタティックメッシュの配置では、スプラインの形や大きさ、数によってさまざまな地形を作ることができそうです。

ひきつづき、PCGに関する知識を学習していきたいと思います。

現在、電通総研はweb3領域のグループ横断組織を立ち上げ、Web3およびメタバース領域のR&Dを行っております(カテゴリー「3DCG」の記事はこちら)。 もし本領域にご興味のある方や、一緒にチャレンジしていきたい方は、ぜひお気軽にご連絡ください!
私たちと同じチームで働いてくれる仲間を、是非お待ちしております!
電通総研採用ページ

参考文献

執筆:@okazaki.wataru、レビュー:@miyazawa.hibiki
Shodoで執筆されました