UE4の勉強記録

UE4の勉強の記録です。個人用です。

UE5の勉強 -映像作品としてのLandscapeを作成する-

1. 今週の予定

以下の内容を勉強します。

<Landscapeの作成>

先週実装したTutorialの続きを勉強します。

Niagaraの勉強>

先週、作成したアニメ調の炎の設定のオカシイ部分を調査します。

<Materialの勉強>

Ben Cloward先生のAdvanced Material Seriesの実装をします。

<Gaeaの勉強>

Earth and Space Sciences XのLecture 9を勉強します。

GaeaのTutorialの作成の続きをやります。

<Houdiniの勉強>

Free Time Coder氏のUnreal PCG Tutorial [1]の続きを勉強します。

<UEFNの勉強>

インベーダーゲームを作成します。

<DirectX12の勉強>

DirectX 12の魔導書」と「Direct3D 12 ゲームグラフィック実践ガイド」の勉強をやります。

2.Landscapeの作成

Magnet VFXUnreal Engine 5.1Beginner Tutorial - UE5 Starter Course 2023 [2]の続きを勉強します。

2.1 Unreal Engine 5.1Beginner Tutorial - UE5 Starter Course 2023 [2]の続きを勉強する

<Corridor>

壁をDuplicateして以下の様に通路を作成します。

建物に使用している窓月の壁をDuplicateして以下の様に配置します。

以下のAssetを使用して

壁を塞ぎます。

地面に使用しているRectをDuplicateして以下の様に地面をExtentします。

屋根を追加します。

以下の様に追加しました。

以下の様になりました。

<Watching Tower>

SM_Slums_Scaffolding_04を使用します。

以下の様に配置します。

次は以下のAssetを配置します。

以下の箇所に配置しました。

次はこのAssetです。

以下の様に追加しました。

更に以下の場所でも追加しました。

太陽の位置を変更して以下のような影を作成しました。

SM_Slums_Pipes_04cを使用します。

以下の箇所に追加しました。

SM_Slums_Trash_02bを使用します。

以下の様に配置しました。

<Piping System>

今度はPipeを追加していくそうです。

このPipeはMega ScanからDownloadしたそうです。

以下の様に配置しました。

Junctionも追加します。

以下の様に追加しました。

更に以下のAssetを追加します。

以下の様に追加しました。

配置したPipeをGroup化します。

全部のPipeを選択した後で右Clickして以下のBoxからGroupを選択します。

Group化したPipeをそこら中に配置します。

<Other Assets>

以下のAssetを追加していきます。

更に以下のAssetをDownloadします。

更にVolume 1もあります。

まずは以下のAssetです。

Hand RollerとかGas Tankを追加しています。

なんか一気に現代っぽくなってしまいました。

他にも建設用の道具を沢山配置しています。

これじゃSlumというより工事現場です。

最後にAir Conditionerを追加します。

残念ながらAir ConditionerのModelはMegaScanには存在しないのでSketch Scrap?からDownloadしたそうです。

<Adding FBX Model>

Sketch ScrapからUEにDownloadする方法を説明するそうです。

全部見ましたが特に記録すべき情報は無かったです。

ACを追加した後でその上に屋根を追加しています。

更に以下のAssetを追加して

屋根に布をかぶせたような感じにします。

そしてこのAssetのMaterialを以下のM_Slums_Cloth_Animに変更します。

すると布が以下の様に風でなびき始めます。

これはかなり本物感を追加します。

他の場所にもClothを追加します。

<Adding Trash>

今度はTrash Binを追加します。

<Adding Assets>

Painting Bucketを追加します。

Broken-Lumberを追加します。

Lumberとは以下に示した様な木の製材の事を言いますが、

以下に示した様にこのAssetは

単なるゴミの塊のように見えます。

以下の様に配置していました。

MegaScanからDownloadした以下のAssetを使用します。

以下の様に配置しています。

この部分がこの動画で最も視聴された箇所になっていますが、何故なんでしょうか?

特に何の変化もないAssetですよね。

以下のBucketも追加しています。

この辺がこの動画の最も視聴された箇所になっています。

