TOPIC 33|PLATEAUを使った映像作品を作る【後編】 夜景の作り方と大量のオブジェクトのアニメーション制御[1/2]|夜景シーンを作る
PLATEAUの3D都市モデルを映像分野で活用するトピックの後編です。後編では、夜景の作成方法と大量のオブジェクトをアニメーションで制御する方法について説明します。まずは夜景のシーンを作成します。

PLATEAUの3D都市モデルを映像分野で活用するトピックの後編です。後編では、夜景の作り方と大量のオブジェクトをアニメーションで制御する方法について解説します。
このトピックの内容は「PLATEAUを活用した映像表現の応用 LOD3の活用や大量オブジェクト制御によるシーン制作法」(2024年度PLATEAU Hands-onアーカイブ動画)でも制作方法をハンズオン形式で紹介しています。
【目次】
33.1 _ このトピックの見どころ
このトピックは、Blenderを使って映像作品を作る「TOPIC 32|PLATEAUを使った映像作品を作る【前編】」の続きです。後編となるこのトピックでは、夜景のシーンの作り方を解説します。3D都市モデルを読み込んだり、シーンを作ったり、環境光を設定したりする基本的な操作については、前トピックを参考にしてください。
主な見どころは、次の3つです。
① 屋根瓦を作る
PLATEAUの3D都市モデルはテクスチャが貼られていますが、近景ではそのディテールが少し気になることがあります。そうしたとき凹凸を出すと、リアル感が増します。
凹凸を出す一例として、屋根瓦を作って屋根に配置する手法を紹介します。瓦を1枚作って、それを並べて作ります。瓦を並べるには、Blenderのジオメトリノード機能を使います。

↓

② 窓の光を作る
PLATEAUの都市モデルには、昼景のテクスチャが貼られています。これを夜景にするには、環境光を夜のライティングにして、適度に街灯を付けます。近景ではこの方法がとれますが、建物が多すぎる遠景では作業量が多く、現実的ではありません。そこで、ビルの窓が光るようなテクスチャと元のPLATEAUのテクスチャとをランダムにミックスして光を加えることで、より簡易な方法で夜景を作る方法を紹介します。

③ 大量のオブジェクトを動かす
夜景のシーンでは、大量の建物が浮遊していくシーンがあります。Blenderでアニメーションするには、キーフレームを打っていくのが基本ですが、たくさんのオブジェクトを動かすのは現実的ではありません。そこで、①の屋根瓦の敷き詰めと同じくジオメトリノードの機能を使って、たくさんのランダムなポイントを置き、そこに建物のオブジェクトを配置、ポイントの位置をキーフレームに応じて自動的に動くように構成することで、たくさんのオブジェクトがまとめて動くように作る方法を紹介します。

33.2 _ 近景の夜景シーンを作る
まずは、近景の夜景シーンから作っていきます。
33.2.1 _ シーンの場所
作るシーンの場所は、祇園白川の辺りです。TOPIC 32で説明したのと同様の方法でBlenderに3D都市モデルを読み込み、クリーンナップしておきます。

図33-5 実写リファレンス(Googleストリートビュー)

