PaperSloth’s diary

主にゲーム開発関連についての記事を書きます。

UE4 個人開発メモ

最終更新日:2020/09/17

変更履歴
2020/09/17 : Visual Studioのバージョン変更方法を追加

概要

 個人開発でのUE4のEditor Preference, Project Settings等のメモ
 随時更新していきます。
 基本はWindowsPC向けの内容。
 家庭用ゲーム機、アーケードゲーム、モバイル、XR(AR / VR)でも役立つ内容も含みます。
 各項目には確認時のバージョンを記載しています。
 バージョンが古かったり新しかったりすると
 項目がなくなったり、場所や名前が変わったりしている可能性があります。

環境

・Platform : Windows
・Unreal Engine4.17.2~
Visual Studio Community 2015


Project Settings

Windowタイトルの変更方法(UE4.17.2)

 WindowタイトルとはPC向けに作成した際のWidnowの左上に出るタイトルです。
f:id:PaperSloth:20171130003303p:plain

 何も指定していない場合はProject名が表示されます。

 設定は下図のProject - Description - Displayed
 「Project Displayed Title」から変更できます。
f:id:PaperSloth:20171130004532p:plain

 試しに"Example Window Name"と入れてみました。
f:id:PaperSloth:20171130004635p:plain

Application名の変更方法(UE4.17.2)

 上記のWindowsタイトルとよく間違えやすいのがこれです。
 設定は下図のProject - Description - About
 「Project Name」から変更できます。
 デフォルトではUE4Gameと入っています。
f:id:PaperSloth:20171130005438p:plain

 よくWindowタイトルを変更しようとしますが、ここを変えても上手くいきません。
 この名前はタスクマネージャー等で表示されるアプリの名前です。
f:id:PaperSloth:20171130005618p:plain

 ちょっと図がわかりにくいのですがProject Nameがあって、その下にWindowTitleがくるようになっています。
 編集をしていない場合だと、UE4Gameの下にProject名がくるようになっています。
f:id:PaperSloth:20171130010129p:plain

シェーダーモデルの制限によるメモリ容量削減(UE4.17.2)

 設定は下図のPlatforms - Windows
 「Targeted RHIs」から変更できます。

 UE4Windows向けに作成している場合
 デフォルトのRHI(Rendering Hardward Interface)はDX10, DX11が有効になっています。
f:id:PaperSloth:20171130220108p:plain
 これをDX11(ShaderModel5)のみにすることで不要なシェーダーが減り、パッケージ容量を削減できます。
 ThirdPersonTemplate等で試してみてもほぼ全く変わらないのですが
 規模が大きく、マテリアルが増えるほど効果が現れやすい部分です。

 試しに自分のゲームで比較してみた結果
 DX10, 11だと242KBのシェーダー
f:id:PaperSloth:20171130221048p:plain
 DX11のみだと124KBと約半分の容量になりました。
f:id:PaperSloth:20171130221057p:plain

 このように数百KB程度だと微々たる差ですが、これが数百、数千のマテリアルとなると話が変わってきます。
 また、シェーダーも1つで数百MBだと半分ほどの容量になるのは大きな変化ですね。

パッケージング関連

 項目が多いので、細かく分けます。
 設定箇所はProject - Packaging以下のものになります。

PakFileの使用(UE4.17.2)

 「Use Pak File」にチェックを入れると有効になります。
 説明の前に図で見てもらうと分かりやすいと思います。
 Pak Fileを使用した場合
f:id:PaperSloth:20171130222234p:plain
 中には.pakの形式でContent以下のAssetが1つのデータに圧縮されています。

 Pak Fileを使用しない場合
f:id:PaperSloth:20171130222333p:plain

 Pakファイルの使用は容量の削減になり
 転送ファイル数が減るので配布時のダウンロードも早くなり
 ロードも早くなるため使用することを推奨します。
 容量の参考までに自分のプロジェクトで使用した場合の容量を載せておきます。
 使用した場合  :532MB
 使用しない場合 :786MB

パッケージの圧縮(4.17.2)

 「Create compressed cooked packages」にチェックを入れると有効になります。
 f:id:PaperSloth:20171203220605p:plain
 なお、このオプションの効果を有効にするにはUse Pak Fileにチェックを入れておく必要があります。
 容量の参考までに自分のプロジェクトで使用した場合の容量を載せておきます。
 使用した場合  :547MB
 使用しない場合 :950MB

 さて、パッケージの圧縮はDLで配信するPC向け等にはオススメですが、
 一部プラットフォームは注意が必要です。
 PlayStation 4の場合
  PlayStation 4 の圧縮と重複し、ファイル サイズは減らずにロード時間が長くなってしまいます。
 Nintendo Switchの場合
  ロード時間が早くなる場合と遅くなる場合があります。
 詳しくは下部の参考資料のリンクを見てください。


Editor Preference

Blutilityの有効化(UE4.17.2)

 BlutilitはBlueprintをEditor上で呼び出すことでお手軽にEditor拡張が出来る機能です。
 UE4.17.2現在は実験的な機能として提供されています。
 この機能に関しては不安定というよりは、機能がまだ足りないため実験的な機能なのだと思います。

 設定は下図のEditor Preference - General - Experimental - Tools
 「Editor Utility Blueprints(Blutility)」から有効に出来ます。
 有効にした際のEditorの再起動は不要です。
f:id:PaperSloth:20171130011354p:plain