とても不思議です。

以下のAssetも追加しました。

段々Slumを作成する時のコツがわかって来ました。

Slumは一端壊れたら、行政が修理に来ないのでそのまま放置されるか、素人が勝手に修理してツギハギだらけになるんです。

<Adding Plants>

今度は植物を追加します。

以下のAssetを追加します。

風で動いてます。

これを止めるには以下のMaterial Instanceを開いて

Windの設定を以下の様にするそうです。

うーん。

この辺の設定に関しては私の方が詳しいそうです。

実装する時は自分で確認します。

植物を配置した後です。

これ、10数メートルの木を50cm位に縮小して使用しています。

GPUに掛ける負担は半端じゃないはずです。

こういういい加減なAssetの使用がGameに使用できないLevelを生んでいるんです。

でもMovieの撮影には全く問題ないです。

Game用に木をFoliage、Nanite化して一生懸命配置したらGPUに負担が掛かり過ぎてFPSが遅くなって実用化出来なくなります。

その原因はこれだったんですね。

よく分かりました。

Movieを撮影するためのLevel DesignをそのままGame用のLevel Designに適用していたら、それはGPUに負担が掛かり過ぎてFPSが落ちまくりますわ。

まあ、YouTubeのTutorialの限界を示してるいい例です。

<Adding IV Plants>

IV Plantsって何の事かと思ったらIvy Plant、つまり蔦の事でした。

以下のAssetを使用しています。

<Adding Rocks>

最後にRockを追加しています。

以下のRocksを選択して

Foliageに追加します。

そのまま使用すると大きすぎるので設定からScaleを変更しています。

以下の様にRockを配置しています。

サイズ的にRockじゃなくて石ですが、Slum感がよく出ています。

びっくりです。

こういう細かい仕様がRealisticな感じを出すんですね。

今週はここまでとします。

来週はここまでを実装します。

3.Niagaraの勉強

今週もアニメ調の炎の作成の続きをやっていきます。

3.1 赤い炎が画面の最初に現れる件について

先週の設定では炎は時間が経つにつれて色が赤くなるように作成しています。

そして以下の設定で

若いParticleは常にCameraの前に来るのようになっているはずです。

にもかかわらず、赤い炎が画面の一番前に現れる時があります。

Sort ModeのCustom Descendingの説明には

Normalized Ageの値に沿って0が1より手前に来ると言っています。

これが正しいなら黄色が常に赤の手前に来るはずです。

更に2021-12-26のBlogでも

同じ説明をしています。

原因が判明しました。

Particle Spawn SectionのSphere Location Moduleです。

このModuleを切ると以下の様に

常に黄色が前に来るようになりました。

つまりSprite Renderer ModuleのSorting Modeは同じ位置のParticleのどちらが先になるかを指定していたんです。

しかし実際に配置してみると以下の様に

半分だけ赤い色が前に配置されたりして非常に汚いです。

のでこの機能は使用しない事にします。

3.2 炎の色を変更する

炎の色を外側は赤、内側は黄色に変更します。

Materialの実装を以下の様に変更しました。

Smooth Stepノードを追加して灰色の部分を2つ作成します。

一つ目は0.2~0.4の間で、それ以外は黒くなります。

2つ目は0.4~1.0の間でそれ以外は黒くなります。

それぞれを以下の手法でGradationを無くして色を追加します。

これは先週やった方法です。

最後に2つの色を足します。

Niagara Systemに戻ります。

Particle Spawn SectionのInitialize Particleノードの

Colorの設定を以下の様に変更します。

結果です。

出来てますね。

黄色は少し目立ちすぎな気がします。

Orengeに変更しました。

うーん。

微妙ですね。

これはParameterにしてNiagaraから操作出来るようにした方が良いですね。

3.3 黒を追加する

取りあえず黒を追加します。

黒のEffectを追加するのはそれなりに技術を必要とするので、その辺の事が出来る事を証明しておくのはまあ悪い事ではないでしょう。

これは結果だけ示します。

3.4 暗い場合の表示を考える

何と太陽光の角度を変えて暗くしたら以下の様に

