UE4の勉強記録

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

「Unreal Engine 4.xを使用してRPGを作成する」の足りない部分を作成する。アニメレンダリングについて5

<前文>

アメリカの不況は本物か?>

今回のアメリカの不況は不況と言うLevelを超えて、アメリカが唯一の超大国でいられた最後の始まりだと思っています。

今日の前文はこれについて語ります。

その理由についてですが、この30年間のアメリカの好景気は単に日本人や他のアジア人を働かせて得た利益を吸い上げていただけだからです。

日本人はこの30年間の間、高齢や沢山働いても利益がないので働かなくなりました。そしてハイテク産業からスパイ容疑で中国人を追い出した今、アメリカ人の代わりに働く人は居なくなってしまったんです。

そりゃあ、ロバの頭の前にニンジンをぶら下げて、走らせるのは少しの間は可能かもしれませんが、いずれロバも走っても永遠にニンジンが得られない事が分かったら別な事を考えるようになります。

それでアジア人から利益を奪えなくなったアメリカとアメリカ人は今後どうなっていくんでしょうか?

まず、来年か再来年中国が台湾に侵攻します。

アメリカは参戦し中国と戦争になります。

在米10年の私が断言しますが、中国が台湾に侵攻したら必ずアメリカは参戦します。

この理由を理解するために、アメリカ人が広島と長崎の原爆についてどう思っているのかについて説明すると日本人には理解しやすいと思います。

まずアメリカ人は右派左派双方とも広島や長崎の原爆投下を悪い事だとは思っていません。

その理由ですが、右派と左派で全く違っています。

まず左派ですが、その理由は、その後の日本に民主主義を根付かせたからです。それまでの独裁国であった日本から日本人を開放して国民が自由に選挙で自分たちの指導者を選べるようにしてあげたんだから、我々は感謝されるべきだ。と思っています。

だから左派は、民主主義の国である台湾が独裁国家である中国に侵略されるのは許容出来ないんです。だから中国が台湾に侵攻したら必ず参戦します。

次に右派ですが、アジア人をなめています。スズメバチがミツバチの巣を襲ってその蜜を奪うように、白人はアジア人から奪うのが当たり前と考えています。なので広島や長崎の原爆投下も白人からアジア人に対して行ったんだから同然と思っています。

だから彼等は中国がアメリカにNOと言うのが許せないんです。ゴツンと痛い目に合わせてアジア人である事がどういう事かを分からせてやりたいんです。ので必ず中国が台湾に侵攻したら参戦します。

ここで日本が今までの平和主義を投げ捨ててアメリカ側について参戦しますが、今回のウクライナとロシアの戦争のように、余りに反日的なアメリカ側の態度に頭に来て直ぐに中立に戻ります。

アメリカは直ぐに中国を降伏出来ると思っていますが、中国は全く降伏する気配を見せず、アメリカを驚かせる事態になると思っています。

アメリカ人はベトナム戦争の話をするのを極端に嫌がるくせに第二次世界大戦の話は大好きなんです。

なので日本のような島国は制海権を取ったらその時点で詰みなんですが、ベトナムのような大陸と繋がっている国は制海権を取ろうが何をしようが、相手が参ったと言わない限り戦争が終わらないという違いをアメリカ人は完全に忘れています。

ここで第二のベトナム戦争になる事が判明します。しかしもうこの時点ではアメリカは後に引けなくなっています。

ここで泥沼化して国力を落としている間に、ロシアが強国化していきます。

これは温暖化の影響が国の強度を動かすLevelで影響し始めるからです。

私は地球温暖化をかなり疑いの目で見ていて、それは今回のウクライナとロシアの戦争で西欧諸国が直ぐに温暖化防止のための処置を止めてしまった事からも確信に至ったんですが、逆にそれが地球温暖化が事実かもしれないと気が付く原因になりました。

西洋人で地球温暖化を叫んでいる活動家が詐欺師である事は明白なんです。そんなに温暖化か問題ならサハラ砂漠を緑化でもすれば良いです。それをしないで、ガソリン車の規制とか日本人を締め出す事ばかり考えているから詐欺師である事は間違いないんです。しかしだからと言って地球温暖化そのものが嘘である必要は全く無かったんです。

これって私も最近知ったんですが、温暖化でロシアにある永久凍土がどんどん溶けているそうです。そしてそこは天然ガスやら石油の宝庫なんだそうです。更に人間って知的産業を維持するためには寒冷な気候に住んでいないと無理なんだそうです。頭を使う仕事をこなすためには人間は寒い所に住む必要があるんだそうです。

シンガポールのような熱帯の国でも知的な産業を維持できるのはエアコンをガンガン聞かせているからです。そして熱力学を一寸でも齧った人なら知っているようにエアコンで部屋を冷やせば地球全体としてはもっと熱くなります。

だからロシアのような寒すぎて人間としての生活が阻害されてる国は、気候が暖かくなればなる程、ボーナスステージに入るんです。

レアメタルをコントロールする中国と温暖化によって更に資源大国になったロシアがタッグを組んでアメリカの覇権に挑戦する訳です。

ここで30年前の日本だったら幾らでもレアメタルの代替品を見つけられたでしょう。しかし今となってはそんな研究をしている反骨精神のある日本人の学者は皆無でしょう。これも中村修二氏が青色ダイオードを発明した時に国を挙げていじめて追い出したせいです。この後から日本で世界をびっくりさせる大発明は徐々に聞かなくなり、今では全く聞かなくなりました。

しかしこの話は今回のアメリカの超大国として終りを迎えるという今回の話とは関係ないので止めます。

結論としては超大国としてもアメリカは終りを迎えます。例えばドルが基軸通貨として通じるのも後30年位でしょう。更にその時のアメリカはもう国全体がフロリダ化していて中南米の国と変わらなくなっていると考えられます。

これは私の日米両方に住んでいた経験から想像した推測です。所詮人間が予測したものですので、詳細細部に至るまで正確に当たるものではありません。しかし全体の流れとしてはこの通りになると確信しています。

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

<本文>

1.今週の勉強について

今週も以下の内容についてやって行きます。

  • Niagara: CGHOW氏のTutorialをやる
  • Materialの勉強
  • RPGEventの作成
  • Open Worldの検証
  • Gaeaの勉強
  • 雪山のMapの作成
  • UI Designの勉強
  • Anime Renderingの勉強

2.Niagara: CGHOW氏のTutorialをやる

今週もUnreal Engine 5 Niagara Beginner Tutorial - UE5 Niagara Starter Course! [1]の続きを勉強していきます。

2.1 Unreal Engine 5 Niagara Beginner Tutorial - UE5 Niagara Starter Course! [1]の続きを勉強する

出来れば今週で最後まで終わらせたいです。

最後まで終わらせるためには以下の節までやる必要があります。

  • Static Mesh Location
  • Skeletal Mesh Location
  • Morph Effect
  • Fire Material

直ぐに始めます。

<Static Mesh Location

これは一体何の事かと思ったら、指定したStatic Meshの形状にParticleを発生させるヤツでした。

やり方を以下にまとめます。

Fountain Emitterを追加します。

Particle が移動する必要はないので速度やForceを追加しているModuleは全部消します。

当然、Static Mesh Location Moduleを使いますのでParticle Spawn SectionにあるShape Location Moduleも外します。

Particle Spawn SectionにStatic Mesh Location Moduleを追加します。

すると以下の様なErrorが表示されますので、

Fix Issueを押します。

するとParticle Spawn SectionにSample Static Mesh Moduleが追加されStatic Mesh Location ModuleにあったErrorが消えます。

しかしSample Static Mesh Moduleに新たに警告が表示されています。

これはStatic Meshをセットしていませんよ。言っているだけなので

しました。

するとセットしたStatic Meshの形状通りにParticle が生成されるようになりました。

Tutorialではこの後、MannequinをStatic Mesh化してCurl Noiseとかを追加していますが、Static Mesh Location Moduleとは直接関係ない事なのでこれで終わりにします。

