ShaderGraphでサイン波を表示させつつ、サイン波の振幅をCSスクリプトで変化させることで液体っぽく見せています。`

サンプル

サンプルデータをGitHubにアップしましたので、ご覧ください

Assets/_SampleData/ShaderSamples/13_Liquid

https://github.com/rngtm/ShaderGraphCookBookSample/

実装(C#スクリプト)

CSスクリプトの実装は以下のような感じです。

using UnityEngine;

public class Liquid : MonoBehaviour
{
    [SerializeField] float maxWaveSize = 0.3f; // 波の高さ
    [SerializeField] float k = 1f; // 数値を増やすほど波が速く減衰
    [SerializeField] float waveSize = 0f;
    [SerializeField] float waveSpeed = 0f;
    [SerializeField] Vector3 waveDirection = new Vector3(1f, 0f, 0f); // 波の方向
    [SerializeField] float waveSizeInfluenceByMove = 0.001f; // 移動が波の高さに与える影響
    [SerializeField] float waveDirectionInfluenceByMove = 10f; // 移動が波の向きに与える影響
    MeshRenderer meshRenderer;
    Material material;
    Vector3 position;
    Vector3 previousPosition;

    void Start()
    {
        meshRenderer = GetComponent<MeshRenderer>();
        material = meshRenderer.material;
    }

    void Update()
    {
        previousPosition = position;
        position = transform.position;

        float dt = Time.deltaTime;
        Vector3 diff = position - previousPosition;

        // 波の高さの更新
        waveSize += waveSizeInfluenceByMove * diff.magnitude / dt;
        if (waveSize > maxWaveSize) waveSize = maxWaveSize;

        // 波の速度の更新
        waveSpeed = -waveSize * k;
        waveSize += waveSpeed * dt;

        // 波の向きの更新
        if (position != previousPosition)
        {
            diff.y = 0f;
            waveDirection = Vector3.Lerp(waveDirection, diff.normalized, waveDirectionInfluenceByMove * Time.deltaTime).normalized;
            material.SetVector("_WaveDirection", waveDirection);
        }

        material.SetFloat("_WaveSize", waveSize);
    }
}

ShaderGraph

波の高さの更新の計算が難しい…
頑張って自分の中に落とし込みます…！ありがとうございます！

シェーダーについて追加で質問失礼します。
①オブジェクトのローカル座標と、任意ベクトル(WaveDirection)の内積を取る
②TAUと①を掛ける
③ ②で計算したものをサインに使う（時間を引く）

この一連の計算についてですが、
①で内積のBに入力している部分は Normalize しなくても大丈夫なのでしょうか？
②でTAU を掛ける理由があれば知りたいです。

※今朝まで違う質問を投げていたのですが、解決したため内容を変更させて頂きました。

座標をNormalizeしない理由について

①で内積のBに入力している部分は Normalize しなくても大丈夫なのでしょうか？

まず内積について説明すると、
ローカル座標の点とベクトルWaveDirectionの内積は、点をWaveDirectionへ射影した長さになります。(ベクトルの長さが1の場合)

この長さをSineで利用することで、WaveDirectionの方向へ進むSine波を作ることができます。

関連 : 🍇 内積・外積を使ったグラデーション

Normalizeを入れてしまうと、内積結果xはPの長さ(原点からPまでの距離)と無関係な値になるので波が作れなくなってしまいます。

数学的な説明

数学的に説明すると、座標 P と 長さ1のベクトル D の内積は以下のようになります。
P \cdot D = |P| \cdot cos \theta
|P| : Pの長さ
\theta : PとDがなす角 (ラジアン)

内積は、以下の図の直角三角形の底辺の長さに一致しています。

座標にNormalizeを適用するということは、座標Pの長さを1にするということですので、

P \cdot D = cos \theta

になってしまいます。(内積結果は、Pの長さとは無関係になってしまいます)

TAUを乗算する理由

②でTAU を掛ける理由があれば知りたいです。

TAUについて補足すると、TAUは 2 \pi という数値を取れるノードです。

sin(x)はxが2 \pi増えるごとに1回の波を描くのですが、これは扱いづらいのでxに2 \pi を乗算しています。
sin(2 \pi x)はxが1増えるごとに1回の波を描きます。

関連 : 【ShaderGraph】ベジェ曲線を波打たせてみる

図付きで大変分かりやすい説明をありがとうございます！
座標の点とベクトルの内積の理解が曖昧でしたが、今回の件でよく分かりました！本書の知識の応用だったんですね。後者についても同様です… 数学的な理解が深まりました！ありがとうございます。

ShaderGraphは機能しているように見えますが、Imageがつぶれているように見えました。
ImageやRawImageのRectTransformを以下のように設定して、実行したときにどうなるかを見てみたいです。

画質は荒いですがこんな感じです。
Materialは本の集中線の自分で作ったものを適用してます。

ちなみにサンプルのConcentrationLine Shaderから作ったMaterialを適用すると以下のエラーが出ます。

ShaderGraphは機能していると思うので、
・ノードのつなぎ方が違う
・ノードのパラメータが違う
などが考えられると思います。

以下のようにノードをつなげば、集中線が出せると思います。

すみませんどうしてもできませんでした...
もしよろしければプロジェクトデータを送るので試してもらうことは可能ですか？
ご迷惑をお掛けしてすみません。

大丈夫です。
Unityプロジェクトのリンクなどを送っていただければ、時間が空いたときに見てみたいと思います。

https://33.gigafile.nu/1029-d3508eb5c0bed5c58f92c94ea537c4338
ダウンロードはここからできます。
よろしくお願いします。

修正してみました。

行った作業

1. Vertex Color を マスターノードのBase Color につなぐ (ImageのColorは黒にする)
   

2. Angle Scale を 1 から　10 に変更する
   

これ再生したときは問題なく表示されましたか？
自分の方で修正後再生してもやはり表示されなかったのですが...

どうやらCanvasのRender Mode が　Screen Space - Overlay だと、
ゲーム再生時に ShaderGraphがついたUIが表示されなくなるみたいですね。
(Unityのバグだと思います)

Canvasを Screen Space - Camera にして、
マテリアルのRender QueueをTransparent(3000)に設定したら
UIが表示されました。

集中線が表示されるようにしたUnityプロジェクトをお渡しします。
https://xgf.nu/mhSd

本当にありがとうございます。
助かりました。

@ 発酵大豆さん
ご報告ありがとうございます。
修正させていただきました。

修正前

修正後

Thank you for the question.

You can use either Object mode or World mode depending on the situation.

When Object mode is selected, the scan lines are affected by the transform (position, scale, rotation) of the Object.
This is good for object effects.

When World mode is selected, the scan lines are not affected by the Object's transform (position, scale, rotation).
This is suitable for world effects.
example : https://styly.cc/ja/tips/unity-shader-worldscanline/

Thanks! I didn't think about that. I now see that "World" space can be also very useful for this effect 🙂

貼っていただいたシェーダーグラフの画像だと、View Direction　と Position の内積をとってしまっていますね。
Position の 代わりに Normal Vector を使ってみてください

Normal Vector ノード

返信ありがとうございます。
本内の絵を拡大してよく見るとNormal Vectorが使われていたのですね。ご指摘いただきありがとうございます。（文書内に赤文字でPositionと書かれていたのでPositionだと思い込んでいました）

Normal Vectorに変え実行したところ、
・DDXYを使用しなければ球（Sphere）はうまく描画できるようでした。球でないモデルでは輪郭線の描画は失敗するようでした。
・DDXYを使用するとどちらもうまく描画できないようでした。

きっとまだ何か間違いがあるとは思うのですが見つけられず…

（DDXY無し…球の表現はうまくいく）

（DDXYあり…黒く表示されるのみになってしまう）

気が向いたらでよいのでもしわかりましたら教えていただけますと幸いです。

返信が遅くなってすみません。

DDXYノードは数値の変化量が大きい部分を抽出するようなノードです。
法線が滑らかに変化する3Dモデルだと輪郭線をうまく抽出できますが、
添付の3Dモデルは、頂点数が少なく、法線の変化が粗いため、DDXYでは輪郭線を抽出できません。

参考 : 例5 : 輪郭線抽出

背面法など、別のアプローチでの輪郭抽出を試してみてはいかがでしょうか。
参考 : https://light11.hatenadiary.com/entry/2018/05/13/183314

かもそば様
アドバイスありがとうございました。他の方法も試してみます！

誤字報告ありがとうございます！
修正いたしました。

誤字報告ありがとうございます！
修正いたしました。

ありがとうございます!