勝手に光り始めました。

真っ暗にすると以下の様になりました。

これは特に何かする必要ないですね。

これでアニメ調の炎は完成とします。

来週は最適化をしてMaterial InstanceからParameterを弄れるようにします。

4.Materialの勉強

4.1 Glass Shader - Advanced Materials - Episode 16 [3]を実装する

まずGlass用のMaterialを作成します。

Blend ModeをTranslucent

Lighting ModeをSurface Translucency Volumeに変更します。

Opacityの値を0.35にしました。

以下のLevel上にRectangleな形状のStatic Meshを配置します。

そのMeshにMaterialとして使用しました。

まだ単に半透明になっただけです。

今度はSpecularの値を10にしました。

ここは最初の課題の部分です。

以下のMapで検証します。

何度覗き込んでもGlassに木が写っている事は無かったです。

この条件でGlassにReflectionが発生する事は無いと思います。

取りあえず先の実装を試してます。その後でこの部分はもう少し検証します。

今度はRefractionをセットします。

Materialを見たらRefractionはDisableになっていました。

以下の設定をしないといけないみたいです。

先週のBlogにはこの部分の設定をどうしたのかはまとめてなかったです。

Tutorialを見て確認します。

説明してなかったです。

Comment欄に解答があるのか確認します。

以下のCommentがありましたが、解答はなしです。

とりあえず2D Offsetで試してみます。

以下のような結果になりました。

うーん。

なんか違う。

他の設定も試してみます。

Index of Refractionをセットします。

結果です。

こっちが正しいSetのようです。

この後、TutorialではFresnelノードを追加してRefractionを調整していますが、Comment欄に

と書かれていました。

このCommentが正しいのかどうか今の時点では判別できないですが、一応心にとめて実装する事にします。

以下の実装を追加しました。

結果です。

確かにGlassの側面との関係でRefractionが起きています。

ただ逆から見た時はRefractionは起きていません。

上から見た時です。

Roughnessに0をセットしました。

結果です。

Reflectionが追加されているはずですが、全く確認出来ません。

先程の島のLevelで確認します。

後ろに木が沢山あるんですが、Reflectionしてるかは不明です。

Preview画面には以下の様にわずかにReflectionしているのが観察出来ます。

Frosted Glassを作成します。

SpiralBlur-SceneTextureノードを追加します。

以下の様に繋げます。

結果です。

完全に真っ黒になってしまいました。

どこを間違えたんでしょうか?

Tutorialを見直します。

Radial Stepsの値が8でした。

結果です。

Frosted Glassになりました。

今度はDistance StepsとRadial Stepsの値を以下の様に変更しました。

結果です。

確かにこっちの方が綺麗です。

元の値に戻したら以下のような幾何学的な模様が発生していました。

これを消すためにさっきのような値を使用していたようです。

4.2 Glass Shader - Advanced Materials - Episode 16 [3]を実装した感想

まず実際の実装ではReflectionは全く確認出来ませんでした。

Previewに写っているReflectionはSkyboxの画像のような気もします。

これらから推測するとSpecularの値を10にするとReflectionが写るというのは、かなり眉唾な話だと思います。

しかしこの時点で結論を出すのはまだ早いかもしれません。

実際のLevelに配置した時はReflectionは全く確認出来なかったのと、Previewに写っているReflectionはSkyboxのTextureのようである事だけは確認出来た事だけ発言しておく事にします。

Fresnelノードを使用して端だけRefractionを生成させる方法は以下のComment欄の発言によると

科学的には正しくない計算らしいですが、素人目には十分Glassのように見えます。

そのまま使用しても問題は無いでしょう。

Packagingするとこの機能が無くなると書いているCommentもありました。

UEはGame EngineなのでTutorialを作成する人はPackagingした後の状態まで確認してからTutorialを作成して欲しいですが、YouTubeにあるTutorialの99%はPackagingのテストはやっていません。

これらのTutorialを見て真面目にGameを作成している人はバカを見る事になります。

正し、私もPackagingをして確認はしませんでした。

もうGameは良いです。今度は綺麗な映像を作成する方向でUEを使用します。