<Skeletal Mesh Location

今度はSkeletal Mesh Location Moduleの使い方についてです。

これはNiagara Systemの作成方法はStatic Mesh Locationとほとんど同じなんですが、Level上で実際に使用する方法が少し違います。その部分は詳しく記録します。

まずいつも通りにFountain Emitterを作成します。

VelocityやForce関連のModuleを消します。

Skeletal Mesh Location Moduleを使用するのでShape Location Moduleは要りません。消します。

Particle Spawn SectionにSkeletal Mesh Location Moduleを追加します。

更にSkeletal Mesh Location ModuleのPreview MeshにSK_Mannequinをセットします。

ここからLevel上の設定になります。

まずAnimation SequenceであるThird Person RunをLevel上に配置します。

こんな感じです。

次に先程作成したNSをLevel上に配置させ、

先程、配置したThird Person RunとNoneでLinkさせます。

少しだけ微調整しました。

結果です。

Tutorialではこの後色々な微調整して見た目をカッコよくしています。

私も色々やって見ました。

<Morph Effect

今度はMorph Effectの作成方法についてです。

これはMorph Effectの作成方法と言うよりLerp Particle Attributes Moduleの使用方法を理解すると言った方が良いかもしれません。

またFountain Emitterから始めます。

Velocity、Force関連のModuleを全部消します。

Particle Spawn SectionにあるShape Location Moduleの設定を以下の様に変更します。

形状をTorusに変更し、更に名前もMy Torusに変更しました。

更にParticle Spawn SectionにShape Location Moduleを追加します。

設定は以下の様にします。

こっちはPlaneにします。

名前もMy Planeにしました。

そしてParticle Update SectionにLerp Particle Attributes Moduleを追加します。

更にLerp Particle Attributes ModuleのPositionを以下の様に設定します。

さっきShape Location ModuleでそれぞれのModuleの名前を変更したのはここで指定しやすくするためだと思っていたんですが、違いました。

この状態でLerp Alphaに0を代入すると

Torus状に

1を代入すると

Planeになります。

Planeは見やすいように以下の設定に変更しました。

このLerp Alphaの値を以下の様にセットすると

以下の様になりました。

ただしこの結果はEmitter Update SectionのSpawn Rate ModuleをSpawn Burst Instantaneous Moduleに変更しています。

この後、Tutorialでは見た目を良くするために色々やっていますが基本はこれだけなのでここで記録は終わりにします。

<Fire Material

とうとう最後の節まで来ました。

ここでは炎のEffectを作成します。どうせSub UVを使用したヤツだと思ったら全然違いました。

Tutorialの通りに作成してみます。

まず火と煙用のMaterialの作成をします。

Tutorial通りに実装しました。

この実装は今まで散々勉強した内容しかないので特に勉強しないと意味が分からない部分はないです。

唯一記録しておきたい事は、Noiseを生成するNodeは以下の二つがありますが、

この二つを使用してTexture Sampleノード内から適当なPerlin noiseのTextureを参照しないでNoiseの作成は出来ないんでしょうか?

もし出来るのなら計算Costや実際のCostはどちらの方が速いんでしょうか?

Textureを参照するのはCostが凄い掛かるのでなるだけ少なくした方が良いとは聞きますがこの場合はどうなんでしょう。

これは後で調べてみます。

今度はNiagara Systemの作成です。

いつも通りFountain Emitterを使用します。

Render SectionにあるSprite Renderer Moduleの

Materialに先程作成したMaterialをセットします。

Particle Update SectionにDynamic Material Parameters Moduleを追加します。

それぞれのParameterは取りあえず以下の様な値にします。

Particle Spawn SectionにあるAdd Velocity Moduleの

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

炎のEffectなのでParticle Update SectionにあるGravity Force Moduleは要りませんが、

今回はZの値をPositiveにする事で対応します。

結果です。

この時点で炎の形状になっています。

ここでParticle Update SectionのDynamic Material Parameters Moduleの値を以下の様に変更します。

更に微調整して以下の様になりました。

Level上に配置してみました。

Tutorialはこの後も色々追加して炎の形状を調整していますが、細かい部分なので記録は省略します。

今度はSmokeを作成します。

FireをDuplicateします。

まず色をSmokeの灰色にします。

Particle Spawn SectionにあるInitialize Particle ModuleのColorを灰色にします。

細かい調整はTutorialと全く同じにしても結果が同じにならないので、自分で勝手に微調整しました。

結果です。

これにSparkを追加します。

またFireのEmitterをDuplicateします。

Particle Spawn Section内のInitialize Particle Moduleの

Sprite Sizeを以下の様に変更します。

結果です。

この尖った面が速度に沿う様にセットします。

Render SectionにあるSprite Renderer Moduleの

Alignment をVelocity Alignedに変更します。

結果です。

速度はZ軸に沿って上向きになっているのでこれで合っているはずです。

サイズを小さくしました。

もう火の粉にしか見えません。

色々微調整して最終的には以下の様になりました。

遠くから見ると

あんまり火の粉が見えません。

Tutorialのは遠くからでも火の粉が良く見えます。

次は地面にNSを直接置いた時に炎の下の一部がちぎれて見える現象を直します。

以下に示した部分で赤線に囲われた箇所を追加するだけだそうです。

結果です。

うーん。正直良く分からん。

最後にGlowをLight Rendererを使用しないで追加するそうです。

まだ最初の炎のEmitterをDuplicateします。

速度などのいらないModuleを外します。

Render SectionにあるSprite Rendererの

AlignmentをCustom Alignmentにセットします。

更にFacing ModeをCustom Facing Vectorにします。

そしてParticle Spawn SectionにAlign Sprite to Mesh Orientation Moduleを追加します。

そして設定を以下様に変更します。

結果です。

床に炎が写っています。

微調整して以下の様になりました。

はい。これでこのTutorialが終わりました。

流石に疲れてしまったので、このTutorialの総括は来週行います。

3.Materialの勉強

今週も、Ben Cloward 先生のPost Process用のMaterialとFluid Ninja VFX Toolsを勉強します。

3.1 Underwater Post-Process Effect - Shader Graph Basics - Episode 52 [2] を軽く見る

今週は以下に示した水面下のEffectを作成するそうです。

この水面下のEffectは

  • Depth Fog
  • Ripple Warping
  • Lens Distortion
  • Edge Blurring

で構成されているそうです。

Lens DistortionとEdge Blurringは先週までのPost Processの勉強で作成しました。

Ripple Warpingは何を指しているのか今は分かりません。Depth Fogはカメラから遠くに行く程曇って見えるEffectを言っていると思われます。

これの事をRipple Warpingと呼んでいました。

あれ、じゃLens Distortionが何だか分からないですね。

TutorialによるとEpisode 49でRipple Warping Effect、Episode 50でScreen Mask 、そして先週勉強したEpisode 51でBlur Filterを勉強したと言っています。

これはその通りですが、Screen MaskとBlur FilterでEdge Blurringを作成するんじゃないの?

うーん。

まあどんどん見て行きましょう。先に進めば疑問も解決するはずです。

はい。

Depth FogとLens DistortionはこのTutorialで作成するそうです。

全部疑問が解決しました。

<Depth Fogの実装>

まずScene Depthを使用します。

Subtract ノードを使用します。

200を引いていますが、これはCameraから2m先まではFogを生成させないためだそうです。

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

700で割っていますが、これは7m後は視界が0になると言う意味だそうです。

次にTextureCoord[0]ノードを追加します。

Tutorialでは、

と言っています。

この言い方だとTextureCoord[0]がFull Screenを管理してるように聞こえます。

うーん。そうなのか?

先週も書きましたが、私はScene Depthノードに保持されているG Bufferが以下の様なTextureとして保持されていて

上のSmileの絵の代わりにFull ScreenのScene Depth がTextureとして入っているから、結果的にTextureCoord[0]を繋げるとFul Screenで表示されるだけだと思っています。

