![](https://gamesgard.com/wp-content/uploads/2021/10/title.jpg)
上面と側面で異なるテクスチャにする
前回は1枚しかテクスチャを使用していなかったので、全体的に地味な印象でした。なので今回は上方向を向いている面と横方向を向いている面で、別々のテクスチャを使うようにしましょう。もちろんテクスチャ同士の境目は綺麗にブレンドすることで違和感が出ないようにします。これができればグッと見た目がよくなりますね。
考え方としては下図のような感じです。3Dモデルの頂点には法線ベクトルと呼ばれる向きを示すデータ(3Dベクトル)があります。その3DベクトルのY成分を見ることで、どれだけ上を向いているのかがわかります。
![](https://gamesgard.com/wp-content/uploads/2021/10/26d41d5743a84582592f142e553cc7ae.jpg)
例えば、斜め上方向を向いてい時の法線(0.7, 0.7, 0)だった場合は、Y成分の0.7を見て
草原テクスチャの70%(0.7)と、岩テクスチャの30%(0.3)をブレンドする。
といった感じで簡単に実装できます。
Shader Graphで実装
![](https://gamesgard.com/wp-content/uploads/2021/10/e80502e22247424a0a87bc127c6e8baa-1-1024x596.jpg)
上面の草原テクスチャをTextureBとして追加し、法線ベクトルのY成分(G成分)を比率として使用し、2枚のテクスチャをブレンドしています。
結果
![](https://gamesgard.com/wp-content/uploads/2021/10/83e91cc7a2e1e1a4c6de4ca669879bb0-1024x649.jpg)
上方向に向いてる所ほど、草原テクスチャになりましたね。ゴツゴツした形の3Dモデル(Rock)を使えば、簡単に複雑で綺麗な地形が作れます。
![](https://gamesgard.com/wp-content/uploads/2021/10/f37b822f8ec80cc7a3be430a6198853a.jpg)
さらなる改良
この状態でも良い見た目になっていますが、もっと微調整をしたくなってきます。例えば
- テクスチャの大きさをもっと小さくし、詳細に表示したい。
- 草原と岩の境目を狭くしたり広くしたり、位置を上下させたりしたい。
このあたりを改良していきましょう。
テクスチャの表示サイズの調整
要はテクスチャの拡大・縮小ですね。これは簡単にできます。
![](https://gamesgard.com/wp-content/uploads/2021/10/cfc80a7ebd76a527b3e8899081196951-1024x610.jpg)
マテリアル(TriplanarMaterial)のTilingを調整すれば、テクスチャの大きさが変更できます。
![](https://gamesgard.com/wp-content/uploads/2021/10/8089e50294910c6cb163e5cb54ad137b-1.jpg)
草原と岩の境目を調整できるようにする
草原と岩の境目を位置をパラメータで変更できるようにしましょう。Shader Graphでは以下のようになります。
![](https://gamesgard.com/wp-content/uploads/2021/10/e97ce10c296cc6cee61c47e2af62e897-1024x527.jpg)
黄色で囲んでいる部分が、下図の黄色の範囲の部分です。
![](https://gamesgard.com/wp-content/uploads/2021/10/7646a633fdb78b5d03a080d7b150ef10-4-1024x720.jpg)
InのY成分は0~1で変化していきますが、それをPositionとGradientで上図のように変換し、結果のブレンド率(Out)を算出しています。
Positionを変更すると黄色の範囲が左右に動き、境目の位置を変化させることが出来ます。
Gradientを変更すると黄色の範囲の幅が変化し、境目の広さを変化させることが出来ます。
完成
Positionを変更
![](https://gamesgard.com/wp-content/uploads/2021/10/Triplanar_vol2.gif)
Gradientを変更
![](https://gamesgard.com/wp-content/uploads/2021/10/Triplanar_vol3.gif)