EQS(Environment Querying System)の有効化(UE4.17.2)

 EQSはAIが目的に応じた位置を探す時に使われる機能です。
 この位置は動的に生成され、その中から最もスコアの高い位置を選択します。

 こちらも実験的な機能として提供されていますが
 EpicGamesの開発タイトルである「Robo Recall」でも採用されており、信頼性は高いです。

 設定は下図のEditor Preference - General - Experimental - AI
 「Environment Querying System」から有効に出来ます。
 有効にした際のEditorの再起動は不要です。
f:id:PaperSloth:20171130012353p:plain

Visual Studioのバージョン指定方法(UE4.25.3)

 つい最近変更したのがUE4.25.3でしたが、結構古いバージョンでも同様のはずです。
 設定はEditor Preference -> Source Code
 「Source Code Editor」から変更できます。
f:id:PaperSloth:20200917005815p:plain
 変更後は「File -> Reflesh Visual Studio XX Project」から更新することで適用されます。
 以下のドキュメントにUE4のエンジンバージョンごとのVSのバージョンが載っています。
 2020/09/17時点では下記のバージョン対応になっています。
 VS2019 がないのはドキュメントの更新忘れのような気もしますが、一先ずこのバージョンのようですね。
  4.22 - ...  :VS 2017
  4.15 - 4.21 :VS 2017
  4.10 - 4.14 :VS 2015
  4.2 - 4.9 :VS 2013
Unreal Engine 用に Visual Studio をセットアップする | Unreal Engine ドキュメント


参考資料

シェーダーモデルの制限によるメモリ容量削減
バイキング様のスライド63ページ付近に該当箇所の説明があります。
マジシャンズデッド ポストモーテム ~マテリアル編~ (株式会社Byking: 鈴木孝司様、成相真治様) #UE4DD

パッケージング関連
パッケージの圧縮によるプラットフォームごとの注意点等詳しくはドキュメントに載っています。
プロジェクトをパッケージ化する | Unreal Engine ドキュメント

VTuberのためのトラブルシューティング

概要

VTuberさんが配信でなにかと遭遇したりしなかったりする諸々のトラブルの解決方法を書いていたり書いていなかったり
多分真面目に書くとキリがない
私自身はVTuberの配信を見ているただのおじさんです

環境

・PC
 ・OS: Windows10 Pro
 ・CPU: AMD Ryzen 5 3500
 ・GPU: NVIDIA GeForce RTX 2070
 ・RAM: 64GB
 ・Storage: SSD512GB + SSD2TB + 外付けSSD2TB
 PC周り
 ・Monitor: 43UN700
 ・Keyboard1: HHKB Professional Type-S(PD-KB800BNS)
  Keyboard2: ARESPEAR K100F
 ・Mouse1: MX Anywhere3
  Mouse2: MX Master 2S

・配信機材
 ・AudioInterface: Yamaha AG03
 ・Microphone: Audio-Technica AT2035(コンデンサーマイク)
  ・CANARE XLRケーブル(1.5m)
  ・SUNMON シザーアームマイクスタンド
  ・キクタニ ポップブロッカー
 ・Luppet (Personal License Ver)
 ・LeapMotion
  ・LeapMotion用ネックマウンタ

商品諸々のリンクや定価は記事の末尾に貼っておきます。

どこにでもいるリスナーのよくある視聴環境ですね!

配信全般の設定

歌枠をやりたいけど、音源ってどうしたらいいの?

https://www.youtube.com/channel/UC1tk9F5-MGXEq4LWnjmrtpA
 カラオケ歌っちゃ王の音源を使用するのが安全です
 詳しい規約については上記チャンネルの概要欄を読んでください
 MIDI打ち込みでの音源の場合は諸々の権利を侵害するリスクが少ないですが
 各投稿者さんの動画説明やチャンネル概要を見て問題がないかを事前に確認する必要があります

歌枠をやろうとしたけど、YouTubeが真っ黒な画面で音しか聞こえない(Google Chrome)

 原因としてはChromeのCacheがいっぱいになっていることが多いです
 1. 先ずはGoogleの設定画面を開きます

 2. プライバシーとセキュリティのタブから閲覧データの削除を選択

 3. 全期間を選択してキャッシュされた画像とファイルにチェックを入れてデータを削除

 これでひとまずは解決するとは思いますが、Cacheを消したことでYouTube等のWebサイトからログアウト状態になると思いますので
 再ログインを行ってください。

歌枠をやろうとしたけど、YouTubeの画面がチラつく(Google Chrome)

 原因としてはハードウェアアクセラレーションとの相性問題が多いようです
 1. 先程同様にGoogleの設定画面を開きます
 2. 詳細設定を開いてシステムタブのハードウェア アクセラレーションをオフにする

 ハードウェアアクセラレーションが有効な場合はGPUで処理を行うのですが
 GPUとの相性問題やSpec不足でチラつきが発生するようです
 ハードウェアアクセラレーションをオフにすることでCPU側で処理を行うようになります

AG-03のエコーのかかり具合を調整したい

 AG DSP CONTROLLER を使用することで調整が可能です
 以下のURLから自身のPCのOSに該当したものをDLしてインストールしてください

ヤマハ - ウェブキャスティングミキサー - AG DSP Controller
 Windowsの場合は「AG Controller V1.0.4 for Windows 11/10 (64-bit)」ですね
 起動するとEASY / EXPERTのメニューがありますが
 EASYのEFFECTのつまみを調整することでエコーの強さを調整することが可能です

配信に使えるBGMを探したい

 フリーBGMのサイトから探すのが安心ですね