Forest Glassの作成に関しては先週のBlogの記録に間違えている所があって、最初は出来ませんでした。

後でTutorialを見直したら間違えてる箇所が分かったのでそれを直したら普通に出来ました。

以下のような幾何学的な模様が生じますのでそれを消すために

かなりの計算Costを掛ける必要が生じます。

これもGame用の技術というより映像用の技術になると思われます。

以上です。

5.Gaeaの勉強

今週もGeologyの勉強とTutorialの作成の2つをやっていきます。

5.1 Geology 9 (Soil)[4]の勉強

今週は土に関してのLectureです。

何故かこのLectureにはCaptionが付いていません。

専門用語が出てきた時にSpellをCheckする事が出来ないです。

結構な不便になりますがまあ勉強する事にします。

<Intro>

最初のSlideです。

Regolithと言う用語が出て来ています。

まあ土の事ですね。

<Typical Components in a Soil that Yield>

2枚目のSlideです。

これは体積比で出しているんでしょうか?

質量比だったら空気が25%って途轍もなく多くなるはずです。

<Factor Controlling Soil Formation>

Climateの重要なFactorがTemperatureとMoistureからTemperatureとPrecipitationに代わっています。

<Soil Development>+<The Soil Profile- Solforming Processing>+<Introduction to Soil・Soil is combination>

Unconsolidated Stream Depositsの上にSoilが形成されるのは隣に崖があるので理解出来ますが、Bedrockの上のSoilはどこから発生するんでしょうか?

それぞれの層をHorizonと呼ぶそうです。

実際の写真を使用して解説しています。

黄色のCircleが指しているのはE Horizonです。

<A Soil Profile Show Different Horizons>

別な写真です。

Paleosolとは「古代の」と言う意味だそうです。

<Soil Texture>

Siltって何と思ったら以下の説明がNational Geographicsにありました。

https://education.nationalgeographic.org/resource/silt/

粒のサイズが砂よりは小さいけどClayのようにねばねばしないそうです。

あんまり実感が湧かないですね。

次のSlideです。

Taxonomyとは分類学の事です。

それぞれのTypeの特長がかかれていますが、字が小さすぎて読めません。

解説を読むと土の特長によってそれぞれのTypeを分類しているそうです。

代表的なTypeが12種類あるそうです。

今週のGeologyの勉強はここまでです。

来週はこの12種類のSoilについての勉強をします。

5.2 GaeaのTutorialの作成

今週からTerrainの作成方法についてのTutorialを作成します。

2023-02-01のBlogをみるとTerrainは以下の作成方法に沿って作成すると理解し易い。とまとめています。

今週はGaeaに用意されているTemplateを見ながらどれだけこの作成手順に沿っているのかを判断します。

この作成手順よりもっと一般化された手順がTemplateから推測出来た場合はその作成手順にそって作成する事にします。

5.2.1 MountainのDesert Mountainを勉強する

以下のTerrainです。

まず最後の以下の部分は色を塗るための実装です。

この部分は今回は無視します。

Terrainの実装部です。

この実装は2つのTerrainを作成してCombineノードで合成しています。

山の部分を作成している以下の実装

と平地の部分の作成している以下の実装です。

実装の簡単な平地から見ていきます。

まずPrimitives GroupからConstantノードを使用しています。

次にLook Dev GroupからRuggedノードを使用しています。

それだけです。

Quad Spinner社のGaeaの公式DocumentのRugged[5]にはInputに何をPassすべきなのかの説明は書いてないです。

他のPrimitivesのNodeともつなげる事は可能ですが、出来たTerrainが無茶苦茶です。

これはRuggedノードをPrimitiveとして使用するための裏技と考えた方が論理的です。

それでは山の生成の部分を見ていきます。

まずPrimitive GroupからGradientノードを使用します。

以下の様にTerrain用のMeshに角度が付きました。

次にRangeノードを使用します。

Graphの左下に以下の解説が表示されていました。

Rangeノードを使用する時はGradientノードと併用して使用するそうです。

うーん。

これも試してみないとよく分かりません。

