＜前文＞
＜Meta(旧Facebook)の終わりの始まり＞
Meta(旧Facebook)のMetaverseに対する不評というか嘲笑が凄いです。
確かに20年前位の任天堂のGameの方がGraphicsが綺麗って言うCNBCの解説は爆笑ものでした。一応下にMeta(旧Facebook)のMetaverseの記事のリンク先を貼っておきます。
何であんなのを発表するまで誰もそれを指摘しなかったんでしょうか？
Mark氏は裸の王様そのものです。
しかもこれを売ろうとしているんですよ。これ無料のServiceだって使用したくないでしょう。
＜これからのアジア人Software Engineerの進むと思われる方向＞
結局、これって私が数年前から言っていた米国IT企業による積極的なアジア人排斥が原因なんだと思っています。まあアジア人と言ってもインド人はそれなりに雇われているみたいですので東アジア人と限定した方が良いかもしれませんが。
Fox Newsに代表される右派の嘘を嘘と知りつつ、自分達に都合が良いからずっと騙されたふりしてアジア人をIT業界から排斥していたら、技術やアイデアが無くなってしまったんです。
しかし今更、態度を改めても既に米国のIT企業がアジア人を公平に雇う気がないのはアジア人の技術者達からばれていますから、彼らがアメリカのIT企業に戻って来る事はないでしょう。
そして個人的な見解ですが、これからのアジア人Soft Engineerは最初から独立してTikTokの様な独自のServiceを開始するか、もしくはハッキング技術に特化してそういう企業の情報や価値を盗む方向に進化していくと思われます。
もしくはこの２つを混ぜた形態になっていくかもしれません。
例えば新しい形態の動画サイトを立ち上げて、そのServerはYouTubeのServerをハッキングして無料で使用してしまう。みたいなやつです。
そして究極的には、それらの中から次世代のGoogleやAppleになる新しい企業が誕生していくと思われます。
＜George R. R. Martin氏がアメリカのｚ世代に与える半端でない影響について＞
ここで注目したいのが、アメリカのｚ世代です。そのアメリカのｚ世代の琴線に触れる何かを提供出来る企業が、次世代のGoogleやAppleになって行くと考えられます。
彼らは基本的に上の世代嫌っていて、特にFacebookが大嫌いです。何故か日本のアニメ、特にNarutoが大好きで、本人たちが気がついているかどうかは別にしてその行動規範がNarutoの世界で道徳的に正しいと思われる行為に基づいて行動します。
ホントにアニメが彼らに与える影響の大きさには驚くばかりです。
ここで、アニメと同じくらい、彼らに影響を与えているTVがあるんです。
それが、George R. R. Martin氏が書くFantasy 物のTV Seriesです。Game of Thronesは社会現象にまでなりましたし、今、放送中のHouse of the DragonもとんでもないHitになる事は間違いないでしょう。
彼の原作とそれを元に作成されたTV Seriesはアメリカのｚ世代、いや世界のｚ世代の考え方に深く影響を与える事になると考えられます。
私は残念ながらGame of ThronesもHouse of the Dragonも見た事ないですし、彼の小説も読んだことないです。ので、George R. R. Martin氏が書くFantasy 物のTV Seriesがどんな思想に基づいて語られているのかは全く知りません。
時間があったら彼の小説は読んでみたいとは思っています。
今週はあんまり心に触れる話題が無かったので前文に書ける内容はこんなもんです。
それでは今週の勉強を始めます。
＜本文＞
１．今週の勉強について
今週も以下の内容についてやって行きます。
- Niagara: CGHOW氏のTutorialをやる
- Materialの勉強
- RPGのEventの作成
- Open Worldの検証
- Gaeaの勉強
- 雪山のMapの作成
- UI Designの勉強
- Anime Renderingの勉強
２．Niagara: CGHOW氏のTutorialをやる
今週はUE5 Niagara #ScratchPad Module #6 | Skeletal Mesh Location with Offset and Scale [1]を勉強します。
内容自体は先週勉強したStatic MeshをSkeletal Meshに変更しただけなので、先週のように一々深堀して勉強はしません。軽くやります。
2.1 UE5 Niagara #ScratchPad Module #6 | Skeletal Mesh Location with Offset and Scale [1]を実装する
今週はいきなり実装します。
まずいつものようにNiagara Systemを作成してFountainを追加します。
いつもの様に要らないModuleを消しました。
Particle Spawn SectionにScratch Moduleを追加します。
名前をMy Skeletal Mesh Locationに変更しました。
話は変わりますが、Skeletal ってSpell結構難しくて、突然書くときあれ？ってなったりしていたんですが、UEの勉強で何度も書くので完全に覚えてしまいました。
Map Getノードに[INPUT] New Skeletal Meshを追加しました。
そしてGet Skinned Triangle Data WSノードを追加します。
先週勉強したStatic Meshの場合は以下のGet Triangle WSノードを使用しました。
結構やり方が違いますね。
更にRandom TriCoordノードを追加します。
これは沢山あるTriangleからRandomに一個を選ぶためのモノですね。
更に[INPUT] New Int 32を追加します。
Random Infoに接続します。
Map Setノードに[PARTICLE] Positionを追加しました。
そしてGet Skinned Triangle Data WSノードのPositionの値をSetしました。
これで完成です。
Particle Spawn SectionのMy Skeletal Mesh Location Moduleの
設定を以下の様にセットします。
結果です。
はい。出来ました。
今度はこのNSをLevel上のSkeletal MeshのAnimationにLinkします。
以下のAnimationをLevel上に配置します。
次に先程作成したNSもLevel上に配置します。
そして以下の様にLinkさせます。
Linkの種類はNoneです。
試しにPlayを押すと、
以下の様にParticleを生成しながらMannequinが走っています。
Tutorialと同じ様に調整してみました。
あんまり綺麗ではないです。
今度はScratch Pad ModuleをParticle Update Sectionに移動させて、Skeletal Meshの動くに合わせてParticle の位置も移動する様にしました。
結果です。
これだけではあんまり綺麗ではないです。
これにOffsetを追加します。
以下の実装を追加しました。
Static MeshのOffsetの時と全く同じやり方です。
MultiplyノードのBの値は
Mat Getノードに[INPUT] Bを追加してこのBの値をセットします。
結果です。
こっちは前よりは見ごたえありました。
Scaleも追加します。
Scaleのやり方もStatic Meshと全く同じです。
結果です。
以上でした。
2.2 UE5 Niagara #ScratchPad Module #7 | Grid and Brick Pattern [2]を勉強する
流石にこれだけでは短いので次のTutorialも勉強する事にしました。UE5 Niagara #ScratchPad Module #7 | Grid and Brick Pattern [2]を勉強します。
以下に示したBrickを作成していますが、これScratch Padの勉強になるんでしょうか？
今回のScratch Padの実装はSpawn Particle in Grid Moduleがやっている事を
自作するそうです。
Scratch Padの実装ですが、まず以下に示した様に[Particle] PositionをMap Set ノードに追加します。
このPositionのXYZの値をそれぞれ別にInputしたいのでPositionをVectorに変換します。そしてMake Vectorノードを使用してそれぞれ別な値を入力出来る様にします。
はい。
Execution Indexノードを使用します。
これでそれぞれのParticleを管理するみたいです。
Execution Index に繋がったMultiplyノードの結果をMake Vectorのxに繋ぎます。
結果です。
はい。
Gridが出来ました。
分かってしまえば簡単です。
先程の結果にFracノードを追加してMultiplyノードを追加します。
MultiplyノードのBにはMap Getノードにセットした[INPUT] rowの値をセットします。
今度はColumを作成します。
Multiplyの結果からFracの結果を引きます。
CGHOW氏によると沢山の人が沢山の方法でGridの作成をしていますが、これ以上Simpleなやり方は見た事ないそうです。
その結果をMultiplyノードに繋いで更にその結果をYに繋ぎます。
結果です。
結果を弄ると以下の様になりました。
2.3 UE5 Niagara #ScratchPad Module #7 | Grid and Brick Pattern [2]を実装する
それでは実装します。
まずNSを作成してFountainを追加します。そしてEmitterにある要らないModuleを消します。
そしてParticleが動かない時のいつもの設定を行います。
一応、記録に残しておきます。
まずEmitter Update SectionにSpawn Burst Instantaneous Moduleを追加します。
Spawn Burst Instantaneous ModuleのSpawn Countの値は100にしました。
次にEmitter Update SectionのEmitter State Moduleの
Loop Behaviorの値をOnceに変更します。
最後にParticle Update SectionのParticle State Moduleの
Particle State SectionにあるKill Particles When Lifetime Has ElapsedのCheckを外します。
これで一度生成されたParticleは消える事なく生成された場所にずっと存在する事になります。
CGHOW氏がNSで全く動かないEffectを作成する時は、必ずこの設定をしますので、ここに記録を残しておきました。
Scratch Padを追加します。
名前はGridにしました。
[Particle] PositionをMap Setノードに追加しました。
そしてExecution Indexノードを使用して以下の実装を作成します。
因みにExecution Indexノードの機能は以下の様になっています。
このそれぞれのParticleのIndexは一個のParticleが一個の番号しか持てない様に調節出来たはずです。
一寸調べます。
うーん。
取りあえず、Emitter のPropertiesにある
Requires Persistent IDs
の事を言っていたんですが、このIDと先程のExecution Indexの値が同じモノかどうかが分かりません。
今回はここには深入りしません。
時間があったら後で調べます。
結果です。
しかし本来はRowの数は生成されるParticleの数に影響されずに一定にしたいんです。
ので割る事します。
そしてFracノードに繋げます。
そのFracノードの結果をMultiplyノードに繋げます。
これでGrid Moduleの値を以下の様にセットしました。
結果です。
今度はColumnを作成します。
この計算、良く読んでみれば当たり前過ぎました。
結果をYに繋ぎます。
Columnの値を20にしました。
結果です。
Gridが出来ました。
ここからはScratch Padの勉強ではなくNSの調整です。
まずGrid ノードのNumber of Rowの値を端数にします。
すると以下に示した様にParticleがバラバラに配置されるようになります。
Tutorialで説明されたやり方で調整しました。
具体的なやり方はScratch Padの実装とは関係ないので記録はしません。
結果です。
うーん。
あんまり綺麗に並んではいませんね。
でもScratch Padの実装はTutorialと同じなのでこれでも良いでしょう。
完成とします。
2.4 Scratch Padの勉強をする目的を確認する
CGHOW氏のTutorialでも散々説明されていますが、実際の実装では既に存在しているModuleがあり、敢えてScratch Padで一から実装を作成する必要はありません。
ここでのScratch Padの勉強の目的は以下のモノがあります。
- Scratch Padそのものの使用方法に精通する。
- Scratch Padに良く使用するParameterに詳しくなる。
- Scratch Padの実装で良く使用するNodeに詳しくなる。
そして最終的には以下の目的に繋がります。
- 他のModuleの実装を開いて見た時にある程度は読んで理解出来る様にする
- Particle Attribute Readerの設定方法を完全に理解する
この辺を忘れないで勉強して行きます。
2.5 CGHOW氏のVFXのShort 動画を見る
ここ一カ月位、CGHOW氏はShort動画に自身が作成したVFXを沢山上げています。
これら全く見ていないです。ので今週はこれを見る事にしました。
これらを見て、これからどのVFXを勉強するとか、このEffectの作り方は全く分からないとか、もしくは単純にUser目線で綺麗とかの感想などを書いていきます。
後、流石に量が凄いので全部のCitationまで書く事は出来ないので、題にLinkだけ貼る事にします。
＜Stylized Tornado in UE5 Niagara Tutorial | Download Files＞
PhotorealなEffectだと光って表現するものが多いために、アニメ調の彩度が高い画像の中では、そのままでは使用出来ない場合が多いです。
このEffectはStylizedで作成されているため光っていません。そのままアニメ調のGameに使用出来そうです。
更に、
- 線がはっきり出てている。
- 竜巻の特徴が強調されている
- 風を絵として表現している
がアニメ風の画像に凄く合いそうです。
＜Swirl FX in UE5 Niagara Tutorial | Download Files＞
光ってた。
これはそのままではアニメ調のGameには使用出来ないですね。
何かSFチックですね。
とは言ってもじゃこれの作り方知りたくないの？と言われたらやっぱり知りたいです。
＜Bubble Burst FX in UE5 Niagara Tutorial | Download Files＞
これScreenshotでは凄さを伝えきれませんが、本当に泡が発生して破裂しているように見えます。
＜Stylized Dissolving Trail in UE5 Niagara Tutorial | Download Files＞
これ分解した破片が消えるまでの動きが何とも言えない味があります。
これは特に実装方法を勉強したいです。
Tutorialはこっちですね。
これShort動画からTutorialの動画に飛べないんですね。
＜Water Shield in UE5 Niagara Tutorial | Download Files＞
これも凄いです。Stylizeされた水の表現が凄いです。
しかもStylizeなのに透明な部分があります。
＜Chocolate Flip Fluid in UE5 Niagara Tutorial | Download Files＞
これ、下の円柱が回転しています。Chocolateがその円柱の回転によって形状が複雑に変化しています。
これは絶対勉強したい。
しかし私の今のPCではこれは動かない。勉強するのはもう一寸先になります。
＜Interactive Leaves in UE5 Niagara Tutorial | Download Files＞
Mannequinが動くと葉っぱが舞い散ります。
凄いです。
これは絶対勉強したいEffectです。
Tutorialの動画はここにありました。
＜Interactive Grass in UE5 Niagara Tutorial | Download Files＞
これも凄いです。球の箇所だけ草が凹んでいます。球を動かすと凹んでいた草が元に戻ります。
Tutorialはこっちですね。
23分のTutorialで比較的短いですね。
＜Poison Rain in UE5 Niagara Tutorial | Download Files＞
これ典型的な光っているEffectなんですが、雨の表現が素晴らしいので敢えて載せました。
Tutorialはここにありました。
＜Orb Dissolve FX in UE5 Niagara Tutorial | Download Files＞
この水晶の内側に光が垂れる感じが良かったです。
これ水滴が垂れるようにしたらもっと綺麗になる気がしました。
＜Optical Flares in UE5 Niagara Tutorial | Download Files＞
横に線が伸びるのがどうやってるのは分かりません。
後、単純に綺麗です。
＜Waterfall in UE5 Niagara Tutorial | Download Files＞
こういう感じで滝を作成したのは始めてみました。幻想的な滝です。
＜Celestial Area FX in UE5 Niagara Tutorial | Download Files＞
Gameやアニメに出て来る魔法陣が立体的じゃない事に不満が一寸あります。
このEffectは立体的な魔法陣の作成のヒントになりそうです。
＜Unreal Engine Crack & Rays Tutorial＞
この地面のひび割れの作成方法が知りたいです。
＜Unreal Engine Ice Attack Effect Tutorial＞
氷が砕けた後に破片が飛び散る所が氷らしく見えた。
氷のMaterialが良い。
＜Unreal Engine Lava Rocks Effect Tutorial＞
前の氷のEffectの色違いです。
ですが、Lavaにすると光の功罪がはっきりします。
西洋のGameのように画面が暗い場合、非常に映える映像になる反面、アニメ調の画像では光っている部分がはっきりしないので目立たないEffectになってしまいます。
私が個人的に考えている解決策は、黒と赤で作成して赤い部分を光らす方法です。これ光っている赤の回りは常に黒いので画面がアニメ調でもはっきりして目立ちます。
更に光って無くても黒字に赤なら目立ちます。
＜Unreal Engine Bloody Ice Death Effect Tutorial＞
氷に赤も凄く目立ちますね。
＜Unreal Engine Hit Effect Tutorials＞
このEffect自体はそんなに興味深いものではなかったんですが、上に示した円状のEffectだけ断トツで目立っていました。
これってこの円状のEffectには凹凸を示す影がないからなのかもしれません。
Effectを光らせないで目立たせる方法として使える技術なのかもしれません。Potentialがある気がします。
＜Unreal Engine Energy Ball Hit Effect Tutorial＞
ボールが地面に衝突した時のEffectです。
これ自体は凄いんですが、明るい所でも同じ位凄く見えるんでしょうか？
それを試してみたいです。
＜Unreal Engine Niagara Cloud Tutorial | Download Project Files＞
これこの前、勉強した雲のEffectです。
こうやってShort動画で見ると非常に圧巻で、思わずこれどうやって作成したの？ってこの前作成したにもかかわらず思ってしまいます。
EffectをUser目線から見る為にはShort動画でまとめるのも非常に大事だと思いました。
でもYouTubeのShortは一個、CGHOW氏の見た後、全く違う種類のShort動画をお勧めで上げて来てとても操作しにくいです。
＜Unreal Engine Power Hit Effect Niagara Tutorials＞
光線系の攻撃のEffectとして作成方法を覚えておきたいです。
これ黒いEffectで光の部分を覆う事で光のEffectが明るい所でもこのEffectが強調されるようになっている気がします。
＜Unreal Engine Flame Head Material and particle＞
もうこれはデザインが凄い。の一言です。炎の妖精のデザインが凄いのでEffect自体も凄く見えます。
こういうのを見ると結局凄いVFXって凄いデザインに負っているんだなと思います。
どんなにProgramming Skillがあっても結局デザインのセンスがないと良いVFXは作れないって事です。
＜Unreal Engine Blood Decal Materials Tutorial＞
これはNaniteではなくて血のDecalですね。Decalは勉強した事なくていつか勉強しようと思っています。
Tutorialはここにありました。
なんと2019年の動画です。
うーん。一寸自分で試すには古すぎるTutorialですね。
＜Unreal Engine Toon Explosion from cascade to Niagara Tutorial＞
これも凄いです。
しかも凄いアニメ調の爆発です。
ただしこれもTutorialは2019年に作成されていました。
Tutorialはここにありました。
流石にここまで古いNiagaraだと、UIも今とはまるで違うはずです。一寸自分で試してみる気はしませんね。
＜残りのShort動画＞
これ以上古いShort動画を見てもTutorialが古すぎて勉強する事が出来ないので、記録に残すのは止めて見るだけにします。
と思った先から凄いEffectがありました。
Stylized Fire | Toon Fire in Unreal Engine Niagaraです。
これアニメ調の炎の究極形でしょう。
流石にこれ全部見るのは無理でした。
ここまでで中止します。
＜CGHOW氏のShort動画を見た感想＞
これはYouTube側の問題なのかもしれませんが、もう一寸、見易くしてほしいです。
一個見たら連続で全部、見れるようにして欲しいです。
今の設定では、一個のShort動画を見ると全く別なShort動画が次に現れます。次のCGHOW氏のShort動画を見るためにはBrowserからBackして次のShort動画を選択する必要があります。非常に手間がかかりました。
これでは優れたEffectが有っても見つけるのが非常に困難になります。
というか一個か2個見たら「もういいか。」と言う気分になってしまいます。
Effectに関しては圧巻の一言です。
こんな凄いEffectがあったのかと驚きの連続でした。
＜＜追記＞＞
Home画面の以下の箇所から見るとCGHOW氏のShort動画を連続で見る事が出来ました。
来週はここから見て私が思う凄いEffectについて述べます。
３．Materialの勉強
Ben Cloward先生の Rain Drips On The Lens Post-Process Effect - Shader Graph Basics - Episode 54 [3] の実装部分の意味が良く分からない箇所を検証します。
その後で、Ben Cloward先生の別のTutorialを勉強します。
3.1 Rain Drips On The Lens Post-Process Effect - Shader Graph Basics - Episode 54 [3] の実装を検証する
ケツからコードを見て行きます。
MultiplyノードではTexture Sampleノードの白い部分だけ残って黒い部分は消えます。
それが何でDripの形になるんでしょうか？
Aの計算結果を追います。
Roundノードの結果です。
これに先程のTexture Sampleノードの結果を掛けたらMultiplyノードの結果になりますね。
Roundする前はどんなImageだったんでしょうか？
以下のTexture SampleノードのBに繋がっていました。
BのImageです。
拡大するとGradientがありました。
Roundする事でこのGradientしている部分も白くする訳です。
以下のAnimationを保持するSample Textureノードの作成はこの実装で一番複雑なので最後にやります。
Outputノードの一つ手前のMultiplyノード、本当のケツのNodeです。
このMultiplyノードのBの値は先程検証したMultiplyノードの計算結果です。
Aの方の実装を見て行きます。
以下の様になっていました。
まずRGです。
RのImageです。
GのImageです。
確かRがX方向のNormal、GがY方向のNormalを表していたはずです。
Previewで拡大して見るとこんな感じです。
それに6を掛けて3を引いています。
これは前のDropの実装で2を掛けて1を引いたのと同じ事をもっと大袈裟にやっただけなんでしょうか？
一寸検証してみましょう。
下のGraphは結果を0，1でClampしています。
数字がデカくなるほど、Roundと同じ機能に近づいています。
Roundと同じ事をしていると解釈出来ます。
試しにRoundした場合の結果と比較してみます。
Roundした場合の拡大図です。
6を掛けて3を引いた場合です。
パッと見では変わらない感じがしますね。
ただしDripの実装はClampは使用していません。Clampしない結果がどう影響するのかは分かりません。
6を掛けて3を引いた結果にSaturateしてみます。（Saturateは0，1でClampした場合と同じ結果になります。）
うーん。変わらないですね。
あ、0以下は黒で1以上は赤か緑なんでPreviewの結果は全く同じに見えるのは当たり前でした。
実際のDripの結果で比較してみます。
Saturate有です。
Saturate無しです。
Dripの部分を拡大してみます。
Saturate有です。
Saturate無しです。
む。
Saturate無しの方が、Dripが太くて長いです。
これは実際のDripを比較して検討する必要がありますね。
12を掛けて6を引いた場合です。倍にしてみました。
拡大してみました。
うーん。
あんまり分かりません。
よし。
これらの結果から推測すると、
の役割がかなりはっきりと推測できます。
まずこの部分の役割は、２つあります。
一つ目は以下のGraphで示した様な四捨五入をする事です。
四捨五入をするためなので、x6－3とx12－6、更に言えばx120‐60でも0から1の間の計算結果は大体同じになります。
これはRoundと同じ機能です。
もう一つの機能はRoundのように1から1.5未満を1にしたり、Clampのように1以上の値を１にしない事です。
RoundをするとDripが短く細くなります。
これがどうして起きるのかは一寸分かりませんが、兎に角そうなっています。そのために1以上の値もそのままにしておく。これが2番目の役割です。
この２つの機能を担当していると推測出来ます。
それでは最も複雑な以下のTexture SampleノードのUVsの実装を見て行きます。
以下の様になっています。
まず一番簡単なAddノードのBから見て行きます。
途中でMultiplyノードがあります。
これは一端無視します。
ここに繋がっていました。
これは画面のサイズによってTextureが横長に拡張しないための実装ですね。
個々の意味は分かっています。
この後に以下の掛け算をします。
これするとX軸側に半分の太さになりますよね。
多分。
確認します。
1の時です。
2の時です。
あれ？
変わっていませんね。
色々数字を弄ったんですがこの部分の数字を変えるとどこが変化するのか分かりません。
ここはSkipして別な部分の実装を見る事にします。
今度はBをはずしてAだけ繋いでみました。
結果です。
む。
と言う事は、以下の様に一部だけ白くする表示はBが担当していたということなんでしょうか？
先程のMultiplyノードの値を1,1に変更してBを繋ぎ直しました。
結果です。
確かに一部だけ白くなりました。
しかしそれ以上に大きな変化があります。それは何と、上に向かって移動しています。
Yの値に－1を代入してみます。
結果です。
今度は下に移動するようになりました。
Yの値を‐0.5に戻します。
結果です。
白い部分の長さが2倍位に伸びています。
あれ。
Multiplyノードの意味が分かって来ました。
確認のためにYの値を‐0.25にしてみます。
結果です。
更に2倍の長さになりました。
うーん。Yの謎は解けましたね。
今度はAの実装を見て行きます。
以下に示した様に上２つのノードを外してみました。
結果です。
む。枠のLineが無くなりました。
外した２つのNodeの内Multiplyノードだけを戻してみます。
結果です。
枠が出来ました。
このMultiplyノードは枠を作成しているようです。
後、今の状態だと、落下する速度がそれぞれの枠でバラバラです。
これに今外していたLerpノードを追加すると
以下に示した様に
落下速度の差がほとんど分からなくなります。
これで一応、以下のDripの実装で最も複雑な部分のそれぞれのNodeの機能を確認しました。
この知識を踏まえて、今度はTexture SampleのAからの計算の結果の変化を追ってみます。
AのImageです。
Lerpノードを掛けました。
結果です。
色がマイルドになっています。
ああ。
これでそれぞれのラインで白いヤツが落ちる速度の違いがマイルドになったんです。
Lerpしているから一番黒いのが0.25、一番白いのが0.1でその間に線形で分布されました。ので速度の違いがマイルドになったんです。もしこれがClampだったらある速度以上のヤツは全部同じになってマイルドな速度調整ではなかったはずです。
次はこっちの実装を見ます。
TextureのAのImageに
Timeを足します。
結果です。
当然1以上になるので真っ白です。
でもこれ元の値が違うので、それぞれのLineで１以上ですが違う値を示しているはずです。
確認のためにFracノードを追加してみます。
以下の様に時間が経過する値は大きくなっていきますが、それぞれのLineで値に差があるのが分かります。
この後、Lerpの結果とAddの結果をMultiplyします。
結果です。
勿論、真っ白で何が起きているのか全く分かりません。
Multiplyの後にFracを追加してその結果を見てみます。
結果です。
何と溝が出来ています。
この溝の正体がわかりました。
元々のTextureの色の濃さが変わる継ぎ目に２つの濃さが混じっている箇所が有ります。
この部分も独立して色が変わる様になったんです。
次のAddノードです。
Previewの結果です。
黄色になっています。
これAは灰色なのでRGBの値は全て一緒です。Bは以下の様になっています。
R（x軸）左端が0で右端が2です。
更にG（Y軸）は‐0.5を掛けたので、上端が0で下の端が‐0.5です。
これにAの値を足したので、黄色になったと思われます。
これだけでは何も分からないのでFracノードを追加します。
その結果です。
何これ？
上から下に移動する赤いヤツは分かりますが、右から左に移動する緑のヤツはなんなんでしょう。
右から左に移動する緑のヤツは良く見ると赤が抜けているみたいです。
赤が抜けたので黄色が緑に、赤が黒に変化しているみたいです。
赤のヤツが上から下に移動するの理由は分かりました。Fracに値をしたので、0.9999から0まで値が変化します。それで0になるとまた0.9999に戻ります。この時に真っ赤なLineが現れます。
この値がUV値になる訳です。
このTextureを見ればどんな計算するのか分かるはずです。
何これ？
だそうです。
これをX軸方向にひたすら繰り返して貼ってあったの？
中身は以下の様になっていました。
最初は真っ黒で途中でいきなり白くなり、段々黒くなります。RGBA全て同じです。
これUの値はどれをとっても同じなのかもしれません。問題になるのはVの値でしょう。Vの値が0.99の時はこのTextureの一番下の色を抽出して、0の時はTextureの一番上の色を抽出する。みたいな事をしているんだと思います。
その結果、以下のImageが生成されていると考えられます。
うーん。
ここまで見ても以下の部分の計算の理屈を完全に理解する事は出来なかったですね。
まあ、今回はこの位で諦めてまた実力がついてから再挑戦する事にします。
3.2 Rain Drips On The Lens Post-Process Effect - Shader Graph Basics - Episode 54 [3] をもう一回だけ見る
もう一回だけTutorialを見る事にします。
これだけ勉強したのでもう一回見たらもっと理解出来る部分があるはずです。
まず、6を掛けて3を引いている箇所ですが、
Contrastを上げるために通常の2を掛けて1を引くのの代わりに使用したと言っていました。
Contrast自体は、私が実際に調べた場合も上がる事は分かりましたが、1以上の値や－1以下の値は必要なのか必要じゃないのならClampした方が良いのかなどの解説は無かったです。
次のLerpノードですが、
DripのSpeedを調節するためと言っています。
はい。
これも先程の勉強でそれぞれのDripのSpeedの差がマイルドになる理屈が判明しました。
以下のTimeとAddノードの解説ですが、
Alphaの値をOffsetに使用しています。と言っていました。
分かり易い！
こういう簡潔な説明が出来るように成りたいです。
以下のMultiplyノードの結果得られるのはDripの最終的なSpeedだそうです。
むむむ。
私、自分の説明では何と言っていましたっけ？
あれ。
でも一応、厳正な検証の結果導き出された結論なので、間違っているとは言えないとは思っています。
ScreenのサイズとTextureのサイズのScalingを調整する実装に2, -0.5 を掛けた所です。
これを掛ける事でSwim laneを適切なサイズに調整するUV値になると言っています。
うーん。
この説明は間違っている訳ではないですが、G値に何故、Negativeな値を代入するのかについての説明にはなってないですね。
以上でした。
これ以上のこの実装部分の理論の理解は自分で勉強するしかないようです。
はい。
今週のMaterialの勉強はここまでとします。
Ben Cloward先生の別のTutorialを勉強する予定でしたが、時間も無いしMaterialの勉強は十分やって満足しているので、来週に回します。
3.3 Materialの検証の記録方法について
Materialの検証を読み直して思ったんですが、どのNodeの話をしているのか分かりにくいです。
物理の教科書でも、式の数が100個とか200個載っている本はそれぞれの式に番号を振ってどの式の話をしているのか分かるようにしています。
のでこれからは、
- 最初にMaterial全体の実装のScreenshotを載せて、何度も使用しているNodeには番号を振る。
- 具体的なNodeの話をする時はLerpノードの１とか、1番のLerpノードの様に、どのLerpノードの話をしているのか分かるようにする。
をやる事にします。
更に
- 沢山のNodeが固まりになって一つの機能を担当している箇所は、Commentで囲み、その塊の機能について解説する
もやる事にします。
具体的にはまず全体のScreenshotを上げます。
ここに複数しようされているNodeには番号を振ります。
実際に番号を振ろうとしたら上記のScreenshotではNodeが小さすぎて名前が読めません。
うーん。
それぞれの塊のScreenshotを上げる必要がありますね。
まずそれぞれのNodeに番号を振ってしまいましょう。
以下に示した様に実際のNodeに番号を振ります。
検索機能を使用して番号を振ると抜けが無くて便利です。
Lerpノードは一個しか使用していないので今回は番号は振りません。
以下の様にそれぞれのNodeに番号を振りました。
今度はNodeをCommentを使用して塊に分割します。
本来ならば、それぞれの機能毎の塊で分割するのがBestですが、その塊の機能自体が分からないから検証するんであって、それぞれの機能毎の塊で分割する事が出来たらそもそも実装の検証なんかしません。
のでここは、Output Nodeの手前で分割しているNodeに注目して
そのNode（今回の場合はMultiplyノード１）のAに繋がる実装、
（Multiplyノード１）のBに繋がる実装、
のような分割をします。
更に先週、勉強して既にNodeの塊の機能が分かっている箇所もCommentで括ります。
すると、以下の様に表す事が出来て、それぞれのNodeが小さすぎて名前が読めなくてもNodeの塊であるCommentは読めるようになります。
ここでそれぞれのCommentの実装も表示します。
Adjust Screen Size to Texture Sizeの実装です。
Aは、
に繋がります。
BはB to the Multiply Node 1内のMultiply Node 7に繋がります。
と全てのComment Boxの実装とその繋がりを説明します。
更に、以下に示した部分のようにどのComment Boxにも属していない箇所は、それぞれのComment Boxの中継地点なので
以下の様に番号を振って、
どのNodeに繋がっているのかを示します。
これを最初にやってどのComment BoxのどのNodeの話なのかが後で読んだときに直ぐに分かるようにします。
４．RPGのEventの作成
4.1 Widgetのテスト
今週は以下の事を試してみます。
取りあえず今回はテストなので、別なProjectで試してみます。
＜Widgetを一時的に透明する＞
今、開いているWidgetを透明にして新しいWidgetを開きます、そしてそのWidgetが閉じた時に前のWidgetの透明を解除して元に戻します。
こんだけです。
でもこれが出来るのかが分かりません。
まず結果言うと出来ました。
以下のWidgetが表示されています。
Visible Buttonを押すと、今まで開いていたWidgetが透明になって以下に示した新しいWidgetが開きます。
Close Buttonを押すと
このWidgetが閉じて、前のWidgetの透明が元に戻ります。
正し、私が最初に想定していた実装方法よりかなり複雑な方法が必要でした。
その実装方法を解説します。
Widgetを透明にするにはWidgetのVisibility をCollapseにセットすれば良いはずです。
所が、Widget内からそのWidgetそのもののVisibilityを変更する方法が見つかりません。
これ今回は諦めて別な方法を採用しましたが、この方法が判明したらProgrammingの複雑さが一気に改善する可能性が高いので、来週また検討してみます。
それで以下の方法で実装しました。
まずGame Mode 内に、
Event Dispatcherを作成します。
これを使用して最初のWidgetのVisibilityをControlします。
まずLevel BPの
で最初のWidgetを表示します。
その後で先程作成したEvent Dispatcherを今作成したWidgetのVisibilityをCollapseに変更するEventにBindします。
先程Level上で生成したWidget内のButtonをClickすると
以下の実装が実行されます。
ここで先程、作成したGame ModeのEvent Dispatcherを呼び出します。
これでこのWidgetそのもののVisibilityを変更しています。
その後は、新しいWidgetを生成したりとか、WidgetのVisibilityを変更する変数の変更とかの細かい実装をやっています。
4.2 Widget内からそのWidgetそのもののVisibilityを変更する方法が見つかりました
何と、Set VisibilityノードにSelfとセットしたらWidgetそのもののVisibilityにaccess出来ました。
前、試した時は出来なかったんです。
これで、Game Mode BPを通さないでWidgetを透明にする事が出来る様になりました。
後から開いたWidgetが、透明なWidgetにAccessして透明なWidgetのVisibilityを変更する方法が必要です。
それも以下の方法で簡単に達成出来ました。
2番目に生成するWidgetにWidgetの変数を作成します。
その変数の設定を以下の様にして
2番目のWidgetを生成する時にはParameterとしてその変数の値をPassしなければならないようにします。
そこにSelfを使用して最初の透明になったWidgetをパスします。
これで出来るはずです。
実装しました。
テストします。
Collapse Buttonを押します。
Closeボタンを押します。
はい。出来ました。
こっちのやり方は非常に簡単で、しかも透明になるWidgetのClassが何であってもWidgetである限り普通に使用出来ます。汎用性も最初のやり方より高いです。
来週、このやり方でEventの終了を表示するWidgetを追加します。
５．Open Worldの検証
今週は以下に示した様に、
Assetにある建物を見る事にします。
5.1 Assetにある建物で建物の内側も作成出来るものを探す
＜Infinity Blade＞
Infinity Blade Seriesから見て行きます。
DownloadしたInfinity Bladeは以下のモノがありました。
これらから確認します。
＜＜Castle＞＞
まずInteriorDemoから見てみます。
イキナリ部屋の中です。
これ位作成できるなら十分ですね。
でもちょっと歩いたら底が抜けて落ちてしまいます。
これはワザとそういう風に作成しているのかもしれませんがどうなんでしょうか？
以下のLevelは最初のヤツとほとんど同じですね。
以下のLevelは
城の外側を示しています。
何かMannequinが浮いています。
この城のBPを開いたら以下の様になっていました。
何とこの城、３つのStatic Meshから作られています。
その内の一つです。
これは遠くに設置する分には良いかもしれませんが、城の中を歩くためには作られてはいませんね。
以下に示した様に後ろ側は作成していません。
このAssetにある全てのMeshが見たいですね。
以下のLevelを開くと
このAssetにある全部のStatic Meshがありました。
これ全部、内側が無いか、外側が無いです。
うーん。
これが当たり前なんでしょうか？
他のAssetも見てみます。
＜＜Hideout＞＞
です。
以下のMapがありました。
最初のDemoMap1を開いて見ます。
こんな感じです。
一寸歩いて見たら裏面側に出ました。
裏面は全く作成されていませんでした。
次のMapですが小さすぎてMannequinが動けません。
うーん。多分Infinite Seriesは全部、私の目的である内側のある建物を作成するためのはかなり改良でもしない限り役に立たないでしょうね。
別なのを見ます。
＜City of Brass: Environments＞
これを見てみます。
以下のMapがありました。
Demo Gardensを見ます。
これは名前の通り庭でした。
しかしどこまで移動してもStatic Meshが崩壊している箇所は無かったです。
多分ですが、これは城や町の中庭や広場を作成するのに使用出来ます。
ただ屋根は無いみたいです。
あくまでも庭の作成のためのAssetですね。
以下に示した様に沢山のStatic Meshがありました。
後ろから見てのしっかり作られています。
City of Brassは内側まで作る必要がある建物の作成に使えるAssetかもしれません。
一寸、Marketにもっとないか調べて見ます。
建物は無いですね。
＜Fantasy and Medieval Architecture＞
今度はこれを見ます。
以下のMapがありました。
Demonstrationを開いてみます。
警告が表示されました。
このAssetには近づかない方が良いかもしれませんね。
Static Mesh自体はしっかり作成されているみたいです。
中身もしっかり作られています。
Static Mesh自体は使えそうです。
＜Fantasy Cave Environment＞
以下のMapを見てみます。
神殿の入り口です。
実際に神殿の中に入れました。
神殿の天井がどうなっているのかは分かりません。
Static Meshは以下のものだけでした。
ただし裏側もしっかり作られていました。
＜Greenwood Fantasy Village＞
このAssetにある家は中身が無いです。
私が今必要としているAssetではないです。
＜Low Poly Medieval Interior ＞
Mapがいっぱいありました。
取りあえずMap１を開いて見ます。
凄い細部まで作り込まれています。
うーん。裏側は作っていませんね。
これ表側を2枚重ねて作成しているんでしょうか？
Map1で確認したら裏側は透明になっていました。
これLow Polyじゃなかったらかなり良かったです。
＜Medieval Castle Modular＞
これを見てみます。
何これ？
写真。
凄い本物そっくりです。
でも城がないですね。
ProjectがCrashしてしまいました。
このAssetは私のPCでは重すぎるみたいです。
建物のStatic Meshもありました。
中身も完璧です。
別なMapを開いて見ます。
これは城の城壁でしょうか。
屋根がないですね。
＜Modular Fantasy House＞
以下のStatic Meshがありました。
これ、中身のある家作れますね。
あんまり沢山のAssetを一辺に見たので頭がくらくらして来ました。
今週のAsset探索はこれ位にしておきます。
来週、今週見た内容を整理してもう一回まとめ直す事にします。
６．Gaeaの勉強
今週もKlaus氏のHow To Create An Open World Snow Landscape | Unreal Engine 5 Tutorial [4]の続きを勉強します。
今週は先週終わらなかったTextureの実装の続きを最初にやっていきます。
6.1 雪のTextureを追加する
Combineノードを追加します。
そしてPort、Snowfall-Snowをinput 2に接続します。
雪が表示されません。
これは前のCombineノードがPin付けされているからで、Fを押す事でPinを移します。
結果です。
Combineノードの設定を変えるのも忘れていました。以下の様にしました。
結果です。
雪の色付けには以下に示した様なWaterの設定で行ったような色の指定とMaskの指定は無いんですね。
比較すると以下に雪の指定が簡単か分かります。
この部分が先週も、そして先々週も理解出来なかったんです。
まあ、今回は一寸気合い入れて見直したので、一発で理解出来ました。
ここまでで先々週までに勉強した箇所の実装が全部終わりました。
またKlaus氏のTutorialの続きをまとめます。
6.2 How To Create An Open World Snow Landscape | Unreal Engine 5 Tutorial [4]の続きを勉強する
ここまでで大まかなColoringは終わりました。
これからは細部の塗装をFlowを使用してやるそうです。
まずSatMapsノードを生成してTexture Portalを繋げます。
このTextureと言うPortal作った記憶がないんですが、まあ実装する時確認します。
結果です。
このSatMapsノードの結果と前のCombineノードの結果をCombineノードを使用して混合します。
GaeaでもCombineノードを大量に使用しているので、Blogで記録するとどのCombineノードをどのCombineノードで混合するのか全く分からないですね。
この点、YouTubeのTutorialは止めて巻き戻して確認すれば良いので便利です。
いずれTutorialと言うか学習教材は全てVideoになるんでしょうね。
新しく追加したCombineノードの設定は以下のようにしていました。
結果です。
更に今作成したCombineノードのMaskにFlowノードを接続します。
このFlowノードにはPort、FTを追加します。
以下のImageを表示するヤツです。
これだと少し強すぎるので、以下に示した様にFlowノードのShaperの値を下げます。
こんな感じになりました。
この結果を次にCombineノードに繋げます。
このCombineノードはWaterの管理をしているヤツですね。
こんな結果になりました。
ここでStep 2が終わりました。
Step 3が始まります。
Step 3は何をやるんでしょうか？
2022-08-14のBlogからKlaus氏のHow To Create An Open World Snow Landscape | Unreal Engine 5 Tutorial [4]の勉強を始めました。
その時にそれぞれのStepで何を勉強するかまとめた記憶があります。
調べたら、以下に示した様にKlaus氏がまとめたのをそのまま写したのがありました。
これを見るとExporting Masksとあります。
UEで使用するためにMaskをPngでExportする為の設定をやるみたいです。
上のStep 3の画面のどこかにExporting Masksって題を入れて欲しかったです。
まず以下のFlowノードをExportとしてMarkします。
どうやってMarkするのかの説明は無いです。
今度はSlopeノードをExportするためにMarkしました。
茶色のPinが付きました。
そういえば先程のFlowノードにも茶色のPinが付いています。
次はBase Shapeに戻ってRiノードにMarkしました。
川のMask用です。
次にSnowfallノードにFxノードを追加して、名前をSnノードに変換してMarkします。
この茶色のMarkを付ける方法が分かりました。
Nodeを選択した状態でF3を押します。
もしくは右Clickだそうです。
これでSnowfallのMaskも出来ました。
これで、Erosion、Snow、そしてRiverのMaskが出来ました。
LakeのMaskがありません。
LakesノードのLakesにFxノードを付けてMarkします。
Fxノードの名前はLake Maskに変更しました。
これだとLakeのDataはRiverも含むんじゃなかったでしたっけ。
ここでKlaus氏のMaskの生成についてのAdviceがありました。
一寸でも必要かなと思ったらMarkしてMaskにしておけ。だそうです。
後からMaskを生成し直すのか結構手間だそうです。
はい。
更にその後で、万が一、後で必要なMaskをExportするのを忘れた場合、全部をRebuildするのではなくHeight Mapを使用して必要な部分だけRebuildする方法などを解説していました。しかしこの説明だけでは具体的にどうやるのかまでは分からなかったです。
次はMaskのBuildについてです。
Build画面を選択します。
BuildするMaskのFormatがPng8である事を確認します。
Tutorialの説明ではMask MapにはPng8、Height MapにはPng16 を使用するそうです。
私は2022-08-01のBlogで述べたようにHeight Mapにはr32を使用しようと思っています。
その理由は、
と考えているからです。
まあ、これは実際に試してみないとこの考えが正しいのかどうかは分かりませんが。
Tutorialでは以下の3つのFormatをPng16 に変更しました。
以下の設定は今回は弄らなかったです。
そして
Build Buttonを押しました。
以下のImageが生成されました。
これでExport Maskは終わりだそうです。
今度はStep 4です。
以下の図によるとStep 4では
Landscape Materialの作成を行うようです。
うーん。
Gaeaの勉強とはあんまり関係ないですね。Landscape 用のMaterialの作成は、Unreal Sensei氏のTutorialで散々勉強したので敢えてここで勉強する必要あるかな。と思っています。
一応、見るだけ見て実際に実装するかどうかは後で考えます。
ここで以下のMaskが突然現れます。
うーん。これは何？
でもLandscape用に作成したMaskは以下のモノだけです。
一応、これらのMaskはDownload出来るそうです。
Landscapeを作成するための画面に移動します。
ここに表示されているMaterialは何処から持って来たんでしょうか？
そのMaterialの作成方法を今から解説するみたいです。
アー良かった。
Materialを開きLayer Blendノードを追加します。
以下の4つのLayerを追加しました。
Main NodeのUse Material AttributeにCheckを入れて
Main Nodeを以下の様にしました。
そしてMain NodeとLayer Blendノードを繋ぎました。
更にそれぞれのLayerとMake Material Attributeノードを繋ぎました。
この辺はLandscape用のMaterialの作成の基本中の基本なのでさらっと行きます。
Mega ScanでDownloadしたTextureをそのまま使用するそうです。
LandscapeCoordsノードの説明で
Mapping Scaleを1009にセットするそうです。
すると、このTextureはLandscapeに対して一回しかApplyされないそうです。
うーん。
知らなかった。
これ文字通り解釈するとTilingが起きないと解釈出来るんですが、そう言う事なんでしょうか？
もっと詳しい話が知りたいです。
ここでTipです。
これらのTipは知っています。
あ、成程、以下の様にしてTilingのサイズを決定していました。
そりゃ、Texture一枚をLandscapeと同じ大きさに拡張したらとても変なLandscapeになります。
当たり前と言えば当たり前でした。
以下に示した様に実装をしました。
これでLandscape用のMaterialの解説は終わりでした。
ここでStep 4はお終いでした。
キリが良いのでここで終わりにします。
７．雪山のMapの作成
7.1 Dynamic Volumetric Skyを使ってみる
何と今月のFree for the MonthにVolumetric Cloudらしきものがありました。
しかもこれ非常に評価が高いです。
突然ですが今週はこれを勉強する事にします。
Example Mapを開きます。
こんな感じでした。
あれ、Volumetric Cloudは使用されていませんね。
BP Dynamic Volumetric Skyが使用されています。
中身を見てみます。
Volumetric Cloudとは書かれていますが、
とは全く違うものですね。
うーん。
これは私が思っていたのとはかなり違いますね。
BP Dynamic Volumetric SkyのDetailを見ると
色々なParameterがあります。
Materialは無いです。
うーん。
Volumetric Cloud用のMaterialはこのBPでは使用していないんでしょうか？
でもこの雲はVolumetric Cloud用のMaterialを使用しないと作成出来ない気がします。
BP Dynamic Volumetric Skyの実装を見ると
DensityとかCloud Top OffsetなどのVolumetric Cloud用のMaterialのParameter名としか思えないものが沢山あります。
このMPC_Cloudを見ると
Material Parameter Collectionなんです。
じゃ、このParameterを呼び出しているMaterialがあるんじゃないと探したら、ありました。
M_ New Volumetric Cloudsです。
このMaterialを開くとまずVolumetric Advanced Outputを使用していました。
はい。もう間違いないです。これがVolumetric Cloud用のMaterialです。
因みに先程のMPC_CloudのDensityやCloud Top Offsetの値もここで使用していました。
ではまず、3d Textureを使用しているのかを調べます。
無かったです。
雲用の3d Textureは以下の9種類しか持っていないので増えたらうれしかったんですが、無いですね。
M_ New Volumetric Cloudsの実装を見てみましょう。
まずはMain Nodeです。
これはVolumetric Cloud用のMaterialの設定ですね。
以下に示した様にMaterial DomainがVolume、Blend ModeがAdditiveになっています。
一番興味のあるExtinctionの実装から見てみます。
Cloud Sample Attributesノードが使用されていました。
先週のBlogや2022-08-14 のBlogに書いていますがUE4: Step-by-Step to Creating Your First Volumetric Cloud Material [5]でCloud Sample Attributesノードについて勉強しました。
Norm Altitude in Layerは雲の底を0、雲のTopを1で返すはずです。
それをここで使用する理由はあんまり分かりませんね。雲の底を薄くしたいんでしょうか？
その先にはExp Densityという
Customノードが使用されていました。
そのCustomノードの実装です。
うーん。
ExpなんでContrastを上げているだけだと思うんですがy=1-e^(-x)がどんなGraphになるのか分からない。
Graphにしました。
うーん。
あんまり0～１で綺麗な変化していませんね。
ｘの値を10まで増やしました。
はい。
今度ははっきり分かりました。
1に収束するんですね。この式は。
これ見ると0～４までがまあ値として有効でそれ以上大きくなるとほとんど変化しないみたいです。
その先を見るとMain Cloud Alphaと言うCustomノードがありました。
中を見るとゴリゴリのHLSLが書かれています。
ただしOutputはFloat一個です。
Descriptionを読むとMain Cloud Alphaと書かれているので
ここは雲のAlphaを計算している所と解釈しておきます。
その先はMain Cloud AlphaノードのParameterでお終いでした。
うーん。
これじゃどうやって雲のDensity（Extinction）を計算しているのか分かりませんね。
Main Cloud AlphaノードのHLSLが全ての計算をやっています。
でもこんだけ理解出来たら今週は十分です。
もう少しVolumetric CloudのMaterialの実装に詳しくなったら、このMain Cloud AlphaノードのHLSLの実装を勉強する必要がある時が来るでしょう。
今回はこの辺は終わりにします。
7.2 Volumetric Cloud Materials - Building Worlds In Unreal - Episode 33 [6]の検証
先週は、Tutorialをしっかり見直しました。
今週は、先週出来なかった以下の実装部分を検証します。
これはVolumetric Advanced OutputのConservative Densityの実装です。
まずこの実装で解明したい事は以下の雲の形状が
この実装の以下のTexture Sampleにセットされている
以下のTextureから生成されている所です。
なんで雲の形状をZ軸に沿って決定出来るのかが不思議です。
この謎を追います。
まずConservative Densityの機能についてです。
うーん。
何言っているのか分かりません。
以下のTextureを作成して
これと
交換してみました。
が
になりました。
確かに変化しました。
ただ完全にTextureと同じ形状になったとは言えないですね。
今度は以下の形状にしました。
雲の上の部分を消しました。
結果です。
確かに雲の上の部分が消えています。
うーん。良く分かりません。
他の所から検証します。
このCustomノードは簡単でした。
Densityの値を返していただけです。Norm Altitude は雲の下底で0、上底で1になります。
ので雲の間だけ0以外の値を返すようにしています。
この部分が何故雲の縦の形状を計算するのかはまだ分かりません。
以下のTexture SampleのUV値を計算している部分を見ます。
最初のAddノードはOffsetの値でしょうね。500000.0 cm なので5 km 離れた位置という事でしょう。
次のRGのMaskは使用しているTextureが2dなのでUVしか要らないからでしょう。
その次のWeatherUVScaleは 0.0005を2回掛けています。これはcm＾2と言う意味ではなくてUEのInputが小数点5桁？以上は0と認識するためこのような処置を取ったと考えられます。
2.5e-7で割っているので、4000000を掛けている事になります。1cmが40kmになっています。
このTextureの設定を
Clampにしてみました。
すると
以下の様な雲の形状に変化しました。
Wrapの時は以下の様になっています。
WeatherUVScaleの値を 0.0004にすると
雲が大きくなっています。
WeatherUVScaleの値を 0.0006にすると雲が小さくなりました。
この辺は普通のTextureとUVの関係と全く同じです。
この部分の実装は結局はサイズの大きいTextureを扱っているだけで普通のUV値の扱いと全く同じです。
後は以下の部分だけが分かりません。
ああ、分かった。
Cloud Sample AttributeのNorm Attribute Layerは雲の上底で1、雲の下底で0を返します。それのOne Minus値がUV値のV値になっています。
つまりこのTextureのY軸の値は雲の縦の値に一致しています。
これはVoxel毎にその値を計算しているです。
VoxelなのでXYZの位置があります。
このｚの値を表しているのがCloud Sample AttributeのNorm Attribute Layerなんです。
だからこのTextureは雲の上下の形状を決定するんです。
一から説明し直します。
この実装では雲のVoxel値を以下の２つのTextureの値から決めています。
まずそれぞれのVoxelには位置がありxyzで指定されています。この実装ではそれぞれのVoxelのxyzの値をUVとして使用して2つのTextureから値を抽出してそれを掛けた値をそれぞれのVoxelの値として決定しています。
まず最初のTexture 、Texture Sample1ですが、VoxelのXYの位置の値を使用してUV値を決め、そのUV値に基づいてそのVoxelの値を決定します。
ここで使用されるのはTexture Sample1にあるTextureのRの値です。
これです。
だから雲を上から見るとこのTextureと全く同じ形をしているんです。
次に、XYの値をUVとして使用した最初のTextureのGの値をU値、
そしてWの値、つまりCloud Sample AttributesノードのNorm Attribute Layerの値をV値として
以下に示した2番目のTexture Sample、Texture Sample2の値を抽出します。
Texture Sample 2にセットされているImageは以下のヤツです。
ここでPointなのはGの値がU値になる事で、Gが白い部分に雲を生成したい場合、
以下の様にUの真ん中に白い線を引いたのでは駄目で
以下の図のようにUの値が１の所を白くする必要があります。
これだったらTable上の雲が出来るはずです。
はい。出来ました。
そして最後にこの2つ目のTextureの値と一つ目のTextureの値を掛けます。
これがこのVoxelの値になります。
今週のVolumetric Cloudの勉強はここまでとします。
7.3 Volumetric Cloud Materials - Building Worlds In Unreal - Episode 33 [6]のまとめ
遂に以下の部分の実装が何をやっているのか判明しました。
この部分のPointは以下の2つです。
- ここではそれぞれのVoxelの値を計算している。
- それぞれのVoxelの位置はxyzで表される。このｚの値をCould Sample AttributesノードのNorm Attribute Layerは返している。
この２つが理解出来ると残りの計算も何を計算しているのかとか、何がParameterになっているのかが分かります。
雲の計算は全てvoxelを計算しています。なので本来は3d Textureを使用して対応すべきです。しかしその代替策として2枚のTextureを使用して一枚をXY、もう一枚をzの値に対応するようにしたのがこの実装だったのです。
そのためには2枚目のUの値を一枚目のGの値で指定する必要があります。
これがこの部分の実装を理解するのを非常に難しくしていました。
Could Sample AttributesノードのNorm Attribute Layerは雲のZの値に比例した値を返してくれます。ので雲のｚの値を指定する時に使用するんです。
他のVolumetric Cloud用のMaterialにCould Sample AttributesノードのNorm Attribute Layerが出て来た時は、この事に注目する事にします。
８．UI Designの勉強
UI Designを直して行きます。
を
に変更しました。
残りは完成したUIだけ貼っておきます。
以上です。
９．Anime Renderingの勉強
9.1 今回の予定
今回、初めてのAnime Renderingの勉強として、10回程度ここで勉強する予定です。以下に勉強する予定の内容を書いておきます。
- PPLineDrawingを参考にしてOriginalの輪郭線Materialを作成する
- 公式のDocumentのStylized Rendering[7]の勉強
- 夏森轄（なつもりかつ）先生の【Blender】セルルック講座 ～ノード、輪郭線、法線転写、RGB分離～[8]
9.2 今週の予定
今週でAnime Renderingの勉強は10回になります。
先週までの勉強でPPLineDrawingの実装の理解と夏森轄（なつもりかつ）先生の【Blender】セルルック講座 ～ノード、輪郭線、法線転写、RGB分離～[8] の勉強が終わりました。
PPLineDrawingの勉強に関してはその後のOriginalの輪郭線をPostprocess 用のMaterialで作成するとこまで予定に入っています。ので半分しか終わらなかったとも言えます。
しかしこれは見通しが甘すぎでした。輪郭線の抽出方法を理解する事はそんなに簡単ではなく、実際、今でもNormal Vectorの差分を取るのにDot Productを使用する方法なんかはあんまり理解していません。
のでこの辺に関しては計画を作り直して、残りの課題をやって行こうと思います。
次の課題は、Originalの輪郭線Materialを作成するためにアニメ調の3d ModelをUEにImportする方法を勉強する事です。
先週、以下のModelをVroidを使用して作成したので、今週からはこのModelをUEにImportする方法を勉強しようと思います。
夏森轄（なつもりかつ）先生の【Blender】セルルック講座 ～ノード、輪郭線、法線転写、RGB分離～[8] の勉強は大体予定通りでしたが、法線転写に関してUEでも出来るのかが分かりません。これについての調査をします。
公式のDocumentのStylized Rendering[7]の勉強はまだ勉強する箇所が沢山あるのでこれからも継続してやって行きます。
来週からの勉強の予定は
- Vroidで作成したModelをUEにImportする
- 公式のDocumentのStylized Rendering[7]の勉強
- 法線転写をUEで実装する方法を検証
を勉強する事にします。
ので来週からの題はアニメレンダリングの勉強にします。
9.3 Vroidで作成した3D ModelをUEにImportする
色々調べたらUEにはVRM4Uと言うPluginを入れるとVroidで作成したModelをUEにImport出来るみたいです。
VRM4Uを使用しない場合はBlender経由でUEにImportする方法もあるみたいです。
VRM4Uで検索したら公式のサイト[9]が見つかりました。
このサイトを参考にしながらやってみます。
取りあえず4.27でやる事にします。
をDownloadしました。
Vroidを動かすための専用のProjectを作成する事にします。
名前はImportVroidにします。勿論Versionは4.27です。
Downloadしたら勝手に解凍してPluginsというFolderが生成されました。
のでそれを以下の場所に配置しました。
Projectを開いてPluginsを確認するとVRM4Uがありました。
EnabledにCheckを入れてProjectを再起動します。
結構ドキドキして来ました。
先週作成したVroidをImportしました。
あ。出来てる
こんな設定があるんですね。Vroidを作成した時は全然知らなかった。
T-poseでImportしたいんで以下のCheckは外します。
Importしました。
思っていたより本格的です。
Level上に配置しました。
陰が結構綺麗に出ていますね。
太陽光の向きを変えてみました。
陰は綺麗に移動しています。
うーん。
今週はここまでにします。
来週は、このImportしたModelのMaterialなどを検証する事にします。
9.4 公式のDocumentのStylized Rendering[7]の勉強
先週の続きをやって行きます。
先週は以下の実装部分を検証しました。
これがWorld SpaceにおけるそれぞれのPixelの位置を表している事が分かりました。
しかしそれならWorld Positionと同じじゃないのかと思い
試してみると、World Positionの方が値のばらつきが大きい事が分かりました。
この違いって重要なんでしょうか？
更にObject PositionノードだとこのMaterialを使用しているObjectの中心を返してくれます。
これとの違いは何かあるんでしょうか？
今週は、これらの検証をします。
更に、
についても検証します。
＜Stylized Renderingにある実装、World Position ノードの値、Object Positionノードの値の検証＞
先週実装した以下のMaterialを使用して検証します。
まず先週の確認ですが、Pivot Pointが（0，0，0）の時は、
World Spaceの原点を中心にして回転します。
だからObjectを原点に配置した場合は
回転しません。
良く見ると陰は回転しています。
今度は実装を以下の様に変更します。
大体想像付きます。
ObjectがWorld Spaceのどの位置に配置されても、そのObjectの位置でMaterialが回転すると推測されます。
Objectを
に配置してテストします。
はい。
Materialは回転しません。だたし陰がObjectの回りを回転しました。
丁度、Pivot Pointが（0，0，0）の時にObjectを原点に配置した場合と同じです。
これがLevel上どこに配置しても起きるようになりました。
ここまでは分かりました。
Pivot Pointなんだから軸の点を指定している訳で、理屈としても納得出来ます。
でもそれならWorld PositionやObject Positionでも同じ事が出来るんじゃないのか？という疑問が生まれます。今度はこれを検討します。
まずWorld PositionをPivot Pointに使用した場合です。
以下の様にセットしました。
Rotate About AxisノードのPositionにはWorld Positionをパスしています。
更にPivot PointにもWorld Positionを与えたら、全く回転しなくなりそうですがどうなんでしょうか？
全く変化がないです。
それでは今度はObject Position ノードを使用してみます。
結果です。
これは陰は回転しています。
ここまでやったらPivot PointとそれにPassするInputの値の関係性に気が付きました。
Pivot Pointは文字通り、回転する軸の点です。
それでここがポイントなんですが、この軸、Pixel単位で指定出来るみたいです。だからWorld PositionをPivot Pointに使用した場合、それぞれのPixelでそれぞれのPixelが軸になって全く陰が動かなくなりました。
Object PositionノードをPivot Pointに指定した場合は、Object上に貼りつけられたMaterialの全てのPixelの軸がObject Positionになりました。なのでその点を中心に回転しました。
以下の実装の場合は、
値に多少のばらつきがありますが、ほぼObject Positionに近い値に収束しているので、Object Positionと同じ結果になりました。
この結果からRotation About Axis ノードのPivot PointにはObject Positionを使用するのが一番理に適っていると思いました。
Object PositionがStatic Meshの中心に無い場合は、その分調整してPivot Pointにパスすれば良いんです。
ので、以下に示した実装を
敢えて行うより、Object Positionを使用した方が良いとの結論になりました。
＜TexCoord[2]とTexCoord[3]の違いについての検証＞
TexCoord[2]とTexCoord[3]の違いについて検証します。
以下の実装を組みました。
結果です。
TexCoord[2]とTexCoord[3]をTexCoord[0]に変更しました。
結果です。
全く同じ結果になりました。
この結果から少なくともObjectの位置を計測するために使用されたTexCoord[]は0でも2でも3でもまったく同じであると言えます。
以上です。
9.5 法線転写をUEで実装する方法を検証
Historiaさんの[UE4] 動的法線転写について[10]にそのままやり方が載っていました。
軽く読んだだけですが、このBlogに書かれている事をやれば出来そうです。
英語圏のTutorialも調べてみます。
無かったです。
まずNormal Transferで調べたんですが、そんな英語は存在してないです。
で法線転写の英語名が分からないのでDeep Lで調べたらNormal Vector TranscriptionとかNormal Transcriptionとか出て来ました。
なのでNormal Vector TranscriptionとNormal Transcriptionで検索したんですが、これどうやら生物学の専門用語で全く同じ言葉があるみたいで、それしか引っかかりません。
というか法線転写という技術が日本発祥なんだと思います。
はあ。
凄い。
アメリカ一強の3D Graphicsの世界に日本独自の技術が食い込むのを目撃する日が来るとは。
いや。中国の技術って事は無いでしょうね。
一応、Googleで検索した限りでは法線転写で中国語の結果は表示されませんでした。
日本独自の技術で間違い無いでしょう。
やっぱりこれからの日本の生きる道は、こういうアニメ風のRenderingで作成したGameをアメリカに売る事だと思います。
これならどんなに円安になってもやって行けますね。というか円安の方が特になります。
それで、実際のUEにおける法線転写については来週から勉強します。
＜Blenderの勉強はどうするの？＞
これ考えてなかったです。元々Blenderの勉強をするための枠だったのがUEに戻ってしまいました。
このままだとBlenderの勉強全くしなくなりそうです。
夏森轄（なつもり かつ）先生のTutorialのどれかをやる事にします。ただしこれはUEにおける法線転写の勉強が終わってからやります。
以上です。
１０．まとめと感想
今週も途中で時間がなくなってしまいました。今週出来なかったところは来週やります。
１１．参照（Reference）
[1] CGHOW. (2022a, June 10). UE5 Niagara #ScratchPad Module #6 | Skeletal Mesh Location with Offset and Scale [Video]. YouTube. https://www.youtube.com/watch?v=t6ZX5X-jxtg
[2] CGHOW. (2022b, June 11). UE5 Niagara #ScratchPad Module #7 | Grid and Brick Pattern [Video]. YouTube. https://www.youtube.com/watch?v=lO-phNUx_aw&list=PLwMiBtF6WzsqfBv2rYkHe93Whx5AY1u6o&index=7
[3] Cloward, B. [Ben Cloward]. (2022, July 21). Rain Drips On The Lens Post-Process Effect - Shader Graph Basics - Episode 54 [Video]. YouTube. https://www.youtube.com/watch?v=jfXJYPTdyAg
[4] Klaus. (2022, July 6). How To Create An Open World Snow Landscape | Unreal Engine 5 Tutorial [Video]. YouTube. https://www.youtube.com/watch?v=ej2b-zWoYiM
[5] 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
[6] 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
[7] Epic Games. (n.d.-a) Stylized Rendering. Unreal Engine Documentation. Retrieved June 19, 2022, from https://docs.unrealengine.com/4.27/en-US/Resources/Showcases/Stylized/
[8] 夏森轄（なつもり かつ）. (2022, May 21). 【Blender】セルルック講座 ～ノード、輪郭線、法線転写、RGB分離～ [Video]. YouTube. https://www.youtube.com/watch?v=e1tFq5OoSY0
[9] Harube, R. (n.d.-b). VRM4U. VRM4U. Retrieved September 11, 2022, from https://ruyo.github.io/VRM4U/
[10] 株式会社ヒストリア. (2022, June 30). [UE4] 動的法線転写について. Historia Inc - 株式会社ヒストリア. Retrieved September 11, 2022, from https://historia.co.jp/archives/11921/
