Substance in UE4 Long Page

  • 3
    いいね
  • 10
    コメント

Substance in UE4

使用バージョン

Substance Desinger 6.0.1
Substance Painter 2.5.1
Unreal Engine 15.1

Index

あまりに長くなりすぎたので、ページを小分けにした

プロジェクトファイルのダウンロード

Substance for UE4 Training Series
Substance、UE4のプロジェクトファイルがダウンロードできる
https://forum.allegorithmic.com/index.php/topic,3242.0.html

image

Substance in Unreal Engine 4 Tutorial: Introduction

Substance in Unreal Engine 4 Tutorial: Introduction
Substance in Unreal Engine 4 Tutorial: Introduction

1: Project overview, baking and setup

1: Project overview, baking and setup
(1: Project overview, baking and setup)

プロジェクトの作成

image

項目名
Graph Template Physically Based(Metallic/Roughness)
Graph Name archway
Size Mode Absolute
Width 2048px
Height 2048px
Format Relative to Parent

image

一旦プロジェクトを保存する
ファイル -> すべてを保存
image

名前はarchwayとする
image

FBXのインポート

プロジェクトを右クリック
Link -> 3D Mesh
image

substance_ue4_project.zip内のDataフォルダに格納されているFBXファイルをすべて選択して、開くボタンをクリック
image

Resourcesが追加される
image

Resourcesを右クリック -> New -> Folder
image

フォルダ名をmeshesに変更する
image

meshesにfbxをドラッグ&ドロップ
image

fbxをダブルクリックすることで3DViewにメッシュを表示することが出来る
image

Youtubeは4.5.1を使用しているので、メニューの項目が少し変わっている
image

6.0.1の場合
image

Tangent Space Pluginの設定
mkktspace.dll
image

Macroの作成

image

名前をspBakerに設定する
image

項目名
Color Map from Mesh id
Normal Map from Mesh normal
Curvature curvature
Ambient Occlusion Map from Mesh ambient_occrusion
Position position
World Space Normals world_space_normals

image

Default Resource Nameを 

$(mesh)_ $(spbaker)

に変更する
image

image

archway_bake_lowを右クリック
Bake model Infomationを選択する
image

画像の通り設定を行う
image

normalマップが作成される
ダブルクリックで画像の確認が出来る
image

同様の手順でdoor_bake,baking_bakeのnormalを作成する
image

normalを3種類作成する
image

作成したnormalの画像は以下の場所に保存されている
C:\Users(ユーザー名)\Documents\Allegorithmic\Substance Designer\6

image

Substance Painter

Substance Painter 2 を起動
image

File -> New
image

項目名
Template Unreal Engine 4(allegorithmic)
Mesh scifi_door_mm.fbx
Create a texture set per UDIM file チェックなし
Normal map format DirectX
Compute tangent space per fragment チェック
Document resolution 2048
Import mesh normal maps and baked maps for all materials archway_normal.png, backing_normal.png, door_normal.png

TemplateにUnrealEngine4を選択する
image

Meshにscifi_door_mm.fbxを選択する
image

Designerで書き出したnormalを追加する
image

プロジェクトを保存する
image

Viwer SettingsのEnviroment Mapの設定でEnviromentMapの表示設定が出来る

項目名 概要
Enviroment Map 使用するEnviroment Mapを選択する
Enviroment Exposure(EV) 使用するEnviromentの透明度 0:透明~100:不透明
Enviroment Exposure(EV) 使用するEnviromentのEV値(露出)
Enviroment Rotation 使用するEnviromentを回転させる
Enviroment Blur 使用するEnviromentにBlurをかける 0:くっきり~100:ぼやける

image

ImportするResourceをダウンロードする

動画でインポートしていたResource
image

Eat3d_Bolt_Alpha_70.jpgではなく、Eat3d_Bolt_Alpha_69.jpgを使用していた

Substance、UE4のプロジェクトファイルがダウンロードできる
https://forum.allegorithmic.com/index.php/topic,3242.0.html
substance_ue4_project.zipを解凍した中に入っているalphasフォルダにすべて入っている
(動画 5のdecalsで気づいた)

image

http://eat3d.com/forum/tips-tricks-and-free-videos/110-free-custom-bolt-alphas

image

zbrush development resource site
http://www.badking.com.au/site/

plane_line_v.psdは自作できた
plane_line_h.psdも一緒に作成しておいた
以下からダウンロードできる
https://1drv.ms/u/s!AsyaT0uIFWqQgY5VQraCo1yr9TTl4A

動画の名前を検索する
image

動画の名前と一致する項目をクリック
image

ADD TO CARTをクリック
image

image

その後、アカウントを作成して、CheckOutをするとダウンロードすることが出来る

動画のファイルが一部収集できなかった
image

image

image

ImportするResourceにalphaを設定する
image

Import your resources to:にproject '(プロジェクト名)'を設定する
image

2: Painting Height Details

2: Painting Height Details
(2: Painting Height Details)

archwayだけ表示する
image

fill layerの追加
image

Fill layer 1をLayer1の下に移動する
image

Fill layer 1のMaterialをheightだけ有効にする
image

image

image

Layerを追加する
image

Layer名をDetailに設定する
image

image

Alphaを選択する
Alphaフォルダの項目をダブルクリックで選択できる
Tool - Paintの項目のAlphaを左クリックするとリストが表示されるので、リストから項目を選択してもいい
image

Alphaのブラシを選択したら、ブラシのサイズを変更しながら、ペイントしていく
ブラシのサイズ変更

  • Ctrl + Heel
  • Ctrl + 右クリック + マウスを前後

image

Paintする
Greebles_28
Greebles_9
image

image

Quick Mask
https://support.allegorithmic.com/documentation/display/SPDOC/Quick+Masking

T : Editing Quick Mask / Using Quick Maskの切り替え
I : Maskを反転
Y : Quick Maskを終了する

image

image

Iを入力してマスクを反転させる
image

Tを入力してUsing quick maskモードにする
image

Paintツールを選択
plane_line_vを選択
heightのみ有効にして、値を-1にする
直線になるように線を引く

image

Yを入力してQuick Maskモードを終了する
image

シンメトリーを継続
image

BlashをDefault Hard
ShapeをShape Gradient
Hardnessを1に設定
image

