UE4の勉強記録

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

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

1. 今週の予定

1.1 今週の予定

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

<Landscapeの作成>

建築用のLevelの作成の勉強の続きをやります。

内部の家具を追加していきます。

Niagara の勉強>

Unreal Engine 5で学ぶビジュアルエフェクト実装 基本機能からNiagara、シミュレーションまで」の実装をやります。

<Materialの勉強>

Ben Cloward先生のTutorialの何かを勉強します。

<Gaeaの勉強>

更にGaeaのTutorialを作成します。

<Houdiniの勉強>

Castle Wall Tool [1]の勉強をやります。

<UEFNの勉強>

Pi Equals Three氏のTutorialをやります。

<DirectX12の勉強>

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

更にLötwig Fusel氏のDirectX12のTutorialをやります。

2. Landscapeの作成

2.1 建物の内部を作成する

今週も建物の内部の家具や装飾品などを追加していきます。

二階の家具や装飾品の配置を行います。

以下の部屋の家具を配置します。

家具です。

部屋の反対側です。

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

最後に以下の棚の装飾品です。

以下のAssetが使用されていました。

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

壁にある丸い装飾品が無いです。

追加しました。

棚です。

TVです。

なんか違いますね。

うーん。

違いは分かりません。

次の部屋です。

これは子供部屋みたいです。

家具並びに装飾品を調べます。

部屋の反対側です。

家具並びに装飾品です。

装飾品です。

以上でした。

これらを配置します。

反対側も装飾品を配置します。

次の部屋も家具や装飾品を配置します。

まずDemoの部屋を確認します。

やっぱりここは浴室でした。

以下のAssetが使用されていました。

反対側です。

以下のAssetが使用されています。

Bathroomを作成するのは2回目なので大体の仕組みは理解しています。

早速作成します。

これじゃ外から丸見えじゃないですか!

まあ模型なのでその辺はいいかげんなのかもしれません。

反対側です。

次の部屋に行きます。

Demoの部屋をチェックします。

勉強部屋か仕事部屋もしくは書斎でしょうね。

こっち側にある装飾品や家具を調べます。

またこれか。

こういう小物は適当に置いても良い気がしますが、何せ最初なので一から十まで同じに作成する事にします。

これも前に見た小物です。

小物が多すぎて訳分からなくなって来ました。

今週はこの机の部分だけ作成して終わりにします。

もう疲れました。

なんか精神的に疲れました。

こう頭使わない作業は精神に堪えます。

残りは来週やる事にします。

3. Niagara の勉強

3.1 先週の復習

「Chapter 13 Game of Life」の途中まで実装したのは覚えていますが、なんで最後まで終わらせることが出来なかったのかまでは覚えていません。

先週のBlogを読み直して復習します。

まずSimulationとは何かについてのまとめがありました。

これ非常に大事な気付きを説明しているんですが、この説明だと分かりにくいです。

もう一回まとめ直します。

今まで私のSimulationのAlgorithmのImageは「全部のParticleが一斉に動いている。」だったんです。

これが間違っていました。

SimulationのAlgorithmは

  1. 全てのParticleは止まっている
  2. その中で一個のParticleだけが次に動く場所を決定する事が出来る
  3. 次に動く場所を決定したParticleはその場所に移動する
  4. この工程を全てのParticleが順番に一個ずつ繰り返す

だったんです。

つまりGameに例えるとみんなが一斉に動くMultiplayer Styleのバトルロイヤルではなく、TCGドラゴンクエストのようなTurn制のGameと同じだったんです。

こういう事が言いたかったんでした。

Materialの作成です。

以下のように書かれていましたが

Materialを実装した後に、教科書を読み直した形跡はありません。

今、読み直します。

分かりました。

以下の文章が理解出来なかったんです。

Render Targetは今DirectX 12の勉強で散々で出来ているConceptかつ関数ですが、今一理解しているとは言い難いです。

それを使用してGrid状のDataをNiagaraからMaterialに送ると書かれていたので、先週はびっくり!してしまい慌てふためきました。

で、この文章の理解は先送りして取りあえずMaterialだけ組んでしまおうとなった訳です。

今は、大体この文章の意味する事は理解しています。

以下にそれをまとめます。

まずRender TargetですがこれはDirectX 12のRender Targetの事では無くて以下に示したModuleの事です。

このModuleを通じてGrid状のDataはNiagaraからMaterialに送られます。

この事をこの文章は説明しているだけでした。

ここは重要なのでもう少し詳しくまとめます。

Materialの実装を見直すと以下に示したTexture Sample Parameterノードが使用されています。