それは兎も角として、Landscapeの作成の時も勉強しましたが、Scene DepthノードにSubtractしたりDivideしたりする事で変化させる距離を決定出来るが不思議です。

これは後で考察する事にします。

結果です。

次はPowerノードを追加します。

ここでは0.5を掛けています。

0.5乗すると白さが増すんですね。

うん。増しています。特に手前の岩の黒さが減っています。

これをScene Texture: Postprocess Input0とLerpします。

結果です。

Depth Fogって水に潜った時に奥が水色になる、あれを表現しているのか。

<Scene DepthノードにSubtractしたりDivideしたりすると結果が変わる件について

これについてまず検討します。

まずScene Depthに入って入る値ですが、以下の様にして直接確認すると

真っ白です。

と言う事は、カメラからの距離を0から1の間にNormalizeして保持しているのではないです。

TutorialでもCameraからの距離をcmで保存しているからだ。と言っています。

この値を白黒で表示するためには割って値を均等に小さくする必要があります。

もしTutorialの言う通りCameraからの距離をcmで表しているならば、Cameraから1cm離れたら、値が1になって真っ白です。100で割ったら、1mまでは灰色で表示されるはずです。

1m位まで近づいたらObjectが見えました。

はい。

これがTutorialで言っていた700で割ったら7mまで見えるようになる。の理由ですね。

次にSubtractについて考えます。

もし200を引いたらCameraから200cmの距離まで真っ黒になります。なんの情報も無くなります。

ただし以下に示したようなLerpをする場合、

真っ黒になると言う事は単にAの値をそのまま表示する事になるので、Fogが掛からなくなると言う事と同義になります。

分かってしまえば単純でした。

<Lens Distortion

以下の実装で行うそうです。

これは単にZoom Inしただけです。

この部分の実装の説明、特にTexCoord[0]に対しての操作は、Textureを小さくしているといった感じの説明で、Ben Cloward先生もこの説明はあんまり納得していないようでした。

やはり、Textureの操作は、私のやり方で考えないとどこかに矛盾が生じます。

私のやり方を簡単に説明するとTexCoord[0]に対する操作は、Textureに対しては何もしていないんです。Textureを写しているCameraに対して操作しているんです。

このCameraの概念を追加して考えるとTexCoord[0]に対する操作とその結果が完全に一致します。

これ英語圏でも日本語でも誰も言っていないので、論文に書いても良いくらいの発見です。

脱線しました。元の話に戻ります。

Lens Distortionで作成したいのは、画面の中央だけZoom Inして画面の端はそのままにしたいんです。

はい。

ここで2022-07-25 のBlogで勉強したScreen Maskを使用します。

以下の様にLerpノードを使用してAlphaに2022-07-25 のBlogで勉強したScreen Maskを使用すれば

画面の中央だけZoom Inして画面の端はそのままに出来ます。

結果です。

Screenshotだとあんまり良く分かりませんが、動くと画面中央がDistortionしているのが良く分かります。

<全部を合成する>

残りのEffectであるRipple WarpingとEdge Blurringは既に作成しているのでそれらを合成して完成させます。

まず合成する順番を丁寧に考える必要があります。

4つのEffectの内幾つかはUVに関係して、残りの幾つかはSampleの色などに関係しています。

まずScreen Warping Effectについてです。

以下の赤線で囲った部分が前に作成した時と変わっている箇所だそうです。

まあ、この辺は微調整しただけみたいです。

このScreen Warpingですが、Screenの端ではこのEffectの効果を少なく、もしくは無くしたいそうです。

この点に関してはその理由は良く分かりません。

ただそのやり方は以下の実装で出来るのは理解出来ます。

更にこの実装を実際に使用するためには以下のようにTexCoord[0]に足す必要があります。

結果です。

Screenshotでは良く分かりませんが、画面が水面を写している時の様に揺らいでいます。

今度は先程TexCoord[0]を使用していた箇所にLens Distortionの実装を使用します。

これでLens Distortionの効果も追加出来ました。

次にEdge Blurringを追加します。

これは先程のAddノードの結果をTexCoord[0]の代わりに使用します。

ただしこのBlurの実装だとEdgeだけBlurにして画面の真ん中をShapeにする事は出来ません。

そこでVignette Maskの結果を

2倍にしてAlpha値として使用します。

結果です。

端がぼやけている感じは余りありませんね。

以下の部分の引き伸ばしが気になります。

最後にDepth Fogを追加します。

結果です。

変な結果になっていますね。

これを直します。

<Bugの直し>

まず水面に変な映像が写っている原因ですが、以下に示したDepth Fogの実装の値が1以上になっているからだそうです。

ので途中でSaturateノードを追加して1以上の値を1に変更しました。

このSaturateノードはPower ノードの前で掛けているんですが、Power ノードの後だとどう変わるのか一寸興味があります。Powerノードの跡でもBugは消えると思っています。

結果です。

水面に写る変な影は直りました。が今度は岩のTextureがずれているBugが見えます。

今度は以下に示した岩のTextureがずれているBugを直します。

以下に示したAddノードの値をDepth FogのTexCoord[0]に使用します。

結果です。

うーん。直りました。

後、TutorialではCausticsはこのTutorialでは追加しないけど、その作成方法は別のTutorialで説明しているのでそれを参照して下さい。と言っています。

Causticsって何?と思って調べたら、以下に示した様な光の輪が繋がったImageの事でした。

これでお終いでした。

正直、この流れを追うだけで疲れてしまいました。

今週のMaterialの勉強はここで中止して、この実装は来週やる事にします。

4.RPGEventの作成

4.1 Dialogueの推敲

先週、作成した文章で推敲が必要な個所を直して行きます。

まずこれを直します。

  • この先の山には、回復薬の元になる薬草が生えているんだ。
  • でも危ないから誰も近寄らない。
  • 実は僕は山を登って薬草を取ってきたんだ。
  • でもその薬草を道具屋に売ったらそれで終わりだ。
  • そこで僕は山から取って来た薬草を村の回りに植えてみたんだ。
  • そしたらその薬草は村の回りでもぐんぐん育っている。
  • もう少し成長したら刈り取って道具屋に売るのさ。

を推敲します。

しました。

  • 奥の山には回復薬の元になる薬草がある。
  • でも危ないから村人は近寄らない。
  • 実は僕は危険を冒して薬草を取ってきたんだ。
  • でもその薬草を道具屋に売ったらそれで終わりだ。
  • そこで僕は山から取って来た薬草を村の回りに植えてみたんだ。
  • そしたらその薬草は村の回りでもぐんぐん育っている。
  • もう少し成長したら刈り取って道具屋に売るのさ。

これはいくら推敲してもこれ以上短くする事は不可能です。

なのでこのDialogueは二つに分けます。

まず最初のPartです。

  • 奥の山には回復薬の元になる薬草がある。
  • でも危ないから村人は近寄らない。
  • 実は僕は危険を冒して薬草を取ってきたんだ。

これに対するPlayerの回答を考えます。

これは、色々検討しましたが、

  • 続きを聞く

だけ作成するのが一番良いと思います。

そして

  • でもその薬草を道具屋に売ったらそれで終わりだ。
  • そこで僕は山から取って来た薬草を村の回りに植えてみたんだ。
  • そしたらその薬草は村の回りでもぐんぐん育っている。
  • もう少し成長したら刈り取って道具屋に売るのさ。

を表示します。

これで行きます。

まあ、前回よりは大分マシです。

このやり方で他のDialogueも直します。

Dialogueです。

  • 森と泉の青の世界にはとても大きな国があります。名前をアポロン王国といいます。
  • アポロン王国では12使徒の一人であるバルトロマイ様が宰相になっています。
  • ある時、邪悪な男が現れアポロン王国の王様を脅しました。
  • その男は悪魔から特別な力を授かったと言い、王様しか知らないアポロン王国のある秘密を教えろと言いました。
  • バルトロマイ様はその男が言っている事が本当である事が分かったので12使徒の力を使ってその男と戦いました。
  • その男は倒されましたが、バルトロマイ様も行方しらずになってしまいました

