unityのshader graphで、指定した要素のランダム生成がしたい

Question

実現したいこと

shader graphでの、指定した要素のランダム生成

前提

いつもありがとうございます
unityの2Dのshader graphでひし形の星を作りました　それをランダムな場所に大きさを変えて複数生成したいのですが、やり方が分かりません

試したこと

unityのvisual effect graphで大量に生成して、それをshader graphに反映させようとするも、その方法がないです

関連情報の検索（日本語・英語）　該当する情報は見つかりませんでした
chatGPT　言っていることが難しく、具体的にどう動けばよいのか分かりません

補足情報（FW/ツールのバージョンなど）

unity version: 2022.3.9f1
windows11

chatGPT:
エクスポートの準備:

エクスポートの準備は、エフェクトからカスタムシェーダーにデータを渡すための準備作業です。

VFX Graphでエクスポートするデータには、通常、テクスチャ、カラーデータ、ベクトルデータ、スカラーデータ、パラメータ、ポイントキャッシュなどが含まれます。これらのデータは、エフェクトの外観や挙動に関する情報をカスタムシェーダーに提供します。

エクスポート設定は、VFX Graph内で設定され、エクスポート対象のデータタイプやエクスポート名を指定できます。エクスポートされたデータは、Unityのプロジェクト内の指定されたフォルダに出力されます。

データのエクスポート:

エクスポートしたデータは、Unityプロジェクト内の適切なディレクトリに配置する必要があります。これにより、カスタムシェーダーがこれらのデータにアクセスできるようになります。

たとえば、テクスチャデータはUnityの「Resources」フォルダ内に配置することができ、シェーダーコードからアクセスできます。カラーデータやパラメータも同様に、プロジェクト内の適切なフォルダに配置します。

エクスポートされたデータは、シェーダーコード内でロードし、エフェクトの描画や挙動に使用されます。

エフェクトの制御:

エフェクトをカスタムシェーダーと連携させるために、スクリプトを使用します。これにより、エフェクトのパラメータを調整し、エフェクトの表示を制御できます。

Unityのスクリプティング言語であるC#を使用して、エフェクトを制御するスクリプトを作成します。スクリプト内で、エクスポートされたデータやエフェクトのパラメータを読み込み、設定できます。

たとえば、スクリプトを使用してエフェクトのサイズ、色、位置、再生状態などを制御できます。これにより、エフェクトがシーン内で正確に配置され、アニメーションされることが確保されます。

これらのステップを順番に実行することで、Visual Effect Graphで設計したエフェクトをカスタムシェーダーに統合し、他のオブジェクトに適用できるようになります。 Unity内でのエフェクトの設計と統合は、プロジェクトの要件に合わせてカスタマイズできるため、非常に強力なツールです。

写真

最終的には瞬いている星が一つできます（菱形というより、星型というより　なんていう形なんですかね？　しいたけの切り目型？）
一番右の一列がTiling And Offsetです　右から二番目の一列がEllipseです　この写真の一番左がAddです

Addで画像を合体させ、One Minusで反転させ、それを一方に渡し（これをXとする）、TimeのTimeをRandom Range の seed値に渡し、Sine Time を最大値(Max)に渡し、出力をSubtractのBに渡しXをAに渡す。その差をMultiplyのAに渡し、XをBに渡す

さっきの写真の出力と、用意してある星空の色です

Answer 1

ChatGPTの回答はなんだかちょっとずれているような気がしますね...私は使用経験がないのですが、もしかするとPoint Caches周りの機能について説明しようとしたのかもしれません。

私の場合は「Visual Effect Graphで発生させたパーティクルを、独自にShader Graphで作ったシェーダーを使って描画させたい」ということだろうと解釈しました。
Unity 2023.1.7f1、Shader Graph 15.0.6、Visual Effect Graph 15.0.6で試してみました。まず実験用に下図のような菱形シェーダーを作ってみたのですが、このときGraph Settingsの「Support VFX Graph」をオンに設定しました。これにより、このShader GraphをVisual Effect Graphと組み合わせて使えるようになるはずです。

Visual Effect Graphは下図のように「ランダムな位置にパーティクルを発生させ、ランダムな方向にゆったり動いて消える」といった設定にしました。末尾の「Output Particle Unlit Quad」の「Shader Graph」欄に前述のShader Graphをセットすると、設定項目もそのシェーダー用のものに変化するので、それらに適宜データを供給してやります。

すると下図のように個々のパーティクルが菱形で描画されました。

ランダム菱形シェーダー

菱形を描く部分はサブグラフとして作りました。
エッジにグラデーションを施したりエッジのたわみを調整したりする機能はオミットして、与えられたUVの0～1の範囲いっぱいに白い菱形を描くだけのシンプルなものにしました。

メインのシェーダーグラフは下図のようになっています。菱形をランダムに配置するロジックは、Yuji YASUHARAさんのTiledVoronoiを拝借しました。
UV空間を格子状に区切って各セルに1個ずつ点を打つ形ですので、完全ランダムと比べると規則性に縛られてしまうでしょうが、点数が多くても（つまり格子の分割数を増やしても）一定した処理コストで描画できるためシェーダーにとっては好都合かと思います。

グラフの中ほどで9つの区画に菱形を書いている箇所がありますが、この繰り返し部分は共通の処理ですのでDiamondCellとしてサブグラフにまとめました。このグラフ内で前述の菱形サブグラフ（Diamond）を使用しています。