このNodeは先週のBlogでも説明したように

機能を持っています。

通常はこのTextureのDataはParticle Sectionで生成されたそれぞれのParticleから送られるものでですが、今回は全てのParticleで一個のTextureを作成するためにその設定を変更する必要があります。

はい。

Emitter Sectionから直接、TextureにDataを送る必要があります。

これをするために先週は

Render SectionのSprite RendererノードのSource Modeを

Emitterに変更しました。

先週、これを勉強した時はそれが理解出来なくて以下のようにまとめていましたが、

そう言う事です。

因みにTarget Render Moduleの値をMaterialのTexture Sample ParameterノードにPassするには、更にもう一個作業が必要で

それを以下の箇所で行っています。

このNiagara Variableに[EMITTER] Render Targetがセット出来なくて困ったのは別問題なのでここでは取り上げません。

先週勉強したのはここまででした。

そして残りの工程である

は今週やると書いて終わっていました。

はい。

先週何を勉強し実装したのか大体判明しました。

先週「Chapter 13 Game of Life」が終わらなかったのは量が多すぎてとても全部出来なかったからでした。

それでは今週の勉強を始めます。

3.2 GridのDataを作成する

もういきなり苦情ですが、Kindle版のセピア色の設定だと以下のように表示されています。

「13.4.6」という節の指定が読めません。

こういうのは直してほしいです。

本当に見にくいです。

それぞれのGridにあるCellは生死を表すFloat型の変数があります。

この値はTextureのAlpha値を使用して決定するそうです。

<Texture Sampleの用意>

まずTexture Sample型の変数を作成します。

ParametersのEmitter Attributesの+を押してTexture Sampleを選択します。

この部分は教科書では言葉だけで説明していて一寸不親切だと思いました。

この「Parametersに新しい変数を追加する」と言う行為自体が分かりにくいんです。

それは何故かを説明するとここでやっているのは変数の作成なんです。

しかし名称はParameterになっているんです。

これは作成した変数をParameterをして直ぐに使用するからなのかもしれませんが、初心者には非常に分かりにくい概念になってしまっています。

なのでこの作業を教える場合はしっかりと何をやったのかをImageで見せる必要があると私は思います。

作成したTexture SampleをEmitter Spawn Sectionにセットします。

セットした場所は教科書で示されていたSet:[EMITTER] Render Target ModuleとSet:[EMITTER] Grid2D Collection Moduleの間です。

また緑の矢印が表示されていますが、どうせ後になると消えると思われるので無視します。

Textureにはこれまた教科書の書かれていたのと同じTextureであるBlend Func_DefBlendをセットします。

<Textureの値をSamplingするStageを追加>

Propertiesの欄にある+Stageを押して以下のBoxを表示し

Generic Simulation Stageを選択します。

すると以下に示した様にEmitter State Section(Stage)とRender Section (Stage)の間にNoneというSection(Stage)が生成され

そこにGeneric Simulation Stage SettingsというModule?が表示されるようになりました。

Generic Simulation Stage SettingsのPropertiesの設定を以下のように変更しました。

全部教科書で指定されている通りに変更しました。

何をやっているか知ってるべきなので一寸だけ調べます。

これはSectionの名称を指定しただけです。

実際、Sectionの名称がNoneから

に変更しています。

Iteration Sourceです。

ここでいうIteration Sourceは先程のSimulationでいう所の一個一個のParticleを指しているようです。

その一個一個のParticleの計算をIterationと呼ぶようです。

今回はParticleでは無いのでData Interfaceを選択したみたいです。

Execute Behaviorです。

Simulationをいつやるのかを指定するParameterのようです。

Particleの計算では指定する必要が無いと言っています。

Data Interfaceについてです。

SimulationのData Interfaceで使用するDataをここで使用します。

ここにセット出来るParameterはGrid2DやGrid3DなどのData Interfaceだけだそうです。

うーん。

大体分かって来た。

一個一個のGrid(Cell)の形状はTexture Sample Moduleで指定します。そしてその指定されたTextureの値をGrid 2D CollectionのそれぞれのGrid(Cell)にここでセットするんです。

多分、この考え方であっているでしょう。

教科書を読んだらこの部分に関しては更に詳しい説明をしていました。

さっき自分で調査した内容では足りない部分を以下に付け足しておきます。

  • Execution Behaviorは、今回の計算は一回計算すれば事足りるのでOn Simulation Resetを選択したそうです。

だけですね。

今度はTextureの値をGrid 2D Collectionに移すための実装を作成します。

まず新しいScratch ModuleをこのSection内に作成して名前を以下のように変更します。

