■ 概要

本記事ではUnityの 「ShaderGraph」 と 「マウス操作」 を組み合わせたインタラクティブな表現の実装を紹介します。

今回は、「ShaderGraphでマーブルノイズを実装」の記事の実装を流用して、マウスオーバーしたカーソル位置のマーブルノイズカラーを変更する実装を試してみます。

■ 環境

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

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

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

■ 実装

Game画面：

今回の実装のShaderGraphファイル：

「ShaderGraphでマーブルノイズを実装」の記事と合わせたShaderGraphファイル：
（実装の詳細は画像を拡大して見ていただけると。）

■ 実装のポイント

今回の実装ではメッシュのUV座標を使いマウス位置との距離を計算して、マウス位置に近い部分の色を変化させています。

要所を1つずつ説明します。

① 別パターンのカラーを生成

マウスオーバーしたカーソル位置の色を変更させたいため、変更したいカラーを生成しておきます。
今回は濃い青色のマーブル模様のみを変更させたいので、同じマーブル模様のパターンを使用して紫色のマーブル模様を生成しておきます。

（「ShaderGraphでマーブルノイズを実装」の記事の続きからだと6番目の手順ということになります。）

② マウスオーバーのUV座標のプロパティを定義する

今回はマウスオーバーの座標をシェーダーに引き渡す必要があるので、シェーダーにプロパティを定義しておきます。

下記は実装例で、マウスオーバーのUV座標をシェーダーのプロパティにセットしています。

MouseOverPositionDetector.cs

using UnityEngine;
using UnityEngine.InputSystem;

public class MouseOverPositionDetector : MonoBehaviour
{
    public Material targetMaterial;
    public Camera mainCamera;

    void Update()
    {
        Vector2 screenPosition = Mouse.current.position.ReadValue();

        Ray ray = mainCamera.ScreenPointToRay(screenPosition);
        RaycastHit hit;

        if (Physics.Raycast(ray, out hit))
        {
            // UV座標を取得
            Vector2 uv = hit.textureCoord;

            // シェーダーにUV座標を引き渡す
            targetMaterial.SetVector("_MouseOverPosition", uv);
        }
    }
}

③ 距離マップを生成する

プロパティにセットされているマウスオーバー位置のUV座標とメッシュのUV座標との2Dベクトル間の距離を計算します。この処理によってマウスオーバー位置に近いピクセルほど「0」に近くなるグラデーションの距離マップが生成されます。

④ グラデーションの範囲を制限

「Smoothstep」ノードを使用し、グラデーションの範囲を制限します。
「Smoothstep」ノードは、第1引数の値より小さい値は「0」になり、第2引数の値より大きい値は「1」になり、その間の値はグラデーションで補間されます。
そのため先ほどの距離マップをこの「Smoothstep」ノードに通すと、画像のようにグラデーションの幅が制限されます。

今回はその結果を線形補間のパラメーターとして使用しマウス位置に近いほど紫色に変化させたいため、「One Minus」ノードで反転させておきます。

⑤ 2パターンのカラーを線形補間

グラデーションの出力結果をパラメーターとして、2パターンのカラーを線形補間する。

■ 最後に（感想）

今回は簡易的にマウス操作のパラメーターを使用して、インタラクティブなShader表現を実装してみました。
応用でマーブルノイズの強度を変更させたりなど、色々な表現が可能になるかと思います。

ご覧いただきありがとうございました。