新しいProjectを開いてRangeノードを配置しました。

結果です。

普通にTerrainが形成されています。

Gradientノードを追加します。

結果です。

高度が高い部分にだけRangeが効いています。

次はGradientノードを追加しています。

以下の解説が書いてありました。

うーん。

こんな使用方法が有るんですね。

まずGradientノードのPropertiesの設定が以下の様になっています。

TypeがRadialになっていますね。

更に以下の設定もかなり弄っています。

これは今の私には理解出来ません。

その後で2回連続でRuggedノードを使用しています。

Gaeaの公式DocumentのRugged[5]には以下の解説があります。

まあ詳細は分かりませんがTerrainの表面(この場合は山の部分だけ)を調整している事は間違いないです。

つまりこのTemplateではEdgeの調整はやらずに表面の調整に入っているという事になります。

次にErosion GroupのWizardノードを追加しています。

うーん。

Lookdevを使用した後でErosionを使用しているのか。

先程の私の工程表を見ると

Erosionを使用した後でLookDevを使用する予定になっています。

ここは考える必要がありますね。

最後のCombineノードです。

これで地面と山を合成している訳です。

ところがMaskとして使用しているHeightノードの設定は以下の様になっています。

更にCombineノードの設定でも以下に示した様に

MethodがSubtractになっています。

つまり白い部分だけ以下の凹凸を引いた形状にしたんです。

これがGeologyで正しい形状を作成するのかどうかよく分かりません。

これが

以下の様になります。

単にErosionを減らしただけのようにも見えます。

5.2.2 MountainのDesert Mountainを勉強した感想

まあ当然ですが何をしているのか全く理解出来ない実装もありました。

ただ全体の流れは私の作成した以下の手順の非常に簡単なVersionと考えて間違いないです。

このTemplateではTerrainの後にLookDevを使用していますが、Geology的にはどうなんでしょうか?

LookDevのNodeを使用した後にErosionを使用すべきかどうかは他のTemplateを勉強していく内に判明すると思います。

今週のGaeaの勉強はここまでとします。

来週は他のTemplateを見て実装を確認する事にします。

6.Houdiniの勉強

今週もHoudiniの勉強は少しだけお休みしてFree Time Coder氏のUnreal PCG Tutorial [1]を勉強します。

今週はUnreal 5.2 Preview PCG Tutorial - Part 5 - Custom PCG Actor and Attributes [6]の勉強をします。

6.1 Unreal 5.2 Preview PCG Tutorial - Part 5 - Custom PCG Actor and Attributes [6]の勉強をする

このTutorialではNon PCG Volume Actor内からPCGを起動する方法を勉強します。

以下にこのTutorialの内容をまとめます。

まず最初から以下のPCG Graphがあります。

これって先週作成したPCG Graphでしたっけ?

確認します。

違いました。

次にBPをActor Classから作成します。

BP_PcgActorと名付けています。

中を開いてPCG_Componentを追加します。

Tutorialでは継承ではなくComponentとしてPCGを使用出来るから云々と、沢山語っています。

Componentとして使用出来る事さえ分かれば、抽象的な話はどうでもいいです。

PCGの以下のParameterに先程のPCG Graphをセットします。

BP_PcgActorをLevel上に配置します。

しかし何も起こりません。

Generate Buttonを押しますが

結果は同じです。

次にBox Collisionを追加します。

以下の様に追加しています。

これ見るとBox CollisionであるBoxはDefault Scene Rootの下に生成していますね。

これには何かの意味があるんでしょうか?

BoxのSizeを以下の様に大きくしました。

すると以下の様にPointが表示されるようになりました。

以下の様にBoxを更に追加しても

この状態でCompileすると以下の様に2つのBox内にPointが生成されるようになります。

同様な事はStatic Meshにも出来ます。

以下の様にSphereを追加すると

以下の様になります。

SphereのVisibleを消すと

中にPointが生成されているのが見えます。

これはどんな形状のMeshでも同じです。

今度はこのBPのVariableをPCG内のGraphで使用する方法を説明します。

まずBP内で以下のVariableを追加します。