FREE BGM (music materials) free download|DOVA-SYNDROME
 ・Morning_2
 ・パステルハウス
 ・野良猫は宇宙を目指した_2
 なんかは皆さんも聞き馴染みのあるBGMだと思います
 雑談枠でBGM無しかつ、Live2Dや3Dではないラジオ配信の場合は
 回線都合で止まっているのか、単純に無言の時間なのか判別がつきにくいため
 何かしらを流しておくと親切です

VTube Studioの起動

 SteamからDLする際にデスクトップショートカットを作成しておくと親切
 
 デスクトップショートカットを作成し忘れた!って人向け
 Steamの設定メニューを開く
 
 ダウンロードタブのSTEAMライブラリフォルダーを開く
 
 VTubeStudioをインストールしているドライブのフォルダーを表示
 
 
 CommonのVTubeStudioの中にVTubeStudioがあるので、ここからショートカットを作成しておくと便利
 
 かわいいにゃんね
 
 VTube StudioがSteamとのサーバー同期に失敗したりする場合
 Steam Clientの特定のProcessをkillして再実行するのが手ではありますが
 間違ってSystemのProcessをkillする可能性があるため
 大人しくPCを再起動するのが無難です
 Steam側の障害の場合はお手上げかも。

 因みにVTuber Studio ではなくてVTube Studioです
 言い間違いが多くて気になる民

SHOWROOMで配信する際の設定

SHOWROOMでOBSを使用して配信をしたい

 以下のサポートページにそってポチポチと設定をすればできます(難しいことはなかった記憶)
https://support.showroom-live.com/hc/ja/articles/900003010623-OBS-Studio%E6%9C%80%E6%96%B0%E7%89%88%E3%81%A8%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%A0%E3%82%AD%E3%83%BC%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E9%85%8D%E4%BF%A1
 設定が多くてややこしいよね
 以下にプロファイルが公開されているので、手順に従ってプロファイルをインポートするといい感じに設定してくれるよ
https://support.showroom-live.com/hc/ja/articles/900003224006-SHOWROOM%E6%8E%A8%E5%A5%A8%E8%A8%AD%E5%AE%9A%E3%82%92%E7%94%A8%E3%81%84%E3%81%A6OBS%E3%81%A7%E9%85%8D%E4%BF%A1%E3%82%92%E8%A1%8C%E3%81%86%E6%96%B9%E6%B3%95

SHOWROOM すこアニ (仮) β版 を使おう

 すこアニを使うと配信画面にギフトや星を降らせたり配信が賑やかになって
 SHOWROOMだけでは飛んでしまうコメントログが追いやすいです

SHOWROOM すこアニ♪ (仮) β版
 自身の配信URLのhttps://www.showroom-live.com/ の後のURLを入力して接続を押せばつなげるよ
 1. OBSのソースに「ウィンドウキャプチャ」を追加
 
 2. ウィンドウキャプチャを選択して右クリックメニューから「プロパティ」を開こう
 
 3. ウィンドウからすこアニを選択して一致優先順位をウィンドウのタイトルに一致か、タイトルに一致、同じ種類のウィンドウを選択
 
 4. ウィンドウキャプチャを選択して右クリックメニューから「フィルタを追加」
 
 5. フィルタにクロマキーを追加
 
 6. 色キーの種類を「Custom」に変更
 
 7. 色を選択を押してHTML: の欄に「#dcffdc」を入力
 
 あとはすこアニのレイアウトを調整すればコメントログだけがリスナーに見れるようにできたりするよ
 

 配信に使える背景画像やマイクをお借りしよう
OKUMONO | サムネイルや配信画面に使える背景フリー素材のOKUMONO。VTuber・配信活動に。
 上記のサイトからDLできるよ
 先程のすこアニと組み合わせるとこんな感じの画面が作れるね
 

YouTubeで配信する際の設定


多いというか、気力が若干尽きたので気が向いたら書きます(多分書かない)
SHOWROOMのOBSの設定と同じように設定をポチポチといじればいい感じにできます。

商品リンクとか

(ここから買っても特にぼくにお金が入ることはないです)

AG-03 (定価: ¥18,150ほど)
https://www.yodobashi.com/product/100000001007024202/
AT2035 (定価: ¥19,580)
AT2035|マイクロホン|株式会社オーディオテクニカ
Luppet (個人向け: ¥6,000)
Luppet
LeapMotion (定価: ¥14,000)
Amazon.co.jp: 【国内正規代理店品】 Leap Motion 小型モーションコントローラー 3Dモーション キャプチャー システム : パソコン・周辺機器
LeapMotion ネックマウンタ (¥1,650 - ¥1,700)
LeapMotion用ネックマウンタ - 129製作所 - BOOTH

おまけ

Luppet + LeapMotionの精度が気になるから見てみたいという意見があったので。
標準の環境でもキーボード、マウスの操作がなんとなく分かるのと
じゃんけんをするぐらいならできます~


実際にVTuberとして活動する場合は
UltraLeap IR170をセットアップして、より精度の高い手の制御をしたり
パーフェクトシンク対応をしてより豊かな表情を見せれる方がいいとは思いますが、最低限のお手軽セットだとこんな感じ


