Zenn
🌊

UE5(Unreal Engine)マテリアル解説

2024/10/11に公開
ゲーム開発
ゲーム
3DCG
cg
UE5
tech

マテリアルについて解説します。

簡単に言うと、マテリアルは物体の外観、
つまり表面の色、模様、光の反射や凹凸具合を管理するものです。

現在、以下よりオープン価格５００円でUE５（アンリアルエンジンン）の基礎を優しく極める本を発売中です。
https://zenn.dev/ryu_takatsukasa/books/d22a6992bce434
前半は無料でお読みいただけますので、よろしければご検討くださいませ。

マテリアルの利点

マテリアルの便利な点は、一度作成すればあらゆる物体に適用でき、
その色や形状を簡単に変更できることです。

これにより、デザイン作業が効率化され、クリエイティブな表現が広がります。

マテリアルの作成手順

では、実際にマテリアルを作成してみましょう。

フォルダの作成

まず、コンテンツブラウザの左側でAll ＞＞ My_Contentのフォルダを選択します。


次に、右側でカーソルを合わせ、右クリックして新規フォルダを選択します。


フォルダの名前は「My_Material」としておきましょう。

マテリアルの作成

「My_Material」フォルダ内に入ったら、右クリックし、「マテリアル」を選択します。

これで、フォルダ内にマテリアルのアイコンが表示されますので、ダブルクリックして開きます。

マテリアルの詳細設定を開く

すると、詳細画面が表示されます。
マテリアルには多くの機能があるため、初めは基本的な設定を理解することが重要です。

背景やゲームを作成する過程で、作りたいシーンに合わせて
徐々に機能を理解していくことをおすすめします。

ではさっそく、次章で基本的な機能をみていきましょう。

マテリアルエディタの基本操作

まず、作成したマテリアルをダブルクリックすると、マテリアルエディタが開きます。
このエディタの上部にはツールバーが表示され、画面内の機能の検索や設定の保存が行えます。

ツールバーの機能

ツールバーからは、よく使う機能を利用できますが、
その他のメニュー項目については頻繁に使用するものではないため、
今後の講座で必要に応じて解説します。

ビューポートの操作

左側に表示されている球体がビューポートです。
ここでマウスのホイールを動かすか、
右クリックを押しながらマウスを動かすことで拡大・縮小ができます。

また、以下の操作が可能です。

マウスホイールの押し込み + ドラッグ

左クリック + ドラッグ

キーボードの「L」 + 左クリック

ビューポートのツール

上に並んでいるバーは、ビューポート画面と同じ機能を持っています。
パースペクティブを選択することで、物体を前後左右さまざまな位置から確認できます。

ここで、ライティングの有無やワイヤーフレームビューも切り替えが可能です。
各ビューの切り替えについては、以下の画像をご覧ください。

背景の表示切替

表示については、現在の物体の背後に映っている建物（背景）を、
背景のチェックボックスを外すことで切り替えることができます。

背景アリの場合

背景ナシの場合

形状の変更

現在表示されている形状は球体ですが、右下のアイコンをクリックすることで、
以下の形状に変更できます。

円柱

平面

立方体

詳細パネルの利用

ビューポートの下には詳細パネルがあります。
ここでは、ビューポートで編集しているマテリアルに関する細かい設定を行うことができます。

このように、マテリアルエディタを使いこなすことで、よりクリエイティブな表現が可能になります。

マテリアルエディタの中心：メインマテリアルノード

マテリアルエディタの中心に位置するのが「メインマテリアルノード」です。
これはマテリアルを編集する重要な部分であり、マテリアルにとっての「心臓」とも言える存在です。

パレットとノードの活用

マテリアルエディタでは、何もないところを右クリックすると、様々なオプションが表示されます。
この表示された一覧をパレットと呼びます。

このパレットに含まれる項目の一部はノードと呼ばれ、
特定の処理を行うようにプログラムされています。

ビジュアルスクリプティングによる直感的な編集

マテリアルは、これらのノードを左から右へ「フローチャート」のように直感的に繋げていくことで作成可能です。

以前はプログラミングに精通したエンジニアしか行えなかった複雑な処理を、
上記によって簡単に行うことができるようになりました。

グラフの各項目

中央のグラフには、ベースカラー、メタリック、スペキュラなどの項目が並んでいます。

これらの項目の左側にあるピンは「入力」を意味し、情報を受け取る部分です。

例えば、赤い色を設定したい場合は、
赤色の情報を持つノードをこのベースカラーのピンにつなげることで、
マテリアルの色を赤に設定できます。

グラフとノードの配置

表示されるグラフやノードは、左クリックを押しながら自由に配置を変えることが可能です。

また、右クリックを押しながらマウスを動かすことで、画面全体の視点を変えることができます。
さらに、マウスのホイールを使って拡大・縮小も可能です。

