【Houdini + SubstanceDesigner + Unity HDRP】HDRPなワッフルをプロシージャルに作ってみる。

# はじめに
HoudiniとSubstance Desigerでワッフルを作る方法を紹介します。
**テクスチャデータは使わず**、すべてプロシージャルに作っています。

Substance Designer上での表示
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/6d53ef80-0a1d-e8b1-544a-3d371ec0b56f.png" width = 320> <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/fde17570-fdd9-f6fc-9fc2-8048aaf9c8fc.png" width = 320> 

Unity上での表示
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/964dd0be-c599-a72d-874c-99fb4cc215bd.png">

# 環境
Windows 10

Houdini Apprentice 17 (無料)
Substance Designer 2019 (有料)
Unity 2018.3.11f1 (無料)

# 作業その1: Houdiniでワッフルを作る
以下のようなワッフルをHoudiniを使ってモデリングします。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/4807bc7b-1d83-1e31-75e2-3daf92f63646.png" height = 480>  <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/29706db5-8ed5-d9f2-de2c-b5e8059456c2.png" width = 120>


## STEP1: 箱を作る
Boxノードを利用して、箱を作ります。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/e3e2a137-378c-d991-2bf3-8ff51d49f565.png" height = 240> <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/f6170cdf-c8cd-0d39-84c2-c4206202df39.png" height = 240>

### 補足: ワイヤーフレームのオーバー表示のON/OFF
Scene Viewにマウスポインタを載せた状態で Shift+Wを押すと、ワイヤーフレームのオーバー表示のON/OFFを切り替えることができます。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/5b4f04a0-67d4-4c8c-4f64-536dfb3d2b5e.png" height = 280>


## STEP2: 上を向いている面を選択
Groupノードを利用して、上方向を向いた面を選択します。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/e88d8364-1654-b795-ea6f-036a1aabd97f.png" height = 240> <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/3142e3dd-bcf4-32e8-88c2-a0c565765142.png" height = 240>

### 補足: ワイヤーフレーム表示のON/OFF
Scene Viewにマウスポインタを載せた状態で Wを押すと、ワイヤーフレーム表示のON/OFFを切り替えることができます。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/b718c6da-199a-00f2-11fc-ca4696ad022f.png" height = 280>

## STEP3: 上方向の面を小さくする
Transformを利用して、モデルにスケーリングをかけます。
通常はモデル全体にスケーリングがかかってしまいますが、
グループを指定することで、グループを持つ面にだけスケーリングがかかるようになります。

ここではSTEP2で作成したupfaceグループを指定して、上方向を向いた面にだけスケーリングをかけています。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/4dcbc861-d143-5496-bf77-292d56668f87.png" height = 240> <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/d13b5680-8a30-4a5a-1f5b-73f1cf45b47c.png" height = 240>

## STEP4: PolyExtrudeでメッシュを内側に押しこむ
PolyExtrudeを利用して、メッシュを内側に押し込みます。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/8b9dc1a5-8b3c-ae38-bee4-60c3411187d9.png" height = 440> 

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/f99a712d-00df-91ff-a0db-fa573bb50822.png" height = 440>

## STEP5: PolyExtrudeでメッシュを押し込み、穴を作る
PolyExtrudeを利用して、STEP4で押し込んだメッシュのFront部分を押し込んで穴を作ります。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/130fac35-82d8-f255-6871-e76630aa3550.png" height = 440> 
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/217c46e5-db04-87ff-bb4c-6f20e1abb4e5.png">

ワッフルっぽいモデルになりました。

## STEP6: VDBを利用して丸みを作る
ポリゴンをVDB(ボクセルの集まり; ボリュームデータ)に変換してそれを再びポリゴンに変換しなおす、という加工を行います。
結果として丸みを帯びたポリゴンを得ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/9ae9f7af-e404-502a-ad22-e56d1aafcae9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/c9d3455e-b1d7-83c1-0f04-bc69e20ea859.png)

### STEP 6.1: VDB from Polygonsノードを利用して、PolygonをVDBへ変換
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/fc4f0b10-26d0-9a1e-3672-311082964b9f.png" height = 320>

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/52f3ee36-26a3-5069-ea6d-3f687dbffc28.png" height = 320>

