本記事の概要

邪気眼(JackyGun)が2019年に書いたShaderの備忘録的まとめ
VRChatを始めたのが2019年の1月なので1年目のまとめ
時系列順の呟きをまとめつつ、それに対して解説やコメント (ステップアップの流れ)
コメントや解説は意見を貰いつつ、要望に応じて書き足します

要約 (書いてたシェーダーの方向性)

2019年やってたこと
メッシュ生成(テッセレーション, GeometryShader)
GPUパーティクル(Camera or CustomRenderTexture)
GPUinstancing(LeadShader)
その他
やってないこと (今後やりやいこと)
レイマーチング
アバター用シェーダー
ステンシル
昔やってたこと
ComputeShaderを使わない古典的なGPGPU (GeometryShaderとDrawCallでぶん殴る)

・はじめてのUnityShader (GeometryShader)

UTSの流れを全力で読んでみた
その後、UTS改変としてGeometryShaderを書き足して増殖してみた
VertexShader-FlagmentShaderの構成だったので、VertexShader-GeometryShader-FlagmentShaderの構成に改変

2,3回、死にかけた… pic.twitter.com/pU0Ut4PtJB
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) January 15, 2019

* スケールを書き換えて限界以上に小さくなるorアニメーションで大きくなる改変 * グリッド間に丸めたあと、グリッド間をsin^3で補間してラグっぽい挙動になる改変

結局4日目には、こまちちゃんのUTSを書き換えてしまった＞＜

「ラグシェーダー」
ウェスカーの如く瞬間移動！！
マーダーで使ったら、100%蹴られます＞＜

試作として、とりあえず格子上で補間！！
セルラーノイズとかで補間すれば、かなり不規則に移動できそう！！
(昔、二つ名がウェスカーだった私) pic.twitter.com/GTgFogmvKy
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) June 18, 2019

・ポリゴン増殖&モデリング&メッシュ生成 (テッセレーション+GeometryShader+Asset化してメッシュを保存)

割とここから始まったテッセレーション
テッセレーション扇子扇子

これっ、くらーいの！
Quadメッシュに！
Material、1つで、はいっ！扇子っ！！ pic.twitter.com/M3EXPmKWhw
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) January 24, 2019

* コード([github](https://github.com/konchannyan/forceFan-Shader/blob/master/forceFan.shader))も大事だけれど、何よりきれいなquadメッシュをスクリプトでAsset化するのが何よりも大切 * テッセレーションに関して「[CustomRenderTextureだけでボリュームレンダリングしてみる!!](https://qiita.com/konchannyan/items/f2a0a7320dba83fdf7da?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items)」で解説

・テクスチャ化 (Asset化してテクスチャを保存)

UnityChanのindex構造とvertex構造をテクスチャに書き出してみた

いろいろとShaderの限界がわかったので、修正。
2ポリゴンでUnityちゃん。 pic.twitter.com/S6Sl8YLKlc
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) February 9, 2019

* おまけでどこまで描画できるかやってみた (呟きの上限予想は誤っている)

Unityの1meshで何人のUnityちゃんを描画できるか？

fps2未満 (視錐台カリングとかで当てにならない)
Unityちゃん81,915人 (8万人)
1,315,063,410ポリゴン (13億ポリゴン)

多分、shaderの上限をほぼほぼ満たしてる。
(厳密には1meshから1,431,568,384(14億)ポリゴンが上限かと思われ) pic.twitter.com/z3mpbPJ7Lv
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) March 18, 2019

・RenderTextureでメモリのたたき台 (RenderTexture+Camera)

Camera+RenderTextureのループ構造でメモリを作成

たのちぃ… pic.twitter.com/No9pDT0sEa
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) February 16, 2019

パンジャンを、生み落とす。

VRChatのワールドにパンジャンを植えるShaderを書きました。
RenderTextureたのしぃ！！夢が広がる！！ pic.twitter.com/rwbeHIJpNj
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) February 18, 2019

・扇子 (ポリゴン増殖+モデリング)

boothで公開中
新幹線の中で扇子と数式をにらめっこしてたら、隣の席の人にドン引きされてた
こだわりポイントは折り畳まれる瞬間 (線形補間で滑らかに折り畳まれるように)

#VRChat
扇子がだいぶいい感じになったよ！！！ pic.twitter.com/RJbGhUf0tR
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) March 28, 2019

やっぱり扇子シェーダー綺麗だなって。 pic.twitter.com/jBbUMhTwcD
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) December 28, 2019

・キューブマップ生成 (リアルタイムキューブマップ生成+反射/屈折+色収差)

90°のカメラを6方向に向けて、リアルタイムでキューブマップを作ってみた
リアルタイムキューブマップ生成は反射/屈折と相性が良い
距離関数的な概念(球は球、正二十面体はポリゴン)があるので、レイマーチング感がある

はんしゃ～
くっせつ～

わーい！！ pic.twitter.com/7MF8A7xqjv
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) April 10, 2019

正二十面体のクリスタルを置いたワールド作りました！

