Edited at

Substance in UE4 Long Page

More than 1 year has passed since last update.


Substance in UE4


Twitterだと画質が粗くてピントが合っていないみたいな感じになってしまう
カッコいいといいながらピンぼけで伝わらない
やっぱりVimeoとかYoutubeは偉大だ pic.twitter.com/M11WiFIhxs

— GAN彩坊(光の戦士) (@gansaibow) 2017年3月22日


使用バージョン

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


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

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

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

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


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


ここで学習できること

基本的なノードの使い方

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


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


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


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

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

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