マテリアル作成の基本：Constantノード

マテリアルを作成する際に非常に重要な基本ノードが「Constant」です。

このノードは、数値を定める（決める）ためのもので、背景やゲーム制作において、
色やキャラクターの速さなど、変わらない情報を一定の値に保存するために使用されます。

Constantノードの追加方法

グラフの左側の空いているスペースで右クリックを押し、
「ノードの検索」画面を開き、constantと入力することでConstantノードを表示できます。

また、何もないところでキーボードの「1」を押しながら左クリックすることでも追加できます。

Constantノードの役割

Constantノードは「整理する箱」のような役割を果たします。
この箱がないと、情報を失う可能性が高まりますが、Constantに情報を保存しておけば、
その情報がどこかに行ってしまう心配はありません。

このConstantノードのおかげで、ゲームのプログラムは安定し、
誤って情報が変更されるのを防ぐことができます。

値の設定と出力

ConstantノードのValue部分に数字を入力することで使用します。
ここに設定した数字により、色や質感、キャラクターの大きさなどを一定の値に指定可能です。

右側のピンは出力ピンで、ここで決定した情報を他のノードに渡す役割を担っています。

Constantノードを使った色と質感の設定

今回は、Constantノードを使用して簡単に色と質感を設定する方法をご紹介します。
このノードを活用することで、マテリアルの見た目を直感的に調整できます。

ワイヤーを使った接続

まず、Constantノードの右側にある出力ピンを左クリックしながらドラッグすると、
ワイヤーが生成されます。

このワイヤーを右側のグラフにある一番上のベースカラーに接続します。

これで、Constantノードの出力ピンと「メインマテリアルノード」の入力ピンが繋がりました。

ワイヤーの移動と削除

接続したワイヤーは、Ctrlキーを押しながらマウスでドラッグすることで、
他の入力端子に移動できます。

また、ワイヤーを削除したい場合は、Altキーを押しながら左クリックすることで簡単に消去できます。

色合いの調整

再度、ワイヤーをベースカラーに接続した後、Valueの値を設定してみましょう。

この0から1の範囲で、黒から白への色合いを調整可能です。

例えば、Valueの値に「1」と入力すると、左側のマテリアルのカラーが白に変わります。

さらに、Valueの値に「0.2」と入力してみると、マテリアルがグレーになります。

質感の調整方法

次に、マテリアルの質感を調整していきます。
質感の設定は、見た目に大きな影響を与える重要な要素ですので、
今後においてオリジナルの風景を作成するうえでは、慎重に行いましょう。

ベースカラーの設定

まず、ベースカラーは、分かりやすいように白に設定しておきたいので、
以下の手順でノードを複製します。

Constantの複製

まず、Constantを選択した状態で、Ctrlを押しながらキーボードの「D」を押します。

これでノードを複製できます。

ベースカラーへの接続

元々あったConstantノードは、右側のグラフのベースカラーに接続します。

ベースカラーの値は「1」に設定して、マテリアルカラーを白にしておきましょう。

Metallicへの接続

複製されたConstantノードは、右側のグラフのMetallicに接続します。

Metalicに接続されているConstantのValueを「１」に設定すると、
マテリアルに金属のような光沢感が出現します。

反対に、Valueを「０」にすると、マテリアルの光沢感が無くなります。

それでは、次にMetalicの下にあるスペキュラーの設定について見ていきましょう。

スペキュラーの設定方法

スペキュラーは、マテリアルが光をどのように反射するかを調整できる重要な項目です。
具体的には、鏡面反射の度合いを表現することができます。
この設定により、マテリアルの質感やリアリティが大きく変わります。

スペキュラーの接続

まず、キーボードの「1」を押しながら左クリックでConstantを出し、
そのピンをスペキュラーに接続してみましょう。

ベースカラーの調整

ベースカラーの値については、白にすると鏡面の度合いが分かりにくくなります。
そのため、ベースカラーは「0」に設定しておきましょう。

スペキュラーの値設定

この状態で、スペキュラーに接続されているConstantのValueの値を「1」に設定すると、
マテリアルが光を反射するようになります。

スペキュラーの値は原則として「0から1」の範囲で設定します。
Valueが「0」の場合は光の反射がなくなり、
値を「1」に近づけることで光をより反射するようになります。

ただし、1より大きい数値を入れると、反射が不自然になることがあるため、
自然な見た目を求める場合には0から1の間で数値を変更することが望ましいです。

このように、スペキュラーの設定を適切に行うことで、
マテリアルの質感を大きく向上させることができます。

ラフネスの設定

次に、ラフネスについて説明します。
ラフネスは、マテリアルの表面の粗さを調整する重要なパラメーターです。
まずは、これまで設定したMetalicとスペキュラーのノードを削除します。

ノードの削除方法