GrayScaleが設定できなければ、マテリアルを選択する、
GrayScaleを0に設定する
image

TでQuick maskの編集モードにする
先ほど引いた線とかさなるように、四角く塗る
image

中間部分をPolygon FIllで黒く塗る
モデルが完全なシンメトリーではないので、少しはみ出てしまう
image

右側の塗り残しも塗る
image

image

Polygon FillのUVモードで1.0を塗る
片側だけ塗れば、もう一方も1.0で塗られる
image

image

Iでマスクを反転
image

縦線と同じくらいの太さの横線をマスクの縦幅中央くらいに引く
image

中心線まで横線を塗って、反対側と線を繋げなくてもいい
YキーでQuick maskを終了させる
image

image

動画の9:34くらいの作業
線を追加する
image

動画の9:50くらいの作業
★Detailレイヤーを選択してから作業を開始する
Greebles_18で中央を2回ペイント
image

動画10:01くらいの作業
Eat3d_Bolt_Alpha_59

image

image

image

動画10:05くらいの作業

Greeble_2を選択
image

image

動画10:11くらいの作業
Vents_16を選択

image

image

動画10:15くらいの作業
Greebles_13

image

image

動画10:18くらいの作業
Scfi_Panels_13

image

image

動画10:22くらいの作業
Scfi_Panels_12

image

動画10:27くらいの作業
Eat3d_Bolt_Alpha_69

image

image

動画10:30くらいの作業
Greebles_2

image

image

動画10:32くらいの作業
Vents_18

image

image

image

動画10:38くらいの作業
Vents_07

image

image

image

動画10:47くらいの作業
Greebles_13

image

image

動画10:47くらいの作業
Greebles_28

image

image

動画10:51くらいの作業
Eat3d_Bolt_Alpha_59

image

image

動画10:53くらいの作業
Vents_07

image

image

動画10:57くらいの作業
Greebles_13

image

image

動画10:57くらいの作業
Nurnies_12 (XMD_Mech_Insert_20の代わり)
XMD_Mech_Insert_20は公式formからダウンロードすることが出来るsubstanceプロジェクトのalphasフォルダ内に入っている

image

image

動画11:06くらいの作業
Greebles_9

image

image

動画10:53くらいの作業
Vents_07

image

image

動画11:14くらいの作業
Eat3d_Bolt_Alpha_47

image

image

Boltsレイヤーを作成する
image

つなぎ目あたりに小さいくぼみをペイントしていく
image

image

image

image

image

動画11:46くらいの作業
Vents_16

image

Detailレイヤーを選択してからペイントする
image

image

image

image

image

archwayの塗り完了

backingのペイント

archwayを非表示にして、backingを表示する
image

archwayとレイヤーの構造を同じにする
image

突起の側面に横線を引く
image

反対側の突起側面も塗る
image

突起の隙間のマスクを消す
image

image

Iを入力してmaskを反転
image

Tを入力してUsing quick mask
image

ペイントツール
plane_line_h
heightのみ有効にして、heightの値を0.7
image

image

image

image

上部の突起にも溝を作る

Tでquick mask
上部突起にmaskする
image

Iで反転
UでUsing quick mask
ペイントツール->plane_line_h
5本幅が均等になるように線を引く
image

image

Yでquick mask終了
image

横の柱に線を2本引く
image

Layer Detailsを選択する
image

image

image

image

Bolts Layerを選択
Eat3d_Bolt_Alpha_47
image

image

image

image

Detailsレイヤーを選択
image

image

image

doorのペイント

Layerを作成する

image

また見つからないブラシを使っていたので、自作
以下よりダウンロード
https://1drv.ms/i/s!AsyaT0uIFWqQgY8cmw90MJeR4THhKA

height 0.2にしてうっすらと塗る
image

image

Scifi-Panels_12
height 1.0
image

Scifi-Panels_13
height 1.0
image

image

image

Greebles_09
height -0.8
image

Greebles_03
Nurnies_01
Nurnies_03

height 1.0

image

Bolts Layerを選択
Eat3d_Bolt_Alpha_01
height -1.0
image

Details Layerを選択

Eat3d_Bolt_Alpha_59

Eat3d_Bolt_Alpha_59
height 0.4

Eat3d_Bolt_Alpha_70
height 0.2

image

中央完成
image

SideをQuick maskで選択する
Scifi_Plane_12
height 1.0
image

Bolts Layerを選択する

image

Side完了
image

床をquick maskで選択してペイント
Detail Layerを選択する

image

plane_line_hとplane_line_vで溝を作成する
image

image

image

image

Size Ratioが最新版では見つからなかったので、
長方形のAlphaを作成した
以下からダウンロードしてインポート
https://1drv.ms/i/s!AsyaT0uIFWqQgY8dWfqeEStq-3iwew

image

image

image

image

Stencil Mask
https://support.allegorithmic.com/documentation/display/SPDOC/Paint+brush

It is possible to edit the stencil transformation by pressing the shortcut S :
- Use S + Left Mouse click to rotate the stencil.
- Use S + Left Mouse click + SHIFT to snap/constrain to rotation of the stencil.
- Use S + Right Mouse click to Zoom/Unzoom the stencil.
- Use S + Middle Mouse click to translate the stencil.

image

quick maskとStencilを終了する
image

網上のDetailが描画することが出来る
image

Door完了
image

Height Mapのペイント完了
image

補足
手順にはなかったが、パイプに溝が書かれている(動画4のNormalで気付いた)
image

いい感じのブラシもないので、自作した
Pipe_Groove.png
https://1drv.ms/i/s!AsyaT0uIFWqQgY92BXFpmKLH2O_sRQ

archwayにPipe Grooveレイヤーを追加する
image

Blushの設定
image

一本ずつquick maskで設定してから塗った方が塗りやすい
image

Pipeの筒部分に溝をペイントする
image

本当の完成
image

3: Creating Base Materials

3: Creating Base Materials
(3: Creating Base Materials)

Heightのレイヤーをグループ化
Layer名をHeightに設定する
archwayのみ表示する
image

Fill Layerを追加し、Layer名をmaterialに設定する
image

動画との色を近づけるために、
Enviroment mapをbonifacio_streetに変更
image