まず推敲をします。

  • 森と泉の青の世界にはとても大きな国があります。名前をアポロン王国といいます。
  • アポロン王国では12使徒の一人であるバルトロマイ様が宰相になっています。
  • ある時、アポロン王国に邪悪な男が現れ、王様を脅しました。
  • その男は悪魔から特別な力を授かったと言い、王族しか知らないアポロン王国の秘密を教えろと言いました。
  • バルトロマイ様はその男が悪魔から特別な力を授かった事が本当である事が分かったので12使徒の力を使ってその男と戦いました。
  • その男は倒されましたが、バルトロマイ様も亡くなってしまいました。

取りあえずはこれで行きます。

これを2つに分けます。

前半部分です。

  • 森と泉の青の世界にはとても大きな国があります。名前をアポロン王国といいます。
  • アポロン王国では12使徒の一人であるバルトロマイ様が宰相になっています。
  • ある時、アポロン王国に邪悪な男が現れ、王様を脅しました。

後半部分です。

  • その男は悪魔から特別な力を授かったと言い、王族しか知らないアポロン王国の秘密を教えろと言いました。
  • バルトロマイ様はその男が悪魔から特別な力を授かった事が本当である事が分かったので12使徒の力を使ってその男と戦いました。
  • その男は倒されましたが、バルトロマイ様も亡くなってしまいました。

これで行きます。

まだ長いですね。

分割する場所を変えました。

うーん。こっちの方が読みやすそうですね。

これらのNPCに使用しているTextureのTexture GroupがUIにセットされてなかったです。

これを直します。

確かBulk Edit via Property Matrix…を使用したら全部のTextureを一辺に直せるはず。

Blogを検索したんですが、出て来ません。

うーん。分かりません。

調べたら出来そうです。

Texture GroupをUIに変更しました。

直りました。

後、Texture GroupをUIにする事で何が変わるのかも覚えていません。

色々調べましたが良く分かりません。

多分LODの項目にあるのでUIに設定するとMipmapsを作成しないとかそういう事に関係していると思います。

5.Open Worldの検証

5.1 先週の続きをやる

先週作成したOpen World を直す続きをやります。

先週は以下に示した様にHeight Mapだけ直しました。

その結果、以下に示した様に綺麗に直ったので、

同じ事を4つのMaskに対して行います。

Dark Grass Layer用のMaskを直しました。

確かLayerは後から追加出来たはずです。

2022-07-25のBlogにそのやり方がまとめられていました。Klaus氏のTutorialで説明されていたやり方です。

Layerに上記のPngを追加します。

まずLandscapeのLandscape MaterialにM_Test1をセットします。

M_Test1は4つのLayerを持つLandscape用のMaterialです。

Dark GrassのLayerのLayer infoを作成します。

Weight-Blended Layer(normal)を選択しました。

ここからがPointです。

Dark Grassを選択して右クリックすると以下に示したBoxが表示されます。

このBoxの中にあるImport From/Export To Fileを選択します。

すると以下のようなImport、LayerのBoxに移動します。

Dark GrassにCheckを入れるとFileをImportするButtonが使用出来るようになります。

ここにX0_Y0のPngをセットします。

最後にImportを押します。

こんなMessageが表示されました。

Landscapeのサイズは4.1km x 4.1 kmと表示されています。

Import sizeが4036m x 4036mなら合っているはずです。

以下のSiteにこのErrorについての質問がありました。

以下のCommentを見ると

Height Mapを作成すると同時にLayer用のMaskを読み込む時は問題ないのに、Height Mapを作成した後でLayer用のMaskを読み込むとErrorが表示されると書かれています。

と言う事はHeight Mapから作成したらこのErrorは回避できるみたいですね。

一応、以下の様な解決方法も提案されていました。

これは、Gaeaの有料版を買うまでは試せないので、Height Mapから作成する方法で試してみます。

以下の様な設定でLandscapeを作成してみます。

後、先程の警告が何で起きたのか、その原因に関係してそうな部分も見つけました。

Landscapeの設定ですが以下に示した様に4065x4065になっています。

Height Mapでは4036x4036です。

これでImportしてみます。

こんな結果になりました。

出来ているっぼいです。

他のMaskも修正して追加してみます。

Light GrassのMaskです。

RockのMaskです。

SandのMaskです。

これでOpen Worldを作成してみます。

以下の条件で作成します。

Importしました。

こんなErrorが表示されました。

結果はこんな感じです。

全部のLayerが読み込まれているのが良く分からないのでMaterialのLayerの色を以下の様に変更しました。

結果です。

RockのLayerがありません。

赤だから緑色と混じって茶色に見えているのかもしれません。

白くしてみました。

やっぱり緑色と混じっていました。

と言う事は、一応は4 km x 4 kmのOpen WorldをWorld Partitionを使用して作成出来た。と言う事でしょうか?

試しにPlayしてみました。

デカいです。

兎に角、世界が大きいです。

残りはまた後で勉強する事にします。

今週は1009 x 1009 pixelのHeight MapとMaskをそれぞれ16枚使用して4 km x 4 km のOpen WorldをUE5のWorld Partitionを使用して作成する事が一応出来た。と言う事で終了します。

5.2 来週以降の課題

まずこの作成出来たMapの質を調査する必要があります。以下の事について調査します。

  • Playして違和感はないか?
  • World Partitionがしっかりと効いているのか?
    • 範囲外のStatic Meshはしっかり消えるのか
    • Landscapeも範囲外なら消えるのか?
  • Landscapeの歪みは許容範囲か?
    • 1009 pixel x100倍は適切か
  • 高さの指定方法について
    • X70は適切だったのか?
    • LandscapeLocation のzは0で作成したが、これは適切だったのか?
  • PCの負担はどうなのか?
    • どうやってPCへの負担を調べるのか?
    • 負担を減らす方法について

その後で、以下のImprovementをする必要があります。

  • Landscape用のMaterialをもう少し丁寧に作成する
  • Foliageなどで草や木を追加
  • 建物も追加
  • 川や湖の追加
  • 配置する岩にはNaniteを使用してみる。

更に、今週は無視してしまった以下のErrorについての調査もします。

もう一つ高さの限界についての調査で、2022-08-01のblogで以下の様に述べていますが、これの調査も必要です。

これは1009 pixelで行います。

後、先週のBlogでも述べましたがNumber of Componentの最大値が32です。

所が、公式のDocumentであるLandscape Technical Guide [3]によると63 x 63 、もしくは126 x 126になっています。

この辺の整合性をどうやってとるのかについても分かりません。

6.Gaeaの勉強

今週から何をやるのがBestなのか、結論は出ませんでした。

ので取りあえずKlaus氏の以下のTutorialをやって行く事にします。

今週はKlaus氏のGaea 1.3 Breakdown Tutorial : How to Create a MOUNTAIN Landscape ft. CARTOGRAPHY [4]をやる事にします。

6.1 Gaea 1.3 Breakdown Tutorial : How to Create a MOUNTAIN Landscape ft. CARTOGRAPHY [4]を勉強する

以下のMountainを作成するそうです。

以下のBasic Mountainから作成するそうです。

Basic MountainってTemplateがあるんでしょうか?

一寸Gaeaを見てみます。

MountainのTemplateを見ましたが無いですね。

試しにGraph内にMountain ノードを配置して

その設定もTutorialの設定と全く同じにしてみました。

結果です。

TutorialのTerrainです。

次にFoldノードを追加しました。

Fold ノードの設定です。

結果です。

Rangeの値が高いと元の形状をもっと維持しようとするそうです。

確認のためにRangeの値を100にしてみました。

結果です。

正直良く分かりません。

後、Minを使用しています。

これを使用するとMountainの範囲だけFoldが適応されるそうです。

