UE4 マテリアル体験 + マテリアルを編集するブループリントを作成する

SubstancePainterでOpacityとEmissiveが編集できるようになりました

生徒からも白い箱を作りたいといいう要望も出てきました

ちょうど基本機能を抑えられたので、マテリアルについて簡単にまとめてみました

FBX、テクスチャもダウンロードできるようにしたので、自習用に使ってもらおうと思います

【目次】



スポンサードリンク

アセットのダウンロード"#"

以下のURLから、このページで使用するFBX、テクスチャ、プロジェクトが入ったzipファイルがダウンロードできます
プロジェクトは4.16.1で作成してあります
http://denshikousakubu.com/TeachingMaterial/20170613_BP_EditMaterial.zip

プロジェクトの作成"#"

項目 選択内容
BP or C++ ブループリント
テンプレート 空のプロジェクト
ターゲット デスクトップ/コンソール
クオリティ ハイエンド
スターターコンテンツ有無 スターターコンテンツ無し
フォルダパス (任意のフォルダを選択する)
プロジェクト名 (任意の名前を設定する)

image

プロジェクトの構築"#"

フォルダを作成します
右クリック > New Forder
image

Content

  • Material
  • Mesh
  • Texture

image

アセットのインポート"#"

BP_EditMaterial > Mesh
SM_SPBox.fbxをMeshフォルダにドラッグ&ドロップします

image

FBX Import Optionsダイアログが表示されます
Importボタンをクリックします
image

StaticMeshとマテリアルが3つ作成されます

マテリアルは以下の3つが作成されます

  • 黄 M_SPBoxEmissive (辺 光る部分を設定する)
  • 赤 M_SPBoxGlass   (面 透明な部分を設定する)
  • 青 M_SPBoxMetal  (角 金属の設定をする)

image

マテリアルをMaterialフォルダに移動します
マテリアルをMaterialフォルダにドラッグ&ドロップします
Move Hereを選択します
image

Materialフォルダにマテリアルが移動します
image

TextureフォルダにTextureをドラッグ&ドロップします
image

テクスチャ名で使用するマテリアルが分かるようになっています

  • T_SPBoxEmissive > M_SPBoxEmissive
  • T_SPBoxGlass > M_SPBoxGlass
  • T_SPBoxMetal > M_SPBoxMetal

末尾の名前で接続するチャンネルが分かるようになっています

  • D (BaseColor)
  • E (Emissive)
  • MT (Metallic)
  • N (Normal)
  • O (AmbientOcclusion)
  • R (Roughness)

image

マテリアルの編集"#"

公式ドキュメントが充実しているので、詳しい説明は公式ドキュメントを参照してください

マテリアル
https://docs.unrealengine.com/latest/JPN/Engine/Rendering/Materials/index.html

マテリアルの基本概念
https://docs.unrealengine.com/latest/JPN/Engine/Rendering/Materials/IntroductionToMaterials/index.html

M_SPBoxMetal マテリアルの基本機能を体験する"#"

この操作に書かれている描画の変化は【物理ベースのマテリアル】に詳しく書かれていますので参考にしてください
https://docs.unrealengine.com/latest/JPN/Engine/Rendering/Materials/PhysicallyBased/index.html

M_SPBoxMetalをダブルクリックします
マテリアルエディタが表示されます
image

Textureフォルダに移動します
以下の3つのテクスチャをマテリアルエディタにドラッグします

  • T_SPBoxMetal_D
  • T_SPBoxMetal_MT
  • T_SPBoxMetal_N
  • T_SPBoxMetal_O
  • T_SPBoxMetal_R

image

マテリアルの変化を確認できるように、SM_SPBoxを表示しておきます
Mesh > SM_SPBoxをダブルクリックすることで、StaticMeshが確認できます
image

ベースカラーを設定する"#"

カラーのノードを選択して、Default Vlueをクリックします
カラーピッカーで色を変更して、OKボタンをクリックします

image

適用ボタンクリックします
image

色が適用ボタンをクリックしなくても変わってしまいましたが、マテリアルの変更をモデル側に反映したい時は適用ボタンをクリックすることで反映することができます
image

引用