動画ではMaterialはuniform_cobaltを使用するといっているが、Substance Painterでは品質が満足できず削除されてしまったらしい
https://forum.allegorithmic.com/index.php?topic=9492.0

代わりにCobalt_Pureを使用する
image

動画と似たような質感にはなった
image

Roughnessの値を大きくすると、プラスチックのような質感になる
image

Metaricの値を小さくすると、金属光沢が少なくなる
image

Fill Layerを追加する
名前をPaintに設定する
image

uniform_plastic_glossyがPS2では削除されているので、
Plastic Glossy Pureをダブルクリックする
image

image

フォルダを作成する
名前をPaint GRPに設定する
PaintレイヤーをForderにドラッグ&ドロップして、Forder内に入れる
image

追加したForder Paint GRPを右クリック
Add black maskを選択する
image

materialレイヤーのみ表示される
image

image

塗った所にpaintレイヤーが表示される
image

はみ出したところは、grayscaleを0.0に設定して黒で塗る
image

Quick maskを設定してから塗った方が、パイプと重ねる箇所を塗る時に楽になる
image

塗り完了
image

塗り全体確認
image

Simmetryを解除する
柱部分の下側を塗る
image

image

materialレイヤーを選択してから、Fill Layerを追加する
名前をPipesに設定する
image

image

PipesにBlack maskを追加する
image

Iでmaskを反転させ、
Polygon fillでパイプ部分を白く塗る
image

image

image

image

Light GRPフォルダを作成
materialレイヤーを選択し、Fill Layerを追加する
追加したFill LayerをLight GRPフォルダの中に入れる
image

TextureSet Settings にEmissiveを追加する

TextureSet Settings
https://support.allegorithmic.com/documentation/display/SPDOC/TextureSet+Settings

image

image

image

image

Light GRPにblack maskを追加する
image

image

image

Light GRPにLayerを追加する
emissのみ有効にする
Stencil にFence 01を設定する
image

image

image

Post Effectの確認

ドキュメントが完全に執筆されていない
https://support.allegorithmic.com/documentation/display/SPDOC/Post+Effects

YEBIS 2を使用している
image

image

Post Effect をOffにする
image

Backing

Backingのみ表示
今までのHieghtをペイントしてレイヤーをGourp化
名前をHeightにする

image

image

Fill Layerを追加する
名前をAll Layerに設定する
Paint GRPフォルダ内に入れる
image

plastic Glossy Pureをダブルクリックする

image

image

Materialを右クリック -> Create material preset
image

新規作成したmaterialを右クリック
名前をscifi door presetに設定する
image

再びbackingを選択する
All Paint レイヤーを選択する
scifi door presetをダブルクリック

同じ質感を設定することができる
image

Paint GRPフォルダにBlack maskを追加する
image

image

image

image

柱の下部分を塗る
Pollygon FillのUVで2D側を塗るのが速い
image

ペイントツールで溝の部分まで塗る
image

image

image

backingの塗り完成
image

全体
image

door

doorを表示して、
heightをペイントしたレイヤーをGroup化
image

フォルダを追加し、
名前をFloor GRPに設定する

image

Fill Layerを追加し、
Floor GRP内に入れる
image

動画と使用しているパラメーターが一番近い
Steel Rust and Wear を使用する
image

image

metalを非表示にする
パラメーターはこんな感じ
image

見た目
image

名前をFloorに設定する
Floor GRP にblack maskを追加する
image

Floor GRPのmaskをPollygon fillのUV(1.0)で床部分だけ質感が表示されるように塗る
image

Folderを追加し、
名前をDoor GRPに設定する
image

Fill Layerを追加し、
名前をDoorに設定し、
Floor GRP内に入れる
image

Door レイヤーのMaterialの設定を変更する
image

Door GRPにblack maskを追加する
image

Door部分のUIだけ有効になるmaskを作成する
image

Heightフォルダを選択して、Fill Layerを追加する(移動の手間が省ける)
名前をmetalにする
Cobalt Pureをダブルクリック

image

Door GRPのmask部分を選択する
Paintツールを選択し、Default Hardを選択する
ShapeにGradientを設定する
Hardnessを1に設定する
Doorの右側半分を塗りつぶす
image

Pollygon fillのUV(1.0)で塗りつぶしてしまった柱のmaskを復活させる
image

door正面も同じ形状のAlphaを選択して、溝の部分だけがmetalレイヤーが有効になるようにmaskを復活させる
image

image

Door GRPを選択してからLayerを追加する
TextureSet SettingsのChannelにEmissiveを追加する
image

Default Hardを選択
colorとemissだけ有効
Base Color R 0.011 G 0.214 B 0.712
Emissive R 0.458 G 0.681 B 0.993
Doorの下側の丸部分を塗って光らせる
image

Emissive Intensityの数値を大きくすれば、塗った個所が光る
image

Door完成
image

動画5で柱側に色が塗られているので、色を塗る
image

Folderを追加する
名前をPaint GRPに設定する
image

Fill layerを追加する
Pint GRP内に追加したlayerを入れる
scifi_door_presetをダブルクリック
image

Paint GRPにblack maskを追加する
image

Pollygon FillでPaintを反映させたいUVのmaskを1.0で塗る
image

本当の完成
image

4: Setting Up An Export Pipeline

4: Setting Up An Export Pipeline
4: Setting Up An Export Pipeline

Substance PainterとSubstance Designerでお互いにExportしたテクスチャデータをリンクさせる

Substance PainterのTexture書き出し

3DViewを右クリック
Export Texturesを選択
Ctrl + Shift + Eでもいい
image

Designerと共有しやすいフォルダを選択する(今回はspexportという名前のフォルダを作成する。DesignerでFilterを作る時に特定しやすい名前にしておくのがいい)
16bitを選択する
Configに [Document channels + Normal + AO(No Alpha)]を選択
Exportをクリック
image

Substance Designerの書き出したテクスチャのFilter設定

Substance Designerを開く

Edit -> Preferences
image

Projectsを選択する
Libraryタブを選択する
+をクリック
先ほどPainterでTextureを書き出したフォルダのパスを選択する
OKで確定する
image

Folder 1という名前をScifi Doorに変更する
image

Filterの追加
+をクリック
名前をsp exportに設定する
image