ノードを削除するには、削除したい範囲を左クリックしながらドラッグして選択します。
その後、キーボードのDeleteキーを押すことで、一気に消去することができます。


Constantノードの追加

次に、キーボードの「1」を押しながら左クリックを押して、再度Constantノードを追加します。
そして、この出力ピンを右側のグラフのラフネスに接続します。

ラフネスの効果

この設定によって、左側のマテリアルが金属のようにツルツルになったことが分かります。
ラフネスの値を「0」に設定すると、粗さが取れて金属のように滑らかになります。
一方、値を「1」にすると、粗さが適用され、光沢がなくなりマットな見た目になります。

異方性について

異方性は、物体が光をどのように反射するかを決定する機能ですが、
こちらはあまり設定することはないため省略します。

エミッシブカラーの設定

次に、エミッシブカラーについて説明します。
エミッシブカラーは、物体が光を放つ効果を設定するための重要な機能です。
この設定を使うことで、物体を光らせることができます。

Constantノードの接続

Constantノードをエミッシブカラーに接続します。
このConstantの数値を「1」に設定すると、物体が光を放つようになります。

その他の機能

エミッシブカラー以外の機能については、実際にマテリアルを組み立てながら詳細を説明していきます。これにより、さまざまな質感や効果を実現できるようになります。

Constantノードの検索と使用方法

まず、グラフの左側にある空白の部分で右クリックし、ノードの検索画面を表示させます。

検索バーに「constant」と入力すると、関連するノードが表示されます。

Constantノードの選択

表示された中からConstant4Vectorを選びます。
このノードはキーボードの数字「4」を押しながら左クリックすることで表示させることも可能です。

その他のConstantノード

さらに、Constant2VectorやConstant3Vectorも選択できます。
それぞれのノードを選んで、下にドラッグして配置します。

Constant3Vectorは「3」を押しながら左クリック

Constant2Vectorは「2」を押しながら左クリック

Constantノードの役割

これらのノードには全て「Constant」という文字が付いています。

これにより、複数の項目を組み合わせて出力をする役割を持ちます。
主に色を表現するために使用され、具体的には以下のように機能します。

Constant2Vector

Constant3Vector

Constant4Vector

一般的に、色は3原色（赤・緑・青）を組み合わせて作成され、
これらの色はRGB（Red、Green、Blue）として表現されます。

Constant4Vectorでは、RGBに加えてアルファチャンネル（A）があり、透過度を設定できます。

透明なマテリアルを作成したい場合はConstant4Vectorを使用し、
透明にしない場合はConstant3Vectorで対応できます。

カラー設定の方法

Constant4Vectorを選択すると、左側の詳細パネルにR、G、Bの数値が表示されます。
これらの値は0から1の範囲で調整可能で、例えば赤色を作りたい場合はRを1に設定します。

Constantノードの出力ピンとベースカラーの入力ピンを接続すると、
物体の見た目が赤色に変わります。

カラーピッカーの使用

R、G、Bの値を手動で入力することもできますが、
Constant4Vectorのカラー部分をダブルクリックするとカラーピッカーが表示されます。

このカラーピッカーを使って色を選び、右下の「OK」を押せば、簡単に色を変更できます。
また、スポイトマークを押して任意の場所をクリックすると、その色を反映させることも可能です。


カラーコードの利用

色については、カラーコードという色を表現するための文字列も使用されます。

このカラーコードをHexsRGBに入力することで、特定の色を反映できます。
インターネットで「カラーコード一覧」を検索すれば、
さまざまな色のカラーコードが表示されるので、ぜひ参考にしてみてください。

ノードを活用したマテリアルの組み合わせ

ノードについては、それぞれの条件同士を組み合わせることができます。
複雑なマテリアルになるほど、ノード同士を足したり引いたりする様々な組み合わせが増えていきます。今回は、ノードとノードを足し合わせる機能について紹介します。

Constant3Vectorの作成

まず、キーボードの「3」を押しながら左クリックを押して、Constant3Vectorを表示します。
このConstant3Vectorを選択し、Ctrl + Dで複製します。

次に、上にあるConstant3Vectorを選択し、
左の詳細パネルのConstantのRチャンネルに「1」を入力します。

続いて、下のConstant3Vectorを選択し、
左の詳細パネルのConstantのGチャンネルに「1」を入力します。

ノードの足し合わせ

この2つのConstant3Vectorを足し合わせてみましょう。
グラフ上で右クリックを押し、検索欄に「add」と入力します。

演算の中からAddを左クリックで選択します。

上にあるConstant3Vectorの出力ピンをAddのAの入力ピンにつなぎ、
下にあるConstant3Vectorの出力ピンをAddのBの入力ピンにつなぎます。

最後に、Addの出力ピンをメインマテリアルノードのベースカラーの入力ピンにつなぎます。