Base Color は、マテリアルの全体の色を定義します。Vector3 (RGB) 値を受け取り、各チャンネルは自動的に 0 と 1 の間にクランプされます。
現実世界から取得した場合、偏光角フィルタを使用して写真を撮影した色です。 (偏光は、アライメントされた時に非金属のスペキュラを消去します)。

メタリックを設定する"#"

Constantノードを追加します
右クリック > Constant
キーボード 1キーを押しながら、ダブルクリックでも追加できます

image

ConstantのValueを1.0に設定します
Constantをメタリックに接続します
適用ボタンをクリックします

質感が金属的な光沢になります
image

引用

Metallic 入力は、文字通りサーフェスをどのように「メタル状」にするかを制御します。ノンメタルは、値 0 のメタリック値を使用し、 メタルには、値 1 のメタリック値を使用します。純粋な金属、石、プラスチックなどの純粋なサーフェスでは、 この値は 0 または 1 を使用し、その中間値は使用しません。腐食している、埃っぽい、あるいは錆びたメタルなどのハイブリッドなサーフェスを作成する場合には、 0 と 1 の中間値を使用する場合もあります。

1.0 ; 金属の光沢が出る
0.0 : 金属の光沢が出ない

ラフネスを設定する"#"

キーボード 1キーを押しながら、ダブルクリックでConstantを追加します
Constantをラフネスに接続します
適用ボタンをクリックします

鏡のように反射するようになりました
image

ラフネスに接続しているConstantを0.0に設定して、適用ボタンをクリックします
反射がなくなりました

image

引用

Roughness 入力値は、その言葉通りマテリアルのラフネス (粗さ) の度合いを制御します。ラフなマテリアルはスムーズなマテリアルと比較して、より多くの方向へ反射光を散乱させます。 この効果は、反射のぼやけ具合やはっきり加減、 もしくは広域またはタイトなスペキュラ ハイライトとして見ることができます。値 0 のラフネス (スムーズ) はミラー反射、値 1 のラフネス (ラフ) は完全な艶消しまたはディフューズ (拡散色) となります。

1.0 ; 表面が粗いので反射しない
0.0 : 表面がツルツルなので反射する

テクスチャ画像を使用して質感を表現する"#"

T_SPBoxMetal_DとBase Colorを接続します
接続後、適用ボタンをクリックします
image

テクスチャ画像が反映されます
image

T_SPBoxMetal_NをNormalに接続します
接続後、Applyボタンをクリックします
image

StaticMeshの形状は変わっていないのに、T_SPBoxMetal_NをNormalに接続することで凹凸が表示されます
NormalMapについての説明は以下のURLを参照してください

法線マップ(Normal Map)(Bump mapping)
https://docs.unity3d.com/jp/540/Manual/StandardShaderMaterialParameterNormalMap.html

『THE COMPREHENSIVE PBR GUIDE – Vol. 2: Practical guidelines for creating PBR textures 』 私家訳版 P22 参照
https://www.slideshare.net/nyaakobayashi/70100srgb180255

image

T_SPBoxMetal_MTをメタリックに接続します
T_SPBoxMetal_Rをラフネスに接続します
2つのノードを接続したら適用ボタンをクリックします
image

金属部分と反射をしない部分をまばらにすることによって、金属の劣化や錆を再現することができます
image

メタリックとラフネスに使われたテクスチャ画像の拡大図です
左:メタリック 白いところが金属(1.0)、黒いところが金属ではない(0.0)として扱われます
右:ラフネス 白いところが反射しない(1.0)、灰色が反射(0.5~0.7)として扱われます
image

T_SPBoxMetal_Oをアンビエントオクルージョンに接続します
適用ボタンをクリックします
image

接続しても変化がありませんでした
ライティングビルドが必要だったりと色々な条件が必要そうでした

アンビエントオクルージョン・はじめの一歩
http://ambientocclusion.hatenablog.com/entry/2013/10/15/223302

Material Ambient Occlusionについて
http://kedama.works/archives/167

引用

結論として、MaterialAOの効果はライトビルドが行われたシーンの間接光(Lightmass GI)のマスクとして現れます。
この効果は、ポストプロセスのGlobal Illumination > Indirect Lighting Intensityを調節すると簡単に確認が出来ます。

