すべての人をクリエイターに電子工作します!

SubstanceDesigner6 iPhoneで撮影した画像からタイリング出来るテクスチャを作成する

Substance Day TokyoでSubstanceDesignerで簡単にタイリングが出来るデモをしていました
Substance Day Tokyoの動画が提供されていたので、やってみようとおもいました
マスタークラスの動画だけが提供されていたようなので、新しい機能的な内容は動画がありませんでした

色々調べたらチュートリアルを発見したので、iPhone5Sで撮影した画像からタイリングできるテクスチャを作成して、UE4に取り込んでみました

【目次】



スポンサードリンク

iPhone5Sで撮影した画像をSubstanceDesigner6(以下、SD6)でタイリング出来るテクスチャにします
その後、UnrealEngine4(以下、UE4)でタイリング出来るマテリアルとブループリントを作成しました

image

image

2017/06/06 正しい撮影方法と設定方法を見つけたので、機材がそろい次第試してみたいです
YOUR SMARTPHONE IS A MATERIAL SCANNER
https://www.allegorithmic.com/blog/your-smartphone-material-scanner

iPhoneでTilingしたい質感の床や壁を撮影する"#"

家の壁紙をTilingTextureにしてみます
4方向から時計周りに撮影することで、凹凸をSD6で算出してくれます
image

スクエアで撮影を行う
通常の撮影でも大丈夫
image

4枚90°ずつ回転するような感じで撮影する
同じ距離になるように撮影すると精度が上がる
image

SD6でTilableTextureを作成する"#"

Scan Processing Physically Based(Metallic/Roughness)テンプレートを使用してTilingTextureを作成する"#"

SubstanceDesigner6にはTilingTextureを作成するテンプレートが用意されています
Graph Templateに[Scan Processing Physically Based(Metallic/Roughness)]を選択する
image

iPhoneで撮影した画像をGraphにドラッグします
import resourcesを選択します
image

OKボタンをクリックします
image

最初のノード(Multi_color_equlizer)のinputにiPhoneで撮影した画像を接続します
image

これだけでTilingTextureを作成することができます
つなぎ目が少し気になります

image

チュートリアル動画を参考にしてつなぎ目が気にならないTilingTextureを作成する"#"

Using the Scan Processing Filters

Multi Cropノードを追加します
image

画像が4枚なので、Input Countを4に設定します
iPhone5Sで撮影した画像が1224x1224なので、Input SizeをX:1224,Y:1224に設定します
image

画像とMulti Cropノードを接続します
image

Multi Cropノードは2DViewで切り抜く範囲を編集することができます
image

Multi Color Equalizerノードを追加します
image

Input Countを4に設定して、Multi CropノードのOutputと接続します
image

Multi-angle to Albedoノードを追加します

image

Samples Amountを4に設定して、Multi Color EqualizerのOutputと接続します
image

Multi-angle to Normalノードを追加します
image

Samples Amointを4に設定して、Multi Color EqualizerのOutputと接続します
image

Intensityを強くした方が撮影したモチーフと近い気がします
Next Sample Light AngleをClockWiseに設定します
時計回りということでしょうか
image

Normal to Height HQノードを追加します
image

Multi-angle to NormalのOutputとNormal to Height HQノードを接続します
image

Material Clone Patchノードを追加します
image

Channelsを以下のchannelだけ有効にします

  • Base Color
  • Normal
  • Height

Material Clone PatchのInputに接続します

  • Multi-angle to Albedo > Base Color
  • Multi-angle to Normal > Normal
  • Normal To Height HQ > Height

image

Smart Auto Tileノードを追加します
image

Material Clone PatchとSmart Auto Tileを接続します
Smart Auto TileのOutputとOutputの各ノード(Base Color,Normal,Height)を接続します
image

つなぎ目がないTilingTextureが出来上がります
image

3DViewにTilingの数値を変えてつなぎ目や本物の画像と似ているか確認を行う
image

UE4にインポートするための最適化を行う"#"

Roughness"#"

Uniform Colorノードを追加して、OutputのRoughnessに接続する
黒(ツルツル)~白(マットな光沢)のグレースケールで質感を調整する
image

Smart Auto TileノードのOutput(Height)とUniform Colorをブレンドすることで、少し複雑な質感を与えることができる
image

Metallic"#"

Roughnessと同様に黒(非金属)~白(金属)のグレースケールで質感を調整する
image

Raughness同様にSmart Auto TileノードのOutput(Height)とブレンドすることで複雑な質感になる
image

Ambient Occlusion"#"

UE4ではHeightではなく、AmbientOcclusionを使用するので、HeightをAmbientOcclusionに置き換えます

Outputノードを追加します
OutputのHeightは削除します
image

Add ItemでUsagaを追加します
ambientOcclusionを設定します
IdentifierにOを設定します
image

Ambient Occlusionノードを追加します
image

Smart Auto TileノードのOutput(Height)とAmbientOcclusionノードのInputを接続します
Ambient OcclusionノードのOutputとOutputのAmbientOcclusionを接続します

image

テクスチャ画像のExport"#"

テクスチャ名にGraphのChannelのIdentifierが使用されるので、名前を変更します

image

  • Base Color > D
  • Normal > N
  • Roughness > R
  • Metallic > MT
  • AmbientOcclusion > O

image

ExplorerのGraph名を右クリックします
Export output as bitmapsを選択します
image