最後まで読んでくれたの嬉しいので、ついでに推しの歌でも聞いてって欲しいしチャンネル登録もしてほしい( ´∀`)
www.youtube.com


youtube.com

UE4 Material Expressionの気持ちが知りたい

環境

UE4.27.0

概要

Material Expressionの実装が知りたくて追っていました。
docを読むだけで使い方は分かるものの、具体的な実装までは分からないことが多いためです。
Material FunctionなんかはEditorから実装が見れてお手軽ですね!

Material Expressionの例
図のような緑のノード。ダブルクリックしても実装が見れません。
f:id:PaperSloth:20220407192256p:plain
Desaturationのdocは以下。
Color Expressions | Unreal Engine Documentation

Material Functionの例
図のような青のノード。ダブルクリックすると実装が見れます。
f:id:PaperSloth:20220407192344p:plain

f:id:PaperSloth:20220407192354p:plain


Material Expression自体はかなりの種類があります。
詳細は以下のdocに目を通ると良いでしょう。(以下はUE5のdocです)
Unreal Engine Material Expressions Reference | Unreal Engine Documentation


Material Expressionはどこから見れるの?

1. HLSL Codeから追う

Material EditorのWindow -> Shader Code -> HLSL Codeを開けばMaterial 全体のHLSLが見れます。
f:id:PaperSloth:20220407192905p:plain

適当なEditorにコピペして「desaturation」を検索しますがヒットしません。
これは困った。
f:id:PaperSloth:20220407193107p:plain

実際にはちゃんと実装されているんですが、それは後程解説します。
因みにIncludeされている .ush ですが、これらはUnreal Shader Fileの略称(だと思います)で、色々と便利な関数等が登録されています。

2. MaterialExpression.cpp を追う

実際のMaterial Expressionの実装についてはMaterialExpression.cpp を追うのが一番確実でしょう。
Engine\Source\Runtime\Engine\Private\Materials\MaterialExpression.cpp 内に記述があります。

Desaturationの実装については、UMaterialExpressionDesaturation() を追っていきます。

UMaterialExpressionDesaturation::UMaterialExpressionDesaturation(const FObjectInitializer& ObjectInitializer)
    : Super(ObjectInitializer)
{
    // Structure to hold one-time initialization
    struct FConstructorStatics
    {
        FText NAME_Color;
        FText NAME_Utility;
        FConstructorStatics()
            : NAME_Color(LOCTEXT( "Color", "Color" ))
            , NAME_Utility(LOCTEXT( "Utility", "Utility" ))
        {
        }
    };
    static FConstructorStatics ConstructorStatics;

    LuminanceFactors = FLinearColor(0.3f, 0.59f, 0.11f, 0.0f);

#if WITH_EDITORONLY_DATA
    MenuCategories.Add(ConstructorStatics.NAME_Color);
    MenuCategories.Add(ConstructorStatics.NAME_Utility);
#endif
}

#if WITH_EDITOR
int32 UMaterialExpressionDesaturation::Compile(class FMaterialCompiler* Compiler, int32 OutputIndex)
{
    if(!Input.GetTracedInput().Expression)
        return Compiler->Errorf(TEXT("Missing Desaturation input"));

    int32 Color = Compiler->ForceCast(Input.Compile(Compiler), MCT_Float3, MFCF_ExactMatch|MFCF_ReplicateValue),
            Grey = Compiler->Dot(Color,Compiler->Constant3(LuminanceFactors.R,LuminanceFactors.G,LuminanceFactors.B));

    if(Fraction.GetTracedInput().Expression)
        return Compiler->Lerp(Color,Grey,Fraction.Compile(Compiler));
    else
        return Grey;
}
#endif // WITH_EDITOR

パッと見は何をしているのかよくわからないかもしれませんが、実装自体は非常にシンプルです。
UMaterialExpressionDesaturation::Compile() 内の一部分だけを見ればよいです。

int32 UMaterialExpressionDesaturation::Compile(class FMaterialCompiler* Compiler, int32 OutputIndex)
{
    ...
    int32 Color = Compiler->ForceCast(Input.Compile(Compiler), MCT_Float3, MFCF_ExactMatch|MFCF_ReplicateValue),
            Grey = Compiler->Dot(Color,Compiler->Constant3(LuminanceFactors.R,LuminanceFactors.G,LuminanceFactors.B));

    if(Fraction.GetTracedInput().Expression)
        return Compiler->Lerp(Color,Grey,Fraction.Compile(Compiler));
    else
        return Grey;
}

入力されたColorにDot() でLuminanceFactorsを指定し
入力されたFractionがある場合にはLerpして、ない場合にはDot() の結果を返しています。
LuminanceFactors はUMaterialExpressionDesaturation() で定義されており、カラーからモノトーンな色に変換するための適当な係数です。

LuminanceFactors = FLinearColor(0.3f, 0.59f, 0.11f, 0.0f);

3. HLSL Codeでは追えないの?

1. でコピーしたHLSLをもう一度見てみます。
3000行近いコードが生成されて何がなんだか……という感じなのですが、実際に見るべきは
CalcPixelMaterialInputs() 内を見れば良いです。

void CalcPixelMaterialInputs(in out FMaterialPixelParameters Parameters, in out FPixelMaterialInputs PixelMaterialInputs)
{
    // Initial calculations (required for Normal)

    // The Normal is a special case as it might have its own expressions and also be used to calculate other inputs, so perform the assignment here
    PixelMaterialInputs.Normal = MaterialFloat3(0.00000000,0.00000000,1.00000000);


    // Note that here MaterialNormal can be in world space or tangent space
    float3 MaterialNormal = GetMaterialNormal(Parameters, PixelMaterialInputs);

#if MATERIAL_TANGENTSPACENORMAL
#if SIMPLE_FORWARD_SHADING
    Parameters.WorldNormal = float3(0, 0, 1);
#endif

#if FEATURE_LEVEL >= FEATURE_LEVEL_SM4
    // Mobile will rely on only the final normalize for performance
    MaterialNormal = normalize(MaterialNormal);
#endif

    // normalizing after the tangent space to world space conversion improves quality with sheared bases (UV layout to WS causes shrearing)
    // use full precision normalize to avoid overflows
    Parameters.WorldNormal = TransformTangentNormalToWorld(Parameters.TangentToWorld, MaterialNormal);

#else //MATERIAL_TANGENTSPACENORMAL

    Parameters.WorldNormal = normalize(MaterialNormal);

#endif //MATERIAL_TANGENTSPACENORMAL

#if MATERIAL_TANGENTSPACENORMAL
    // flip the normal for backfaces being rendered with a two-sided material
    Parameters.WorldNormal *= Parameters.TwoSidedSign;
#endif

    Parameters.ReflectionVector = ReflectionAboutCustomWorldNormal(Parameters, Parameters.WorldNormal, false);

#if !PARTICLE_SPRITE_FACTORY
    Parameters.Particle.MotionBlurFade = 1.0f;
#endif // !PARTICLE_SPRITE_FACTORY

    // Now the rest of the inputs
    MaterialFloat3 Local0 = lerp(MaterialFloat3(0.00000000,0.00000000,0.00000000),Material.VectorExpressions[1].rgb,MaterialFloat(Material.ScalarExpressions[0].x));
    MaterialFloat Local1 = MaterialStoreTexCoordScale(Parameters, Parameters.TexCoords[0].xy, 0);
    MaterialFloat4 Local2 = ProcessMaterialLinearColorTextureLookup(Texture2DSampleBias(Material.Texture2D_0, Material.Texture2D_0Sampler,Parameters.TexCoords[0].xy,View.MaterialTextureMipBias));
    MaterialFloat Local3 = MaterialStoreTexSample(Parameters, Local2, 0);
    MaterialFloat Local4 = dot(Local2.rgb, MaterialFloat3(0.30000001,0.58999997,0.11000000));
    MaterialFloat3 Local5 = lerp(Local2.rgb,MaterialFloat3(Local4,Local4,Local4),MaterialFloat(0.75000000));

    PixelMaterialInputs.EmissiveColor = Local0;
    PixelMaterialInputs.Opacity = 1.00000000;
    PixelMaterialInputs.OpacityMask = 1.00000000;
    PixelMaterialInputs.BaseColor = Local5;
    PixelMaterialInputs.Metallic = 0.00000000;
    PixelMaterialInputs.Specular = 0.50000000;
    PixelMaterialInputs.Roughness = 0.50000000;
    PixelMaterialInputs.Anisotropy = 0.00000000;
    PixelMaterialInputs.Tangent = MaterialFloat3(1.00000000,0.00000000,0.00000000);
    PixelMaterialInputs.Subsurface = 0;
    PixelMaterialInputs.AmbientOcclusion = 1.00000000;
    PixelMaterialInputs.Refraction = 0;
    PixelMaterialInputs.PixelDepthOffset = 0.00000000;
    PixelMaterialInputs.ShadingModel = 1;


#if MATERIAL_USES_ANISOTROPY
    Parameters.WorldTangent = CalculateAnisotropyTangent(Parameters, PixelMaterialInputs);
#else
    Parameters.WorldTangent = 0;
#endif
}

またしても長くて何がなんだか……という感じなのですが、実際に見るべき箇所はたったの2行です。

MaterialFloat Local4 = dot(Local2.rgb, MaterialFloat3(0.30000001,0.58999997,0.11000000));
MaterialFloat3 Local5 = lerp(Local2.rgb,MaterialFloat3(Local4,Local4,Local4),MaterialFloat(0.75000000));

この処理をよく見るとDesaturation() の記述はないものの、実行している処理は先程MaterialExpression.cpp で見たものと同じです。
入力されたColor に対してdot() で LuminanceFactors = FLinearColor(0.3f, 0.59f, 0.11f, 0.0f);と同じ係数を使用して
入力されたFractionに対してLerp() を使用しているだけです。

まとめ

MathExpressionの実装がどうなっているのか知りたくて色々と追ってみましたが
上記のようにEngine側のCodeとHLSL Codeから追うことができます。

何かしらの参考になれば幸いです!
以上です。

書籍紹介 箱が一緒に働く人が読んでたら嬉しい書籍一覧

概要

※そのうちまとめる!!!!!!
まだ書いてる途中だけど、とりあえずババーンと公開しちゃうか~の気持ち
オススメ度とか、本の理解しやすさ、オススメ理由くらい書きなー?
とりあえず一部を列挙しただけ


最近、別業種でオススメ書籍一覧を公開されている方の記事を見てこれは良いなと思ったのでゲーム/AR/VRえんじにゃー向けに書いてみようと思って書きなぐりました。
割と仕事に関係ない趣味のものがちょいちょい混ざってます

ざっくり箱の経歴

ツール/言語 ジャンル 期間
Unity/C# モバイル運営/開発 1年
UE4/C++ 家庭用ゲーム 3ヶ月(会社ないなったので短め)
Unity/C# モバイル新規開発 1年
UE4/C++ VR R&D 1年半
C++ ツール作成 2年半
Unity/C# AR R&D 5ヶ月

実務的にはUE4とUnityトントンぐらいですね
趣味としてはUE4の方が長めという感じです
こういう経歴の箱がなんか良いらしいって言ってたなぁぐらいの感じで読んでもらえればです
ここのリンクから買おうがどこから買おうが、箱には何の利益にもなりません。

エンジニアリング (全般)

エンジニアリング (Animation)

エンジニアリング(Graphics)

Direct3D12 ゲームグラフィックス実践ガイド

Direct3D12 ゲームグラフィックス実践ガイド | Pocol |本 | 通販 | Amazon

ゲーム制作者になるための3Dグラフィックス技術 改訂3版

ゲーム制作者になるための3Dグラフィックス技術 改訂3版 | 西川 善司 |本 | 通販 | Amazon

MFSR AC Vの沼にハマって・・・2年目

この記事は もなふわすい~とる~む Advent Calendar 2021 - Adventar
12/17(17日目)の記事です。
Tech系とはちょっと分けたかったのですが、空いてる枠を埋めてたら3つ書くことになりました。
前々回の(といってもTech系という程でもないです)
papersloth.hatenablog.com
前回の
https://papersloth.hatenablog.com/entry/2021_mnfw_ac_02_day8papersloth.hatenablog.com



昨年に引き続き雑多な自分語り日記みたくなってしまった(申し訳NASA)

昨年の記事
papersloth.hatenablog.com
papersloth.hatenablog.com

巻乃もなか さんとは

Twitter巻乃もなか🐑VTuber 12/10 もなふわ3周年🥰 (@monaka_0_0_7) | Twitter
SHOWROOMもなふわすい〜とる〜む 🐑 - Profile - SHOWROOM
YouTubeもなふわちゃんねる - YouTube
・FANBOX:巻乃もなか|pixivFANBOX


カメラと星とマンガとコンビニスイーツが好きで生活リズムガタガタな女子校生(らしいです)
他にも工具やバイクが好きだったりと多趣味で歌も魅力的なかわいらしい子です。
雑学についても幅広い知識を持っており、雑談配信でも聞いていて飽きることがないのが魅力です!

ヤンデレとよく間違われるけど皆への愛が強いだけ(らしいです...)

要約するとみんなの最推しのエンジニアです(?)


そして、最近の出来事としては「池袋東口 肉寿司」の看板娘としても選ばれました!
掲出期間及びコラボメニューの販売期間は2021/12/24(金)~2022/3/31(木)を予定されています。
肉寿司でニッポンを元気に!『池袋東口 肉寿司』看板娘オーディション - SHOWROOM

沼にハマって2年目・・・

冒頭でも述べたように巻乃もなか さんはカメラやバイクが好きな子です。
で、それに触発されて昨年の記事ではカメラとバイクを買った話をしました。
あれから1年が過ぎて

カメラの話

見事にカメラ沼に沈みました。
結論から言いますとカメラが増えました。

どうせいっぱい買うでしょ!ってことで防湿庫が生えてきました。
これについては安かろう悪かろうで、ないよりマシ程度の物でしたが( ´∀`)