Filterの条件を入力する
- Bitmap
- Url
- Contains
- spexport

条件内容:画像、URL,spexportを含む

image

Base Colorの共有

archway_base_colorをGraphにドラッグ
Link resource(s)を選択する
image

Graphにノードが追加される
2D表示にテクスチャが表示される
image

Substance Painteを表示する
archwayを選択する
Paintレイヤーを選択する
BaseColorを変更する

image

Textureを再度Exportする
archwayのみをExportする
image

Substance Designerにも変更が反映される
image

Substance Painterに戻り、
Undo StackでColorの変更を無しにする

image

image

Substance Designerからのテクスチャ共有

archway_Normal_DirectXをドラッグ
Link resource(s)を選択
image

Curvatureを検索してドラッグする
NormalとCurvatureをつなぐ
image

GrayScaleのNormalが出来上がる
image

Intensityの値を3.14に設定する
輪郭が強調される
image

Save Current image as bitmapをクリック
meshDateフォルダを作成して、作成したフォルダを選択
image

ファイル名: archway_curvature
ファイルの種類: bmp
保存する
image

Substance Painterを表示
File -> Import resources
image

archway_curvature.bpmをtextureとして、project 'archway'にImportする
このプロジェクトでしか使わないので、Projectでいいと思う
image

Substance Painterに取り込まれる
image

Intensityの値を1に戻して、archway_curvature.bmpを上書き保存する
image

Substance Painter側に変更が反映されていないので、
archway_curvatureを右クリック -> Reload
変更が反映される
image

Substance Designerに戻り、
CurvatureのIntensityを3.93に設定する
image

Ambient Occlusionを検索し、Graphに追加する
image

archway_HeightのLink resourseを追加する
GrayScaleを選択する
image

つなげる
HeightからAmbient Occlusionを作成することが出来る
image

Spreadingを0.01に設定する
溝の部分のみが黒くなる
image

archway_ambient_occlusion.bmpでarchway_curvature.bmpと同じフォルダに保存する
image

archway_ambient_occlusion.bmpをtextureでproject 'archway'にインポートする
image

Substance Painterに取り込まれる
image

TexureSet Settingsを選択する
Select ambient occlusion mapをクリック
archway_ambient_occlusionを選択する

image

Select curvature mapをクリック
archway_curvatureを選択する
image

4はここまでだけど、5では backingとdoorにもcurvatureとambientOcclusionが作成されている

archwayのcurvature,ambient occlusionをbackingとdoor分コピーする
backingとdoorのnormal,heightのLink resoureceを追加する
archwayと同様にnormalにcurvature, heightにambient occlusionをつなげる
image

backingとdoorのcurvature,ambient_occlusionをbmpで保存する

image

archwayのcurvature,ambient occlusionと同じフォルダに保存する

image

Substance Painterにtextureとしてインポートする
image

backing,doorにAmbientOcclusion,Curvatureを追加する
image
image

これでおしまい

5: Finishing The Base Materials

5: Finishing The Base Materials
5: Finishing The Base Materials

Roughness (archway)

archwayのみ選択して表示する
Fill layerを追加する
名前をRoughとする
Materialをroughのみ有効にする

値は0.5に設定する
image

black maskを追加する
image

Add effects -> Add Generator
image

GeneratorにMG_Dirtを選択する
image

Roughness表示にすると、ImportさらたCurvatureとAmbientOcclusionが反映されている
溝やねじ穴といったところがはっきりとしている
image

MG_Dirtのプロパティを設定する
値をデフォルト値から変えた項目

項目名
Dirt Level 0.86
Dirt Contrast 0.5
Grunge Amount 0.53
Grunge Scale 1

image

MG_Dirtありとなしの比較
image

パラメーターの微調整

項目名
Dirt Level 0.78
Dirt Contrast 0.72
Grunge Amount 0.44

数値を色々変更してみて理想形に近づける(任意)

image

Roughnessの影響度を調整する
image

0.7くらいの値に設定する
image

MG_Dirtを再び編集する

項目名
Dirt Level 0.75
Dirt Contrast 0.46
Grunge Amount 0.64

image

再びRoughnessの値を調整する
値を0.35に設定する
image

MG_Dirtを再び編集する

項目名
Dirt Level 0.65
Dirt Contrast 0.67

image

調整前(MG_Dirtなし)と調整後(Roughnessの影響度、MG_Dirt調整)
image

RoughレイヤーをDuplicate(複製)する
image

materialレイヤーの上にDuplicateしたRoughレイヤーを移動し、名前をrough metalに変更する
image

MG_Dirtを編集する

項目名
Dirt Contrast 0.48

image

Roughness編集前とRoughness編集後の比較
image

ここまでの全体
image

Roughness (backing)

backingのみ有効にする
Fill layerをPaing GRPに追加する
roughのみ有効にする
値を0.35に設定する
image

black maskを追加する
image

Add effects -> Add generatorを追加
image

MG_Dirtを追加する
image

MG_Dirtのプロパティを設定する
値をデフォルト値から変えた項目

項目名
Dirt Level 0.81
Dirt Contrast 0.73
Grunge Scale 1

image

RoughレイヤーをDuplicateする
image

metalレイヤーの上に移動する
image

Roughness変更前と変更後の比較
image

archwayと並べると質感が違う
image

archwayと同じパラメーターに設定する

項目名
Dirt Level 0.65
Dirt Contrast 0.67
Grunge Amount 0.64
Grunge Scale 1

image

後ろの方が色が濃い
Roughness表示にして、Grayの色を近づけたほうが合わせやすい

項目名
Dirt Level 0.7
Dirt Contrast 0.63
Grunge Amount 0.74
Grunge Scale 2

image

image

ここまでの全体

image

Roughness (door)

Fill layerをPaint GRPに追加する
名前をRoughに設定する
roughのみ有効にする
値を0.35に設定する
image

Roughにblack maskを追加する
image

Add effects -> Add generator
GeneratorにMG_Dirtを設定する
image

archwayとbackingを表示する
Roughness表示にして、Grayの色を近づけたほうが合わせやすい

項目名
Dirt Level 0.78
Dirt Contrast 0.59
Grunge Amount 0.59
Grunge Scale 2

image

image

RoughをDuplicateする
image