ボクセルの集まりになりました。

### STEP 6.2: Convert VDBノードを利用して、VDBをPolygonへ変換
Convert VDBノードのConvert ToにPolygonを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/1c36df3f-7b00-6203-45b4-7547094f3727.png)

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/982b887a-364c-2a50-f437-7aefbc6a8060.png" height = 320> <img src = "" height = 320>

丸みを帯びたワッフル3Dモデルになりました。

## モデルの頂点が多すぎる
モデルの頂点数を見ると約13万になっており、Unityで扱うには頂点数が多すぎます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/7daedfb3-7af7-6b24-3415-b7b86d8c0caa.png)

## STEP7: PolyReduceでポリゴン数を削減(リダクション)
PolyReduceノードを利用することでポリゴン数を削ることができます。(リダクション)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/377b44fc-e32f-c87f-1380-c6937a6c30a9.png)

PolyReduceでポリゴンを5%に削った場合、以下のようになります。
<img src = "" height = 320> <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/b41fb040-d60b-f2ee-9a07-fbf86704c652.png" height = 320>

頂点数を見ると5000近くまで削ることができました。
Unityで扱うのに良い感じの数です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/6467f21a-8757-b2a4-968e-fd9b74adf890.png)

## STEP8: 法線の再計算
Normalノードを利用して、モデル法線の再計算を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/ebbd6137-f2b8-94b7-5f7d-c1158cabdced.png)

## STEP9: UV展開
UV Textureノードを利用して、UV展開を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/00083f25-c71a-f7af-c1a9-477a37b35bdc.png)

## 補足: UVの確認
### UV ViewでUVを確認
SceneViewにマウスを載せた状態でSpace+5を押してUV Viewを開くと、
UVがちょうど0-1の正方形に収まっていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/1a0b80de-569b-294f-87b9-707a8901393d.png)

SceneViewにマウスを載せた状態でSpace + 1を押すと元のPerspectiveViewに戻ります。

### 補足: UV Quick ShadeノードでUVを表示
UV Quick Shadeノードを利用すると、モデルにUVを重ねて表示させることができます。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/b3d5fafe-c73b-969a-f10e-1f7f9e7fa825.png" height = 320> <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/b6e0103d-4a53-48ee-bd5b-c81b41b71b71.png" height = 240>




## STEP10: OBJファイルとしてエクスポートする
ROP Geometry Outputノードを利用することで、モデルデータをOBJファイルとして出力することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/c8cb6d04-3b93-0b5f-cbd3-b11c55379e8a.png)

## STEP11: Unityでワッフルを表示
ワッフルのOBJファイルをUnity上で表示させると以下のようになります。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/b053c285-585e-29d6-84dd-c54c3e4830bc.png">

# 作業その2: SubstanceDesignerでテクスチャを作る
PBR用テクスチャをSubstance Designerで作ります。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/6d53ef80-0a1d-e8b1-544a-3d371ec0b56f.png" width = 320> <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/fde17570-fdd9-f6fc-9fc2-8048aaf9c8fc.png" width = 320> 

## 準備: Substanceの設定を英語にしておく
Substanceのプリファレンスから言語を英語にしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/14d0ee15-04c4-b2bb-f4c4-77d74cbb0475.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/a4705236-d253-8f82-c2f1-aadc59e33557.png)

設定の変更を反映するためには一度SubstanceDeisgnerを終了し、再度起動する必要があります。

## STEP1: 新規Substance作成
まずは新規Substanceを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/1eda986a-ef82-5fc5-24c3-fe4511704532.png)

Metallic/RoughnessのPBRを選び、グラフ名にWaffleを入力して新規Substanceを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/e4365750-fe93-1662-dca0-64e289440489.png)

新規Substanceを作成すると、出力用のノードが5つ持ったグラフが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/18ea87f6-3421-a86e-4bc8-87165943d967.png)

今回はHeightマップは使用しないので、Height Outputノードは削除しておきます。


## 簡単な画面説明
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/b5f42029-1107-ee63-65a8-460e4bfa624b.png)

## STEP2: ワッフルの3Dモデルを取り込む
次に、先程Houdiniで作成したワッフルの3DモデルをSubstanceDesignerに取り込みましょう。

