見出し画像

【Unity】シェーダー学習ログ #5

前回はこちら。

イカしたゲームを模倣する

A Short Hikeはウチの5歳児がお気に入りのゲームなんDA☆主人公がペンギンに見えるらしく「ペンギンさんのゲーム」と呼んでいるのだけれど、たぶんあれ鳥だよな??飛んでるし。

ゲーム自体は短くてすぐクリアできてしまうのだが、羽根を集めて山登りする過程が楽しいらしく、何度もデータを消して最初からやり直している。

小さいお子さんには、こういう箱庭をテキトーに散策できるようなゲームが刺さるのかもしれない。

まあ、そんな話はさておき、こういったゲームに使われている技術を模倣していくのが勉強に繋がるんじゃなかろうかなーと思う次第だ。

製作者が制作過程を解説している動画の12:18あたりから「Triplanar Shaderで地形を自動的にテクスチャリングする」という話が出てたので、今回はそいつを真似してみようと思う。

ちなみに製作者のツイートによると、ギハブに上がってるプロジェクトを使ってるとの事だが、俺はあえて勉強中のShaderGraphでトライしてみる。

Triplanarとは何か

TriPlanarという技術を使えば、上から投影するようにテクスチャを貼り付けられるので、UVを意識しなくて良いそうだ。あと、角度(というか法線の向き)によって貼るテクスチャを変えられたりもするすごいやつ。

こちらの動画でShader Graphでの具体的なやり方が解説されていたので、今回はそいつを教材にする。

最低限の実装

画像1

いつもどおりテクスチャはGIMPで雑に作る。もはや岩肌というよりかはコンクリートみたいな質感だしパターンもループしてないが、メッシュに貼れれば何でも良いのでクオリティは気にしないでおこう。

画像2

基本的なTriplanarは、ノードをひとつ置くだけで完成する。Tileに入れる値を調整すると、貼り付けるテクスチャの粗さが変わってくるみたいだ。

画像3

移動させてみたところ。たしかにプロジェクションされてる感あるなぁ。

オブジェクト空間に投影する

TriPlanarを使う場面によっては、オブジェクトが動いたときテクスチャまで動いちゃうとアカンケースもある。そういう時は、オブジェクト空間上に投影するのが良いらしい。

画像4

Branchをうまいこと使って、Positionの入力をObjectもしくはWorldに切り替える事で対応可能。あと今更知ったのだが、ノード選択して右クリック「Group Selection」でノードをまとめてラベルつけられるの地味に便利ね。

画像5

オブジェクトを移動させても、テクスチャが動かなくなった。すごい。

テクスチャをブレンドする

画像6

本題はここからで、オブジェクトの上面には緑っぽいテクスチャ、側面には岩肌っぽいテクスチャを貼りたい。Triplanarノードとテクスチャのセットを2組作って、それぞれの出力をLerpノードに接続してやる。

あと、法線ベクトルのY成分を取り出して、そいつをSaturateノードに入れて0-1に変換、それをLerpノードのTに入れることで線形補間。

画像7

そうすっと、半分から上が緑のテクスチャ、半分から下が岩肌のテクスチャになった。テクスチャのつなぎ目はいい感じにグラデーションされている。

画像8

しかし、現状だとグラデーションの掛かり具合が調整できない。なので、SmoothStepノードのEdgeにInspectorで調整したfloat値を入れてやり、その出力をLerpに繋ぐことで、繋ぎ目のクッキリ具合を変える事ができる。

画像9

こんな感じになる。

画像10

あと、現状だとテクスチャを貼る角度の調整ができないので、強制的に「半分から上は緑、半分から下は灰色」みたいな感じになってしまっている。

そのあたりを調整するのは至極簡単で、さっき追加したSubとAddの入力にこれまたInspectorで設定可能なfloat値(angle)を追加してやるだけで良い。

画像11

そうすれば、面の角度によってブレンド具合が変わる。

Terrainに適用してみる

あとは最初の動画でやってたみたいに、地形を作ったら勝手にテクスチャが適用されてほしい。Unityで地形を作るといったらTerrainだろう。あんま使ったことないけど。

画像12

Terrainの設定パネルに「Material」というどストライクな項目があるので、そこにシェーダー適用済みのマテリアルを設定するだけで良さそう。

画像13

Terrain使ってSetHeightして盛り上げた部分は、側面が灰色で、上面が緑色になっている事が分かる。なるほど、こりゃマップデザイン捗りそうだワー。

この記事が気に入ったらサポートをしてみませんか?