次にSlender Terraceを追加するためにApex ノードを追加します。

地形におけるTerraceって何?と思って調べたら、日本語で段丘と言うそうです。

以下に示した様な平らな部分と崖によって構成される地形を指すそうです。

WikipediaにTerrance [5]のImageがありました。

Terraceが何なのかは理解出来ました。

結果です。

段差になっている部分がTerraceだそうです。

設定はModeをSlantに変更しただけです。

実際の地形っぽくなくなってしまいましたが、これは後で調整するそうです。

この辺の実装はGeologyの専門家が本物のTerrainの特徴を出すために必要なNodeを追加している感じです。Geologyについて何も知らない私は、Apexノードが追加された後を見てもSlender Terraceが作成されているのかどうかも分からないです。

もう一回Apexノードを追加します。

設定です。

結果です。

斜めのSlender Terraceが追加されています。

次はFractal Terracesノードを追加します。

設定は以下の様になっています。

結果です。

Apexノードが追加したSlender Terraceに平行なTerranceを追加するそうです。

更にGradientノードをこのFractal Terracesノードに追加します。

Gradientノードの設定です。

結果です。

まず山の左側の傾斜が滑らかになりました。更に崖の部分に捻じれた地層が形成されています。

今度はCombineノードを使用してこの結果とApexノードの結果を混合します。

Combineノードの設定です。

これが良く分かりません。

Ratioが100%になっています。

Combineノードは結局UEでいう所のLerpノードなはずです。Rationが100%ならBの値のみを結果として出力しているはずです。

Combineノードの結果です。

比較のためにFractal Terracesノードの結果を載せます。

全く同じに見えます。

Shearノードを追加します。

Shear ノードって前に勉強した記憶があります。調べます。

2022-05-30のBlogで勉強していました。

Tutorialの説明でも似たような事を言っています。

以下の設定で追加しました。

結果です。

地層のラインがグニャッと曲がるのかと思ったらそういう変化はあまり確認出来ませんでした。

それよりも以下に示した様な亀裂があちこちで確認できました。

Shear ノードの使用前のTerrain(比較用)

次にErosionノードを追加します。

設定です。

結果です。

やっぱりErosionノードが追加されると途端に本物っぽくなります。

更に2つ目のErosionノードを追加します。こちらはFlowノードを追加しています。

Flowノードの設定です。

SecondaryにCheckが入っている以外はDefaultの設定と同じです。

Erosionの設定です。

この設定は当然ですがFlowノードの指定したareaのみしか影響しません。

ここで学ぶべき事はErosionの設定は、以下の様にやるのが一般的であるという大まかなRuleだと思います。

次はSurfaceノードです。

Terrainの表面にザラツキを追加するそうです。

設定はDefault値のままでした。

Surfaceノードを追加した場合です。

Surfaceノードが無い場合です。

確かにザラツキが追加されています。

今度はまたShearノードを追加しました。

今度のShearノードの設定はSeed値以外はDefault値のままでした。

結果も前のShearノードと同じで亀裂というか地形が僅かにずれたりしています。

何故ここでShearノードを使用するのかが知りたいですがそれは分かりません。

Canyonizerノードを追加しています。

このノードの設定はTutorialに載っていないのでDefault値のままにしておきます。

この後、TutorialではCanyonsノードを使用していますが、そんなノードは私のにはありません。

設定を見るとCombineノードの様です。

Combineノードの名前を変更して全く同じ実装を組みます。

Combineノードの設定も全く同じにします。

更にTutorialではLVがOnになっているのでそれも同じにします。

結果です。

何で?

Tutorialの方は、以下に示した様な常識的な結果になっています。

これはCanyonizerノードの設定が分からないと何とも言えないですね。

今回はここで一端中止にします。

6.2 Gaeaの勉強に関して

Blogを見直すと2022-04-11のBlogからGaeaの勉強を始めています。そろそろGaeaの勉強を始めて4カ月になります。

今までの勉強を総括して望んでいる成果、費やした勉強時間と労力に対して正当な成果が得られているのかを少し考える事にします。

まずGaeaで作成したHeight MapとLayer 用のMaskをUE5からImportしてOpen Worldを作成する。と言う目的に関しては大成功しています。

これはほぼ出来たと言っても過言ではありません。

次に、Gaeaの使用方法、つまりNodeを使って自由に自分が望んだTerrainの作成が出来るようになっているかについてです。

これが全く進んでいません、それぞれのNodeの組み合わせ方法とか、そのNodeの設定方法とかが全く分かりません。

MaterialやNiagaraの勉強もそうでしたが、全体像が理解出来るまで、泥沼の中をもがいているような感じで全然、技術の理解が進みませんでした。Ben Cloward先生とCGHOW氏のおかげでやっとこれらの基礎が理解出来ました。Landscapeの作成に関してもUnreal Sensei氏のTutorialでやっと適切な作成方法が理解出来ました。

こういう何か分からない部分をガチっと説明してくれるTutorialに出会わないと、幾ら勉強してもGaeaで自由にNodeを使って自分が望んだTerrainの作成が出来る様にはならない気がして来ました。

klaus氏のTutorialはGaeaとUEの関係を解説している部分は非常にすばらしくて上記の3人のTutorialと比較して質的に全く劣っていないんですが、Gaeaそのものの使用方法を解説しているTutorialは普通です。

そしてUEと違いGaeaのTutorialは非常に限られた量しかありません。

今あるTutorialを勉強しただけでは、それぞれのNodeの機能や最適な使用方法なんてずうーと分からないで終わってしまいそうです。

GaeaのTerrainの作成はGaeaにある付属のTemplateを使用して簡便に済ませる事にして、もっと効率が良い別な分野の勉強に時間を回した方が良い気もしています。

例えば、GDi4K氏なんかは以下のTutorialを作成しています。

Auto MaterialとかLandscape Physical Materialとか全く聞いた事がない技術についてのTutorialを沢山出しています。

こっちを勉強した方が効率的な面でも楽しく勉強する意味でもやりがいがありそうな気がします。

7.雪山のMapの作成

今週もVolumetric Cloudの勉強の続きをやって行きます。

7.1 先週の続きをやる

先週、以下の様にまとめました。

まずこれを試してみます。

新しいLevelを作成します。

Book Markを2か所セットします。上記の位置と以下の位置です。

これでVolumetric Cloudの形状を普段の位置からと雲全体が見渡せる上空から確認出来るようになりました。

Volumetric Cloud用の新しいMaterialを作成します。

Materialの実装です。

Resultノードの設定は以下の様にしています。

このBlend ModeをAdditiveにする事を忘れてずっとCompile出来ない状態が続きました。

WorldofLevelDesign社のTutorialであるUE4: Step-by-Step to Creating Your First Volumetric Cloud Material [6]で確認して初めてこの間違いに気が付きました。

因みにWorldofLevelDesign社は以下のNodeの事をMain Nodeと呼んでいました。

公式のDocumentと同じですね。

もう私は何年もこのNodeの事をResult ノードと呼んでいるので、これからもそう呼ぶようにします。

このMaterialからMaterial Instanceを作成して

Volumetric CloudのMaterialにセットしました。

結果です。

Book Mark 0 からの視点です。

あ、青い。

先週、述べた以下の仮説は間違っていましたね。

Book Mark 1の雲上空からの撮影です。

うん。

不透明で区切れのない非常に不格好な雲ですが、一応Volumetric Cloudは形成されていますね。

はい。

先週述べた

Volumetric Cloudを作成するために必要な最低限の実装が分かりました。

Result ノードの設定を以下の様に変更する。

Albedoに色をセットする。

はい。これだけで最低限のVolumetric Cloudを作成する事は出来ました。

本当はこの後はどうやって雲を白くするのかを検討したいんですが、2022-07-12のBlogを見直すと、この実装が載っているTutorial、UE4: Step-by-Step to Creating Your First Volumetric Cloud Material [6]ではこの後にEmissive Colorを追加してExtinctionを実装しています。

