UVを変化させよう

Xing

UベクトルとVベクトル

3Dモデルを扱っていればUV展開でUVは扱っていますが、逆に言えばそれそれ以外で扱う機会はあまりないと思いますので改めてUVとは何かを確認していきたいと思います。

基本的なUV

UVとはUベクトルとVベクトルで定義される座標平面です。
ベクトルとは方向性を持った数、つまり一定の距離を進むと一定の値だけ変化する数ですのでグラデーションとして表現することができます。

距離によって値が増えるグラデーション

通常のUVは直線的なグラデーションで定義されますが、これを別のグラデーションに差し替えたらどうなるでしょうか？UVスクロースさせて比較します。

右から左にスライドしていた四角が、中央が黒いグラデーションに変えると中央に向かってスライドするようになりました。
今度は円形のグラデーションに変えてみます。

四角が円形に歪んで広がっていくようになりました。
Vベクトルは変えていませんが、これを円周方向のグラデーションに変えるとphotoshopの極座標と同じになります。
ベクトルは一定距離で一定の値だけ変化すると書きましたが、変化量が一定でない場合どうなるでしょう。

途中で濃度の変わるグラデーションにした場合、四角の移動速度が加速しました。スクロールさせる値を変化させなくても加速、減速のアニメーションを付けられるということです。
もっと複雑なノイズをグラデーションとして入力してみましょう。

グラデーションノイズをワールド座標のXZ平面に展開し、そのノイズに沿ってUVスクロールしています。
このようにグラデーションさえあればUV平面として扱うことができるのです。
では動的に取得できるグラデーションではどうでしょうか？
シンプルなライトの計算をするマテリアルで見てみましょう。

ハーフランバートにしたライトをUベクトルとしてUVスクロールさせています。ライトの向きによってスクロールする方向も変わっています。

板ポリにポストエフェクトを当てて、デプスに沿ってスクロールさせています。

半透明な板ポリとデプスの差を取ったものでもUVを取ってスクロールさせることができます。これも動的に変化します。

1以上のUV平面

ここまでは０から１までのUV平面の話でしたが、その範囲より外はどうなるでしょう？


UVベクトルに倍率をかけるとUV平面の最大値を1より大きくすることができます。地面のテクスチャにシェーダーグラフで生成した四角を重ねたものにUVの倍率を変化させると、テクスチャはタイリングされるのに対し四角は一つだけです。

UVのリピート設定

なぜこの差が生まれるかというと、テクスチャは読み込む時に自動で
1より大きい範囲は0から1までの範囲を繰り返す設定になっていますが、シェーダーグラフ内で生成されたものにはリピート設定がされていないためです。
四角をタイリングするためにUV自体をタイリングしてみましょう。
fractionという関数は値の中から小数点以下のみを取り出すので直線的に増加する数に対して使うと0から１までの範囲を繰り返すことができます。

UVのリピート

タイリングされたUVを用意することでタイリング設定のないテクスチャもタイリングさせることができました。
タイリングされたテクスチャは縦横まっすぐに並ぶためリピート感が伴います。
そこでUnityが実験的に導入しているHex-Tilingというものがあります。名前の通り四角ではなく六角形でテクスチャを並べるものです。

六角形に並べたUVを用意することで疑似的にこれを再現してみましょう。

六角形にタイリングしたテクスチャをUVとして入力しています。
さらにSubstanceDesignerでセル状に分割されたUVも用意しました。
ここまでランダムに配置されるとリピート感はかなり軽減されたのではないかと思います。
ここまで連続的に変化するUVを見てきましたが、諧調化するとどうなるか見てみましょう。

UVを諧調化するだけでモザイクエフェクトができました。

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