Door GRP内のDoorレイヤーの上に移動する
名前をRoughに変更する
image

パラメーターの調整
Door GRPのRough

項目名
Dirt Level 0.51
Dirt Contrast 0.76
Grunge Amount 0.62
Grunge Scale 2

image

RoughをDuplicateする
metalレイヤーの上に移動する
MG_Distのパラメーターを編集する

項目名
Dirt Level 0.67
Dirt Contrast 0.59
Grunge Amount 0.59
Grunge Scale 2

image

同様にRoughをDuplicateして、
Floor GRP内のFloorレイヤーの上に移動する
名前をRoughに変更する

MG_Distのパラメーターを編集する

項目名
Dirt Level 0.6
Dirt Contrast 0.86
Grunge Amount 0.64
Grunge Scale 2

image

編集前と編集後を比較
image

ここまでの全体
image

Roughness (archway Pipe)

Folderを追加する
名前をPipe GRPに設定する
PipeレイヤーをPipe GRP内に入れる
image

Pipe GRPにblack maskを追加する
image

PipeのmaskをPipe GRPに移植する
PipeのmaskをCopy maskする
Pipe GRPのblack maskにPaste maskをする

image

pipeのmaskを削除する
image

Pipe GRPにLayerを追加する
名前をPipe Roughに設定する
image

Blushes -> Dirt2
roughのみ有効
値を0.6に設定
image

Pipeを順次塗っていく
Roughness表示にして塗ると塗りやすい
image

編集前と編集後の比較
image

ここまでの全体
image

Decals (archway)

Substance、UE4のプロジェクトファイルがダウンロードできる
https://forum.allegorithmic.com/index.php/topic,3242.0.html
substance_ue4_project.zipを解凍した中に入っているdecalsフォルダのpsdをインポートする

image

decals.psd, decals_metal.psdをTextureとしてインポートする
image

archwayのみ表示する
Layerを追加する
名前をDecalsに設定する
image

Projectionを選択する
color,metalのみを有効にする
Base Color,MettallicにインポートしたDecalを設定する
image

Decalを塗ると、Decalの画像のみが塗られる
image

image

image

はみ出てしまったラインを消す
image

ここまでの全体
image

Decals (door)

Doorのみを表示する
Layerを追加する
名前をDecalsに設定する
image

Projectionを選択する
Metallicに関係ないところに塗るので、
MetallicのDecalを削除する
image

Decalを塗る
レイヤーの透明度を85に設定する
image

ここまでの全体
image

TextureのExport

ここまでのTextureをExportする
image

動画5終了

6: Creating The Substance Material Part 1

6: Creating The Substance Material Part 1
6: Creating The Substance Material Part 1

ここで学習できること

基本的なノードの使い方
Base Materialの作り方
Materila Color Blend
Metal Edge Wear
Dirt

Graphを追加する

archway.sbs
New -> Substance Graph
image

項目名
Graph Template Physically Based(Metallic/Roughness)
Graph Name New Graph
Size Mode Absolute
Width 2048px
Height 2048px
Format Relative to Parent

image

名前をarchway_1に変更
image

OutputにAmbient Occlusionを追加する

Outをクリック
image

IdentifierをAmbient_Occlusionに設定する
Add Itemをクリック
RGBA, ambientOcclusionに設定する
image

Base Materialに設定する

archway_Base_ColorのLink resourceを追加する
image

その他のTextureのLink resourceを追加する
archway_Normal_DirectX
archway_Roughness
archway_Metallic

image

Base Materialを追加する
Material Filters -> PBR Utilities
Base MaterialをGraphに追加する
image

Compact Material
image

User-Defind Mapを有効にする
- Base Color
- Normal
- Roughness
- Metallic

該当するTextureとつなげる
image

表示形式をStandardに戻して、outをクリックすると出力結果を確認することが出来る
image

Compactに戻す
Base MaterialのOutをOutputのノードにつなげると、すべてのノードにつなげてくれる
image

Base Colorの特定の色を変更する

Graphを右クリック
View outputs in 3D Viewを選択する
materialを反映するmeshを選択する
3DViewにmaterialの結果が表示される
image

Graph 右クリック -> Add Node -> Uniform Color
image

Graphの上のアイコンをクリックでも追加できる
こちらの方が速いので、よく使うNodeは覚える
image

Blendを追加する
image

BlendノードにUniform ColorとBase_Colorのテクスチャをつなげる
Uniform ColorをBase Colorのテクスチャの青い部分と同じ色に設定する
image

maskで検索する
Color to MaskをGraphにドラッグする
Base ColorとColor to Maskをつなげる
Color to MaskのColorをBaseColorと同じ色に設定する
Mask Rangeを1に設定する

青い部分のみをmaskできる
image

Color to MaskのOutとBlendのOpacityをつなげる
Uniform ColorのColorを変更する
BlendのOutputをダブルクリックする
BaseColorの青の部分がUniform Colorの色に設定することが出来る
image

BlendのOuptutをBase MaterialのBaseColorにつなげる

image

Metal Edge Wearで傷をつける

Mesh Adaptive -> Mask Generators
Metal Edge WearをGraphにドラッグ
image

Material Filters -> Material Color BlendをGraphにドラッグ
image

Base MaterialのOutputとMaterial Color Blendをつなげる
Material Color BlendのChannelsの設定を変更する

Channel名 True/False
Diffuse False
Base Color True
Normal True
Specular False
Emissive False
Glossiness False
Roughness True
Metalic True
Specular Level False
Ambient Occlusion True
Height False
Opacity false

image

Ambient Occlusionを追加する
image

Curvatureを追加する
image

NormalとCurvatureをつなげる
CurvatureのIntensityを4.08に設定する
image

archway_HeightのLink resourceを追加する
archway_HeightとAmbient Occlustionをつなげる
Ambient OcclusiontのSpreadingの値を0.01に設定する
image

Curvature,AO(Ambient Occlusion)をMetal Edge Wearにつなげる
image

Metal Edge WearとMaterial Color Blendをつなぐ
image

Material Color BlendのOutputとOutputピンをつなぐ
image

Ambient OcclusionとOutputのAmbient Occlusionをつなぐ(ここでOutputを増やす方法を知った)
image

この時の3Dモデルの描画
image

Material Color BlendのInstance Parametersの調整