で、巻乃 さんが入門用としてオススメしていたα6000を買ってから少し経って……
最初に生えてきたのがこの子でした。
SONY α7C です!
買った理由はですね、なんかTLのみんながポンポン買ってたからです・・・w
この頃はカメラ片手に色んな物や風景を撮って楽しんでいました!

巻乃もなか さんに出会えたおかげで、自然のプラネタリウムを満喫することもできました。
出会わなければ、生涯拝むことがなかった最高の景色でした・・・

カメラがあるとついつい色んなところに足を伸ばしたくなるものです。


続いて買ったのがこちら!
NICON COOLPIX B500
こちらはですね、巻乃もなか さんが配信中に「月を撮るのはいいぞ~!」という話をしており
とりあえず入門用で!ってことで買ってみました。
これまた今までに見れなかった知らない世界を知ることができました・・・
本当に感謝しかないです。

巻乃もなか さんが撮った月の写真はこちらの記事で見れるので、気になる方は是非ともFANBOXにご加入を!
www.fanbox.cc



巻乃もなか さんに出会って、カメラ沼にハマったおかげで
カメラ好きの友人とストリートスナップに出かけたりと楽しみが増えました。


そして、バイクも買ったので行動範囲が広がって色々なところで素敵な景色に出会えました。


最後に買ったのが
RICOH GR IIIです!
f:id:PaperSloth:20211107194751j:plain
GR IIIを買ったきっかけは、巻乃もなか さんがGR IIを持っていて
桜の写真がとても美しかったことと、GR IIIの無骨なデザインに惹かれたからです!

