Amplify Shader EditorですぐはじめるTriplanar

少し前に、ワールド製作者交流会というイベントがありました

僕も参加させてもらって、色々なワールド製作者と色々なお話ができたのですが、
Amplify Shader Editorがワールドモデリングに良いと聞いたけど、何に使ったら良いかわからない・・・という話題を聞きました
技術を学ぶ気になっても、何を目指したらいいかわからないこと、ありますよね
とりあえずぱっと使って効果が高いテクニック、Triplanarについてはじめ方をまとめました

# UVを使わず継ぎ目のないタイリングができる

Triplanarはワールド座標てテクスチャを割り当てる技術です
高級感のある角丸のついた建材に無茶苦茶相性がよく、タイリングしたままではUVの展開が難しい角丸をなめらかにつないでくれます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/39791046-ea1e-9aeb-04aa-c0075eb302e4.png)
シームが発生しないため円柱型の建材にも相性が良いです
このとおりぐるぐる回してもどこにも継ぎ目がありません

![ダウンロード (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/b11a298c-cfde-3bf0-7348-769bd0c003c2.gif)

一般的にはサブスタンスペインターなどで継ぎ目を消すことはできますが、ShaderによるTriplanarは内部的には１枚だけのタイルパターンを使うので容量を小さく、解像度を高くできます

# Shaderを作ってエディタを開く

とりあえずAmplify Shader Editor購入済み、インポート済みという前提です
Projectタブから右クリックでCreate > Amplify Shader > Surfaceを選びます
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/6d0a8d90-7352-837e-60f8-bea0f1ef49ae.png)
Shaderに名前をつけるとAmplifyShaderのエディタが開きますが、**とりあえず閉じます**
先にマテリアルを作ったほうがテクスチャまで含めて設定でき、最初は間違いが少ないからです
作成したShaderを右クリックしてマテリアルを作成し、
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/60e6e1f9-e4f2-8ed4-1f95-00f6e884f449.png)

ダブルクリックするとAmplifyShaderのエディタ画面がマテリアルを対象として開きます（タブのところにマテリアルのアイコンがつきます）
基本的にこの画面から始めると良いです
各画面の説明はこんな感じ
![空白の図 (16).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/12a586b9-0c1a-2f7a-fbd0-3575fbf2537b.png)

# ノードを置いていこう

適当に空いているところで右クリックするとノードの検索欄が出てくるので、Triplanar Sampleを探して配置します
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/479f9130-6e3f-c842-1727-9e411e83456f.png)
配置したノードを選択すると左側にプロパティが出てきます
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/13749e22-2571-c0bc-e8e5-1b0d8bf1b1a8.png)
適当にタイリングするテクスチャを割り当てて、TextureカテゴリのNameの項目にAlbedoと入れておきます（後でマテリアルの設定のときの名前になるのでわかりやすければok）
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/dd785e29-3eee-85c5-8c0a-7f649e5fe3af.png)
RGBAをAlbedoにつないで、ビルドボタンを押すと（オートビルドなら勝手に）Shaderが生成されます
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/00235808-e32b-ab21-af1d-de4c1b730116.png)

角丸つきのキューブに割り当てるとこんな感じ
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/54dd50a4-842a-ec41-9c1b-b9636002e5dd.png)
反対側もこんな感じで、ぱっと見た感じ継ぎ目がないですね、いいかんじ
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/a114e5b1-473c-baf8-9bb8-90439f8ca649.png)

# ノーマルとメタリックとスムースネスを追加する

同じ感じでノーマルとメタリック（＋スムースネス）を追加していきます
ノーマル用のノードを追加して、プロパティからNormalMapのチェックをつけて、XYZをNormalに接続
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/fd80018d-6609-8e6c-91f1-2e1299aa82c0.png)
MetallicとSmoothnessは同じ画像のR要素と、A要素に入っているので、こんな感じに接続します
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/80e32b59-caf5-dfbe-fd30-0d25facfe611.png)
それぞれテクスチャに名前をつけておくとマテリアルの設定で使いまわしやすくなります

なおマテリアルのインスペクタで設定するときの並び順は、なにもないところをクリックしたときのプロパティの一番下の項目で設定できます
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/0cac0a24-9dee-96fa-4809-09f392e96450.png)
適切なテクスチャを割り当てるとこんな感じです
高級な机とかタンスとかに良さそう
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/8f6c96fb-8fca-5924-c976-5500f76e690a.png)

# テクスチャはワールド座標で割り当てられている

このキューブを動かすとちょっと変わった動作をします
![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/7da4238d-fc52-6e59-15db-cddca1c02c4d.gif)
これはワールド座標でテクスチャが割り当たるTriplanarの特徴です
タイリングが基本の建築素材にはある意味とても便利なのですけども回転する際には斜め方向の模様が２つのテクスチャを混ぜ合わせたチェック柄になってしまうこともあるので気をつけてください
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/0d786703-ed21-e667-a05c-18470d56b27b.png)
悪目立ちしないような部分ならありな気もするけどもね

作ったマテリアルはテクスチャを割り当てるだけで再利用可能です
Substance 3D Assets （旧SubstanceSource）のテクスチャがとっても相性が良いです
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/d8249e53-bc96-789e-ceab-f2f6555fe0a4.png)
さすがにレンガのようなはっきりした模様があると無理がある接続かも・・・コンクリートとか岩とかはいい感じになりやすいです
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/0619167a-5995-d6d1-035a-29934bf3138b.png)
# 回転できるようにする

傾いた面はともかくとして、上から見てワールド座標に必ず垂直だと、斜めに置いた家具などで困ることがあるので回転機能を追加しておきましょう
オブジェクト座標を使う方法もあるのですが、Blenderで配置する人だと上手く行かないので手動指定にします

WorldPositionと、Rotate About Axisを追加して図のように接続します
Rotate About Axisのプロパティのうち、Normalized Rotation Axisのyの値を1に、Rotation Angleを45にします
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/9e22d5e0-3b6f-6ac6-dae8-1573810c15c8.png)
これでy方向に45度回転したテクスチャになります
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/060f13fe-13dd-d2fa-8ec3-471560474a9f.png)

# サイズを変えられるようにする

大きさもワールド基準なので変えられるようにしたいですね
Floatノードをこのように接続して、
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/22675b03-7488-b09d-a5dc-320d4766d6f7.png)
TypeをPropertyにして、tilingという名前をつけます

あ、ついでに回転角度もマテリアルから設定できるようにしておきましょう
同じくFloatノードを接続して、TypeをPropertyにして、rotationという名前にします
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/97b350a0-c327-a0b1-d155-67f88f5b174e.png)
マテリアルのインスペクタに設定項目が増えます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/22ea5849-6e18-e7ed-a149-a11bf6e29da1.png)
これで自由に設定できるよ～！やったね！
![Videotogif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1376552/b903fc93-01cd-1eea-6028-c0684eed2998.gif)

さっと作れて効果がわかりやすいTriplanarでした
次回は高解像度のタイリングを維持したままワールドのpasscallを減らせるTextureArrayについて解説しますね

タオルくんでした