image

UnityだとAmbientOcclusionが簡単に動いたのですが、UE4だと色々な条件があるようなので、分かり次第修正します

M_SPBoxEmissive マテリアルを発光させる"#"

Material > M_SPBoxEmissiveをダブルクリックして、マテリアルエディタを表示します

image

Textureフォルダから以下のテクスチャ画像をマテリアルエディタにドラッグ&ドロップします

  • T_SPBoxEmissive_D
  • T_SPBoxEmissive_E
  • T_SPBoxEmissive_MT
  • T_SPBoxEmissive_N
  • T_SPBoxEmissive_R

image

T_SPBoxEmissive_E以外をM_SPBoxMetalと同じ様に接続します
接続出来たら適用ボタンをクリックします
image

T_SPBoxEmissive_Eをエミッシブカラーに接続します
適用ボタンをクリックします
image

モデルのマテリアルが適用されている箇所が発光したような表示になります
image

Constantノード(キーボード1を押しながらダブルクリック)とMultiply(キーボードMを押しながらダブルクリック)を追加します

image

エミッシブカラーに与える値を1より大きい値に設定しましょう

  1. T_SPBoxEmissive_EをMultiplyのAに接続します
  2. ConstantのValueを10に設定し、MultiplyのBに接続します
  3. Multiplyの結果をエミッシブカラーに接続します
  4. 適用ボタンをクリックします

image

より強く発光します
image

Constantを100に設定して、適用ボタンをクリックします
光がこぼれるような強さで発光します
image

ConstantのValueを0.0に設定して閉じます
image

M_SPBoxGlass マテリアルを透明にする"#"

Material > M_SPBoxGlassをダブルクリックして、マテリアルエディタを表示します

image

Textureフォルダから以下のテクスチャ画像をマテリアルエディタにドラッグ&ドロップします

  • T_SPBoxGlass_D
  • T_SPBoxGlass_MT
  • T_SPBoxGlass_N
  • T_SPBoxGlass_R

image

M_SPBoxMetalと同じ様に接続します
接続出来たら適用ボタンをクリックします

image

この段階では透明にはなりません
image

Blend ModeをTranslucentに設定します
image

T_SPBoxGlass_Dのグレーのピンとオパシティを接続します
適用ボタンをクリックします
image

マテリアルが透明になりました
しかし、メタリック、ラフネス、ノーマルが無効になっているので、有効にします
image

Translucency > Lighting Modeを[Surface Translucency Volume]に設定します
設定を変更するとメタリック、ラフネス、ノーマルが有効になります
適用ボタンをクリックします
image

透明な上に質感が表現されます
image

最終調整"#"

M_SPBoxEmissiveのConstantのValueを1.0に設定して、適用ボタンをクリック
image

完成
以下、3要素を抑えたマテリアルのスタティックメッシュが出来上がりました

  • 基本機能を抑えたマテリアル
  • 発光するマテリアル
  • 透明なマテリアル

image

Blueprintで変更できるマテリアルを作成する"#"

マテリアルの作成"#"

Materialフォルダに移動し、右クリック > マテリアルを選択します
image

名前をM_Editableに設定します
image

Constant4Vector(キーボード4を押しながらダブルクリック)を追加して、ベースカラーに接続します
Constant(キーボード1を押しながらダブルクリック)を2つ追加して、メタリックとラフネスに接続します
image

追加したノードをすべて選択してから、右クリック > パラメーターに変換を選択します
image

各ノードのParameterNameを設定します

  • BaseColor
  • Metallic
  • Roughness
    image

適用ボタンをクリックします
保存ボタンをクリックして、画面を閉じます
image

マテリアルインスタンスの作成"#"

マテリアルインスタンスについては以下の公式ドキュメントに詳しく書かれています

インスタンス化マテリアル
https://docs.unrealengine.com/latest/JPN/Engine/Rendering/Materials/MaterialInstances/index.html

引用

