Unity: URPのモザイクシェーダーと水面シェーダー

f:id:simplestar_tech:20200209162015j:plain — Simple Interactive Water

1/14 に twitter で知り合った方に、その方が作成したオンライン VR ゲームに誘われてログイン
こちらのマイクの設定が初めてで最後までつなぎ方がわからなかったのだけど、面白い話を聞かせてもらいました。

なんとも VR 空間の、それも Unity の URP でモザイクとインタラクティブな水面シェーダーがあるとうれしいとのこと

モザイクシェーダーはその日話を終えた 22:00 から作り始めて、朝2:00頃までにいきおいで完成させて公開
github.com

その後も、URP VR 空間における水の表現は自分もほしいところだったので、作り始めます。
Twitter に水面シェーダーの制作過程を記したところ、最大でツィートインプレッションが 15万を超えて
この20日でフォロワーが 500人くらい増えるなど、知名度が上がる出来事がありました。

後にこの出来事が人生を大成功へ導く大きな一歩だったと気づくことになるのですが、それはまた別のお話（おい

とりあえず、一連のシェアされたツィートを並べると次の通り

Unity の ComputeShader 使う Wave(波動方程式シミュレーション)が UniversalRP でできるか試してみた。
問題なく動かせました！
Unity楽しい

ソースはこちら↓https://t.co/kmeMtkXNll #Unity #UniversalRP #ShaderGraph pic.twitter.com/mXmyPFfhye
— Simplestar@Unityゲーム開発 (@lpcwstr) January 18, 2020

波動方程式わかってきた。だいたい作りたい絵が作れてきた
こいつを URP の VR で見れたらすごい！

技術要素はそろっているので頑張ってみますか

なにげに 500 FPS とか、GPGPU によって、ほとんどCPU負荷がかからないのもすごい#Unity #UniversalRP pic.twitter.com/qhCoaCG2XA
— Simplestar@Unityゲーム開発 (@lpcwstr) January 19, 2020

Unity の URP の Single Pass Stereo Rendering Mode でこういう水面の表現ができるの、現在はまだ珍しい時期なので面白い絵が作れたかなと思ってます。（動画は昨日の投稿と同じ）

個人制作している Cube を敷き詰めた世界に水を表現できる可能性が上がった（今までは技術なくて、あきらめてた） pic.twitter.com/z3VIqy7I0u
— Simplestar@Unityゲーム開発 (@lpcwstr) January 19, 2020

ひとつ前の投稿動画から、回転オフセットを与えるところまで
ひとまず回転は合っている。

あとは位置オフセットをどう与えるか pic.twitter.com/vgnBrdXExQ
— Simplestar@Unityゲーム開発 (@lpcwstr) January 20, 2020

なんとか PlayFab 勉強会発表前に（勉強会では発表しないネタ）URP で使える glass shader graph のサンプルがそれらしく動いた。
これを前作った波紋がインタラクティブに広がる水面に適用できれば、かなり意図した水面になる　かもしれません#Unity #UniversalRP pic.twitter.com/2Np4Lr5Bsz
— Simplestar@Unityゲーム開発 (@lpcwstr) January 25, 2020

屈折シェーダーには法線が必須なので、波紋から法線を作り出す必要があって、なんとからしい法線が得られたところ

今日はここまで pic.twitter.com/7Z8sbNgOTp
— Simplestar@Unityゲーム開発 (@lpcwstr) January 25, 2020

波動方程式シミュレーション x 屈折シェーダー x 波の法線計算 x メッシュ細分化 x 頂点位置変更を掛け合わせた最初の絵です。

これを URP の VR で遊べるようにしていきます！
（そこまで作ったら売ろう）#Unity #UniversalRP #GameDev pic.twitter.com/aSv2uwe8Ua
— Simplestar@Unityゲーム開発 (@lpcwstr) January 26, 2020

URP Single Pass VR でインタラクティブな水面表現できた！水中からの絵も作ってみた！（みんなに成果見てほしいので、よかったら拡散してね！）
…今日はここまでにしておこう

別件、コロナウイルス怖いですね。
明日から満員電車に乗るのやめて、徒歩出社しようかな#Unity #VR #gamedev pic.twitter.com/oNCS4ahI1T
— Simplestar@Unityゲーム開発 (@lpcwstr) January 26, 2020

昨日の夜は帰宅後に Unity の AssetStore 用に namespace 切ったりとコード整理しながら、アセット説明用の動画1を作ってた
次は VR で水に潜ったりするやつ作る予定#Unity #URP
※動画はBGM流れます！ pic.twitter.com/50IF9XIax5
— Simplestar@Unityゲーム開発 (@lpcwstr) January 27, 2020

void OnValidate()
{
this.SubDivide(this.subDivCount);
}
そういうことです。 pic.twitter.com/6OJNlhU6Ps
— Simplestar@Unityゲーム開発 (@lpcwstr) January 28, 2020

物体の移動方向を拾って、波を立てる上下方向を変更することで、プレゼンスが向上

今日はここまで（毎日少しずつ） pic.twitter.com/TpXSnDLTkS
— Simplestar@Unityゲーム開発 (@lpcwstr) January 28, 2020

目的の VR コントローラで波を作るシーンがやっとできた。楽しくて調整しながら長いこと遊んでた
Unity 2019.3 URP 7.1.8#Unity #madewithunity pic.twitter.com/Pp1kyeQtDB
— Simplestar@Unityゲーム開発 (@lpcwstr) January 29, 2020

信じられる？
これが、パーティクルなんだって

水球パーティクル作りました
このあと VFX Editor で大量にエミットできるか試してみます#Unity #VFX pic.twitter.com/AVVYx14UFF
— Simplestar@Unityゲーム開発 (@lpcwstr) February 3, 2020

さっき作った水球パーティクルを数万エミットしても VR で 120 FPS が開発環境で出せるって、すごい
水面波紋シェーダーと同時でもパフォーマンス出てる

これをうまく加工すれば水しぶき作れるかな#Unity #VisualEffectGraph pic.twitter.com/yvnttPOYZO
— Simplestar@Unityゲーム開発 (@lpcwstr) February 3, 2020

やっと満足いく water shader できた
週末の連休でアセットストアに提出する予定
（水パーティクルも独立して便利に使えると思います）#madewithunity #Shader #VR pic.twitter.com/UIOMBH4FiN
— Simplestar@Unityゲーム開発 (@lpcwstr) February 5, 2020

インタラクティブな水面アセットをストアに提出しました。
こちらの記事を参考にさせてもらいましたー
審査通るといいです🙏

UnityのAsset販売のノウハウ https://t.co/CDsMNmL8t4 #Qiita #Unity pic.twitter.com/CFOMlMUcbT
— Simplestar@Unityゲーム開発 (@lpcwstr) February 9, 2020

何が言いたいかというと