画面左にあるエクスプローラーのウィンドウのPackageを右クリックし、Link -> 3D Meshを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/4a924084-cae6-33db-0628-222fd440dd04.png)

先程作成したOBJファイルを選択して開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/3e47207e-4223-1a00-11c9-8693b501ed7a.png)

エクスプローラーのウィンドウにwaffleが追加されるので、これを3D Viewへドラッグ&ドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/cada904f-a9d3-d26e-aaf4-b7faaae65834.png)

3D Viewにワッフルが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/bd55a8b5-5e5f-b9ea-1b09-78d1e8397019.png)

Substanceグラフと3D Viewの関連付けが外れてしまうので、Substanceグラフを3D Viewへドラッグ&ドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/90049d18-ca62-d0bb-d175-59a7bde15364.png)

Substanceグラフが3D Viewへ反映されるようになり、テカテカするようになりました。
初期状態のSubstanceグラフはMetallic=1であるため、金属のような質感になっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/9d0c3053-456e-e134-1485-bbb6459170d7.png)

以上で下準備は終わりです。

これから実際にノードを組んで質感を作っていきます。

## 補足: ノードの作成方法
Graphウィンドウにマウスポインタを置いた状態で、スペースキーを押すとノード一覧が表示されます。
ノード一覧から目的のノードを選ぶことで、ノードを作成することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/55fee5a8-95eb-a2c3-4113-75607d6a12c0.png)

ノードの名前を途中まで入力することで、ノードを絞り込むことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/5abf3ff8-def1-899f-20a0-5e4f6050cd85.png)

## STEP3: Metallic = 0にする
Uniform Colorノードを作成し、Color Mode = Grayscale, Output Color = 0 (最小値)にします。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/3af67f84-6cde-0f2b-736d-5c1924eea705.png">　 <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/4f131497-e859-e489-ee42-0c5ee808c3af.png" width = 240>

これをMetallic Outputノードに接続すると、メタリックとして0が出力され、質感が非金属になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/18bcbed9-4f96-f0b6-19b5-2e3d3e1fc960.png)

## STEP4: Roughness = 1にする
STEP3.で作成したUniform Colorノードを複製(Ctrl + D)し、Output Color = 1 (最大値)にします。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/7ec20b7e-9c53-097b-a4a4-c5ef95235b83.png" height = 320>

Roughness Outputノードに接続すると、ラフネスとして1が出力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/d9279844-c7dd-073b-d40c-665835f2c2da.png)

つやつやした光沢は無くなり、ただの真っ黒なワッフルになりました。
色が黒いのは、BaseColor Outputノードが黒色(RGBA = (0,0,0,0))になっているためです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/b665fab4-e431-ec1a-2eae-2f1b3dfe71e7.png)


## STEP5: ワッフルに色を付ける
### Uniform Colorノードで茶色を設定してみる
今度はColor Mode = Color、 RGBA = (149, 88, 38, 255)なUniform Colorノードを作成し、Base Color Outputノードに接続してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/1bf1f257-29de-20a3-ddca-f1b138045516.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/3e048923-b9ff-a59e-711e-a0926a8329a4.png)

茶色い感じのワッフルになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/700c2af7-07fc-41bb-e77c-cd6cfbae2616.png)

### ノイズを利用してリッチな色合いを作る
ノイズを使うと、リッチな色味を作ることが可能です。 
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/e647eea5-4b99-e0c3-dccc-54addf21b7d1.png" width = 400> <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/f561ba7d-4d6f-2a33-8ba4-caa5cb2cd596.png" width = 400>

ただのノイズですが、なんとなく美味しそうに見えるような気がします。


使用したノードは Clouds 1 と Gradient Mapです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/5dbc9b11-9471-378a-40c3-5b5ceb1ae475.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/0bd0d8db-cbf9-c3f9-0f11-47903c477fbf.png)

## STEP6. ワッフルに光沢をつける
先程は、ラフネスに1を設定していましたが、ラフネスを下げることで光沢が付くようになります。
例えば、0.01を設定した場合は以下のようになります。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/2d34d87f-904e-150d-04a2-0f5105d54bf2.png", width = 400> <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/0d872baf-79bc-a953-11bf-23a4a09312bf.png", width = 400>