BPで使用しているPCGのGraphを開きます。

ここにProperty To Param Dataノードを追加します。

Property To Param DataノードのPropertyを以下の様にセットします。

Property Nameには先程のBPに作成したVariableの名前がセットされています。

Transform Pointsノードを追加してそのScale MinとScale MaxにProperty To Param Dataの値をPassします。

結果です。

Test Scaleの値を増やすと

以下の様にPointのBoxのSizeが大きくなりました。

以上です。

7.UEFNの勉強

今週からインベーダーゲームの作成に入ります。

まず新しいProjectを作成して

  • Landscapeを作成する
  • Towerを配置する
  • 敵を配置する
  • 敵を全部倒したら勝利

などを作成していきます。

7.1 Landscapeの作成

2023-05-28のBlogにLandscapeの作成方法がまとめられていました。

これにしたがってLandscapeをまず作成します。

新しいProjectをBlank Templateから作成します。

名前はMy Invader Game 1としました。

Landscapeを作成しました。

海を追加するので地面を高くします。

十字の形状にしました。

これで四方からInvaderに攻められる形状になります。

海を追加します。

以下の箇所からOcceanを追加しました。

結果です。

Affects Landscapeは切っています。

Defaultで配置されているPlayer Spawnerを消して新しいPlayer Spawnerを配置しました。

これでテストします。

普通にPlay出来ました。

ただPCが結構大きな音を立てていました。

こういう平地をRenderingするのはGPUに負担がかかるんでしょうか?

7.2 Towerを配置する

今度はTowerを配置します。

以下の3つを候補として選びました。

Playして中身を確認します。

真ん中のTowerですが地面から浮いていました。

Towerの中は以下の様になっていました。

Invaderが島の端から生成されたらこの場所から攻撃する事になります。

以下の窓や

以下の壁の無い場所から反撃する事になります。

別に悪くはないです。

次のTowerを調べます。

何とこのTower以下の場所から上に行くことが出来ません。

見た目は一番恰好良かったんですが、これでは駄目ですね。

最後のTowerです。

これも以下の場所までしか登れません。

このTowerも駄目ですね。

以下のTowerだけ残して他の2つのTowerは消しました。

後、このTowerは浮いていたのでそれも直しました。

Saveしました。

Fortniteに戻ります。

以下の様になっていました。

ここまでやったら気持ち悪くなってきました。

今週はここまでとします。

8.DirectX12の勉強

今週はYouTubeの動画の作成が間に合わないのでDirectX 12の勉強はなしにします。

しかも完成したと思ったら禁止ワードを使用していました。

それを止めるための内容なんですがそれがYouTubeのAIに判断出来るのか不明です。

ので一端Uploadは中止して作り直す事にしました。

9.まとめと感想

特にないです。

10.参照(Reference)

[1] FreetimeCoder [FreetimeCoder]. (n.d.). Unreal PCG Tutorial. YouTube. https://www.youtube.com/playlist?list=PLA03OHAaHgYpo0enf8p-2oEpja3grLOKZ

[2] Magnet VFX. (2023, April 2). Unreal Engine 5.1Beginner Tutorial - UE5 Starter Course 2023 #unrealengine5 #megascans [Video]. YouTube. https://www.youtube.com/watch?v=OCgn40aWVuU

[3] Ben Cloward. (2023, February 23). Glass Shader - Advanced Materials - Episode 16 [Video]. YouTube. https://www.youtube.com/watch?v=wKbt6KkZkxs

[4] Earth and Space Sciences X. (2015, October 30). Geology 9 (Soil) [Video]. YouTube. https://www.youtube.com/watch?v=0VzbhTP0ujI

[5] Rugged - GaEA Documentation - QuadSpinner. (n.d.). QuadSpinner Gaea Documentation. https://docs.quadspinner.com/Reference/LookDev/Rugged.html

[6] FreetimeCoder. (2023, March 28). Unreal 5.2 Preview PCG tutorial - Part 5 - Custom PCG actor and Attributes [Video]. YouTube. https://www.youtube.com/watch?v=nq7aqU2F6mQ