これ見直したら、しっかりと最低限の実装として以下の実装が紹介されていました。

うーん。

このTutorialは最低限の実装は何かと言う事を教える意味で作成された物でもあったんですね。勉強した時は全くそこの大事さには気が付かなかったです。

一応、Emissive Colorの値の影響も確認します。

Emissive ColorにParameterをつけました。

0の時です。

全く変わらないですね。

0.1にしてみました。

おお、雲と空の違いがはっきりしました。

上空からも確認してみます。

いい!

これだとVolumetric Cloudが生成されているのが確認出来ますね。

一応、Emissive Colorの機能の確認が出来たので普段の実装に戻します。

今度はExtinctionの実装を行います。

UE4: Step-by-Step to Creating Your First Volumetric Cloud Material [6]では以下の実装をしています。

ここまMaskやOpacityと同じ機能だと考えています。

UE4: Step-by-Step to Creating Your First Volumetric Cloud Material [6]ではこの部分のそれぞれのPartsに関して、何故最低限の実装に必要なのかを非常に詳しく解説していたんですが、2022-07-12のBlogを見直すと見事にその辺りのまとめが抜け落ちていました。

のでここでもう一回まとめ直します。

まず使用しているTextureについてですが、

ここでは何でTextureを使用したのかについて詳しい説明があります。

この理由は今なら分かります。

何でRadial Gradient Exponentialノードを使用しないで

敢えてTextureを使用したのかについて説明していたんです。

普通に考えたらTextureを呼び出すのは非常にCostが高くつくのでTexCoord[0]をどうにかして同じ効果を得る方法を選択します。しかしそれをすると初心者には非常に混乱しやすいTutorialになってします。だからここは敢えてCostは無視して分かり易さを優先してTextureを使用する方法を採用したと言っています。

しかしこのやり方の場合でもTextureの設定は以下のようにsRGBが掛からないような設定にする必要がある。とそれなりに複雑にはなっています。

次に、このTextureのUV値を指定する実装を作成します。

当然、World Spaceの座標がほしいのでWorld Positionノードを使用します。

だたし、World Positionノードが返す値はUU、つまりcmです。それに対して通常の雲の大きさはkmになります。

ここは単位をそろえる必要があります。

ので以下の様な実装を追加します。

そしてTextureのUVに繋げます。

ただしUVは2つの値しか受け付けないのでMaskを使用してXY(UV)に対応しているRGのみを抽出します。

この実装をExtinctionに繋げて結果を見てみます。

Mask Scaleの値は40にセットしました。

結果です。

Book Mark 0から見ました。

この時点で既にVolumetric Cloudに隙間が生成されています。

地表からでも極僅かですが雲の切れ目が確認出来ます。

それではそれぞれのVolumetric Cloudが見やすいBook Mark 1から見てみます。

一個一個のVolumetric Cloudが確認出来ます。

更に高く上ると雲の隙間も確認出来ました。

隙間からFloorが見えています。

更に視点を変更すると以下に示した様に一個のVolumetric Cloudが円筒上に形成されているのが確認出来ます。

これ、使用しているTextureのTiling Methodの設定をClampにしたら一個のVolumetric Cloudだけ表示されるんじゃねえ。

試してみます。

結果です。

されています。

Mask Scaleの値を変化させてみましょう。

60に上げてみました。

雲の位置が下がっています。

実装から考えると雲の大きさが変化しているはずです。雲の高さには関係ないはずです。見ている位置が中心から離れているから雲の位置が下がっている気がしているだけかもしれません。

すっごい遠くまでカメラを移動させてVolumetric Cloudの全体像が確認出来る場所まで来ました。

この位置をBook Mark 2にセットしておきます。

ここでMark Scaleの値を変更します。

まず40に戻しました。

小さくなっています。

100にします。

大きくなりました。

でも雲の位置も変わっている様に見えますね。

20にしました。

うーん。

これだけ巨大になるとOrthogonalに取らないと歪みは強烈に発生すると思われます。

ので本当に変わっているのは雲の大きさだけだと思われます。

因みにOrthogonalで撮影するTop Viewから見てみましたが真っ黒でした。

全ての設定をDefaultに戻して続きをやります。

次にCloud Bias(Default値は0.2)を引きます。

Textureは以下の様に0~1の値で構成されています。

このすべてのPixelから0.2を引くと

当然のように黒い部分が全体的に増えます。

結果です。

Book Mark 0からの視点です。

雲同士の隙間が大きくなっています。

Extinctionに使用しているTextureの黒い部分が全体的に増えたんだから当然です。

Book Mark 1からの視点です。

一個一個の雲の形状がはっきり見えます。

Book Mark 2から見ました。

こっちも一個一個のVolumetric Cloudの形状がはっきり確認出来ます。

ここまでは全ての実装の意味が完全に理解出来ていますね。先週の迷走と大違いです。

次の実装に行きます。

これは0~1の間の値に数字を掛けているだけです。1より大きい値を掛けたら数字が大きくなります。0~1の間の数字を掛けたら数字が小さくなります。

それだけの事です。

追加しました。

Cloud DensityのDefault値は0.1です。これを100で割りますので0.001になります。

これを掛ける訳ですから雲の濃さが1000分の1になります。

結果です。

Book Mark 0から少しずれた場所で撮影しました。

雲を見ても、正直そんなに薄くなっている感じはしませんね。

更にCloud Densityの値を10分の1にしてみました。

結果です。

今度は完全に薄くなりました。

Volumetric Cloudの形状も良く分からないですね。違う位置から見てみます。

Book Mark 2の位置から見るとVolumetric Cloud一個一個の形状がはっきり確認出来ます。

これでVolumetric Cloudにおける最低限の実装方法は完全に理解出来ました。

7.2 来週何を勉強するか?

もうこれで今週の目的は達成出来てしまいました。

来週の勉強をどうするか少しだけ考えます。

当然ですが、Ben Cloward 先生のVolumetric Cloud Materials - Building Worlds In Unreal - Episode 33 [7]の実装は最後までやる必要があります。

しかし意味不明のまま最後までやってもしょうがないので、もう一回、UE4: Step-by-Step to Creating Your First Volumetric Cloud Material [6]を復習してからやるのもありかもしれません。

後は3D Textureの最低限の使用方法も勉強する必要があります。

Volumetric Advanced Outputノードの機能についても調べる必要がありますね。

Volumetric Cloudに関してはまだまだ沢山勉強する部分がありますね。

ゆっくり勉強する事にします。

8.UI Designの勉強

8.1 今まで作成したUIを復習する

先週、UIデザインの勉強は時間が無くて休んだのでその間に結構、アイデアが出て来ました。確かにScore BoardなどのUIを追加するのも大切ですが、今あるUIを丁寧に仕上げて見た目と機能(少なくともボタンは装備)を追加する方が、UIデザインの勉強としては本質を突いている気がします。

そこで今回は、今使用しているUIを一つ一つここに張り出してどこを改良すべきなのかなどを検討します。更にScoreboardのようなまだGameには組み込んでいないUIも追加で評価、検証します。

Start 画面です。

Back ImageのMonsterにAnimationが入っていない事を除けば後ろの3DのImageはまま良いです。

題は、まあこれしか今のところ思い付かないのでこのままにします。

ボタンですが、

Cursorが乗ると色が変わる様になっています。

これでCursorが指している事が分かるようになっています。

戦闘開始画面です。

UIのDesignとは違いますが、Gameを開始してから戦闘開始画面に入る前に、ワンクッションほしいですね。

待合室みたいな場所で、回復薬の購入や召喚出来るモンスターの整理が出来るような空間がほしいです。

UIのデザインに関してはもっと芸術性を上げる必要があります。

戦闘場のデザインも今となってはシンプルすぎます。

先攻後攻を決める画面です。

ここにはNiagaraでCoinでも回転させるEffectを作成して表示するのが良いかもしれません。