「SURROUND CRYSTAL ǃǃ」
みんなでクリスタルを囲んでね！！#VRChat #Shader https://t.co/kcYrM6w88a pic.twitter.com/CwfM89vc6n
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) August 16, 2019

・お花畑 (テクスチャ化)

テクスチャに書き順を色情報として格納することで、徐々に書き上がる落書きみたいなのができる
今更ながらParticleSystemでも出してみたい

お花畑固有結界シェーダー！！

落書き固有結界シェーダーでもいいかな？ pic.twitter.com/MiBRWA4u5F
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) May 1, 2019

あとは、距離に応じて描画すれば、お花畑シェーダーができるはず。 pic.twitter.com/3yQdtfj3ZC
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) May 1, 2019

・「カメラ未使用&CustomRenderTexture未使用」な自作TrailRenderer (GrabPass)

GrabPassのテクスチャを次フレームに引き継いだら取得が出来た (アイデア: わざわざUnityは初期化しないよね)
ミラーがあるワールドだと挙動が安定しないので現状利用できない

#VRChat #Shader
LeadShaderに引き続き、もう1個、VRC界で革命的Shaderを。
カメラ無しでTrailRendererを自作しました。

カメラ未使用なので、フレンド外にも表示されます。https://t.co/AC3kEVURAb pic.twitter.com/lJvHFYtCGf
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) May 5, 2019

・LeadShader (GPUinstancing)

作った中で1番業が深いシェーダー
やってることも業が深い (Unityのレンダリングの実装を予想して無理やり実装した)
原理解説ツイート
github

#VRChat #Unity

別アバターのメッシュ座標を取得するShaderできたよ！！
わーい！！たーのしー！！

いろいろできるよ！！
・フレンドがいる場所を示すコンパス
・複数人でアバター芸 pic.twitter.com/6vg9QRK0zh
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) April 17, 2019

#VRChat で使える #Unity の謎挙動を使った #LeadShader お配りします！

「ペアでアバターに仕込めるよ！！」

希望者はここにリプ頂ければ、数日以内にDM送ります。
・UnityPackage
・設定方法
・設定用ID
を送らせて頂きます。

※LeadShader改変もID渡すのでリプ下さい！

※お写真:らぐみこちゃん pic.twitter.com/wPP3sqhc3X
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) May 16, 2019

* 複数描画する場合

しぇーだーふぇすに出すやつ。
間に合うか微妙…だけど、後は書くだけ。 pic.twitter.com/8jhEBCDYMt
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) October 20, 2019

* 別MaterialのColorを取得するのもできる

#LeadShader の改変として、別Materialの色を取得したー。 pic.twitter.com/U63iECFJxn
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) August 18, 2019

・頂点構造書き出し (projector+GeometryShader)

projectorを使って、meshの頂点情報をGeometryShaderで書き出す

ということで、めっしゅを複製するしぇーだー！！
頑張って複数めっしゅに対応する！！ (けど、多分無理)

原理は見た通りです。 pic.twitter.com/RbQRJcDIPW
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) May 21, 2019

・ガンマ値 (GrabPass)

GrabPassの練習

想定と違ったけど、調整次第でいくらでもエモくなるやつ。
これは陽シェーダーでは？？？ pic.twitter.com/uPziAlJEmv
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) June 3, 2019

・草 (ポリゴン増殖+モデリング+LeadShader)

グリッド状に再配置させて、シシガミサマっぽく
LeadShaderで手に追従させたり、Cameraに飛ばして攻撃したり、巻き付くように見せたり
基本的には線形補間のオンパレード

ジオメトリシェーダー1つ当たりの処理負荷を減らす＆数を増やしてみるー
板ポリ1枚からジオメトリシェーダーを131,072回呼んでるよー
ジオメトリシェーダ当たり6頂点で2ポリゴン生成だから…262,144ポリゴン？
ちょっと減らしたほうが良さそう… pic.twitter.com/lQNiRZoXTb
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) July 31, 2019

こういうのを求めているの！！
ログインモーション作る！！ pic.twitter.com/r4nm7hPvsl
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) August 10, 2019

・CustomRenderTexture内でGeometryShaderを使う (CustomRenderTexture+ポリゴン増殖)

アイデアは「CustomRenderTextureってRenderTargetViewあるよねー」から
細かい説明は CustomRenderTextureだけでボリュームレンダリングしてみる!!

乱数っぽいお試しで雷っぽく！ pic.twitter.com/YbywANsULU
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) August 22, 2019

・LBM (CustomRenderTexture)

そもそもLBMはこんな使い方してはだめな気がした。なぜなら「密度≒圧力≠高さ」な為

わーい！
きれいなお水！ pic.twitter.com/5uuOKaReVW
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) August 29, 2019

・(未完成) 影ワールド (GrabPass)

影だけで触れ合うワールドを作ってみたかった

今もくもくと作ってるワールド。
お互いの姿が見えない中、映る影だけを頼りに、交流するワールド。 pic.twitter.com/7NyEOM2MfS
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) September 13, 2019

・(未完成) ワールド座標取得 (GrabPass)

深度値とプロジェクション行列とビュー行列から復元
未完成の理由はVRで表示がおかしくなるので

理想はグラードンやカイオーガ…