教科書の名前とは微妙に違いますが大丈夫でしょう。

このまま行きます。

TextureToGrid2Dの実装をやっていきます。

まずParametersからTexture SampleとGrid 2D CollectionをMap GetノードにDrag and Dropします。

無いです。

というかNiagaraではParameterが表示されていますが、

Scratch Moduleに移動するとParametersが何も表示されなくなります。

うーん。

と悩んでいたら教科書に解決策が書かれていました。

Parametersの下にある2つのButtonの内Active Overviewを選択すると使用しているParameterが表示されます。

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

<Stack Contextを追加>

Stack Contextって何でしょう?

一寸教科書を読んでみます。

分かりました。

Stack ContentってScope(Name Space)の事でした。

どうもこの教科書の筆者、Scopeの意味を理解してないみたいで、なんか訳分からん事を書いていました。

まあ、UEは勉強する内容が膨大すぎて全部を一人で理解するのは不可能ですので、それは仕方ない事です。

Scopeってのはその変数が変数として存在している空間の事です。

つまりこの場合は、この変数はStack Contentという空間の中だけ存在出来るんです。

そんだけです。

それではStac Content Sensitiveの+をClickしてFloat型の変数を作成します。

出来ました。

こっちはMap Setノードにセットしました。

この値がそのCellが生きているかどうかを決定するんですから、Map Setノードにセットするのは当然ですね。

以下のように実装しました。

うーん。

Sample Texture 2Dの機能を100%理解した訳では無いですが、これだとTexture SampleのImageを256でUV軸に沿って割ったImageがSample Texture 2D内に形成されそうです。

先程の推測ではTexture SampleのImageはそれぞれのCellにPassされると思ったんですが違いそうですね。

まあ、さっきのは推測ですので外れる事もあります。

今週はここで時間が無くなってしまいました。

続きは来週やる事にします。

4. Materialの勉強

今週もBen Cloward先生のTutorialをやっていきます。

先週勉強した内容は私にとっては基礎的過ぎて何の足しにもなりませんでした。

今までBen Cloward先生のTutorialでそんな事は無かったので、思わず最後まで勉強してしまいましたが、今週からは気を付けて勉強します。

もし勉強内容が既に知っているLevelのものだったらPassして次を勉強する事にします。

4.1 Retroreflective Road Sign - Advanced Materials - Episode 22 [2]を勉強します

<Reference Image>

標識を作成するだけかと思ったら全然違いました。

Retroreflectiveとは日本語で「再帰反射の」と言う意味で光が当たると光る機能の事を指します。

そう言えば光が当たると光る標識ってあった気がします。

これアメリカだけじゃないはずです。

一寸調べます。

りかの部屋 道路標識や白線はなぜ光る? [3]によると以下のようにビーズを混ぜる事により

反射角が入射角と同じになるそうです。

Ben Cloward先生も同じ説明していました。

Beadsの話も出て来ました。

以下のようなPrismを作成しても同じ結果になるそうです。

それでこういうPrismが入っている標識は以下のように

格子状の模様が入っているそうです。

これをMaterialで再現するみたいです。

Photoshop

以下の2つのImageを作成しています。

CAUTIONの文字がBlurなのはわざとでしょうね。

2023-08-21のBlogあたりで勉強したSharp Text Shader - Advanced Materials - Episode 18 [4]のTechniqueを使用してMaterial内ではどのサイズでもくっきり写るようにすると思われます。

左側のImageは拡大すると以下のように線の入った背景が存在しています。

これがPrismを表しているのでしょうか?

以下のImageについて3つ程補足があるそうです。

一つ目はわざと45度回転させる事でTextureにある無駄なSpaceを無くしています。

二つ目は白黒で作成している事です。

白黒で作成する事で、RGBの一個のChannelを使用するだけでImageを作成出来ます。

三つ目の理由は、先程予測した通り、CAUTIONの文字をわざとBlurにしている事でした。

これらのImageは256x256で作成したそうです。

うん。

GIMPを使用すれば簡単に作成出来ます。

あ、文字のSizeが変わっても文字がSharpに写るんじゃなかったです。

Zoom Inした時も文字がずっとSharpになるんでした。

はい。

今週はUnity回なのでここからUnityを使用した説明になっています。

Unrealでの実装は最後にまとめてどばっとやっています。

一応UnityではShader、Fresnel、SmoothnessそしてDiamond Patternに分けてやっているのでUnrealでも同じように分けてまとめます。

<Shader>

以下のTextureですが

Gray ScaleでSaveされています。

更にsRGBはOffになっています。