書き出し場所、画像フォーマット、名前のテンプレートを設定したら、Save Allをクリックします
image

テクスチャが書き出し場所に出力されます
image

UE4のブループリントでテクスチャをTilingできる床を作成する"#"

タイリング出来るマテリアルを作成する"#"

TextureをUE4のインポートします
image

Materialを作成します
名前はM_Tilingに設定します
image

インポートしたTextureをMaterialEditorにドラッグして、BaseMaterialに接続します
image

Textureをタイリングすることが出来るノードはTextureCoordinateです
Coordinates 表現式 TextureCoordinate

右クリック > TextureCoordinate で追加します
(※TextureCoordinateはTexCooordという名前でノードに表示されますが、TexCoordで検索しても見つからないので要注意)
image

TextureCoordinateを各TextureのUVsに接続します
TextureCoordinateのUTiling、VTilingを3に設定します
image

3DViewerでタイリングすることが確認できます
image

しかし、TextureCoordinateはパラメーター化することが出来ないため、パラメーター化できるように変更します

  1. UTilingとVTilingをパラメータ化できるようにするConstantを追加する
  2. AppendVectorを追加して、Constantを接続する
  3. Multiplyノードを追加して、TextureCoordinateとAppendVectorを接続する
  4. TextureCoordinateから各TextureのUVsに接続しているので、Multiply空接続するように接続する
    image

各Texture、Constantをパラメーター化する

  1. 各Texture,Constantを選択する
  2. 右クリック > Convert to Parameterを選択する
    image

各Textureに名前を設定します
GroupにTextureと1度入力するとGroupが出来るので、各TextureもGroupをTextureに設定します
image

Tilingを設定しているパラメーターにも名前を設定します
GroupはTilingに設定します
image

MaterialInstanceを作成する"#"

M_Tilingを右クリックし、Convert Material Instanceを選択します
image

名前をM_Tiling_P_002_instに設定します
image

もう1つMaterialInstanceを作成して、名前をM_Tiling_P_001_instに設定します
ダブルクリックでEditorを開きます
image

パラメーター化した名前にチェックボックスが付いています
チェックボックスにチェックを入れることで、設定を変更することが出来ます
事前に用意しておいたPattern001のTextureに入れ替えます
image

Tilingのパラメーターにチェックを入れます
数値を変更することで、Tilingすることを確認することが出来ます
image

PlaneをLevelに配置して、Materialを作成したMaterialInstanceに設定することでタイリングする床や壁を作成することが出来ます
MaterialInstanceのTilingカテゴリの値を変更することで、タイリングの数を変更することが出来ます
image

Levelに配置してからもTilingを変更できるBlueprintを作成する"#"

Blueprintを作成します
image

親クラスはActorを選択します
名前はBP_Tilingに設定します
image

StaticMeshを追加します
image

デフォルトのスタティックメッシュにはPlaneを設定しておきます
View Optionsをクリックして、[Show Engine Content]を選択することで、Planeを選択することが出来ます
image

確認のためにMaterialにもM_Tiling_P002_Instを設定しておきます
image

変数を追加します
変数はレベルに配置してから変更できるように公開しておきます

変数名 変数の型 カテゴリ デフォルト値
UTiling Float Tiling 1.0
VTiling Float Tiling 1.0
M_TilePattern Material Instance(Reference) Material Instance M_Tiling_P001_Inst

image

Blurprint全体像
image

[解説]
DynamicMaterialを作成することで値を変更可能になります
Set Scalar Parameter ValueノードでMaterialInstanceのパラメーターの値を変更することが出来ます
image

DynamicMaterialInstanceをStaticMeshのマテリアルに設定します
image

ViewPortを表示すると変数のDefault値で設定したMaterialInstanceとTilingの数値で表示されます
(※何も表示されていない場合は、Tilingのデフォルト値が0に設定されているためか、Bluerprintが間違っています)
image

Class Defaultをクリックして、デフォルト値を変更することでMaterialInstanceやTilingの値を変更することが出来ます
image

LevelにBP_Tilingを配置します
image

Detailタブで変数の値を変更することで、Levelに配置してから設定を変更することが出来ます
image

StaticMeshを選択して、StaticMeshをPlaneからCubeに変更することで形状を変更することもできます
image

総括"#"

SD6ヤバいなぁ
旅行先で沢山画像を収集しておくと良さそうです


スポンサードリンク
SubstanceDesigner6 書き出しサイズを設定する

  1. 1. iPhoneでTilingしたい質感の床や壁を撮影する"#"
  2. 2. SD6でTilableTextureを作成する"#"
    1. 2.1. Scan Processing Physically Based(Metallic/Roughness)テンプレートを使用してTilingTextureを作成する"#"
    2. 2.2. チュートリアル動画を参考にしてつなぎ目が気にならないTilingTextureを作成する"#"
    3. 2.3. UE4にインポートするための最適化を行う"#"
      1. 2.3.1. Roughness"#"
      2. 2.3.2. Metallic"#"
      3. 2.3.3. Ambient Occlusion"#"
    4. 2.4. テクスチャ画像のExport"#"
  3. 3. UE4のブループリントでテクスチャをTilingできる床を作成する"#"
    1. 3.1. タイリング出来るマテリアルを作成する"#"
    2. 3.2. MaterialInstanceを作成する"#"
    3. 3.3. Levelに配置してからもTilingを変更できるBlueprintを作成する"#"
  4. 4. 総括"#"