息抜き完了。水鉄砲作る。 pic.twitter.com/Pr6stBpnPU
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) October 9, 2019

・お水 (Camera+CustomRenderTexture内でGeometryShaderを使う+ボリュームレンダリング+レイキャスト+リアルタイムキューブマップ生成+反射/屈折)

パーティクルの計算 → ボリュームレンダリング
パーティクル計算 (重力 & 速度)
パーティクル計算 (上空からの深度カメラで当たり判定)
ボリュームレンダリング (2Dテクスチャに書き出し)
ボリュームレンダリング (3Dテクスチャに書き出し)
ボリュームレンダリング (反射と屈折を考慮してレイトレーシング)
CustomRenderTextureだけでボリュームレンダリングしてみる!!
技術的には、
Cameraで上空からの深度情報で当たり判定を計算しつつ、CustomRenderTextureでGPUパーティクル計算
GPUパーティクルを元に、リアルタイムでボリュームテクスチャを作成
Camera6つでリアルタイムキューブマップ作成
ボリュームテクスチャとキューブマップテクスチャを利用して、レイトレーシング的ボリュームレンダリング

お水を運べるオブジェクトをワールドに追加したよ！！
(お水の挙動を調整のつもりが、毎回別物になっちゃうので少し厄介)#VRChat pic.twitter.com/H5cGYJuqRZ
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) September 28, 2019

【Just SPLASH !!! (very poor)】

お水を掛けるワールドをCommunityLabsにアップロードしたよ！！！

※ 掛けるのが目的のため、掬うのは難しいです
※ 掬いたい場合は連絡頂ければ調整中の専用ワールド開けますhttps://t.co/0qbQmP9yOC #VRC #VRChat #JustSplash #MadeWithVRChat

※ 音付き動画 pic.twitter.com/xhnTZyM0ya
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) October 14, 2019

・(未完成) 髪の毛 (CustomRenderTexture)

16頂点*65536本=100万頂点を計算&LineStreamで描画可能か確認
Camera+CustomRenderTextureの遅延でどうあがいてもアバターと1フレーム分ずれるので断念
CameraもCustomRenderTextureも使わない自作TrailRendererの挙動が安定したら実現可能？
LeadShader組み合わせれば他人の髪の毛触るとかできそう

CameraもCustomRenderTextureも使わない機構で実装中だけれども、値が結構飛ぶのでなんとか安定させたい。 pic.twitter.com/IPwP4AQdm0
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) November 24, 2019

・ジオラマ for ShaderFes2019 (LeadShader+ポリゴン増殖+疑似ライティング)

LeadShaderで1DrawCallで何かやってみたかった
githubに丸投げする
アイデア: スケール違いのmeshをShader内でソート → 任意の座標を元にGeometryShaderでモデリング

【#ShaderFes で作ったやつ紹介】

鉄道模型的な、ジオラマ的な、そんな箱庭のたたき台！
地形や線路を動かして遊ぶのって、楽しいよね！
(ジェットコースターにして遊ぶ人も…！)

Red04の右奥に配置されています！
[BGM by ayato sound create] pic.twitter.com/l6EBJHVlRy
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) December 16, 2019

* 同様にLeadLightShader (1DrawCall電飾Shader)

LeadLightShader (1DrawCall電飾Shader) pic.twitter.com/NNcvoI0fws
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) October 26, 2019

・(未完成)疑似点光源

光束密度計算してみた

とりあえずUnlit何も分かんない。 pic.twitter.com/RMhJx8K86P
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) December 21, 2019

・アバターパーティクル (頂点情報書き出し/テクスチャ化+ParticleSystem+ポリゴン増殖+メッシュ再構築)

もともとfbxからアニメーションを描画するアイデアは、Unityちゃん描画のときからあった
アバターに録画用Shaderを仕組む → 録画 → パーティクルで再構築
頂点情報を書き出すShaderを書いて、アバターに設定してVRChatにアップロード
VRChatのウィンドウに対し、Unityでデスクトップキャプチャを行い、数十フレーム分をテクスチャ化
ParticleSystemで板ポリを出し、ポリゴンを増殖させ、fbx(index構造, uv, テクスチャ)と上記テクスチャを元に再構築
今後、LiveStreamingに対応可能か技術検証する予定 (映像コンテンツとして良さそう)

こまちちゃんぱーてぃくる！
ひとりで寂しくても、こまちちゃんが撫でてくれるのです！ pic.twitter.com/MXwm6rNTqD
— 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) January 21, 2020

まとめ

Shaderに限った話ではないですが、技術ってかなりスキルツリー感があります。
私のUnityShaderの書き始めはUTS改変でした。Shaderの書き始めって改変からが良いと思います。
改変のためにShaderを読むことが大切！
あらかじめ動くShaderを見ることで流れが分かる！
と言いつつ、個人的には画像処理をするシェーダーがおすすめ (ラプラシアンフィルタ等)
レンダリングの仕組みを知ることも大切！
各Shaderステージを理解する → 何が出来て何が出来ないのかが分かる
本質的にGPUinstancingは存在しないのできっとUnityがなにかやっているはず→ LeadShader