Base MaterialのMaterial Presetを変更し、Base Colorを取得する

Base Materialノードを追加する
image

OutputをExpand Nodeで各チャンネルを操作できるように分割する
image

Base ColorのMaterialPresetをCopperに設定する
image

Base ColorのMaterialPresetをCobaltに変更する
image

Material Color BlendのBase ColorをMaterial Preset Cobaltの色に設定する
image

その他のChannel

Normal
Normal Opacityを0.01に設定する
image

Metallic
ColorのLを255に設定する
(傷がついた場所の光沢がなくなる)
image

Roughness
Color Lを94に設定する
(傷がついた場所にも少し光沢を入れて、傷がない場所の光沢を抑える)
image

Metal Edge Wearの調整

Color to MaskとMetal Edge WearのMask(Optional)をつなげる
(色がついているところのみ傷が反映される)
image

Ambient Occlusion Mappingを0.98に設定する
(溝の中にmaskがはっきりする)
image

この時の見た目
image

DirtをMaterialにBlend

DirtとMaterial Color Blendを追加する

Dirtを検索する
DirtをGraphにドラッグ
image

Material Color BlendをGraphにドラッグ
image

Channel名 True/False
Diffuse False
Base Color True
Normal True
Specular False
Emissive False
Glossiness False
Roughness True
Metalic True
Specular Level False
Ambient Occlusion False
Height False
Opacity false

image

Material Color BlendとMaterial Color BlendのMaterialをつなげる
DirtとMaterial Color BlendのGrayscaleをつなげる
image

Metal Edge Wearで使用していたCutvature,AOをDirtにつなげる
image

Dirtを反映したMaterial Color BlendをOutputにつなげる
image

Material Color Blend(Dirt)の調整

Base Color
RGBを変更する RGB(79,71, 68)
image

Normal
Height Opacityを0.01に設定
image

Dirtのmaskを作成する

Colort to Maskを複製する
image

Base ColorをBlendの黒の部分と同じ色に設定する
image

Mask Rangeを0に設定する
image

Blendを追加する
2つのColor to MaskをBlendにつなげる
image

Blending ModeをAdd(linear Dodge)に設定する
image

DirtのmaskにBlendのoutputをつなげる
image

image
DirtのInstance Parametersを調整する
Dirt Level 0.76
Dirt Contrast 0.3
image

Material Color Blend(Dirt Invert Grayscle)の作成

Dirt,Material Color Blendを複製する
image

Color BlendのOutputとOutputピンをつなげる
DirtのGrayscaleのLinkを切断する
image

Invertで検索する
Invert Grayscaleを追加する
image

DirtのInstance Parametersを調整する
Dirt Level 0.59
Dirt Contrast 0.43

image

image

Material Color BlendのOutputを選択する
MetallicのColor Lを255に設定する
(Metalの部分は白くなる)
image

image

image

Base Colorとおなじくらいの濃さになる
image

初期Materialとの比較
image

7: Creating The Substance Material Part 2

7: Creating The Substance Material Part 2
7: Creating The Substance Material Part 2

OutputのRoughnessを調整する

Clrをクリック
UniformColorを追加する
image

UniformColorのColor ModeをrayScaleに設定する
image

Bldをクリック
Blendを追加する
image

BlendのForegroundとUniform ColorのOutputをつなげる
Material Color BlendのOutputをExpand Material(Group)で分割する
BlendのBackgroundからMaterial Color BlendのRoughnessとつなげる
BlendのBlend ModeをAdd(Linear Dodge)に設定する
image

Uniform ColorのOutputとRoughnessをつなげる
Uniform ColorのOutput Color Lの数値を変更することで、出力するRoughtnessの調整をすることができる
image

Graphをダブルクリック
Input ParametersのAdd a new input tweakをクリック
image

パラメータを設定する

input tweak

項目
Identifier metal_rough
Label Metal Rough
Defailt 0.01

image

Uniform ColorのOutput ColorにEmpty Functionを追加する
image

Functionをダブルクリック
GpaphがFunctionの編集に変わる
image

Get Floatを追加する
右クリック -> Add Node -> Variables -> Get Float
image

Variables/Get Floatにmetal_roughを選択する
image

Linear Interpolationを追加する
右クリック -> Add Node -> Function -> Linear Interpolation
image

Constant Floatを追加する
右クリック -> Add Node -> Constant -> Float
image

Constant Floatを複製する
Linear InterpolationにConstantをつなげる
image

Linear Interpolation Bにつないでいる側のConstant Floatを0.4に設定する
image

Linear Interpolationを右クリック
Set as Output Nodeを選択
image

Input Parametersの metal_roughのdefaultを変更することで、
Uniform ColorのGrayscaleが変更される
image

Defaultを0.01に設定する
image

MetallicとBlendのOpacityをつなげる
image

各ノードのパラメーターをInput Parameter化する

Uniform ColorのOuptut Colorをpaint_colorとしてInput Parameterに追加する

Uniform Colorを選択
Output ColorのExposeを選択
Input NameをNewに設定する
Input Nameをpaint_colorに設定する
OK -> OK
image

paint_colorがInput Parametersに追加される
image

LabelをPaint Colorに設定する
image

Metal Edge WearのWear Levelをmetal_wear_levelとしてExposeする
image

Metal Edge WearのGrunge_amountをmetal_grunge_amountとしてExposeする
image

Dirtを選択する
Dirt Levelをpaint_dirt_levelとしてExposeする
image

DirtのGrunge Amountをpaint_grunge_amountとしてExpose

image

Dirtを選択する
Dirt Levelをmetal_dirt_levelとしてExposeする

image

Grunge Amountをmetal_grunge_amountとしてExpose
image

metal_wear_levelの設定を変更する

項目
Label Metal Wear Level
Group Weathring

image

paint_dirt_levelの設定を変更する

項目
Label Paint Dirt Level
Group Weathring

image

paint_grunge_amountの設定を変更する

項目
Label Paint Dirt Grunge Amount
Group Weathring

image

metal_grunge_amountの設定を変更する

項目
Label Metal Dirt Grunge Amount
Group Weathring

image

metal_dirt_levelの設定を変更する

項目
Label Metal Dirt Level
Group Weathring

image

順番を並び替える

image

