Go to Qiita Advent Calendar 2024 Top
LoginSignup
35
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@konchannyan

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

Posted at

#本記事の概要

  • 邪気眼(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の構成に改変
* スケールを書き換えて限界以上に小さくなるorアニメーションで大きくなる改変 * グリッド間に丸めたあと、グリッド間をsin^3で補間してラグっぽい挙動になる改変

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

  • 割とここから始まったテッセレーション
  • テッセレーション扇子扇子
* コード([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構造をテクスチャに書き出してみた
* おまけでどこまで描画できるかやってみた (呟きの上限予想は誤っている)

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

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

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

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

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

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

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

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

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

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

###・LeadShader (GPUinstancing)

  • 作った中で1番業が深いシェーダー
  • やってることも業が深い (Unityのレンダリングの実装を予想して無理やり実装した)
  • 原理解説ツイート
  • github
* 複数描画する場合 * 別MaterialのColorを取得するのもできる

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

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

###・ガンマ値 (GrabPass)

  • GrabPassの練習

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

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

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

###・LBM (CustomRenderTexture)

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

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

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

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

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

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

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

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

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

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

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

###・(未完成)疑似点光源

  • 光束密度計算してみた

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

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

#まとめ

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
35
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?