【Unity】エディタ上で簡単に汚れなどのデカールを表現するアセットShader Painter

この記事は「[Unity アセット真夏のアドベントカレンダー 2018 Summer!](http://assetstore.info/eventandcontest/adventcalendar/asset-adventcalendar2018summer/)」の26日目の記事です。
昨日25日目の記事は、[なまず](https://twitter.com/namazuchin)さんの「[PPSv2で使えるエフェクトを増やす｢SC Post Effects Pack｣](https://blog.ariari.biz/2018/08/24/post-113/)」でした。
さて、私が今回紹介するUnityアセットは「Shader Painter」とゆうエディタ上で簡単に汚れなどのデカールを表現するアセットを紹介したいと思います。

https://www.assetstore.unity3d.com/#!/content/103567?aid=1100l3oC8

<img width="793" alt="Shader_Painter_-_アセットストア.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/9eb6b228-08cc-c020-a67c-4e2a4a88b559.png">

#はじめに
「[Shader Painter](https://www.assetstore.unity3d.com/#!/content/103567?aid=1100l3oC8)」はどんな事ができるか

>Shader Painterはまだベータ版です。すべての機能を利用できるわけではありません。 BETAのアップデートごとに価格が上昇します。 50％を節約するために今すぐ割引価格で購入してください。
助言がありますか ？あなたのニーズに合わせてこのツールを形作るのを助けてください！
Shader Painterは、高度なマテリアル効果をペイントできるピクセルペイントツールです。
シンプルな頂点ツールShader Painterでは、単一のポリゴンに非常に詳細なシェイプを追加することができます。
_____________________________________
いくつかの機能：
- 高度なPBRシェーダエフェクトをペイントする
- 非常に低いポリモデルで詳細な図形をペイントできるピクセルペイント
- 多層サポート（4層）
- スクリプト可能なレンダリングパイプライン（SRP）のサポート
- 複数のID資料
- スキンメッシュサポート
- スペキュラ/光沢とメタリック/ラフなワークフロー
- カスタムブラシのインポート
- 明確な概要を得るためのシンプルなインターフェース
_____________________________________
すでに使用可能なシェーダ：
- スタンダード
- 標準マルチレイヤー
- スタンダードカットアウト
- 水
- 水Dx11
- 風Dx11
_____________________________________
今後の大きな改善点：
- 物質サポート
- 地図の輸出業者
- ブラシ/塗装の最適化
- アニメーションエディタのサポート
- 新しいシェーダと新しいエフェクト
- ブラシライブラリ

！！注意！！　現在はまだベータ版なので使用には十分気をつけてください

![Aug-18-2018 16-03-30.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/8c6e1601-1f75-8073-a8b8-f276451a1aa4.gif)
![Aug-18-2018 16-03-04.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/bfb3da29-d70a-0b70-98e9-c5f4dbccd8a2.gif)
![Aug-18-2018 16-04-57.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/f18e9511-ffde-170c-d9e3-7782fce94535.gif)

#ドキュメントや資料動画
https://docs.google.com/document/d/11XjhskWyFUIbC-ziEICA5wo8_VK91Rdr8xgPLjdWHZo/edit#
https://www.youtube.com/watch?v=j_wg1ZDxcFs
https://www.youtube.com/watch?v=aJmItTNoZUc&t=170s
https://www.youtube.com/watch?v=6-vq89lwRjM
https://www.youtube.com/watch?v=xldEalOtJjg
https://www.youtube.com/watch?v=3X_lQJ8tyAc&t=4s

#動作環境
MacBook Pro 2012 ←　結構重いのでWindowsの方がいいかも
Unity2018.1.3f1
Shader Painter v1.4.2 Beta.

#使い方
アセットをインポートしてきたら、適当にシーン上に３Dのオブジェクトを配置
今回はUnityデフォルトの「Plane」を生成
window->CiconiaStudio->ShaderPainterを開く
<img width="380" alt="スクリーンショット 2018-08-18 16.13.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/a0e807c7-3e88-edc1-50de-d8f44b160f4e.png">
基本この画面とシーン画面で編集になります
<img width="983" alt="Unity_2018_1_3f1_Personal__64bit__-_Untitled_-_ShaderPainterTest_-_PC__Mac___Linux_Standalone__Personal___Metal_.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/0db66ece-bb2f-3ed4-6d47-980f03b4c4c8.png">
PlaneをSelectPrefabにアタッチする
ここでアタッチしているオブジェクトにMeshRendererが入ってないとアタッチできません
色々オプションでシェーダーのタイプとか決めれますが、とりあえずデフォルトでいいと思います。
OKだったら「CreateShader」をクリック
<img width="435" alt="Unity_2018_1_3f1_Personal__64bit__-_Untitled_-_ShaderPainterTest_-_PC__Mac___Linux_Standalone__Personal___Metal__と_「【Unity】エディタ上で簡単に汚れなどのデカールを表現するアセットShader_Painter」を編集_-_Qiita.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/b5f32460-5522-7b38-3527-af5b4025b0d4.png">
するとLayer1とLayer2ができます
Layer1はベースのテクスチャなどを設定などができ
Layer2はデカール部分のテクスチャなどを設定ができます
ちなみにシェーダーのタイプを「StandardMultiLayers」を選択するとLayer４まで増えます
なんかUnityでStandardシェーダーで重ねられるレイヤーは４つが限界みたいです　
<img width="517" alt="Unity_2018_1_3f1_Personal__64bit__-_Untitled_-_ShaderPainterTest_-_PC__Mac___Linux_Standalone__Personal___Metal_.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/3334c182-52fc-8ca6-e95b-4247f9dca9c0.png">
<img width="519" alt="Unity_2018_1_3f1_Personal__64bit__-_Untitled_-_ShaderPainterTest_-_PC__Mac___Linux_Standalone__Personal___Metal_.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/8e2bbc91-d747-b151-37e6-b77f262e7192.png">
次にデカールの画像の設定をしますので「PaintMode」を選びます
<img width="526" alt="Unity_2018_1_3f1_Personal__64bit__-_Untitled_-_ShaderPainterTest_-_PC__Mac___Linux_Standalone__Personal___Metal_.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/a3910cc4-23b3-f152-3ce1-5d737a60529e.png">
Brushesから適当にデカール用の画像を選択します
ちなみにこれはデフォルトに入っている画像素材ですが、後から増やす事も可能だそうです
やり方
https://www.youtube.com/watch?v=3X_lQJ8tyAc&feature=youtu.be
<img width="523" alt="スクリーンショット 2018-08-18 16.37.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/1f1e257a-4d92-43bf-21b9-384a97b65525.png">
これでもデカールができるようになるのですが、下地が白とデカールも白でわかりずらいのでデカールに色をつけます
Shaderボタンを押して
<img width="526" alt="Unity_2018_1_3f1_Personal__64bit__-_Untitled_-_ShaderPainterTest_-_PC__Mac___Linux_Standalone__Personal___Metal_.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/7feb691f-19af-73a2-033f-ef8dbef053a5.png">
Layer2の画面に行きカラーパレットで適当に白以外の色にします
この画面だとデカール出来ないのでまたPaintModeに戻らないといけないのですが、
下記の画像に書いている通りショートカットボタンがあるのでそれで戻ります
<img width="514" alt="Unity_2018_1_3f1_Personal__64bit__-_Untitled_-_ShaderPainterTest_-_PC__Mac___Linux_Standalone__Personal___Metal_.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/f175bac9-b344-0df6-529b-d90c39c4a838.png">
戻ったら、シーン画面を開き　デカールしたい場所にマウスポイントしてあげて左クリックしてあげるとデカールされます
![Aug-18-2018 16-51-33.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/6c198f32-ff66-7635-0321-9bb370d2bacd.gif)

#最後に
触ってみた感じ、まだまだエディタのバグがあったりなど発展途上な感じ、
今は多分まだ使えないが今後アップデートに期待です
今後の展開
>
 - ブラシサイズの最適化
 - マップエクスポータ
 - アニメーションエディタのサポート
 - 高解像度レンダリングパイプライン（HDRP）のサポート
 - 物質ファイルのサポート
 - ランタイムサポート
 - たくさんの最適化

なんかスキンメッシュが使えんなかったけどやり方間違えたんかなあ；
[Unity アセット真夏のアドベントカレンダー 2018 Summer!](http://assetstore.info/eventandcontest/adventcalendar/asset-adventcalendar2018summer/)
明日26日目は[ながつき](http://nagatuki.hateblo.jp/)さんの「[Arbor3のビヘイビアツリーでAIをつくる](http://nagatuki.hateblo.jp/entry/2018/08/25/205055)」です