アンリアル エンジン 4 では、マテリアルの再コンパイルに大きな負荷をかけることなくマテリアルの外見を変更するために、マテリアルのインスタンス化を使用します。通常のマテリアルの編集およぼい変更には再コンパイルが必要ですが (ゲームプレイの前の 必須事項 です)、インスタンス化マテリアルは再コンパイルせずに変更が行えます。インスタンス化マテリアルの中には、ゲームプレイ中でもインゲーム イベントに反応して変更が可能なものもあります (木のマテリアルが燃えながら黒く焦げていく場合)。芸術的なエレメントに、ビジュアル的な柔軟性が限りなく与えられます。

M_Editableを右クリック > マテリアルインスタンスを作成 を選択します
image

M_Editable_Instをダブルクリックするとマテリアルインスタンスの編集ウィンドウが表示されます
image

パラメーターグループにマテリアルでパラメーター化したノードのParameterNameが項目にあります
チェックボックスにチェックを入れると値を変更することが出来ます
マテリアルをいちいち開いて変更しなくても値を調整することでマテリアルの変更を行うことが出来ます
image

もう一つマテリアルインスタンスを作成して、質感は同じだけど色は違うマテリアルインスタンスや、色は同じだけど質感が違うマテリアルインスタンスを作成することができます
image

マテリアルインスタンスの値を変更できるブループリントの作成"#"

コンテンツフォルダに移動します
右クリック > 新規フォルダを選択します
image

名前をBlueprintsに設定します
image

Blueprintsフォルダに移動して、右クリック > ブループリントクラスを選択します
image

Actorをクリックします
image

名前をBP_EditMaterialに設定します
image

BP_EditMaterialをダブルクリックして、ブループリントエディタを表示します
image

[コンポーネントを追加]から[球]を選択します
image

変数を三つ追加します

変数名 変数の型
BaseColor Linear Color
Roughness Float
Metallic Float

image

Linear Color だけは検索しないと選択できません
image

右クリック > Create Dynamic material Instance(Sphere)を選択します
image

Construction ScriptとCreateDynamicMaterialInstanceの実行ピンを接続します
SourceMaterialにM_Editable_Instを設定します
image

CreateDynamicMaterialInstanceのReturnValueを左クリックでドラッグして、左クリックを離します
Set Vector Parameter Valueを選択します
image

変数 BaseColorをドラッグ&ドロップして、ゲットを選択します
image

BaseColorのゲットをSet Vector Parameter ValueのValueに接続します
ParameterNameにはマテリアルのParameterNameに設定した名前と同じ名前(BaseColor)を設定します
image

ビューポートタブに移動して、クラスのデフォルトをクリックします
デフォルトというカテゴリに、変数名が表示されています
image

BaseColorの色部分をクリックします
カラーピッカーで色を変更するとビューポートの球の色が変わります
OKボタンをクリックします
image

ConstructionScriptタブに移動して、BaseColor同様にメタリック、ラフネスを変更できるように設定します

メタリック、ラフネスの値を変更するのに使用するのは、Set Scalar Parameter Value

CreateDynamicMaterialInstanceのReturnValueを左クリックでドラッグして、左クリックを離します
Set Scalar Parameter Valueを選択します

Set Scalar Parameter Valueをメタリック、ラフネス用に2つ追加してください

image

変数 Roughness,Metallicのゲットを追加します
image

マテリアルのParameterNameと同じになるようにSet Scalar Parameter ValueのParameterNameを設定します
image

実行ピンを接続します
image

コンパイルボタンをクリックします(1度コンパイルボタンをクリックするまでは値を変更しても表示が変わりません)
ビューポートタブに移動します
クラスのデフォルトをクリックします
RoughnessとMetallicの値を変更してみてください
質感がビューポートで確認できるようになります
image

画面に配置してからもマテリアルの値を変更できるようにして確認します

  1. 変数の右側の目のマークをクリックしして、目を開けている状態にします
  2. コンパイルボタンをクリックします
  3. BP_EditMaterialを画面に配置します
  4. 詳細タブのデフォルトの項目に変数名が表示されます
  5. BaseColorの色を変更すれば、画面に配置してからでも色を変更することが出来ます

image

問題"#"

最後に問題

SM_SPBoxに使用されているマテリアルをパラメーター化して、画面に配置してからEmissiveとOpacityを変更できるようにしてください

こんな感じ

これが出来るようになると、こういうこともできます


スポンサードリンク