RandomVectorはCustom Functionノードで、コードは下記の内容になっています。

float2x2 m = float2x2(15.27, 47.63, 99.41, 89.98);
float2 angles = fmod(mul(UV, m), TWO_PI);
UV = frac(sin(angles) * 46839.32) * Offset;
Out = float2(sin(UV.y), cos(UV.x)) * 0.5 + 0.5;

シーンにQuadを配置してマテリアルをセットし、各パラメーターを変えてみると下図のようになりました。

菱形を星に変える場合の注意点

菱形を描くサブグラフを、下図のように変更してみました。

Ellipseを使うルートは見送って代替ルートに差し替えていますが、Ellipseを使った場合は下図のように格子境界でスジが生じてしまいました。

Ellipseは計算過程で円の中心からの距離のfwidthをとっている箇所があったのですが、どうやらこれがまずいみたいでした。格子の境界では円の中心からの距離が大きく飛びますので、異常値を生じてしまうのだろうと思います。
エッジの滑らかさは失われてしまいますが、前述の代替ルートに差し替えたところスジは消えたようでした。

Comments

[tyasibu]

ご回答ありがとうございます。また、連絡が遅れたことをお詫びします。ですが、この回答は私の求めていたものではありません。質問文を、少し長めにしてしまったかもしれません。端的に言うと回答者さんのやっていることを、またshader graphに取り込む方法が知りたいです。しかし、結果さえ同じなら問題ありません。自身が生成したものを何とかshader graphに大量にランダム生成できないでしょうか。まぁ、おそらくこの機能はunityにはないと思っているので欲張りであることは１００も承知です。ご回答ありがとうございました。

[Bongo]

Visual Effect Graphはパーティクルの動きをデザインする目的だけで利用し、実際にゲーム上で動作させる時はVisual Effect Graphを関与させずShader Graphだけでパーティクルの動きを再現させたいということでしょうかね?
たしかに、そういうことでしたらChatGPTの回答ももっともらしく感じます。Visual Effect Graphをそういう風に使うのは未経験なので自信はないのですが、私にとっても勉強になりそうですので調べてみたいと思います。
それにあたってうかがいたいのですが、実際にゲーム上で動かす際にはShader Graph以外...つまり何かしらのスクリプトだとか、あるいはメインのShader Graph以外のシェーダーを併用することは許されるでしょうか。また、なるべくご質問者さんの条件に沿って試してみたいので、可能であれば現状のご質問者さんの菱形Shader Graphの内容がわかるようなスクリーンショットなどを追記いただけますとありがたいです。
それともう一つ、「それをランダムな場所に大きさを変えて複数生成」とおっしゃる部分をVisual Effect Graphで実現するというのは必須でしょうか。もしVisual Effect Graphでなくてもいいのなら、方法検討の選択肢が広がって助かるのですが...

[Bongo]

「ランダムな位置にランダムな大きさの菱形を多数ばらまく」というのを、Shader Graphで試してみましたので追記いたしました。
ランダム配置はShader Graph上で決めており、各菱形も動きがなくてVisual Effect Graphのような自由度はないですが、もしかするとこちらの方面からアプローチした方が目標に近づけるかもしれない...と考えました。ここをこうしたい、といったご要望などありましたらコメントいただければ試してみたいと思います。

[tyasibu]

すみませんでした。気付かなかっただけかもしれませんが、通知が来ずに、無視してしまいました。内容の理解にだいぶ時間が要るので、すみませんが、またお待たせします。最終的には、水面に映る星が、風で揺らめく（これは自分で作れるか試してみてもいいでしょうか？shader graph始めて1ヶ月満たないので作れるか分かりませんが）を作りたいと思っていて、これをshaderとして運用したいので、shader graph上に何とかランダム生成したいと考え、Visual Effect Graphを利用しようと考えた次第です（ランダムに生成できればほかの方法でもよいですし、その方法がないなら手作業で一個一個置こうと思いますが、その方法も分かりません）（shader graph 以外の方法でも問題はないです）
菱型の写真を撮っているので、しばしお待ちください。

[Bongo]

いえいえ、お気になさらないでください。私の方でもお返事があったことへの通知が来ておらず、通知機能周りでちょっとトラブルがあるのかもしれませんね。
あまり煩雑にならないようにと思いまして回答中の処理内容について詳細な説明は省いたのですが、お試しいただく過程でご不明点がありましたらなるべくお答えしようと思いますので、ご遠慮なくコメントください。

[Bongo]

ご質問者さんの、Ellipseを使ってエッジの丸みを表現するアイディアは面白いと思いました。ですが回答に例示しましたシェーダーに組み込んだらどうなるか試してみたところ、ちょっと問題が発覚しまして回答に追記いたしました。方法検討のご参考になれば幸いです。

[tyasibu]

すみません。細かい内容はまだ確認できてませんが、確認する時間がないのでベストアンサーとさせてもらってもよろしいでしょうか？　パッと見た感じ合っているようには見えます。何度もお手数をおかけしました。ありがとうございます。

[Bongo]

ひとまずこのあたりで区切りとしてしまうのもいいかと思います。また疑問点がありましたら新たにご質問を投稿いただくか、あるいはこのたびの私の回答内容に直結するご不明点でしたら、Teratailの場合はクローズ後も書き込みが可能ですのでコメントください。ただし、相変わらず通知機能の不調が継続している様子ですので、コメントを見逃してしまうかもしれませんがご容赦願います...