GR IIIはめちゃくちゃ万能なカメラで、バイクで出かける際にも気軽に持っていけるので大変重宝しています!


カメラのファインダー越しでしか見られない景色を知ることができたのは全て巻乃もなか さんのおかげです!
こんなに楽しい世界を教えてくれたことに本当に本当に感謝しています!!!


バイクの話

昨年の記事ではバイクの話の最後にこんなことを書いていました。

そのうち中型、大型2輪の免許も取ろうかなと思っています。

結論から言いますと、その半年後には中型/大型2輪免許を取りました。
で、気が付いたら中型と大型のバイクを納車していました。

普通自動二輪(中型バイク)免許取得日:4/6
大型自動二輪(大型バイク)免許取得日:5/11
中型バイク(Ninja 150 RR)納車日:5/15
大型バイク(YZF-R1)納車日:6/12

免許取得と購入のペースが控えめに言って頭おかしいんですね。



それぞれ、購入のきっかけとしては
Ninja 150RRについては、巻乃もなか さんが配信の中で
「2st(2ストロークエンジン)のバイクのオイルの独特の匂いが好き」って話をしていて

2stのバイクに乗ってみたいな~と思って探したのがきっかけです。
時代に逆行してエコとは真逆の位置にいる対極的なバイクですが
2st独特の加速感が楽しく、メンテが大変で素人の自分には敷居が高いバイクでしたが
買ってからというもの、バイクに乗る喜びをより一層深くしれて、本当に楽しいです。

