9
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ShaderGraphでUVスクロールを実装する【Unity、ShaderGraph、UV Scroll】

Last updated at Posted at 2024-08-30

■ 概要

本記事ではUnityの「ShaderGraph」を使って、Shaderの基本テクニックである「UVスクロール」の実装を紹介します。

■ 環境

Unityバージョン:Unity2022.3.36f1
プロジェクトテンプレート:Universal 3D

今回はShaderGraphの機能が標準で搭載されている「URP」レンダリングパイプラインのプロジェクトで実装しています。

※ビルトインのレンダリングパイプラインでも、パッケージを後からインストールしてShaderGraphを使用することができます。
その手順はこちらの記事が参考になります。

■ 実装

画面録画 2024-08-27 175423.gif

ShaderGraphファイルの全体像はこちら。
スクリーンショット 2024-08-27 175819.png
UV座標に対して時間経過で増加する値を加算していくことでUVスクロールを実装しています。

■ UV (UV座標) とは

「UV(UV座標)」とは、マテリアルや3Dモデルに対してテクスチャを正確に貼り付けるための2次元平面上の座標系のことを指します。

UV座標の「U」は横方向、「V」は縦方向を示しており、テクスチャのどの部分をマテリアルの表面に貼り付けるかを指定することができます。マテリアルや3Dモデルは通常、複数のポリゴン(面)から構成されていますが、これらのポリゴンにテクスチャのどの部分を表示するかを決めるのがUV座標というわけです。

たとえばキャラクターの3Dモデルに顔のテクスチャを貼り付けたいとします。UV座標を使って「テクスチャのここが顔の部分で、3Dモデルのこの部分に対応させる」と指定します。こうすることでテクスチャが正しく3Dモデルに表示され、顔がきちんと表示されるようになります。

■ 応用

上記の実装を応用させることで、縦や斜め方向のUVスクロールも実装することができます。

画面録画 2024-08-27 175651.gif
スクリーンショット 2024-08-27 175900.png
スクリーンショット 2024-08-27 175929.png

■ 最後に

今回は基本的なShaderGraphの使い方は省略し、簡潔にUVスクロールの実装を紹介させていただきました。今回紹介した実装以外にも工夫次第で様々な表現ができると思います。

最後までご覧いただき、ありがとうございました。

9
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?