ボタンと書かれていますが、これだと何の事か分かりません。コイントスとか、回転を止めるとかに変更する必要があります。

後攻になりました。

うーん。

Power Pointでももう少しましな演出出来ますね。

今日はこれを調べる事にします。

8.2 コイントスの演出について

ゲームなどで先攻後攻を決定するためにどんな演出をしているのかを調査します。

検索したらGoogleコイントスが出て来ました。

こんな感じで回転しています。コインは3Dで作成されていますね。

コインの表のデザインです。

裏表共に興味を引き付けられるデザインです。

後が見つからないです。

後、今思い付いたんですが、Monsterの戦闘力も先攻と後攻で変わるようにしたら面白いかもしれません。うーん。単に複雑になるだけか。

見つからないので別な方法を考えます。

先攻後攻で調べてみました。

以下のやり方が見つかりました。

  • カードが2枚あってどちらかを選択する。
  • 先攻・後攻のボタンが両方あって自分で選べる

これしか見つかりませんでした。

Gameにおいて先攻後攻を決めるのは勝敗に少なからず影響する事なのでかなりこだわりのある演出をするはずです。しかしあんまりGameをしない私はその演出を見た事がないんです。

これは困ってしまいました。

取りあえずは最初に見つけたGoogleコイントスか、カード2枚から一枚を選択する演出を作成したいと思います。

9.Anime Renderingの勉強

今週もアニメレンダリングの勉強をしていきます。

9.1 Anime Renderingについて

暫くの間、以下の文は毎回貼らせて頂きます。

こっちもです。

9.2 今回の予定

今回、初めてのAnime Renderingの勉強として、10回程度ここで勉強する予定です、

以下に勉強する予定の内容を書いておきます。

それではそれぞれの勉強をして行きます。

9.3 PPLineDrawingの検証

PPLineDrawingはUnreal Engineでイケてるイラストを描くためのノウハウ大放出! | UE4 Manga Anime Illustration Dive Online [10] で紹介されています。

今週からは実際の実装方法を見て来ます。

<Scene Texel SizeノードとScreen Resolutionノード>

まず今週調べたいNodeにScene Texel Sizeノードがあります。

Ben Cloward 先生の Blur and Sharpen Filter - Shader Graph Basics - Episode 51 [11]ではScreen Resolutionノードを使用して以下の方法で1 pixelの幅を計算していますが、

Scene Texel Sizeノードがこれを全部一辺にやってくれるNodeでこの二つは同じ事をしていると思っています。

因みに、Unreal CG氏のToon Shader & Custom Shadow - UE4 Postprocess Tutorial [12]のOutlineの抽出では

Sample Scene Depthノードが使用されていますが、このSample Scene Depthノードの実装を見ると

Scene Texel Sizeノードを使用しています。

この二つはG buffer上にある画面をTexture化したImageの1 pixel分のサイズの値を計算するという全く同じ機能を担当しています。

と言う事はこの2つが返す値は全く同じである必要があります。

以下の方法で確認して見ます。

結果です。

はい。その通りでした。

<Edge Line

今週は以下の部分を見て行きます。

この部分はパッと見、複雑ですが、計算しているのはScene Depthノードに使用するUV値を計算しているだけです。

更にTexCoord[0]ノードに計算した値を足したり引いたりしているので

規準となるUV値からのOFFを計算しているだけです。    

以下の赤線の部分から見て行きます。

World Normalですが、次にComponent Mask ノードでRGBに限定しています。

これっているんでしょうか?

後でTextureのUV値に使用するのにRGしか要らないからここでMaskしてしまおうとしたら、その次にWorld SpaceからView Spaceに変換する必要が出て来て、ここではMaskは使用出来ない事に気が付いてRGBにして消すのを忘れてしまっただけな気がします。

そしてこの後でScene Depthノードと掛けています。

World Normalは以下の様になっています。

ここで青は使用しないので赤と緑の部分が高い値となります。

そこにScene Depthをかけます。

Scene Depthは以下の様になっています。

あれ。これだと遠くの方がはっきり線が出るようにならない?

あ。

Line CoefficientをScene Depthで割っていました。

これだと黒い方が値が大きくなりますね。

更にScene DepthはCameraからの距離をcmで記録してるだけなので、白い部分は1よりずっと大きい値です。10000で割ったら凄い小さい値になります。

それでLine CoefficientのDefault値が100なのか。これは100cm、つまりCamera から1m以内にあるObjectが黒くなるように調節している訳です。

次の実装です。

Edge Line Thicknessノードです。

ここはDefault値では2を掛けているので、画面の白さを倍にしているだけです。

この値が最終的にはLineの厚さに影響するのかどうか今の時点では分かりません。

ここでWorld NormalとScene Depthの逆を掛けています。

これがどんなImageなのか今一想像出来ないので、以下の実装を組んでみました。

結果です。

うーん。

まだOutline抽出の全容が見えて来ません。

このImageをどうやってOutlineを抽出するでしょうか?

次の実装の部分です。

成程、白い部分程、遠くのPixelの色を調べるようになっています。真っ黒な部分はTexCoord[0]で指定したPixelの位置を調べますが、白い部分はTexCoord[0]で指定したPixelの位置からその値の分だけOffした位置のPixelの値を調べます。

うん。でもこれだと結構、大きな値を足したり引いたりしていないか?

良く見たらこの実装の前にWorld NormalノードのInvSizeを掛けていました。

多分、このInvSizeがPixel一個分のサイズの値を返しているんでしょう。

それなら辻褄が合います。

Scene Depthで得た値から何かを引いています。

調べたらScene Depthの値を引いていました。

成程。

黒い部分は全く同じPixelの位置のScene Depthの値を取って来るので引き算したら0になります。白い部分はその白さに応じて指定のPixelの位置から離れたPixelの位置のScene Depthの値を取って来るので、白ければ白い程0以外の値になりやすくなります。

次の実装です。

ここは基本的には今までの結果をLerpのAlphaに使用しているだけですね。

LerpノードのAlphaの前でOne Minusノードが使用されていますが、これLerpノードのAとBの値を逆にするだけの方が簡単な気もします。

以上でした。

うーん。

このやり方でOutlineを抽出する方法は、初めて知りました。

World NormalノードとScene Depthノードの逆数の掛け算で白くなった分に比例してScene DepthのPixelのOffする位置を決定する。

一応、こんなやり方もあるんだな。位に覚えておきます。

Pixelの値を比較するためどれくらいの位置をOffするのかを、機械的に決めるのではなくNormal MapとDepth Mapの値に関連して決定しているのか。

これをする事で、恐らくですが、画面から遠くにあるObjectのOutlineの抽出をしないようにするのか、もしくは抽出しても非常に細い線になるのか。そういう働きがあると考えられます。

この効果に関しては先週勉強したDistance Blendノードで対応しても良い気がします。

それ以外の効果に関しては分かりません。

今週は、これだけ理解出来れば十分です。ここまでとします。

来週は、この実装と今まで勉強したParameterの値を変化させた時に起きる輪郭線の変化について検証します。

9.4 公式のDocumentStylized Rendering [8] の勉強

先週出来なかった以下のMaterialの実装を見て行きます。

実装です。

先週、勉強したMaterialと結構似た実装をしています。

パッと見違うのは、以下の様に透明な部分が有る所です。

以下に示した様にこのMaterialのResult Nodeの

Blend ModeがMaskedにセットされているからです。

まずBase Colorですが、Lerpノードを使用しているごく普通の実装でした。

LerpノードのAlphaには、以下の実装が使用されていました。

これもごく普通の実装で、特に不明な部分はないです。

ここに使用されているTextureも一応確認しておきます。

うーん。

単純でありながら芸術性の高いイラストですね。

Base ColorのImageはこんな感じです。

SpecularとMaskは先週と全く同じ設定ですね。

感想も先週と同じですね。

肝腎のOpacity Maskを見て行きます。