Diamond RetroreflectiveのTextureですが

こっちは普通の設定になっています。

何ででしょう?

Materialの実装の説明が始まりました。

以下の部分はCAUTIONの文字をSharpにするための実装です。

LerpノードのAとBの値です。

これは標識に色を追加するための実装ですね。

このLerpノード全体で標識を作成しています。

これらの実装はBase Colorに繋がっています。

<Fresnel>

以下のように標識を斜めから見ると分かりますが、

Cameraの正面にある部分は光っていて端は暗くなっています。

Retroreflectiveな表面が再現されています。

これを実装します。

Fresnelノードを使用するのはまあ予想が付きました。

Ben Cloward先生によるとFresnelノードのExponent Inの値を1.0、PowerノードのExpの値を14.0にすると

以下のようにRetroreflective Effectがよりはっきりするようになるそうです。

PowerノードのExpの値を上げる事でContrastがよりはっきりするのは理解出来ますが、FresnelのExponentInの値を1にする意味は何なのでしょう?

これは実装する時に検証します。

<Diamond Pattern>

次にもう一つのTextureを追加してひし形のBackgroundを標識に追加します。

以下のような結果になっています。

これ見る限りでは後ろの灰色の部分は単一の灰色でも問題なさそうです。

この結果を先程の標識の結果と掛けて、更に25倍にします。

勿論その結果をEmissive Colorに繋ぎます。

結果です。

うーん。

光っている感がありますね。

うーん。

Smoothnessはどこで計算しているのか分からないかったです。

まあいいです。

今週のMaterialの勉強はここで終わりにします。

来週は実装します。

5. Gaeaの勉強

5.1 GaeaのTutorialを作成する

今回のTutorialで教える内容はTerrainのSizeの設定方法についてです。

Mountainノードを配置します。

結果です。

Propertiesを見ます。

うーん。

先にこっちを説明しておくか。

https://docs.quadspinner.com/Reference/

に行きます。

以下のような画面になっています。

左端のGeoPrimitivesを開きます。

GaeaのToolboxのGeo Primitivesと同じNodeが記されています。

ここからMountainを選択します。

すると以下のPageが表示されます。

下にScrollするとPropertiesが解説されています。

これらのPropertiesの操作はおいおい教えていきます。

が、

今、もっとも気になるのは、これです。

こうやって横から見ると更に強調されますが、

この山小さくない?

この疑問についてどうやったら答える事が出来るのかをここで教えます。

BuildのTerrain DefinitionでTerrainのSizeは決まっている

高さは2600m、Scaleは5000mにセットされています。

Real Scaleは2.441m/pxと書かれているから

5000m/2.441m/px = 2048.340...px

でPxのSizeが2048である事が分かります。

Buildの上を見ると確かにResolutionの設定が2048になっています。

Height-Scale RatioはHeight/Scaleなので2600m/5000m = 0.52

で計算値と同じになっている。

高さは

なのか(これは間違っていますがこの説明の方が分かり易いのでここでは敢えて間違えます。)

MountainのPropertiesのScale

2600m*0.44 = 1144m

なのかもしれません。

うーん。

その前にSizeを直します。

それはともかくとして5000mって大きすぎる気がしませんか?

UEのLandscapeの大きさを確認します。

以下に示した様にDefault値でLandscapeを作成します。

結果です。

一辺の長さを図ると

50760 uuつまり50760㎝、507.6mです。

測定の誤差を考えると理論的には512mもしくは504m位かもしれません。

因みにHeight MapをImportする場合はDefault値のまま作成すると以下のように

一辺の長さが2倍の1009mになります。

これをGaeaでも同じにすると

となり結果は

となりました。

うえー。

山が高すぎます。

あれ2023-08-06のBlogで確認したら

こっちがあっていました。

Scaleは関係なかったです。

Heightが山の高さを決定していました。

BuildのHeightをScaleと同じ1024にします。

結果です。

高さが1024mになりました。

うーん。

これは分かりにくい。

もう一回書き直します。

5.2 GaeaのTutorialを作成する(やり直し)

やっぱり今回はMountainノードのPropertiesを説明して終わりにします。

まずSeedを説明します。

だとこんな結果になります。

Seedが00だとこんな結果になります。

Seedが128000だとこんな結果になります。

Default値に戻る方法を説明します。

ParameterにCursorを合わせた状態で右Clickすると以下のIconが表示されます。

まず真ん中のButtonを押します。

Default値に戻ります。

因みに値をMaxにしたい時は、

値をMinimumにしたい時は

を押します。

これだけ教えれば十分ですわ。