paint_colorの設定を変更する

項目
Group Material

image

metal_rooughの設定を変更する

項目
Group Material

image

archwayを複製してbackingのgraphを作成する

archwayをコピーして、archway.sbsにペースト
image

backingにリネームする
Open -> backing
image

backingのTextureのLink resourceを追加する
image

archwayのTextureをつなげていた箇所を置き換える
archwayのTextureを削除する
image

Graphを右クリック -> View outputs in 3D View -> backing
image

archwayを複製してdoorのgraphを作成する

archwayをcopy
archway.sbsにpaste
image

doorにリネーム
doorを右クリック -> Open -> door
image

doorのTextureのLink resourceを追加する
image

archwayのTextureをつなげていた箇所を置き換える
archwayのTextureを削除する
image

Invert GrayscaleをGraphに追加する
MetallicとInvert Grayscaleをつなげる
image

DirtのmaskにInvert Grayscaleのoutputをつなげる
maskを削除する
image

MetallicとDirtのmaskをつなげる
image

Paint Dirt Levelを調整する

項目
Default 0.67

image

MetallicのInvert GrayscaleのOutputをMetal Edge Wearのmaskに設定する
image

Metal Wear Levelを調整する

項目
Default 0.59

image

door:Emissiveを追加する

Outをクリックし、Outputを追加する
image

UsageのAdd Itemクリック
RGBA / emissiveに設定する
Identifierをemissiveに設定する

image

door_EmmisiveのLink resourceを追加する
Output(emmisive)とdoor_Emmisiveをつなげる
image

Outputを3D Viewに表示する
image

image

3DViewのMaterials -> door -> Editをクリック
Emissive Intensityを2に設定する
image

archway:Emissiveを追加する

OutをクリックしてOutputを追加する
archway_EmissiveのLink resourceを追加する
Outputの設定を変更する
UsageのAdd Itemクリック
RGBA / emissiveに設定する
Identifierをemissiveに設定する

archway_EmissiveとOutputをつなげる

image

3DViewにEmissiveを表示する
image

image

ここまでの全体
image

archwayをarchway_resourceに変更し、
archway_1をarchwayに変更する
image

8: Adding Leaks Using Particle Painting

8: Adding Leaks Using Particle Painting
8: Adding Leaks Using Particle Painting

archwayのLeaksペイント

Substace Painterでarchway.sppを開く

archway_Normal_DirectX.pngをインポートする
image

archwayを選択
TextureSet Settings
Select normal map
archway_Normal_directXを選択する
image

Particles -> Leaksを選択する
image

archwayのみ表示する
Layerを追加する
名前をLeaksに設定する
image

image

Leaksレイヤーにwhite maskを追加する
image

Ventsの箇所から水が垂れているように塗る
image

パイプの付け根から水が垂れているように塗る
image

image

黒のFill Layerを追加する
Leaksの塗った部分のみ白くなるようにする
image

Ctrl + Shift + EでTextureをExportする
masksフォルダを作成して、出力先を変更する
image

archwayのみチェックを入れてExport
image

archway_Base_Color.pngをmaskとして使用する
image

出力後は使用しないので、Leaks,Fill layer 2を非表示にする
image

backingのLeaksペイント

backingのみ表示する
Layterを追加する
名前をLeaksに設定する
white maskを追加する
image

backing_Normal_DirectX.pngをインポートする
image

Normal mapを追加する
TextureSet Settings
Select normal map
backing_Normal_DirectX
image

Leaksレイヤーの下に黒のFill Layerを追加する
image

image

backingのみ書き出し
image

出力後は使用しないので、Leaks,Fill layer 2を非表示にする
image

designer archwayにLeaks maskを追加する

Preference Libraryにmasksフォルダを追加する
image

Filterを追加する
image

archwayのGraphにarchway_Base_Colorを追加する
Grayscaleに設定する
image

Material Color Blendを追加する
image

Material Color BlendのChannelsを設定する

Channel名 True/False
Diffuse False
Base Color True
Normal True
Specular False
Emissive False
Glossiness False
Roughness True
Metalic True
Specular Level False
Ambient Occlusion False
Height False
Opacity false

image

Material Color Blendを各所につなげる

image

Material Color Blendのパラメータを調整する

Base Color
Color : RGB(50,41,32)
Opacity : 0.25

image

Normal
Height Opacity : 0.01
image

Base Color
Opacity : 0.38
Blending Mode : Multiply
image

Base Color
Opacity : 0.43
Blending Mode : Normal

image

Input Parametersを追加する

項目
Identifier Leaks
Type/Editor Boolean/Buttons
Defailt True

image

Base ColorのOpacityにEmpty Functionを追加する
image

FunctionのアイコンをダブルクリックしてFunctionのGraphを表示する
image

Get Booleanを追加する
右クリック -> Add Node -> Variables -> Get Boolean

image

Variables / Get BooleanにLeaksを設定する
image

If...Elseを追加する
右クリック -> Add Node -> Control -> If...Else
image

Constant Floatを追加する
右クリック -> Add Node -> Constant -> Float
image

Floatの値を0.5に設定する
image

Constant Floatを複製する
値を0に設定する
If...Elseにつなげる
image

右クリック -> Set as Output Node
image

LeaksのTrue/Falseで水の垂れた効果の表示/非表示を切り替えられる
image

Input Parameter Leaksの設定を変更する
Label : Leaks
Group : Weathring
image

designer backingにLeaks maskを追加する

backingをダブルクリック
image

backing_Base_ColorのLink resourceを追加する
Grayscaleに設定する
image

Material Color Blendを追加する
image

Material Color BlendのChannelsを設定する

Channel名 True/False
Diffuse False
Base Color True
Normal True
Specular False
Emissive False
Glossiness False
Roughness True
Metalic True
Specular Level False
Ambient Occlusion False
Height False
Opacity false

image

Material Color Blendを各所につなげる
image

Base Color
Color : RGB(50,41,32)
Opacity : 0.5

Normal
Height Opacity : 0.01

image

Input Parametersを追加する

項目
Identifier Leaks
Type/Editor Boolean/Buttons
Label Leaks
Group Weathring
Defailt True

image

Empty Functionを追加する
image

archwayと同様の手順でFunctionを作成する
image

SVG

maskを複製する
image

