ShaderGraphを使ったUVスクロール
UVスクロールとは
UV座標を時間に応じてずらすことで、アニメーションを作る手法です。
似たようなことを 【Shaderlab】スプライトアニメーションを実装する の記事で行っていますので、参考にしていただけると嬉しいです。
ShaderGraphについて
ノードベースでシェーダーを作れるUnityの機能です。
リアルタイムで計算結果のプレビュー画面が見れるため、シェーダーの実装がしやすいです。
シェーダーグラフの基本的な操作に関しては、公式のマニュアルをご確認ください。
https://docs.unity3d.com/ja/Packages/com.unity.shadergraph@10.0/manual/First-Shader-Graph.html
ShaderGraphでUVスクロールを実装
環境
- Universal Rendering Pipeline
- Unity 2021.2.18f1
- ShaderGraph 12.1.6
- StylizeWater Texture
画像が見えにくい場合は、以下のファイルをダウンロードしてUnityにインポートして見てください。
https://gist.github.com/went5/e37973895d4c93a6b5f53a4554ecae72
使用ノード
UV座標の取得
UV座標は、UV Nodeから取得することができます。
UV座標をずらす
UV座標のOffsetを変更(ずらす)させるには2通りの方法があります。 1つは、Add
Node(Subtract Node) を使う方法です。
もう一つはTiling And Offset Node を使う方法です。
Tilingが必要ないのであれば、Add Nodeを使ったほうがいいかもしれません。
## テクスチャから色のサンプリングを行う
テクスチャから色をサンプリングするには、Sample Texture 2Dを使います。
Textureには今回使うテクスチャを指定しています。
時間に応じてUV座標をずらす
Timeノードを使ってUV座標をずらしています。
そのまま使うと、早すぎるため指定したVector2変数をかけることで任意の速度に変更することができます。
今回はプロパティ化して、(0.1,0.1)を指定しています。
以上で、冒頭の画像を再現できます。
Table of contents