これでPower Pointを書き直します。

書き直しました。

以下のようにしました。

まず題ですが、Mountainノードについてとしました。

以下のSlideでNodeのPropertiesについて解説します。

  • PropertiesとはそれぞれのNodeが持っているParameterの事
  • PropertiesのDocumentの場所(https://docs.quadspinner.com/Reference/
  • Propertiesの値の操作画面の表示(Cursorを載せた状態で右Click)

を説明しています。

次のSlideです。

Propertiesの値の操作画面の使い方を説明しています。

次のSlideです。

MountainノードのParameterについて説明しています。

ここでは2D画面を表示する方法も教えます。

3D Viewportの右端のToolbarを初めて使用します。

ここで以下の点も教えます。

  • 全部の機能は理解出来ないし、覚える必要もない。
  • ただしその場で値をいじる事で、そのParameterの機能を想像出来るようにしておく

これに関しては異論がある人もいるかもしれませんが現実問題としてPropertyを全部把握するのは不可能です。

もう一つの問題としてPropertyの機能だけを追いかけていると全体の流れを理解するのに劣るようになってしまいます。

6. Houdiniの勉強

6.1 先週の復習

先週何を勉強したのか覚えていません。

先週のBlogを読み直して復習します。

 Houdini 19 - Wall Tool 02 [5]の実装をしていました。

思い出しました。

以下に示したPoly Frameノードの機能がよく分からないところで先週の勉強は終わったんでした。

一応、使用した全部のNodeの機能について復習しておきます。

まず以下のLineノードです。

これは当然Lineを作成します。

Resampleノードです。

InputされたLineノードのPointの数を増やしています。

以下のLineが

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

Pointの数が増えています。

Copy Pointノードです。

これはInput1のLineをInput2のそれぞれのPointで生成する機能のようです。

以下の結果のようになっています。

次にResampleノードを追加しています。

結果です。

Pointsが増えていますね。

最後のNodeです。

Poly Frameノードです。

結果です。

Normal Vectorを表示していますね。

これがPoly Frameノードの機能なのでしょうか?

6.2 Poly Frameノードについて調べる

Tutorialの続きを始める前にPoly FrameノードについてNetで調査します。

HoudiniだってNetに全てのNodeの機能をまとめたDocumentがあるはずです。

それを探します。

在りました。

PolyFrame geometry node [6]です。

検索したらすぐに見つかりました。

以下のようになっていてかなり細かく解説されています。

Coordinate Frame Attributeを生成する。と書かれていますね。

これがPoly Frameノードの機能のようです。

ただCoordinate Frame Attributeが何なのか分かりません。

まあいいです。

まだ初心者なんであんまり難しい所に深入りして無駄な事を勉強したくはないです。

その下にPoly FrameノードのParameterの説明がありました。

こっちは必要になったら読む事にします。

https://www.sidefx.com/ja/docs/houdini/nodes/sop/polyframe.html

ここに日本語版のDocumentもありました。

一時、Houdiniは日本語のTutorialがないから今勉強したら先行者利益取り放題だと思ったんですが、しっかり日本語のDocumentも整備されていますね。

6.3 Houdini 19 - Wall Tool 02 [5]の実装の続きをやる

表示をRight Viewに変更します。

2023-11-05のBlogには

と書いていましたが、

Scene Viewの右上にあるPersepをClickしたら以下のBoxが表示されました。

ここからRight Viewportを選択します。

見事にRight Viewになりました。

赤い数字の中で奇数の数字のPointsだけ半分横にずらします。

Resample_BrickSpacingノードを選択します。

しました。

Distance AttributeをOnにします。

しました。

Geometry Spreadsheetを選択します。

ここにPtdistの値が載っていますね。

これは何を示しているんでしょうか?

検索しても出てこないのでBingで質問しました。

以下の回答が表示されました。

凄い。

一発で答えを教えてくれました。

Point間の距離を示しているんですね。

先程のPtdistの結果を見ると

何故か、0.625と0.3125の二つがありました。

Pointを細かく観察してみると端にあるPointのPtdistは0.3125になっていました。

うーん。

そうするとPoint間の距離と単純には言えなさそうです。

まあ良いです。先に進んで取り敢えずTutorialを終わらしましょう。

最初から全部理解するのは不可能です。

Attribwrangleノードを追加しました。

Polyframe1ノードの結果をAttribwrangle1の左端のInputに繋ぎました。

AttribwangleノードのVEXpressionに以下のように打ち込みます。

まじか。

いきなりProgrammingするのか。

打ちました。

Neighbour Count()関数について調べます。

公式のSiteにneighbourcount VEX function [7]がありました。

ここにParameterの解説がありました。

ここでArgumentsと書かれていますが、ArgumentsはParameterに配置する具体的な変数やObjectを指したはずで、ArgumentとParameterは全く違う意味です。

少なくとも私はそう習いました。

違う流派とかがCanadaにはあるんでしょうか?

最初のParameterであるGeometryですが、0をセットした場合は、InputからPassしたGeometryをPassするそうです。

となるとPolyframe1ノードのPointがGeometryにPassされるんでしょうか?

次のParameterはPoint_numとなっています。

カウントしたい隣のPointの番号。

と書かれています。

となると「@ptnum」の意味はPointのNumberになりますね。

調べます。

公式SiteのUsing VEX expressions [8]に以下の解説がありました。

現在のPointのPoint Numberと書かれていました。

うーん。

これなら分かり易い。

最後にReturn Valueですが、そのPointにくっついている他のPointの数を返すそうです。

うーん。

納得。

全部理解出来ました。

次のCodeです。

ここはTutorial(2023-11-05のBlog)に以下の解説がありました。

ああ、ptdistがPointとそのPointの隣のPointの距離だとも書かれていました。

ここまで解説してくれればこのCodeの意味を理解するのは簡単です。

最初の2つのIf節は

「もし赤い数字が偶数かつ、隣接するPointの数が0以上だったら以下の計算をします。」

と言う意味です。

うーん。

全部のPointが隣接するPointの数が0以上になりますよね。

あれ?

Tutorial(2023-11-05のBlog)を見直したら0じゃなくて1でした。

危ない。

この条件を満たすPointにNormal方向にPtdistの値の半分を掛けた値をセットします。

うーん。

これだと全部の値が同じになってしまいます。

また間違えていました。

これが正解でした。

更に;も忘れていました。

うーん。

かなりボケボケです。

結果です。

赤い数字が偶数のLineのPointだけ右よりにずれていますね。

勿論、端のPointはそのままです。

次の工程です。

Resampleノードを追加しました。

結果です。

うーん。

Tutorialと同じ結果になっています。

Resample by Polygon EdgeにCheckを入れました。

これからの作業は何をやっているのか今一理解していません。

取りあえず全部実装してから考える事にします。

あ、Tutorial(2023-11-05のBlog)が説明していました。

以下の方法でやるそうです。

次に

をします。

結果です。

そしてPointは以下のようになりました。

うーん。

何で?

これは来週考える事にします。

今週はここまでです。

7. UEFNの勉強

今週もPi Equals Three氏のTutorialをやっていきます。

7.1 Make Anything Face Your Player! UEFN/Creative 2.0 Verse Tutorial [9]を勉強します。

<Intro>

特になし

<Properly Rotating Your Creative Prop>

以下のImageが常にCameraを向くようにします。

以下のPropを使用します。

PNGと言う名前のPropです。

これを開くと以下のような軸になっているので

以下のImageの向きを

以下のように変更します。

これは一体何をしているんでしょうか?

まあ後で判明するでしょう。

全部勉強してから考える事にします。

<Creating Verse Device>

新しいVerseのDeviceを作成します。

流石にこのやり方はもう覚えたので記録には残しません。

名前だけ以下に示します。

<Basic Logic Behind Rotating Our Prop>

どのような論理でPropをCameraの方向に向けるのかについて

以下の図を使用して説明しています。

水色のVectorはPropの位置VectorからCamaraの位置Vectorを引く事で計算出来ると説明していました。

それだけでが、この理論を元にProgrammingを構築するので、こういう話は他のTutorialもしっかりすべきだと思います。

<Getting Reference to Player and Prop>

ここからVerseのProgrammingに入ります。

まずPropの変数を以下の方法で作成します。

次に以下の関数を作成しました。

と言っても実装の中身はPrint()関数一個だけなので宣言した。と言う方が良いでしょうか。

更に以下の変数を作成しました。

更に以下の場所でPlayers変数の値をSetしました。

<Creating DoFacePlayer Function>

以下のif節を追加しました。

これは前のTutorialで全く同じ事をやりました。

GetFortCharacter[]関数を使用するために

を追加しました。

<Getting Prop and Player Positions><Getting Prop Forward Vector

Camaraの位置じゃなくてPlayerの位置にPropを向くようにセットするそうです。

Playerの位置とPropの位置は以下の方法で獲得します。

次に以下の実装でPropの向きをPlayer側に移動します。

Tutorialでは以下のModuleを追加するのを忘れないようにと突然言って来ました。

Translationあたりの計算をする時あたりから、このModuleを追加する必要がありますね。

Propの向きを正しくするためには以下の実装に直す必要があるそうです。

うーん。

これは一寸考えないと分からないですね。

実装する時に考える事にします。

<Creating Vectors to Delete Z Axis>

Z方向が0のVectorを作成します。

PlayerのZ方向が0の場合です。

単純にZを0にした新しいVector3型の変数を作成しただけですね。

PropのZ方向が0の場合です。

PNGFrontのZ方向が0の場合です。

うーん。

これらを使用して一体何をするんでしょう?

<Creating Shortest Rotation Between Vectors>

はい。回転するのにもっとも短い距離を判定するために使用していました。

<Rotating Prop>

回転させるために以下の実装を追加しました。

DoFacePlayer()関数内でDoFacePlayer()関数を呼び出しています。

永遠にこの動作を繰り返す訳です。

<Configuring Creative Device>

UEFN側の設定をしています。

BuildをしたりDeviceを配置したり、DeviceのParameterにPropをセットしたりしています。

この辺のやり方はもう理解したのでここには記録しません。

<Final Result>

テストしています。

PropはずっとPlayerの方を向いています。

以上でした。

実装は来週します。

7.2 Make Anything Face Your Player! UEFN/Creative 2.0 Verse Tutorial [9]を勉強した感想

Propの向きを変更した理由はよく分かりませんでした。

これは実装する時に向きを変更しなかったらどうなるのかを見る事で検証します。

8. DirectX12の勉強

8.1 Lötwig Fusel氏のD3D12 Beginners Tutorialを勉強します

今週もLötwig Fusel氏の Project Setup & ComPointer | D3D12 Beginners Tutorial [D3D12Ez] [10]を勉強します。

8.1.1 先週の復習

先週何をやったのかを確認します。

先週は作成したProjectのFolderの構成が、Sample CodeのFolderの構成と違っていたのでそれを直したんでした。

今確認すると私が作成したProjectのFolder Viewは以下のようになっています。

それに対してSample CodeのFolder Viewは以下のようになっています。

一つ一つ比較していきます。

<Build Folder>

Sample Codeの方にはBuild Folderがありません。

しかし実際にD3D12Ez-masterのFolderを開いて見ると

以下に示した様にBuildのFolderが私のProjectと同じ場所に存在しています。

これぐらいの違いなら問題ないでしょう。

次の違いを検討します。

<Debug Folder>

Sample CodeのDebug Folderはsrc Folder内にありますが、

私のProjectのDebug Folderはsrcの外側にあります。

先週、Debug Folderを消したようのです。

この時に間違えて正しい場所にあるDebug Folderを消してしまったみたいです。

直します。

これで実行してみます。

新しくDebug Folderが形成されて

しかも実行がErrorになりました。

うーん。

一回Solution Fileに戻ってProjectからRebuildをしました。

その状態で実行すると、Errorにならずに実行できました。

あ、分かりました。

まずFolder ViewからSrc Folderの外にあるDebug Folderを消します。

次にSolution Viewに戻りProjectからRebuildします。

そして実行します。

今度は普通に実行出来ました。

そしてFolder Viewに戻ります。

以下のようになっています。

はい。

Src Folderの外に合ったDebug Folderが無くなりました。

今度はSrc内のFileやFolderを比較します。

Sample CodeのSrc内のFileです。

赤線で消したのは今の時点では実装してないものです。

以下が私Projectです。

私のProjectにはMyD3D12Ez_1.vcxproj.filtersというFileがありますが、Sample Codeにはありません。

vcxproj.filtersって何なんでしょう?

調べます。

公式Siteのvcxproj.filters [10]によると

と書かれていました。

開いたら以下のようになっていました。

これはSolution Viewの設定を指定してます。

となるとSample Codeでもどこかにあるはずです。

調べます。

Sample Code内にはvcxproj.filtersは存在してないです。

うーん。

ないんじゃ仕方ない。

これはそのままにします。

次に私のProjectを見るとDebug Folder内に以下のFolderなどが生成されていました。

しかしSample Codeは以下のようになっています。

これらのFileは以下の場所に

以下のように配置されていました。

私のProjectを見ると

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

少なくともDebug Folder内に生成されたものはここにも生成されています。

何で両方に生成されるんでしょうか?

Sample CodeのDebuggingを見ると一か所

私のProjectの設定と違う箇所がありました。

よく分からないけど同じにしてみます。

更にDebug Folder内のFileを全部消しました。

実行したらErrorになりました。

Errorの原因はこれを変更したからみたいな事を言っているので元に戻しました。

もう一回実行します。

今度は普通に動きました。

うーん。

分らん。

あれ、実行したにもかかわらずDebug Folder内が空のままです。

うーん。

今度こそ出来た。

いや。

もう出来た事にして先に進みます。

8.1.3  Project Setup & ComPointer | D3D12 Beginners Tutorial [D3D12Ez] [10]の続きを勉強する

本当はもう時間が無いんですが流石にこれで終わりには出来ないのでProject Setup & ComPointer | D3D12 Beginners Tutorial [D3D12Ez] [10]の続きを勉強します。

DirectX 12が使用出来るのか以下の実装を追加して確認しています。

以下のような解答が返ってきました。

後半はどうやらCom Pointerについての話のようです。

以下のCodeを書いて説明していますが、

何が重要なのかわかりません。

取りあえず最後まで聞いてみます。

ああ、何となくですが理解出来ました。

Com Pointerが一種のSmart Pointerである事を説明していたようです。

Lötwig Fusel氏が作成したCom Pointer用のClassがGitHubにあるので

これをCopyして

Support Filter内に新しく作成したComPointer.hに

貼り付けます。

Main.cppに戻りComPointer.hをIncludeします。

すると以下のようにComPointerが使用出来るようになります。

ComPointerの理論についてはよく理解出来なかったですが、実装したのはそれだけでした。

8.2 「DirectX 12の魔導書」の勉強

8.2.1 先週の復習

先週は4章を軽く読んだだけでした。

8.2.2 「4.1 Graphic Pipelineのおさらい」を読む

これは本当におさらいで、そもそもこのPipelineについてはOpenGLを勉強した時も散々やったので、おさらいの必要性はあまり感じません。

Skipして次を読みます。

8.2.3 「4.2 VertexのInformationの作成」を読む

「4.2.1 Coordination Information」についてまとめます。

<DirectXMath Libray>

ここではVertexの座標を表すのにDirectXMath Libraryを使用する事を解説しています。

後は別に実装するための説明では無いのでここにはまとめません。

<XMFlOAT3 Structure>

これは今回は使用しないみたいです。

<3つのVerticesの定義>

ここでVerticesの定義を時計回りにするとありました。

あれ、反時計回りじゃなかったけ。

調べたら時計周りみたいですね。

それよりもFaceとかCullingを理解するのが大事みたいな話ばっかりでした。

そうなのか?

これは実際に三角形を表示する時に逆もやってみます。

8.3「Direct3D 12 ゲームグラフィック実践ガイド」の勉強

もう時間も気力も無くなりました。

Direct3D 12 ゲームグラフィック実践ガイド」の勉強は今週もお休みします。

9. まとめと感想

なし

10. 参照(Reference)

[1] Castle Wall Tool. (n.d.). https://www.youtube.com/playlist?list=PLNbgmFvU__fiPhyUWHHzZ2Nv5ieM_bOdB

[2] Ben Cloward. (2023, April 13). Retroreflective Road Sign - Advanced Materials - Episode 22 [Video]. YouTube. https://www.youtube.com/watch?v=kH8cORFT48U

[3] 道路標識や白線はなぜ光る?. (n.d.). りかの部屋. https://www.thr.mlit.go.jp/iwaki/hama-lib/rika/reflection.html

[4] Ben Cloward. (2023, March 9). Sharp Text Shader - Advanced Materials - Episode 18 [Video]. YouTube. https://www.youtube.com/watch?v=Euvy_R03rlg

[5] Rick Banks. (2022, June 20). Houdini 19 - Wall Tool 02 [Video]. YouTube. https://www.youtube.com/watch?v=J2Tf_OIy9CA

[6] PolyFrame. (n.d.). HOUDINI DOCUMENTATION. https://www.sidefx.com/docs/houdini/nodes/sop/polyframe.html

[7] neighbourcount. (n.d.). HOUDINI DOCUMENTATION. https://www.sidefx.com/docs/houdini/vex/functions/neighbourcount.html

[8] Using VEX expressions. (n.d.). HOUDINI DOCUMENTATION. https://www.sidefx.com/docs/houdini/vex/snippets.html

[9] Pi Equals Three. (2023, April 8). Make anything face your player! UEFN/Creative 2.0 verse tutorial [Video]. YouTube. https://www.youtube.com/watch?v=ShNZGi4z-_w

[10] TylerMSFT. (2023, April 10). Vcxproj.filters files. Microsoft Learn. https://learn.microsoft.com/en-us/cpp/build/reference/vcxproj-filters-files?view=msvc-170