## STEP7: 光沢にノイズを混ぜる
ノイズから作成した法線マップを利用することで、ワッフル表面に凸凹がつき、光沢が変化します。
光沢にバラツキが生まれ、リアルな感じがでたのではないでしょうか。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/6d53ef80-0a1d-e8b1-544a-3d371ec0b56f.png" width = 400> <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/fde17570-fdd9-f6fc-9fc2-8048aaf9c8fc.png" width = 400> 

今回はClouds 2ノイズにNormalノードを接続し、これをNormal Output ノードに接続してみました。
NormalノードのIntensityには3を設定しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/8aa395c0-bb25-dee0-475d-6c628b3b297d.png)

## テクスチャ完成
複数のノイズを乗算する、Vector Morph Grayscaleで模様を変形させる、ハイトマップを使って凹凸をつけるなど、
いろいろなアレンジが考えられますが、長くなるので今回は割愛します。

# 作業3: UnityのHDRP向けにエクスポートする
作成したワッフルのテクスチャをUnityのHDRP用に出力します。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/964dd0be-c599-a72d-874c-99fb4cc215bd.png" height = 360>

HDRP向けに出力する方法は公式サイトにて紹介されていますが、自分でもやってみました。
https://docs.substance3d.com/integrations/working-with-hdrp-lwrp-172818842.html

## STEP1: Unityのマテリアル確認
HDRP環境のUnityのマテリアルを見ると、Maskマップを設定する箇所があります。
ここにはMetallicやAO(アンビエントオクルージョン)、Detail、Smoothness(Roughnessを反転させたもの)を持つテクスチャを指定します。
これら4つの情報を1枚のテクスチャとしてまとめたものがMaskマップと呼ばれています。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/ae703121-d4e1-f3c6-9803-2ffffdbf2007.png" width = 480>

## STEP2: Maskマップの作成
RGBA MergeノードやInvert Grayscaleノードを以下のように接続してMaskマップを合成します。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/ac1b7e1c-a316-04e6-801f-d05af7e08174.png" width = 520>

## STEP3: Maskマップ出力ノードを作成する
Outputノードを作成し、RGBA Mergeノードと接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/6b28a057-7a3f-020a-ac33-abd686efac29.png)

Outputノードは以下のように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/3ed902a4-34f5-f830-76ca-fb9a2f6633f3.png)

## STEP4: テクスチャ出力・Unity取り込み
Substanceグラフを右クリックし、Export output as bitmapsを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/6b954187-add2-14b1-2be9-c6cc9e36e37f.png)

テクスチャ出力先のパスを指定し、Export outpusをクリックしてテクスチャ出力します。
テクスチャ出力先にはUnityプロジェクト内のパスを指定しておくと、エクスポート後にすぐにUnity上で触れるので便利です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/d9b9e14f-081d-ed14-0929-7ec635a40344.png)

以下のようなテクスチャが出力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/0cb995d7-a7ac-7206-8321-8d714926ccd5.png)

#作業4: Unity上でマテリアル設定
## STEP1: マテリアルにテクスチャを割り当て
BaseColorとMaskマップとNormalマップをマテリアルに割り当てます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/e6efcd1e-bf0c-9ab4-d88a-f7c9a11405b1.png)

割り当てたマテリアルをワッフルの3Dモデルに登録すると、以下のような見た目になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/7759ffde-0659-58b5-58a8-3fb827392925.png)

## STEP2: Smoothnessを調整
マテリアルの Smoothness Remappingの部分を調整すると光沢が出るようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/57a8a8ab-278f-0747-6c56-d99197964b48.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/d814b7a8-8838-3da6-bff0-018934d27d88.png)

## STEP3: 法線Fix
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/bc7f7545-db38-f429-c897-97cd7da1dcf7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/8fed60cb-4cde-6fc3-98d7-616883d8ba91.png)

## 完成
みずみずしい感じのワッフルができました。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/1f77caeb-8a80-7b89-16a2-adcd68b1dcd7.png)


# 参考URL
Working with HDRP / LWRP
https://docs.substance3d.com/integrations/working-with-hdrp-lwrp-172818842.html