SVG -> New Resource...
image

Choose a resource nameをvent_masksに設定する
OKをクリック
image

SVGをダブルクリック
Ventsの溝をPathで囲む
image

選択ツールでPathで囲んだ箇所を選択する
RGB(255,255,255)に設定する
image

Metal Edge WearとSVGを切断する
image

SVGのOutputとMetal Edge WearのGrayscaleをつなげる
image

Curvature Weightを0.08に設定する
image

Invert Grayscaleを追加する
image

SVGのOutputとInvert Grayscaleをつなげる
image

Bldをクリックし、Blendを追加する
Blendに対して各ノードをつなげる
BlendのBlend ModeをMultiplyに設定する

image

BlendのOutputとMetal Edge Wearをつなげる
Curvatureが外れていたので、Metal Edge Wearにつなげる
image

Bldをクリックし、Blendを追加する
Metal Edge WearとBlendをつなげる
BlendのOutputとMatarial Color Blendのmaskとつなげる
image

Curvature Werightを0.17に設定する
(溝部分の金属が表示される)
image

Frameを追加して、処理をまとめる

image

Titleと色の変更が出来る
image

色分けをしてるとわかりやすくなる
image

Backing側もLeaksのmask処理を行う

image

image

image

Frame化
image

9: Publishing The Substance

9: Publishing The Substance
9: Publishing The Substance

backingのOuptut Sizeの設定を行う

backingのGraphを表示する
image

Graphをダブルクリック
Base Parametersを表示する
image

Output SizeにRelative to Parentを設定する
image

Outputが256x256に変更される
(Base Color, Normal, Metallic, Roughness)
image

Height,Ambient Occlusionは2048x2048のままになっている
Heightは使用しないので削除する
image

Ambient OcclusionのOutput SizeをRelative Parentに設定する
256x256にサイズが変わる
image

image

doorのOuptut Sizeの設定を行う

doorをダブルクリック
image

image

LvlをクリックしてLevelを追加する
Emissiveの中間になるようにつなげる
image

LevelのOutput SizeをRelative to Parentに設定する
image

Ambient OcclusionのOutput SizeをRelative to Parentに設定する
image

Heightを削除する
image

archwayのOuptut Sizeの設定を行う

archwayをダブルクリック
image

Graphをダブルクリック
Relative to Parentを選択する
image

LvlをクリックしてLevelを追加する
Emissiveの中間になるようにつなげる
LevelのOutput SizeをRelative to Parentに設定する

image

Ambient OcclusionのOutput SizeをRelative to Parentに設定する
image

Heightを削除する
image

Parent Sizeを変更すると、Output Sizeが変更される
image

ResourceのTextureの設定を変更する
image

archway_Base_ColorのBitmap FormatをJpegに設定する
image

Bitmap FormatはNormalだけRaw、その他はJpegに設定する
(Vents_maskはBitmap Formatが無いので変更なし)

Texture名 Bitmap Format
archway_Base_Color Jpeg
archway_Normal_DirectX Raw
archway_Height Jpeg
backing_Height Jpeg
backing_Normal_DirectX Raw
door_Normal_DirectX Raw
door_Height Jpeg
archway_Roughtness Jpeg
archway_Metallic Jpeg
backing_Base_Color Jpeg
backing_Metallic Jpeg
backing_Roughness Jpeg
door_Base_Color Jpeg
door_Roughness Jpeg
door_Metallic Jpeg
door_Emissive Jpeg
archway_Emissive Jpeg
archway_Base_Color_1 Jpeg
backing_Base_Color_1 Jpeg

image

Public selected element(s)

archway.sbsを選択する
Publish selected element(s)のアイコンをクリック
image

archway.sbsと同じフォルダに名前をsifi_door.sbsarに設定して保存する
image

OKボタンをクリックすると、sifi_door.sbsarが出力される
image

designerのサイズに比べると、大きなサイズになる
image

10: Importing Substance Into UE4,

10: Importing Substance Into UE4
10: Importing Substance Into UE4

UE4 4.4.5なのでバージョンがかなり変わっている

Substance Pluginをインストールする

マーケットプレイスからSubstanceを検索する
Substance Pluginを選択する
image

Substance Pluginを取得していない場合は取得する
Substance Pluginを取得しているならエンジンにインストールするを選択する
image

プラグインを追加するバージョンを選択して、インストールする
image

ForumのUE4 ProjectをUE4 15.1で開く

UE4 15.1でインポートしてみる
image

image

プレイするとエラーが出るが、プロジェクトを開くことが出来た
image

作成したsifi_door.sbsarを読み込む

Content -> materials -> substanceフォルダ内のアセットをすべて削除する
image

Import -> scifi_door.sbarを開く
image

archwayのInstanceとMaterialをインポートする
image

archway_resourceはmeshに関係が無いので、Importしない
designerから消してしまったほうがいい
image

backingのInstanceとMaterialをインポートする
image

doorのInstanceとMaterialをインポートする
image

MaterialをMeshにドラッグ
image

image

archway_INSTをダブルクリック
Output Sizeを2048pxに変更する
image

Textureの解像度が上がる
image

image

image

Emissiveの調整

archway_MATをダブルクリックし、マテリアルエディタを開く
image

Emissiveを光らせるような値に設定する
image

Applyをクリック
image

image

doorも同様にEmissiveを光らせる
door_MATをマテリアルエディタで開く
image

Emissiveを設定する
Applyをクリックする
image

image

Blueprintのエラー取り

レベルブループリントを開く

sg_archwayのデフォルト値にarchway_INSTを設定する
image

sg_backingのデフォルト値にbacking_INSTを設定する
image

ArrayとInput Valuesがはずれているので、つなげる
image

Event Begin Playの処理を削除する
image

UMGを有効にする

レベルブループリントのEvent Begin PlayをSequenceにつなげる
image

ボタンとスライダーでBase ColorやMetal部分にDamageの質感を与えることが出来る
詳しくは動画11で実施
image

11: Changing Substance parameters using Blueprint

11: Changing Substance parameters using Blueprint
11: Changing Substance parameters using Blueprint

サンプルプロジェクト内にBlueprintとか動かせるので、詳細に書くよりサンプルプロジェクトの中身を見ながら動画を見るのがオススメ