何とLerpノードを使用しないでMultiplyノードを使用しています。

でも結論は一緒かも。遠くにある場合、透明度が増す、もしくは透明になって消えると言う事ですか。

その先ですが、Multiplyノードがありますね。

下の方が簡単なので下の実装から見て行きます。

これは単にサイズを変えたTextureを足しているだけですね。

Previewで見るとこんな感じです。

上の実装です。

これはどうもStatic Meshの端、つまりカメラから見てNormalが真横に向いている部分にはこのTextureを使用しないようにするための実装の様です。

One Minusノードまでの実装の結果を以下に示しますが、

端が濃い灰色になっています。更にNormalが真横に向いている部分は真っ黒です。

これが端にTextureが乗らないようにしています。

以上です。

9.5 夏森轄(なつもり かつ)先生のBlender】セルルック講座 ~ノード、輪郭線、法線転写、RGB分離~ [9] を勉強する

<法線転写(Normal Transfer)の続き>

先週作成した法線転写(Normal Transfer)を見直して思ったのが「色が付いていないので法線転写する前とどう変化しているのか良く分からない。」です。

それで取りあえず色を付けてみる事にしました。

所がBlenderで色を付ける方法が分かりません。

今週はそれを勉強する事にします。

Texture Painting - Quick Start Guide – Blender [13]が色を塗る方法を教えています。しかも動画の長さが3分なのでこれで勉強します。

Texture Painting - Quick Start Guide – Blender [13]を勉強する>

このModelでTexture Paintをやるそうです。

まずEdit Modeに変更します。

そしてUV Editingを選択します。

以下の様な画面が表示されます。

Edit ModeのハンマーのFace?をAを押して全部、選択した状態にします。

そしてU、と言っていますが、以下のどのKeyを押したのかを表示している部分はAのままです。

でも以下のBoxが開いています。

これはUを押したらこのBoxが開くんでしょうか?ここは実際に試してみないと分かりませんね。

Smart UV Projectを選択します。

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

Island Marginの値を少しだけ(0.05)増やします。

そしてOKを押します。

すると以下のようなUV Mapが形成されます。

うーん。

UV Mapの作り方じゃなくてPaintの仕方を教えてほしいんですが、このTutorial大丈夫なんでしょうか?

今度はTexture Paintに移動します。

今はPink色をしています。

これはまだTextureが作成されていないからだそうです。

+を押してBase Colorを選択します。

すると以下のBoxが表示されるので以下の値を代入します。

OKを押します。

すると以下の様にハンマーの色が指定した灰色になりました。

うーん。

Blenderって直接Textureを貼り付けるの?

UEみたくMaterialを貼り付けてそのMaterial内でTextureを呼び出しているんじゃないの?

一寸BlenderのFlowが分からなくなって来ました。がそれは色を付ける事にはあんまり関係ないので謎のまま先に進みます。

3D Modelの方にTextureを付ける事は出来ましたが、UV Mapの方にはまだTextureは付いていません。

UV MapにTextureを付ける為に以下の山と太陽が描かれている絵の様なボタンを押して先程作成したTextureを選択します。

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

この状態で以下のPaintを選択して

以下の箇所から色などをセットして

そして以下の様にPaintします。

Paintが終わったら以下の箇所からPaintしたTextureをSaveします。

以上でした。

<Paintしてみる>

それでは実際にPaintしてみます。

新しいProjectにSuzanneを追加します。

Edit Modeにします。

最初から全部選択されていました。

UV Editingに変更します。

最初からUV Mapが展開されていました。

のでUV Mapの作成の箇所はSkipしてTexture Paintを選択します。

以下の画面が表示されました。

ピンクというか紫色ですが、まあこれがTextureが無い状態なのでしょう。

Tutorial通りにTextureを追加しました。

あれ、Materialになっています。

Tutorialを確認したら以下の様になっていました。

同じですね。

気になってShadingを見たら以下のMaterialが生成されていました。

これを見るとBlenderもUEと同じでMeshにはMaterialを貼り付けている様です。そしてのMaterial内でTextureを呼び出しているみたいです。

Texture Paintに戻ってきたら何もしてないのに、UV Mapに既にTextureが貼り付けられていました。

色を塗って行きます。

Maskとかの機能の使い方が分からないので今回は、馬鹿みたいに愚直に塗ります。

出来ました。

もう疲れてしまったので今週はここまでにします。

来週、このModelにもう一回、法線転写(Normal Transfer)をやってみます。

10. まとめと感想

それぞれの節でそれなりにまとめやこれからの課題を書いているので、今回はここに書く事は特にないです。

あえて書くとすればUI Designの勉強についてで、前の議論に戻ってしまいますが、どんなUIが必要でそれぞれのUIにはどんな機能が必要なのかの整理をした方が良い気がしています。

11.参照(Reference

[1] CGHOW. (2022, June 12). Unreal Engine 5 Niagara Beginner Tutorial - UE5 Niagara Starter Course! [Video]. YouTube. https://www.youtube.com/watch?v=NcJ1ZP7tFUk

[2] Cloward, B. [Ben Cloward]. (2022b, June 30). Underwater Post-Process Effect - Shader Graph Basics - Episode 52 [Video]. YouTube. https://www.youtube.com/watch?v=BNldzmlSvCA

[3] Epic Games. (n.d.). Landscape Technical Guide. Unreal Engine Documentation. Retrieved July 31, 2022, from https://docs.unrealengine.com/4.27/en-US/BuildingWorlds/Landscape/TechnicalGuide/

[4] Klaus. (2022, February 9). Gaea 1.3 Breakdown Tutorial : How to Create a MOUNTAIN Landscape ft. CARTOGRAPHY [Video]. YouTube. https://www.youtube.com/watch?v=JeJrFqAma2Q&list=PLyNtvXvNIFMO30jIO1Zdcb26G3UL1TpHN&index=1

[5] River terraces (tectonic–climatic interaction). (2018, September 12). In Wikipedia. https://en.wikipedia.org/wiki/River_terraces_%28tectonic%E2%80%93climatic_interaction%29#/media/File:A_series_of_paired_river_terraces_plainsvg.svg

[6] WorldofLevelDesign. (2021, February 16). UE4: Step-by-Step to Creating Your First Volumetric Cloud Material [Video]. YouTube. https://www.youtube.com/watch?v=aYxvN5cs-EU

[7] Cloward, B. [Ben Cloward]. (2021, June 3). Volumetric Cloud Materials - Building Worlds In Unreal - Episode 33 [Video]. YouTube. https://www.youtube.com/watch?v=rEYojMx26T0

[8] Epic Games. (n.d.). Stylized Rendering. Unreal Engine Documentation. Retrieved June 19, 2022, from https://docs.unrealengine.com/4.27/en-US/Resources/Showcases/Stylized/

[9] 夏森轄(なつもり かつ). (2022, May 21). 【Blender】セルルック講座 ~ノード、輪郭線、法線転写、RGB分離~ [Video]. YouTube. https://www.youtube.com/watch?v=e1tFq5OoSY0

[10] Epic Games Japan. (2022, February 21). Unreal Engineでイケてるイラストを描くためのノウハウ大放出! | UE4 Manga Anime Illustration Dive Online [Video]. YouTube. https://www.youtube.com/watch?v=QuYIkSozV6w

[11] Cloward, B. [Ben Cloward]. (2022, June 23). Blur and Sharpen Filter - Shader Graph Basics - Episode 51 [Video]. YouTube. https://www.youtube.com/watch?v=c30uBsyMnNY

[12] UnrealCG. (2020, June 25). Toon Shader & Custom Shadow - UE4 Postprocess Tutorial [Video]. YouTube. https://www.youtube.com/watch?v=mx_AvrZK3TA

[13] Abbitt, G. [Grant Abbitt]. (2021, August 9). Texture Painting - Quick Start Guide - Blender [Video]. YouTube. https://www.youtube.com/watch?v=WjS_zNQNVlw