2019年にVRChat用に書いたShader備忘録的まとめ

#本記事の概要
 * [邪気眼](https://twitter.com/konchannyan)(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の構成に改変
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">2,3回、死にかけた… <a href="https://t.co/pU0Ut4PtJB">pic.twitter.com/pU0Ut4PtJB</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1085230107310997504?ref_src=twsrc%5Etfw">January 15, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 * スケールを書き換えて限界以上に小さくなるorアニメーションで大きくなる改変
 * グリッド間に丸めたあと、グリッド間をsin^3で補間してラグっぽい挙動になる改変
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">結局4日目には、こまちちゃんのUTSを書き換えてしまった＞＜<br><br>「ラグシェーダー」<br>ウェスカーの如く瞬間移動！！<br>マーダーで使ったら、100%蹴られます＞＜<br><br>試作として、とりあえず格子上で補間！！<br>セルラーノイズとかで補間すれば、かなり不規則に移動できそう！！<br>(昔、二つ名がウェスカーだった私) <a href="https://t.co/GTgFogmvKy">pic.twitter.com/GTgFogmvKy</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1141053255188791296?ref_src=twsrc%5Etfw">June 18, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・ポリゴン増殖&モデリング&メッシュ生成 (テッセレーション+GeometryShader+Asset化してメッシュを保存)
 * 割とここから始まったテッセレーション
 * テッセレーション扇子扇子
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">これっ、くらーいの！<br>Quadメッシュに！<br>Material、1つで、はいっ！扇子っ！！ <a href="https://t.co/M3EXPmKWhw">pic.twitter.com/M3EXPmKWhw</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1088458144781496323?ref_src=twsrc%5Etfw">January 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 * コード([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構造をテクスチャに書き出してみた
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">いろいろとShaderの限界がわかったので、修正。<br>2ポリゴンでUnityちゃん。 <a href="https://t.co/S6Sl8YLKlc">pic.twitter.com/S6Sl8YLKlc</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1094168486614421506?ref_src=twsrc%5Etfw">February 9, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 * おまけでどこまで描画できるかやってみた (呟きの上限予想は誤っている)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Unityの1meshで何人のUnityちゃんを描画できるか？<br><br>fps2未満 (視錐台カリングとかで当てにならない)<br>Unityちゃん81,915人 (8万人)<br>1,315,063,410ポリゴン (13億ポリゴン)<br><br>多分、shaderの上限をほぼほぼ満たしてる。<br>(厳密には1meshから1,431,568,384(14億)ポリゴンが上限かと思われ) <a href="https://t.co/z3mpbPJ7Lv">pic.twitter.com/z3mpbPJ7Lv</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1107641444842377216?ref_src=twsrc%5Etfw">March 18, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・RenderTextureでメモリのたたき台 (RenderTexture+Camera)
 * Camera+RenderTextureのループ構造でメモリを作成
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">たのちぃ… <a href="https://t.co/No9pDT0sEa">pic.twitter.com/No9pDT0sEa</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1096712857868095491?ref_src=twsrc%5Etfw">February 16, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">パンジャンを、生み落とす。<br><br>VRChatのワールドにパンジャンを植えるShaderを書きました。<br>RenderTextureたのしぃ！！夢が広がる！！ <a href="https://t.co/rwbeHIJpNj">pic.twitter.com/rwbeHIJpNj</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1097573299662422016?ref_src=twsrc%5Etfw">February 18, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・扇子 (ポリゴン増殖+モデリング)
 * [booth](https://booth.pm/ja/items/1613143)で公開中
 * 新幹線の中で扇子と数式をにらめっこしてたら、隣の席の人にドン引きされてた
 * こだわりポイントは折り畳まれる瞬間 (線形補間で滑らかに折り畳まれるように)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/VRChat?src=hash&amp;ref_src=twsrc%5Etfw">#VRChat</a><br>扇子がだいぶいい感じになったよ！！！ <a href="https://t.co/RJbGhUf0tR">pic.twitter.com/RJbGhUf0tR</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1111330527838007296?ref_src=twsrc%5Etfw">March 28, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">やっぱり扇子シェーダー綺麗だなって。 <a href="https://t.co/jBbUMhTwcD">pic.twitter.com/jBbUMhTwcD</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1210775912792281101?ref_src=twsrc%5Etfw">December 28, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・キューブマップ生成 (リアルタイムキューブマップ生成+反射/屈折+色収差)
 * 90°のカメラを6方向に向けて、リアルタイムでキューブマップを作ってみた
 * リアルタイムキューブマップ生成は反射/屈折と相性が良い
 * 距離関数的な概念(球は球、正二十面体はポリゴン)があるので、レイマーチング感がある
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">はんしゃ～<br>くっせつ～<br><br>わーい！！ <a href="https://t.co/7MF8A7xqjv">pic.twitter.com/7MF8A7xqjv</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1116059216966340608?ref_src=twsrc%5Etfw">April 10, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">正二十面体のクリスタルを置いたワールド作りました！<br><br>「SURROUND CRYSTAL ǃǃ」<br>みんなでクリスタルを囲んでね！！<a href="https://twitter.com/hashtag/VRChat?src=hash&amp;ref_src=twsrc%5Etfw">#VRChat</a> <a href="https://twitter.com/hashtag/Shader?src=hash&amp;ref_src=twsrc%5Etfw">#Shader</a><a href="https://t.co/kcYrM6w88a">https://t.co/kcYrM6w88a</a> <a href="https://t.co/CwfM89vc6n">pic.twitter.com/CwfM89vc6n</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1162420964656701440?ref_src=twsrc%5Etfw">August 16, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・お花畑 (テクスチャ化)
 * テクスチャに書き順を色情報として格納することで、徐々に書き上がる落書きみたいなのができる
 * 今更ながらParticleSystemでも出してみたい
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">お花畑固有結界シェーダー！！<br><br>落書き固有結界シェーダーでもいいかな？ <a href="https://t.co/MiBRWA4u5F">pic.twitter.com/MiBRWA4u5F</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1123701917933297664?ref_src=twsrc%5Etfw">May 1, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">あとは、距離に応じて描画すれば、お花畑シェーダーができるはず。 <a href="https://t.co/3yQdtfj3ZC">pic.twitter.com/3yQdtfj3ZC</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1123547541016989701?ref_src=twsrc%5Etfw">May 1, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・「カメラ未使用&CustomRenderTexture未使用」な自作TrailRenderer (GrabPass)
 * GrabPassのテクスチャを次フレームに引き継いだら取得が出来た (アイデア: わざわざUnityは初期化しないよね)
 * ミラーがあるワールドだと挙動が安定しないので現状利用できない
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/VRChat?src=hash&amp;ref_src=twsrc%5Etfw">#VRChat</a> <a href="https://twitter.com/hashtag/Shader?src=hash&amp;ref_src=twsrc%5Etfw">#Shader</a><br>LeadShaderに引き続き、もう1個、VRC界で革命的Shaderを。<br>カメラ無しでTrailRendererを自作しました。<br><br>カメラ未使用なので、フレンド外にも表示されます。<a href="https://t.co/AC3kEVURAb">https://t.co/AC3kEVURAb</a> <a href="https://t.co/lJvHFYtCGf">pic.twitter.com/lJvHFYtCGf</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1125168242425647104?ref_src=twsrc%5Etfw">May 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・LeadShader (GPUinstancing)
 * 作った中で1番業が深いシェーダー
 * やってることも業が深い (Unityのレンダリングの実装を予想して無理やり実装した)
 * [原理解説ツイート](https://twitter.com/konchannyan/status/1122847816202637313)
 * [github](https://github.com/konchannyan/LeadShader)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/VRChat?src=hash&amp;ref_src=twsrc%5Etfw">#VRChat</a> <a href="https://twitter.com/hashtag/Unity?src=hash&amp;ref_src=twsrc%5Etfw">#Unity</a><br><br>別アバターのメッシュ座標を取得するShaderできたよ！！<br>わーい！！ たーのしー！！<br><br>いろいろできるよ！！<br>・フレンドがいる場所を示すコンパス<br>・複数人でアバター芸 <a href="https://t.co/6vg9QRK0zh">pic.twitter.com/6vg9QRK0zh</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1118571961859186688?ref_src=twsrc%5Etfw">April 17, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/VRChat?src=hash&amp;ref_src=twsrc%5Etfw">#VRChat</a> で使える <a href="https://twitter.com/hashtag/Unity?src=hash&amp;ref_src=twsrc%5Etfw">#Unity</a> の謎挙動を使った <a href="https://twitter.com/hashtag/LeadShader?src=hash&amp;ref_src=twsrc%5Etfw">#LeadShader</a> お配りします！<br><br>「ペアでアバターに仕込めるよ！！」<br><br>希望者はここにリプ頂ければ、数日以内にDM送ります。<br>・UnityPackage<br>・設定方法<br>・設定用ID<br>を送らせて頂きます。<br><br>※LeadShader改変もID渡すのでリプ下さい！<br><br>※お写真:らぐみこちゃん <a href="https://t.co/wPP3sqhc3X">pic.twitter.com/wPP3sqhc3X</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1129035480182460418?ref_src=twsrc%5Etfw">May 16, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 * 複数描画する場合
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">しぇーだーふぇすに出すやつ。<br>間に合うか微妙…だけど、後は書くだけ。 <a href="https://t.co/8jhEBCDYMt">pic.twitter.com/8jhEBCDYMt</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1185967883446190080?ref_src=twsrc%5Etfw">October 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 * 別MaterialのColorを取得するのもできる
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/LeadShader?src=hash&amp;ref_src=twsrc%5Etfw">#LeadShader</a> の改変として、別Materialの色を取得したー。 <a href="https://t.co/U63iECFJxn">pic.twitter.com/U63iECFJxn</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1163104915952005125?ref_src=twsrc%5Etfw">August 18, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・頂点構造書き出し (projector+GeometryShader)
 * projectorを使って、meshの頂点情報をGeometryShaderで書き出す
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ということで、めっしゅを複製するしぇーだー！！<br>頑張って複数めっしゅに対応する！！ (けど、多分無理)<br><br>原理は見た通りです。 <a href="https://t.co/RbQRJcDIPW">pic.twitter.com/RbQRJcDIPW</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1130901444402372608?ref_src=twsrc%5Etfw">May 21, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・ガンマ値 (GrabPass)
 * GrabPassの練習
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">想定と違ったけど、調整次第でいくらでもエモくなるやつ。<br>これは陽シェーダーでは？？？ <a href="https://t.co/uPziAlJEmv">pic.twitter.com/uPziAlJEmv</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1135622886801125379?ref_src=twsrc%5Etfw">June 3, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・草 (ポリゴン増殖+モデリング+LeadShader)
 * グリッド状に再配置させて、シシガミサマっぽく
 * LeadShaderで手に追従させたり、Cameraに飛ばして攻撃したり、巻き付くように見せたり
 * 基本的には線形補間のオンパレード
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ジオメトリシェーダー1つ当たりの処理負荷を減らす＆数を増やしてみるー<br>板ポリ1枚からジオメトリシェーダーを131,072回呼んでるよー<br>ジオメトリシェーダ当たり6頂点で2ポリゴン生成だから…262,144ポリゴン？<br>ちょっと減らしたほうが良さそう… <a href="https://t.co/lQNiRZoXTb">pic.twitter.com/lQNiRZoXTb</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1156623737963212800?ref_src=twsrc%5Etfw">July 31, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">こういうのを求めているの！！<br>ログインモーション作る！！ <a href="https://t.co/r4nm7hPvsl">pic.twitter.com/r4nm7hPvsl</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1160291005851062272?ref_src=twsrc%5Etfw">August 10, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・CustomRenderTexture内でGeometryShaderを使う (CustomRenderTexture+ポリゴン増殖)
 * アイデアは「CustomRenderTextureってRenderTargetViewあるよねー」から
 * 細かい説明は [CustomRenderTextureだけでボリュームレンダリングしてみる!!](https://qiita.com/konchannyan/items/f2a0a7320dba83fdf7da?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">乱数っぽいお試しで雷っぽく！ <a href="https://t.co/YbywANsULU">pic.twitter.com/YbywANsULU</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1164607534230994944?ref_src=twsrc%5Etfw">August 22, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・LBM (CustomRenderTexture)
* そもそもLBMはこんな使い方してはだめな気がした。なぜなら「密度≒圧力≠高さ」な為
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">わーい！<br>きれいなお水！ <a href="https://t.co/5uuOKaReVW">pic.twitter.com/5uuOKaReVW</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1167143593481400320?ref_src=twsrc%5Etfw">August 29, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・(未完成) 影ワールド (GrabPass)
 * 影だけで触れ合うワールドを作ってみたかった
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今もくもくと作ってるワールド。<br>お互いの姿が見えない中、映る影だけを頼りに、交流するワールド。 <a href="https://t.co/7NyEOM2MfS">pic.twitter.com/7NyEOM2MfS</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1172478996405080064?ref_src=twsrc%5Etfw">September 13, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・(未完成) ワールド座標取得 (GrabPass)
 * 深度値とプロジェクション行列とビュー行列から復元
 * 未完成の理由はVRで表示がおかしくなるので
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">理想はグラードンやカイオーガ…<br><br>息抜き完了。水鉄砲作る。 <a href="https://t.co/Pr6stBpnPU">pic.twitter.com/Pr6stBpnPU</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1181972437098876928?ref_src=twsrc%5Etfw">October 9, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・お水 (Camera+CustomRenderTexture内でGeometryShaderを使う+ボリュームレンダリング+レイキャスト+リアルタイムキューブマップ生成+反射/屈折)
 * パーティクルの計算 → ボリュームレンダリング
  * パーティクル計算 (重力 & 速度)
  * パーティクル計算 (上空からの深度カメラで当たり判定)
  * ボリュームレンダリング (2Dテクスチャに書き出し)
  * ボリュームレンダリング (3Dテクスチャに書き出し)
  * ボリュームレンダリング (反射と屈折を考慮してレイトレーシング)
 * [CustomRenderTextureだけでボリュームレンダリングしてみる!!](https://qiita.com/konchannyan/items/f2a0a7320dba83fdf7da?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items)
 * 技術的には、
  * Cameraで上空からの深度情報で当たり判定を計算しつつ、CustomRenderTextureでGPUパーティクル計算
  * GPUパーティクルを元に、リアルタイムでボリュームテクスチャを作成
  * Camera6つでリアルタイムキューブマップ作成
  * ボリュームテクスチャとキューブマップテクスチャを利用して、レイトレーシング的ボリュームレンダリング
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">お水を運べるオブジェクトをワールドに追加したよ！！<br>(お水の挙動を調整のつもりが、毎回別物になっちゃうので少し厄介)<a href="https://twitter.com/hashtag/VRChat?src=hash&amp;ref_src=twsrc%5Etfw">#VRChat</a> <a href="https://t.co/H5cGYJuqRZ">pic.twitter.com/H5cGYJuqRZ</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1178079146204782593?ref_src=twsrc%5Etfw">September 28, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【Just SPLASH !!! (very poor)】<br><br>お水を掛けるワールドをCommunityLabsにアップロードしたよ！！！<br><br>※ 掛けるのが目的のため、掬うのは難しいです<br>※ 掬いたい場合は連絡頂ければ調整中の専用ワールド開けます<a href="https://t.co/0qbQmP9yOC">https://t.co/0qbQmP9yOC</a><a href="https://twitter.com/hashtag/VRC?src=hash&amp;ref_src=twsrc%5Etfw">#VRC</a> <a href="https://twitter.com/hashtag/VRChat?src=hash&amp;ref_src=twsrc%5Etfw">#VRChat</a> <a href="https://twitter.com/hashtag/JustSplash?src=hash&amp;ref_src=twsrc%5Etfw">#JustSplash</a> <a href="https://twitter.com/hashtag/MadeWithVRChat?src=hash&amp;ref_src=twsrc%5Etfw">#MadeWithVRChat</a><br><br>※ 音付き動画 <a href="https://t.co/xhnTZyM0ya">pic.twitter.com/xhnTZyM0ya</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1183822855483592704?ref_src=twsrc%5Etfw">October 14, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・(未完成) 髪の毛 (CustomRenderTexture)
 * 16頂点*65536本=100万頂点 を計算&LineStreamで描画可能か確認
 * Camera+CustomRenderTextureの遅延でどうあがいてもアバターと1フレーム分ずれるので断念
 * CameraもCustomRenderTextureも使わない自作TrailRendererの挙動が安定したら実現可能？
  * LeadShader組み合わせれば他人の髪の毛触るとかできそう
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">CameraもCustomRenderTextureも使わない機構で実装中だけれども、値が結構飛ぶのでなんとか安定させたい。 <a href="https://t.co/IPwP4AQdm0">pic.twitter.com/IPwP4AQdm0</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1198675951867047941?ref_src=twsrc%5Etfw">November 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・ジオラマ for ShaderFes2019 (LeadShader+ポリゴン増殖+疑似ライティング)
 * LeadShaderで1DrawCallで何かやってみたかった
 * [github](https://github.com/konchannyan/LandShader)に丸投げする
 * アイデア: スケール違いのmeshをShader内でソート → 任意の座標を元にGeometryShaderでモデリング
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【<a href="https://twitter.com/hashtag/ShaderFes?src=hash&amp;ref_src=twsrc%5Etfw">#ShaderFes</a> で作ったやつ紹介】<br><br>鉄道模型的な、ジオラマ的な、そんな箱庭のたたき台！<br>地形や線路を動かして遊ぶのって、楽しいよね！<br>(ジェットコースターにして遊ぶ人も…！)<br><br>Red04の右奥に配置されています！<br>[BGM by ayato sound create] <a href="https://t.co/l6EBJHVlRy">pic.twitter.com/l6EBJHVlRy</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1206659911167332353?ref_src=twsrc%5Etfw">December 16, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 * 同様にLeadLightShader (1DrawCall電飾Shader)
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">LeadLightShader (1DrawCall電飾Shader) <a href="https://t.co/NNcvoI0fws">pic.twitter.com/NNcvoI0fws</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1188218069274877952?ref_src=twsrc%5Etfw">October 26, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・(未完成)疑似点光源
 * 光束密度計算してみた
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">とりあえずUnlit何も分かんない。 <a href="https://t.co/RMhJx8K86P">pic.twitter.com/RMhJx8K86P</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1208346705554374659?ref_src=twsrc%5Etfw">December 21, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###・アバターパーティクル (頂点情報書き出し/テクスチャ化+ParticleSystem+ポリゴン増殖+メッシュ再構築)
 * もともとfbxからアニメーションを描画するアイデアは、Unityちゃん描画のときからあった
 * アバターに録画用Shaderを仕組む → 録画 → パーティクルで再構築
  * 頂点情報を書き出すShaderを書いて、アバターに設定してVRChatにアップロード
  * VRChatのウィンドウに対し、Unityでデスクトップキャプチャを行い、数十フレーム分をテクスチャ化
  * ParticleSystemで板ポリを出し、ポリゴンを増殖させ、fbx(index構造, uv, テクスチャ)と上記テクスチャを元に再構築
 * 今後、LiveStreamingに対応可能か技術検証する予定 (映像コンテンツとして良さそう)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">こまちちゃんぱーてぃくる！<br>ひとりで寂しくても、こまちちゃんが撫でてくれるのです！ <a href="https://t.co/MXwm6rNTqD">pic.twitter.com/MXwm6rNTqD</a></p>&mdash; 邪気眼GPGPUptr＠躁鬱な邪気眼 (@konchannyan) <a href="https://twitter.com/konchannyan/status/1219688738663436288?ref_src=twsrc%5Etfw">January 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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