33.2.2 _ 環境光を設定する
まずは、環境光としてHDRIを設定します。
【メモ】
以下の手順では、テクスチャを容易に割り当てられるNode Wranglerアドインを使っています。インストールの方法については、TOPIC 32のコラム「Node Wranglerのインストール」を参照してください。
【手順】環境光を設定する
[1]HDRIを用意する
環境光として使うHDRIを、あらかじめ用意しておきます。今回は、購入した素材を使いましたが、Poly Havenなどから「Sunset」で検索して、似たような雰囲気の画像を使うとよいでしょう(例えばhttps://polyhaven.com/a/sunset_fairway)。

[2]Shaderエディタを開く
ウィンドウの枠をドラッグして二分割し、Shaderエディタを開きます。

[3]Worldに切り替える
Shaderエディタが開いたら、Worldに切り替えます。

[4]テクスチャをまとめて配置する
現在のShaderの設定が表示されます。[Background]をクリックして選択し、[Ctrl]+[T]キーを押すと、テクスチャの構成がまとめて追加されます。
【メモ】
[Ctrl]+[T]キーは、Node Wranglerアドインを有効にしていないと効きません。

[5]HDRIを選択する
[Open]をクリックし、手順[1]で用意しておいたHDRIを選択します。

[6]環境光が設定される
環境光が設定されました。

33.3 _ 木々や電柱を配置する
TOPIC 32と同じ方法で、木々や電柱のアセットを配置します。ここでは、実写の雰囲気に近い木を配置しました。また背後には、電柱や電線も配置しています。やり方は同じなので、具体的な手順は省略します。

33.4 _ 屋根瓦をリアルに張り替える
さて、実際にレンダリングするとわかりますが、屋根瓦はテクスチャで貼られているだけなので、のっぺりとしています。そこでリアル感を増すために、屋根瓦をモデリングして張り替えます。

33.4.1 _ 瓦をモデリングする
このプロジェクト上で進めても良いのですが、少しややこしいので、新しいプロジェクトを作ってそこで瓦をモデリングして、それをあとで、このプロジェクトにコピーするやり方をとります。
Blenderで新規プロジェクトを作成し、次のようにします。
【手順】瓦をモデリングする
[1]瓦の形状を確認する
Googleの画像検索などを使って、瓦がどのような構造であるかを確認します。瓦は複数枚が少しずつ重なる構造です。この1枚をモデリングで作り、それを重ねて実現します。そこで、断面図がどんなものかをおおよそ確認しておきます。

[2]断面図を作る
瓦の断面図として、図33-15に示した完成形を目指します。この断面図は、円を作り、そのパスを加工して作ります。

(a)円を作る
[Shift]+[A]キーを押して追加メニューを表示し、[Mesh]―[Circle]をクリックして、円を作成します。

(b)回転させる
円が描かれます。回転したいので、[R]キーを押します。これで回転します。X軸方向に回転させたいため、[X]キーを押し、そのままテンキーの[9][0][Enter]と入力すると、X方向に90度回転できます。

↓[R][X][9][0][Enter]

(c)不要な点を削除する
この状態から断面図を作っていきます。テンキーの[1]を押して正面から見たビューに切り替え、[Tab]キーで編集モードに入ります。
まずは、不要な点を削除します。半分よりも少し上までをマウスでドラッグし、[X]キーを押して削除します。また左側も少し削除します。


(d)パスを伸ばす
右側のパスを伸ばします。右側の点を選択して[G]キーを押します。すると頂点を動かせるので、適当なところまで移動して、パスを伸ばします。

↓[G]キーを押して、マウスドラッグで伸ばす

(e)曲げるための頂点を増やす
手順(d)で伸ばしたパスを曲げていくための頂点を作ります。手順(d)で作成した始点と終点を選択して右クリックし、表示されたメニューから[Subdivide]を選択します。すると、中央に頂点が追加されます。


(f)頂点を移動する
[G]キーを押して、手順(e)で出来上がった頂点を下に移動します。

(g)さらに分割する
さらに曲げるため、3点を選択して、Subdivideします。

(f)頂点を移動する
追加された2点を選択し、[G]キーを押し、下方向に移動します。

↓2点を選択し、[G]キーを押してから下に移動

(g)パスがなめらかになるように微調整する
手順[1]で確認したリファレンスを見ながら、パスがなめらかになるように微調整します。

[3]押し出す
テンキーの[7]を押して、上から見たビューに切り替えます。押し出すには、[A]キーを押して全選択してから[E]キーを押します。するとマウス操作で、押し出せるようになりますが、Y軸に固定したいので、[Y]キーを押して、Y軸方向のみに押し出し方向を制限します。まっすぐ方向に動くようになったら適当なだけ押し出します。ここでは4マス分、押し出しました。
【メモ】
ピッタリそろえたい場合は、ドラッグ中にテンキーを押します。例えば、[3]を押すと3マス、[4]を押すと4マスにスナップできます。

↓[A][E]を押し、[Y]でY軸に固定して、マウスドラッグで押し出す

[4]厚みを付ける
これで断面が出来上がりました。[Tab]キーで編集モードを抜けます。[Modifier]のメニューを開き、[Add Modifier]から[Solidify]を選択します。
追加したSolidifyの[Thickness]の値を調整して厚みを付けます。ここでは、-0.17mにしました。



[5]なめらかにする
なめらかにするため、[Add Modifier]から[Subdivision Surface]を追加します。
このままだと形状が壊れているので、追加したSubdivision Surfaceの[Boundary Smooth]を[Keep Corners]に変更します。さらに、Modifiersの一覧から[Subdivision]と[Solidify]の順序を入れ替え、[Subdivision]が上に来るようにします。

↓



[6]さらになめらかにする
右クリックして、[Shade Auto Smooth]をクリックします。これでさらになめらかになります。

33.4.2 _ 瓦を仮に並べて雰囲気を見ながら微調整する
これで1枚の瓦が出来上がりましたが、さらに、並べて重ねたときを見ながら微調整します。
並べるには、Arrayモディファイアを構成します。操作の詳細については、チュートリアル動画の瓦を並べている操作(02:16:30~)を参照してください。

33.4.3 _ マテリアルを設定する
次に、瓦のマテリアルを設定します。
【手順】瓦のマテリアルを設定する
[1]マテリアルを用意する
瓦に使用するマテリアルを用意します。今回は、Poly Havenからコンクリート風のマテリアルをダウンロードして使います。
【Concrete Floor Worn 001】
https://polyhaven.com/a/concrete_floor_worn_001

[2]Shader Editorを開く
画面を2分割して、Shader Editorを開きます。

[3]マテリアルを追加する
瓦のオブジェクトを選択し、[Material]メニューを開きます。[New]をクリックして、新規マテリアルを追加します。

[4]マテリアルを構成する
追加されたShaderをクリックして、[Ctrl]+[Shift]+[T]を押します。すると、マテリアルのファイルを選択できるので、手順[1]で用意しておいたマテリアルファイルを選択します。



[5]調整する
レンダーして確認すると暗すぎることがわかりますが、これは、環境光の問題です。「33.2.2 環境光を設定する」で利用していたHDRIを適用して、実際の見た目に変更します。
細部を確認するとUVマッピングが適用されていないことがわかるので、[Tab]キーを押して編集モードに入り、[A]キーで全選択して[U]キーでUVの設定メニューを開きます。そして、Unwrapを適用します。すると、コンクリートの肌理(キメ)が出てきます。
【メモ】
HDRIを適用するには、Shaderで[World]を選択し、[Ctrl]+[T]で追加します。その方法は、「33.2.2 環境光を設定する」と同じです。

↓本編のHDRIを適用したところ


[6]完成
以上で完成です。次の工程では、1枚の瓦をジオメトリの機能を使って並べるため、Arrayモディファイアを削除し、1枚の瓦に戻しておきます。また、コレクションにKawaraというわかりやすい名前を付けておきます。そして、このプロジェクトを保存します。

33.4.4 _ 屋根に瓦を貼る
では、この瓦をPLATEAUの3D都市モデルの屋根に合わせて貼っていきます。
■ 瓦のオブジェクトを読み込む
まずは、瓦のオブジェクトを読み込みます。
【手順】屋根のオブジェクトを読み込む
[1]瓦のコレクションを読み込む
PLATEAUの3D都市モデルのほうのプロジェクトを開き、[File]メニューから[Append]を選択します。作成した瓦のプロジェクトファイルを選択すると、Kawaraコレクションがあるので、これを読み込みます。


[2]屋根のポリゴンを分離する
貼り付け先の屋根のポリゴンを分離します。建築物モデルのLOD3オブジェクトを選択して[Tab]キーで編集モードに入ります。貼り付けたい屋根をクリックしたら、[Shift]+[D]キーで複製します。右クリックして元の位置に戻し、それから[P]キーを押して[Selection]を選択して、別のオブジェクトに分けます。
さらに[M]キーを押して、[New Collection]を選択して、新しいコレクションにします。ここではRoofという名前のコレクション名にしました。



[3]原点を調整する
以下では、ジオメトリノードの機能を使って、瓦を並べます。そのためには、原点を合わせておく必要があります。
分離した屋根オブジェクトを選択した状態で、[Object]メニューから[Set Origin]―[Origin to Geometry]を選択します。すると、原点がオブジェクトの中心に設定されます。


■ 瓦を敷き詰めて面を作る
この瓦を敷き詰めて、面を作ります。敷き詰めるには、Blenderのジオメトリノード機能を使います。これは、描画時に頂点などを加工することで、元の形状を破壊することなく描画するときだけ変形などを適用する機能です。
まずは、原点から瓦を配置して、屋根の面を作るところまでを説明します。
【手順】ジオメトリノードの機能を使って、瓦を敷き詰める
[1]ジオメトリノードを追加する
屋根のオブジェクトを選択した状態で、[Geometry Node]のタブをクリックし、ジオメトリノードエディタを開きます。[New]をクリックして、ジオメトリノードを追加します。
【メモ】
オブジェクトが見えないときはテンキーの[.](ピリオド)を押すと、選択したオブジェクトにフォーカスするので見えるようになります。

[2]瓦の参照を追加する
[Outliner]にある瓦のオブジェクトを、開いたジオメトリノードエディタにドラッグ&ドロップして配置します。これで、ジオメトリノードから瓦のコレクションを参照するCollection Infoノードが出来上がります。

[3]瓦の出力を確認する
瓦のコレクションを参照するCollection Infoノードの出力をジオメトリの出力に接続すると、出力を確認できます。[Alt]+[Shift]を押しながら、Collection Infoノードをクリックすると、ノードの出力であるGroup Outputとつながります。すると、瓦が1枚表示されるのがわかります。

[4]瓦を配置する線分を作る
この瓦を線の上に配置していきます。まずは、[Shift]+[A]キーを押して、Mesh Lineノードを追加します。これが線になります。
[Alt]+[Shift]キーを押しながら配置したMesh Lineノードをクリックして、一時的にGroup Outputノードに接続して確認するとわかりますが、配置直後のMesh Lineノードは、原点から垂直に伸びた線分を出力します。
今回は、横方向に伸ばしたいので、OffsetのZを0、Xを1に、それぞれ設定します。すると、横向きに変わります。



[5]瓦を線分上に配置する
手順[4]で作成した線分の上に、瓦を配置します。[Shift]+[A]キーを押して、[Instance On Points]を追加します。追加したら、Mesh LineとGroup Outputの間に挟みます。そしてCollection InfoノードのInstanceをInstance On PointsノードのInstanceに接続します。すると、この線分上に、瓦が配置されます。



[6]間隔を調整する
図33-56を見るとわかるように、瓦の間隔が詰まりすぎています。Mesh LineノードのOffsetのXの値を調整し、適度な間隔になるようにします。

[7]複製する仕組みを作る
これで線分上に瓦が並んだので、今度は垂直方向にコピーして面を作ります。
まずは複製するためのノードとして、[Shift]+[A]キーを押して、Duplicate Elementsノードを追加します。追加したら、Mesh LineとInstance on Pointsの間に挟みます。
Duplicate ElementsノードのAmountを変更すると、複製回数を設定できます。例えば、「7」に設定すると、[Instances]の部分で増えていることは確認できます。ただし、見た目は変わりません。これは同じ位置に複製されているためです。




[8]ズラしながら垂直方向に複製する
そこで、ズラしながら複製するように修正します。それにはまず、[Shift]+[A]キーを押して、Set Positionノードを追加して、Duplicate ElementsとInstance on Pointsの間に挟み込みます。
Set Positionノードは、位置を指定するノードです。Duplicate ElementsノードのDuplicate Index出力からは、繰り返し回数を示す、0、1、2、…の値が出力されます。そこで、この値を使って表示位置を計算してSet PositionノードのOffsetに入れれば、繰り返し回数ごとに、表示位置をズラせます。
計算するために、[Shift]+[A]キーを押して、Mathノードを追加します。追加したら、かけ算の計算に変更するため、ModeプロパティをMultiplyに変更します。この操作をするとMathノードの名称がMultiplyに変わります。
さらに[Shift]+[A]キーを押して、XYZを合成するためのCombine XYZノードを追加します。追加したら、その出力をSet PositionノードのOffset入力に接続します。
今回は、繰り返し回数に応じて、Y座標の値を動かしたいと思います。そこで、Duplication ElementsノードのDuplicate Index出力をMultiplyノードのValue入力に接続し、MultiplyノードのValue出力をCombine XYZノードのY入力につなぎます。これで、繰り返し開始回数×Valueプロパティの分だけ、Y座標がズレるようになります。実際、Valueプロパティの値を変更すれば、瓦が面に広がります。








[9]Z軸方向にズラして段差を作る
さらにZ軸方向にもズラすことで、瓦が積まれる様子を作ります。Multiplyノードをクリックした状態で[Shift]+[D]キーを押して、複製します。そして同じように接続しますが、今度は、Z入力に接続します。このままだとズレ幅が大きすぎるので、わずかだけズラすようValue入力の値を調整します。ここでは0.1としました。


[10]瓦を敷き詰めた平面の完成
以上で完成です。水平方向の長さはMesh LineノードのCount入力で、垂直方向の長さはDuplicate IndexesノードのAmount入力で、それぞれ調整できます。


■ 元の屋根の位置に配置する
ここまで作った屋根の面の位置は原点にあります。これを実際の屋根がある場所に移動して配置します。
これまで見てきたように、Instance On Pointsノードを使うと、頂点の位置にオブジェクトを配置できます。この性質を使えば、屋根の面を設定したInstance On Pointsノードに対して、表示位置を指定した左下のポイントを入れれば、その位置に表示されることは明らかです。左下のポイントは、元の屋根のジオメトリから求められます。屋根は、四角形の4頂点で構成されているので、ここから左下以外の3点を削除することで作れます。

まずは、左下以外の不要な頂点を削除します。頂点は、それぞれ頂点の番号を持っています。頂点を削除するには、Delete Geometryノードを使います。Delete Geometryノードに削除したいノード番号の配列を入れると、それらを削除できます。

【手順】不要な頂点を削除する
[1]Delete Geometryノードを追加する
[Shift]+[A]キーを押し、Delete Geometryノードを追加します。

[2]出力に挟み込む
配置したDelete GeometryノードをGeometry Inputノードの直後に接続します。

[3]Set IDを追加する
頂点のID番号を指定できるようにするため、[Shift]+[A]キーを押してSet IDノードを追加し、Group InputとDelete Geometryの間に挟み込みます。

[4]IDを追加する
[Shift]+[A]キーを押してIDノードを追加します。IDノードは、ジオメトリのすべての頂点番号の配列(図33-74に示したような4点であれば、0、1、2、3)を出力するノードです。これをSet IDノードのID入力と接続します。


[5]指定した頂点以外を選択する
このIDに「削除しない頂点の番号」を指定し、「それ以外を削除」という動きにします。そのために、2つの値を比較できるCompareノードを追加します。
Compareノードは、入力Aと入力Bを持ち、その差分を出力するノードです。ここでは、入力Aに全頂点(IDノードの出力)、入力Bに「削除しない頂点の番号」を接続し、入力B以外の出力をするようにすることで、削除しない頂点以外の頂点を取り出します。そのために、CompareノードをNot Equalに設定します。そして、IDノードの出力をCompareノードの入力Aにつなぎます。これで、入力Bの値以外が出力されます。こうして構成したCompareノードの出力を、Delete GeometryノードのSelection入力に接続します。
これで入力Bに設定したID以外の頂点が消えるようになります。図33-74に示したように、屋根は四角形で4つの点で構成されています。ですから、入力Bを0に設定すれば頂点1,2,3が削除される、1に設定すれば頂点0,2,3が削除されるという動作になります。今回は、左下の頂点を残します。この例では、頂点番号1番なので、「1」を設定します。




[6]残った頂点の位置に屋根を配置する
これで左下の頂点だけが残りました。この位置に、屋根のオブジェクトを配置します。
そのためには[Shift]+[A]キーを押して、Instance On Pointsノードを追加し、Group Outputの直前に接続します。そして、ここまで作成してきた屋根の面の最終的な出力を、このInstance入力につなぎます。すると、点の位置に屋根が表示されます。



[7]大きさを調整する
これで完成ですが、屋根以外のオブジェクトも表示して、全体像を確認してみると、屋根だけがとても大きく表示されていることがわかります。そこで大きさを調整します。
大きさを調整するには、[Shift]+[A]キーを押してValueノードを追加し、Instance On PointsノードのScale入力と接続します。そしてValueの値で、サイズを調整します。



[8]向きを調整する
向きを調整します。[Shift]+[A]キーを押して、Rotate Instancesノードを追加し、Instance On PointsのRotationに接続します。そして現物を見ながら、Rotate入力の値を調整して合わせます。


コラム:見やすく調整する
瓦のポリゴンと屋根のポリゴンは似たような色であるため、見にくいことがあります。そのようなときは、レンダリングメニューからRandomを指定すると色がランダムになり、見やすくなります。

[9]大きさを調整する
最後に、CountやAmount、Scaleを調整して、屋根(および瓦)の大きさを調整します。
これで完成です。


コラム:別の建物に適用するには
別の建物に適用するには、作ったジオメトリノードに名前を付けておきます。そうすると、別のオブジェクトでジオメトリノードを作成したときに、それをドロップダウンリストから選択して読み込めるようになります。
なお、読み込んだ後でそのまま変更してしまうと、読み込んだものが変更されてしまうため、別の設定にしたいときは、読み込んだ後にドロップダウンリストの右側の[2]をクリックして、複製します。


【文】
森 祐太朗(WOW inc.)
大澤文孝