YZF-R1購入のきっかけはフォロワーが「200psの世界はいいぞ」って言ってたので
割となんとなくの興味で買いました。(自分のYZF-R1は型が古いので152psです)


バイクを買ってからというもの、行動範囲が広がってたくさんの景色を見ることができました。

念願のさわやかにも行くことができました!バイク万歳!

他にもバイクレンタルでNinja 250やMT-03やMEGURO K3に乗ったりと楽しみが増えてハッピーです( ´∀`)
f:id:PaperSloth:20211107200725j:plain
f:id:PaperSloth:20211107200924j:plain

まとめ

推しに出会えたおかげで、カメラ沼とバイク沼にハマって
人生の楽しみが本当にたくさんたくさん増えました!

出会えていなかったら絶対に見ることができなかった景色が見れて
出会えていなかったら絶対に行くことがなかったであろう場所に行けました

自分の人生を大きく変えた出会いというのはこれまでも沢山ありましたが
ここまで大きく変えたのは最初で最後なんじゃないかと思います。

推し事はいいぞ。
「お前もMDCにならないか?」


以上、最高の景色と楽しい毎日をありがとう!
f:id:PaperSloth:20211107201416j:plain
f:id:PaperSloth:20211107201419j:plain

UE4 推しに学ぶMaterial入門

この記事は もなふわすい~とる~む Advent Calendar 2021 - Adventar
12/8(8日目)の記事です。
先日12/7はこまつさんのLooking Glass Portrait用の推しの画像を3D TextureでUnityに召喚する記事でした。
GitHub - troubear/MonafuwaGlass: もなふわすい~とる~む Advent Calendar 2021 12/7(7日目)の記事


環境

UE5.0.0 Early Access 2
UE5を使用していますが、UE4でも同様に動作します。

Texture2D To CubeMap

Material 全体像は以下です
f:id:PaperSloth:20211205021215p:plain

これだけでTexture2DをCubeMapに変換してくれます。
Materialの設定は「Unlit」にして「Two Sided」を有効化しています。

あとは特大Sphereに割り当てるだけで、ミテルゾSkyの出来上がり!
難点としては元々CubeMap想定で作られていない画像をCubeMapに変換するため、画像が伸びてしまってかわいさが半減します。
f:id:PaperSloth:20211205021518p:plain

Mosaic PostProcess

Material 全体像は以下です
f:id:PaperSloth:20211205022629p:plain

Materialの設定としては「MaterialDomain: Post Process」です
あとはこのMaterialをPostProcess Volumeに追加
f:id:PaperSloth:20211207151951p:plain

特大Planeに推しのTextureを割り当てるだけでなんだか意味深な感じになります。やったね!
f:id:PaperSloth:20211207151813p:plain

SphereMaskで穴あき PostProcess

Material全体像は以下2枚です
前半
f:id:PaperSloth:20211207153008p:plain
後半
f:id:PaperSloth:20211207153025p:plain

こちらもMaterialの設定としては「MaterialDomain: Post Process」です
先程同様にMaterialをPostProcess Volumeに追加
f:id:PaperSloth:20211207153106p:plain

特大Planeに推しのTextureを割り当てるだけでまたなんだか意味深な感じになります。やったね!!
f:id:PaperSloth:20211207153251p:plain

RGBずらしPostProcess

Material全体像
f:id:PaperSloth:20211207160437p:plain

シンプルにOffsetXとYのRGBチャンネルに適当な値を入れてズラすだけです。
こちらもMaterialの設定としては「MaterialDomain: Post Process」です
先程同様にMaterialをPostProcess Volumeに追加
f:id:PaperSloth:20211207160528p:plain

特大Planeに推しのTextureを割り当ててそれっぽい絵になったことが確認できました。
f:id:PaperSloth:20211207160614p:plain

おまけ
PostProcessInput0 をRGBに割り当てるだけで以下のようにそれっぽいグレーな絵になりますね
f:id:PaperSloth:20211207154128p:plain
f:id:PaperSloth:20211207154307p:plain

ババーンって感じの集中線のWidget用Material

Material全体像
f:id:PaperSloth:20211207162951p:plain

なんかエイってやってバーンなやつです
Noise作ってLerpで適当な形にくり抜くだけのシンプル構成です

あとはWidgetを作ってWidget内にImageを置いてMaterialを割り当て
f:id:PaperSloth:20211207163133p:plain

LevelBlueprintでWidgetを作成して画面に割り当て
f:id:PaperSloth:20211207163139p:plain

あとはPlayすればババーンって感じになります
f:id:PaperSloth:20211207163441g:plain


Material 入門

ここまでは割とお遊び的なアレです。

ちゃんとMaterialの説明をしていくよ。
UE4のPBRMaterialでよく使う以下のParameterについて
・BaseColor
・Metallic
・Specular
・Roughness
・Emissive Color
・Opacity
・Opacity Mask
Emissive Colorは例外ですが、基本的な考え方としては色情報やParameterは0~1の範囲で扱います。
これはもう一方のUなエンジンでも大体同じですね。
大雑把に言ってしまうと色情報の白が1で黒が0です。
(実際はUE4のBaseColorに1以上の割当をしてしまっても不具合にはなりません。1, 1, 1と同じ結果になるように処理されています)

階調反転

OneMinus(1-x)のノードを使用します。
今回使用しているようなカラー画像に適用するとヒェって結果になりますが
白黒の画像を用意するとわかりやすいですね。
OneMinusはその名前の通りで 1から入力された値を引いたものになります。
f:id:PaperSloth:20211207165105p:plain

色の合成について

Addは色情報の加算
Multiplyは色情報の減算
f:id:PaperSloth:20211207165905p:plain

上記で上がベースのTexture、下がMask用のテクスチャとしています。
黒(0, 0, 0)にベースのTextureが加算されるとベースのTextureの色がそのまま出力されます。
逆に白(1, 1, 1)にベースのTextureを加算してもBaseColor的には1, 1, 1になります
f:id:PaperSloth:20211207170325p:plain

Emissiveの場合は若干光ります
f:id:PaperSloth:20211207170406p:plain


次にMultiply(乗算)を行った場合ですが
この場合は白(1, 1, 1) x ベースTextureではベースTextureの色がそのまま出力されます。
逆に黒(0, 0, 0) x ベースTextureでは0 と掛け合わせているため、黒(0, 0, 0)が出力されます。

これがShaderでMaskする際や色計算をする際の基本になります。

Subtract(減算)については、Multiply(乗算)と逆の結果になります。
f:id:PaperSloth:20211207201107p:plain

また、SubtractしてOneMinusをするとAddと逆の結果になります。
f:id:PaperSloth:20211207201245p:plain


おまけ
Maskした範囲に色を乗せる例
f:id:PaperSloth:20211207201506p:plain

色をAddする際にTextureを割り当てて別のMaskと加算といったこともできます。
f:id:PaperSloth:20211207201756p:plain

0 ~ 1で収めるということについて

先程の画像でさらっとsaturateが登場しています。
このノードは入力された値を 0 ~ 1の範囲に収めるというものです。
例えば、R: -1, G: 100, B: 0のような色があった場合に 0 - 1の範囲に収めて
R: 0, G:1, B: 0といった結果になります。

saturateとClamp(in, 0, 1)は同じ結果です。
f:id:PaperSloth:20211207202043p:plain

0 - 1の範囲で計算が行われるのがベースということを踏まえて
R:-1, G:100, B:0 に対してsaturateを行った後にOneMinusを行えば
R:0, G: 1, B: 0からR: 1, G:0, B:0になります。
f:id:PaperSloth:20211207202318p:plain

色の合成についてのまとめ

Material(Shader)には他にもUVをこねこねしたり、頂点シェーダーをこねこねしたり、Timeを活用したり
語るべきことは沢山あるんですが、基本としては上記の原則のように0~1の範囲で色が表される
ということを抑えておけばいいかと思います。
この色をこねこねするということ、0 - 1の範囲で値を計算するということについてはもう一方のUのエンジンでも基本的には考え方は同じです。

おまけ。Timeを活用した例
f:id:PaperSloth:20211207202902g:plain
f:id:PaperSloth:20211207202932p:plain

まとめ

PostProcess多めであんま画像関係ないじゃん!って感じになってしまった( ´∀`)
かわいいからヨシッ!

