【UE5】マテリアルの向きを変更する

# あらすじ
ある日の朝、僕の運命が変わった
プログラマー歴２年。コードを書いてはバグを潰し、またコードを書いては新たなバグを見つける毎日。そんな僕がある日、ひょんなことからオフィスの内装を再現する羽目になった。

「それ、君がやっといてくれないか？」

突然の上司の一言。会議室で、カジュアルに放たれたその言葉に、僕は一瞬ポカンとしてしまった。僕が再現する？ オフィスの内装を？ その、リアルタイムで3Dモデリングして、カメラの視点をぐるぐる動かすようなやつを？

「いや、ちょっと待ってください…」と僕は言いかけたものの、上司の視線が「君の仕事だよね？」という明確な意思を含んでいたので、結局、言葉にはできなかった。

その上司が言うには、どうやらオフィスの内装を「Unreal Engine」で再現してほしいとのこと。これまでの僕の仕事といえば、主にシステム開発だ。UIとか、データベースの最適化とか、いやむしろエラーの取り扱いがメインだったはずだ。でも、オフィスのインテリア？ Unreal Engineって、あのゲーム開発でよく聞くエンジンでしょ？ とてもじゃないけど、僕の専門分野じゃない。

「Unreal…？ ああ、分かりました。」と、つい言ってしまった。

その日から、僕の頭は「これどうすればいいんだ…？」と常にそのことでいっぱいだった。

自分のデスクに戻り、Googleで「Unreal Engine オフィス内装 再現」なんて検索し始めたものの、出てくるのは派手なゲームの映像ばかり。僕がやらなきゃいけないのは、リアルで落ち着いた、無機質なオフィスの再現だというのに。

まずはエンジンのインストールから始めることにしたが、正直言って、これまで「コンパイラがうんたら」とか「デバッグがどうたら」とか、専門的なことばかり触ってきたので、3Dモデリングなんて全然経験がない。

「やれやれ、こんなことになるなんて…」と、僕はひとしきりため息をつきながら、パソコンの前に座った。

こうして、僕のUnreal Engine初心者としての試練が、静かに始まったのだった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967203/5920abc1-4d84-0353-741a-74d1408d183e.png)
長い

# 向きを変更する方法

答えだけ知りたい方はこの設定パクればOKです。お疲れ様でした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967203/4bbbf93b-083d-f1f9-aeb4-16735b4dfb17.png)

## 作り方と解説

対象のマテリアルをダブルクリックし、マテリアルエディタを開く
例としてデフォルトで存在する「M_Wood_Walnut」の木目を横→縦に変更してみる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967203/135a9378-22c4-0900-88b8-fcbf2a79aae1.png)
今回の主役🥳

:::note warn
警告
この記事は初心者が独断と偏見で解説しています。
当ページを参照して発生した問題等については一切責任を負いません。
:::

まずこちらの「M_Wood_Walnut」はマテリアル素材の本体になります。
素材の色や位置や密度諸々を編集可能ですが、神様情報になります。
よってこれを直接操作してしまうと、このマテリアルを適応しているさまざまな箇所へのインパクトが発生してしまいます。

今回の目的はあくまで「向きを変更する」ですが、厳密には「特定のアクタに対してのみ向きを変更して適応したい」だと思ってください。
このような用途の場合、マテリアル本体ではなくマテリアルインスタンスを適応するのが良いかと思います。

### インスタンスの話　
マテリアルインスタンス（以下MI）を作成して適応すると、特定のパラメータにおいて神様であるマテリアル（以下M）の影響を受けずに任意の設定を引き継ぐことが可能です。

例えばMが梅おにぎりだとした場合に、具材可変のMIを定義することができます。
Mを直接リンクさせたおにぎり要素は全て具材が梅に固定されてしまいますが、MIをリンクさせたおにぎりはおかかや昆布など任意の具材に設定することができます。
しかも、Mにリンクした梅おにぎりにインパクトを与えずに、全くの別物としてMIおかかおにぎりを生成できます。・・・説明が難しいですね。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967203/81bbe45a-0ca4-2c07-2080-e0bf6984c65d.png)

一方で、全てのアクタに対してMを適応している場合は、1つの対象のみをツナマヨに変更すると、全てのアクタがツナマヨに変更されてしまうので注意です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967203/2ae6f805-e0b6-eca7-2cf0-68adb98ae4dd.png)

何言ってるか分からなくなってきましたが、Go言語のインターフェース等と同じです。


## マテリアルエディタでの編集
前述の通り、今回は特定のアクタに対してのみ編集したマテリアル情報を用います。
つまり、任意の設定で簡単に縦と横を切り替えられる必要があります。

編集したいマテリアルのテクスチャ部分（TextureSample等）に以下を繋げていきます。
左から見てきます。
 - TextureCoordinate
     - テクスチャの座標を取得します。今回は縦と横の情報を取得するイメージです。
     - 今回はUtiling（横座標）とVtiling（縦座標）を利用します。
 - CompornentMast
     - 受け取った情報の中で特定の要素を出力するイメージです。
     - 今回はRがUtiling、 GがVtilingに該当します。
 - AppendVector
     - 受け取った値を結合します。
     - 今回は縦横を入れ替えるためにあえてCompornentMastで分断した情報をここで再度合成しているイメージになります。
 - ScalarParameter
     - マテリアルインスタンスを生成した際に、操作可能なパラメータを指定するものです。（上の例だとおにぎりの具材）
     - 「1」を押しながら左クリックすると定数が作成可能ですが、作成した定数を右クリックで「パラメータに変換」でも作成することが可能です。
 - Switch
     - 条件分岐箇所です。
     - 今回はデフォルトが横向き、ScalarParameterで値を変更すると縦向きになる条件にしたいと思っています。

※マテリアルエディタの再掲
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967203/4bbbf93b-083d-f1f9-aeb4-16735b4dfb17.png)
上のAppendVectorを引くと柄が縦方向、下のAppendVectorを引くと柄が横方向（デフォルト）になる設定です。Switchのデフォルト（どの条件にも合致しない場合）またはScalarParameterが0〜1未満の場合には横向き、1〜2未満の場合には縦向きになります。

## マテリアルインスタンス上での編集
編集したマテリアルをコンテンツブラウザで開き、右クリックで「マテリアルインスタンスを作成」を選択します。これで先ほど設定したScalarParameterが可変になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967203/a199cba5-e172-0213-12b1-d3612bdef2b7.png)
※命名規則の「M_xxx」はマテリアル、「MI_xxx」はマテリアルインスタンスを指しているらしい。

任意のアクタに対して作成した”マテリアルインスタンス”を適応しておきましょう。
マテリアルインスタンスの編集画面を開き、自身で定義したScalarParameterの値があるか確認します。（なければマテリアルエディタの保存がされていない説）

![スクリーンショット 2025-01-11 19.52.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967203/60fa24fc-6e54-5061-e4ff-6681d297b4a3.png)
→Global Scalar Parameter

前述の通り、こちらの値を1に変更すると木目が縦向きになります。
同じマテリアルインスタンスを適応しているアクタはこの時点で全て縦向きになりますが、マテリアルを直接適応しているアクタに対するインパクトはありません。
![スクリーンショット 2025-01-11 19.52.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967203/d9c463f1-3b92-4f76-0010-ba75336cf6e2.png)

以上、解散！

# 参考
https://uehow.web.fc2.com/Contents/Jpn/UE4/Material/NodeReference_Root/MaterialNodeReference_All.html#anchor_Math&gsc.tab=0

https://historia.co.jp/archives/34433/

https://argonauts.hatenablog.jp/entry/2023/09/27/191653