すると、赤色と緑色が足されたことによって、左側の物体のカラーが黄色になりました。

カラー R G B
上にあるConstant3Vector 1 0 0
下にあるConstant3Vector 0 1 0
カラー R G B
計算後 1 1 0

計算式で表すと、上記のようになります。

足し算の結果、赤と緑が合わさったことで「黄色」になるという原理です。

Constant4Vectorの使用

次に、下に繋がっているConstant3Vectorを選択してデリートキーで削除し、
4を押しながら左クリックしてConstant4Vectorを表示します。

Constant4Vectorを選択して、Gチャンネルに「1」と入力します。

Constant4Vectorの出力ピンとAddの入力ピンを接続してみると、エラーが表示されました。

下の統計欄には、以下のように記載されています。

このエラーは、足し合わせたもののチャンネル数が一致しないためです。
今回の場合、3つのチャンネルを持つConstant3Vectorと4つのチャンネルを持つConstant4Vectorを足し合わせたため、エラーが発生しました。

なお、チャンネルが1つだけのConstantについては例外です。

Constantノードの使用

Constant4Vectorを選択して削除した後、1を押しながら左クリックでConstantを表示させます。
このConstantを選択して、Valueに「0.5」を入力し、AddのBの入力ピンにつなぎます。

すると、エラーは発生せず、物体のカラーがピンクになりました。
チャンネルを1つしか持たないConstantについては、
足し合わせるもう一つのチャンネルに合わせてくれるのです。

具体的には、3チャンネル持つConstant3Vectorと足し合わせた際には3チャンネルと同様の役割を、Constant4Vectorと足し合わせた際には4チャンネルと同様の役割を担います。

今回の例では、Constantに入れた値はRGBそれぞれに足されるため、計算式は以下のようになります。

カラー R G B
Constant3Vector 1 0 0
Constant 0.5 0.5 0.5
カラー R G B
計算後 1.5 0.5 0.5

赤が1.5と少し強めに出たため、ピンク色になります。

以上が、ノードを足し合わせるAddの機能の説明です。
異なるチャンネル同士は足し合わせられないが、Constantだけは例外であると覚えておいてください。

Multiplyノードの活用法

続いて、ノードの値を掛け算してくれるMultiplyという機能について説明します。
このノードは、異なる値を掛け合わせることでマテリアルに変化をもたらします。

Multiplyノードの追加

まず、グラフ上で右クリックを押して、入力欄に「multi」と打ち込みます。
演算のところにMultiplyが表示されるので、こちらをクリックします。


Constant3Vectorの作成

次に、キーボードの「3」を押しながら左クリックを押して、Constant3Vectorを表示させます。

Constant3Vectorを選択し、左側の詳細タブのConstantのBチャンネルに「1」と入力します。

入力後、Constant3Vectorの出力ピンをMultiplyのAの入力ピンにつなげます。

エミッシブカラーの設定

次に、Multiplyの出力ピンを右側のメインマテリアルノードのエミッシブカラーにつなげます。

Multiplyノードを選択すると、左側のマテリアルエクスプレッションに「Constant A」と「Constant B」の値が設定されているのがわかります。


もし、Constant3Vectorの出力ピンをMultiplyのBに接続していた場合、Constant Aに値を入力できる仕様となっています。

それでは、Constant Bの値に「10」と入力してみましょう。

すると、物体が強く発光しました。

計算の仕組み

これは、元々設定していたConstant3Vectorの値にMultiplyのConstant Bに入力された値が掛け合わされたことによって、エミッシブカラーが受け取る値が変化したからです。

計算式で表すと、以下のようになります。

カラー R G B
Constant3Vector 0 0 1
ConstantB 0 0 10
カラー R G B
計算後 0 0 10

Constant3VectorのBチャンネルに設定した「1」が、
Constant Bで設定した「10」と掛け合わさったことで、
エミッシブカラーに送られるBの値が強くなっています。

Multiplyノードの注意点

Multiplyノードも先ほどの足し算のノードであるAddと同様に、
同じチャンネル数を持つノード同士で掛け合わせることができますが、
異なるチャンネルを持つノード同士の掛け合わせではエラーが出てしまうため、注意が必要です。

マテリアルの基礎を理解する

ここまでがマテリアルの基礎の説明です。

マテリアルには非常に多くの機能があり、
機能だけを覚えようとしても応用する際に忘れてしまう可能性があります。

これを繰り返すことで、マテリアルノードの組み合わせパターンが記憶に定着し、応用が利くようになります。

今の段階では、マテリアルを組む作業が非常に難しく感じるかもしれませんが、この本を参考にしながら、見よう見まねでつなぎ合わせていくだけでも全く問題ありません。

これからシーン作成を行う上で、ゆっくりと、そして着実に練習を重ねながら覚えていきましょう。

Discussion