※穴開けに関して、昔見かけたツイートをそのまま記事にしたような感じなんですが、誰のどのツイートか忘れてしまった……

推しをLooking Glass Portraitに召喚する方法

この記事は もなふわすい~とる~む Advent Calendar 2021 - Adventar
12/5(5日目)の記事です。

はじめに

こんなこともあろうかと(?)巻乃もなかさんがLooking Glass Portrait(以下LGP)用に画像データを用意してくれています!(かわいい!やったー!)
www.fanbox.cc

環境構築

LGPに画像を転送するには、「HoloPlay Service」と「HoloPlay Studio」をダウンロードする必要があります。
以下のURLからDLすることができます。
DLをするにはアカウントが必要なので、登録をする必要があります。
Looking Glass Factory. The World's Leading Holographic Display Company.

HoloPlay ServiceはHoloPlay Studioを起動する際に必要で
HoloPlay StudioはLGPに画像を転送する際に使用します。
HoloPlay Serviceを起動していない状態でHoloPlay Studioを起動すると以下のようにエラーが出ます。
f:id:PaperSloth:20211205004357p:plain

HoloPlay Studioを使ってみる

まずは巻乃もなかさんのFANBOXからLGP向けの画像をDLします。
あとはHoloplay StudioにD&Dもしくは、右上の「ADD HOLOGRAM」から画像をImportします。
f:id:PaperSloth:20211205002659p:plain

続いて、Importする際のFile Formatを「Quilt Photo and Video」にします。
f:id:PaperSloth:20211205002918p:plain

次にImportしたファイルを選択してPropertyの設定を行います。
今回はいずれの画像も「Columns: 8」「Rows: 6」ですね。
f:id:PaperSloth:20211205003200p:plain


さて、ここでSYNC PLAYLISTを押下して同期!!
同期中
f:id:PaperSloth:20211205005055p:plain
同期完了
f:id:PaperSloth:20211205005106p:plain

再生できた!やったー!かわいい!!
f:id:PaperSloth:20211205005423j:plain

PlayListを同期したあとはHDMIケーブルを抜いても再生ができますので、USB-Cで給電さえできていればいつでも見れます!

まとめ

推しがmy new gearで喜ぶ可愛い姿を見てくれ