HDRPの話をUnity お・と・なのLT大会 2019でやります
https://gyazo.com/02ee3d17c0d5b9cc1d335c2fcec3c2b0
HDRPで使えるようになるポスプロカスタマイズを使ってレイマーチングを描いてみよう！
埋め込み用リンク
イベント
発表者スライド一覧
https://gyazo.com/6f32697a3301e69b2641e468a3ef563e
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
もくじ
表紙と自己紹介
まえがき
本文
謝辞
資料
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
本文
タイトル
HDRPで使えるようになるポスプロカスタマイズを使ってレイマーチングを描いてみよう！
このLTから得られる知見
Unity2019.3から利用できるCustom Pass Volumeについての知見
自前のポスプロを作る方法
将来レイマーチングがガンに効くようになるか？という考察
自己紹介
無職
本文に入る前のまえがき
UnityにはSRPが登場してからハイエンド向けでHDRP、それ以外ではURPが使えます。
現状、Unity2019.3以降でHDRPを使うと、ポストプロセスを自分で自由に作ることが可能です。今日はこのやり方について見ていきましょう。
なお、ハイエンド向けであるHDRPをテーマにLTを申し込んだ直後に、LT大会の主催名を見てやや悩みましたがいずれはURPでも同じことができるようになるハズですので(※)、このまま突き進んで参ります。
※Custom Forward Renderer
環境
本LTではUnityでスライドを作成しています。
Unity2020.1.0a12
Unity2020.1.0a14
※パッケージマネージャーやGitHubからSRPの新しいものを入れる必要はありません
スライドプロジェクト
本文
ポスプロとは
雑に説明すると、レンダリングして画面に映す前に割り込んで加工するもの。ポストエフェクトとも呼ぶ。ブルーム、ヴィネット、カラーグレーディングなどの効果がある。
Unity使いにはPost Processing Stackでおなじみ。HDRPだとVolume。
https://gyazo.com/aae0052d944f14097a991b4a19d559dc
ポスプロのカスタマイズ
今回紹介するHDRPのコンポーネントはCustom Pass Volumeという名前。
「グラフィックパイプラインにインジェクトする」機能
ポスプロ用途だけではなく、他のタイミングでも処理を追加できる
Injection Pointでレンダリング前、半透明処理の前、ポスプロ処理の前のいずれかを指定する。
FullScreenCustomPassでは画面全体へ影響するマテリアル(シェーダー)を設定できる。これでポスプロをカスタマイズする。
https://gyazo.com/1064caa1e4b084a7dbc2087b51aa209e
DrawRendererCustomPassというものもあり、オブジェクトごとにマテリアルの影響を追加できる。
https://gyazo.com/5b07bb2406b37db2c6e56835d14966fa
Queue、Layer Maskの指定ができる。
https://gyazo.com/d47c5ad4e3e960eb4e37ffee120f4588
https://gyazo.com/d1411a14b7a158af74994c1e28d8a066
ポスプロを動かしたイメージ
典型的なポスプロは公式がサポートしますので、それ以外のことをやってみます。
モザイクとかグリッチとか
Kino使っちゃおう
やり方
Unity2019.3、Unity2020を使う
HDRPのプロジェクトテンプレートを作る
シェーダテンプレートを作る
シェーダテンプレートに紐づくマテリアルを作る
空のゲームオブジェクトを作ってCustomPassVolumeをアタッチする
CustomPassにFullScreen Passを追加し、マテリアルを設定する
シェーダーを作る場合には、HDRPというカテゴリにあるCustom FullScreen Passを選択。
https://cdn-ak.f.st-hatena.com/images/fotolife/s/sayachang_bot/20191009/20191009100914.png
シェーダーの内容
https://gyazo.com/5d6f7377777111d320b330d164318ae7
CustomPassSampleCameraColorでテクスチャを取得できる。これを加工してポスプロ実装できる。
float4 color = float4(CustomPassSampleCameraColor(posInput.positionNDC.xy, 0), 1);
フラグメントシェーダーはFullScreenPassという名前でpragmaされている。
posInput.positionNDCは0から1に正規化された座標。従来のi.uv。
他にもpositionWSとかpositionSSとかがあるので、詳細はシェーダーテンプレのコメントを読んでね。
解像度は_ScreenSize.xy。
作成したシェーダーをマテリアルに割り当て、Custom Pass Volumeコンポーネントに設定する。
※Custom Pass Volumeは、シーンに空のゲームオブジェクトを作ってそこに置けばOK
https://cdn-ak.f.st-hatena.com/images/fotolife/s/sayachang_bot/20191009/20191009101103.png
ところで、ポスプロは2Dの絵を加工する処理をフラグメントシェーダで実装するということ。
ということはレイマーチングが描けるのでは？
レイマーチングとは？
プログラマーのための宴会芸手法。
数式をシェーダーコードで書いていくうちに、いきなりすごい絵が出てきたりして見ている人を驚かせることができる。
クラブでVJをプログラマーが行ったり、TokyoDemoFestでライブコーディングを行い、オーディエンスを大いにわかせるようなイベントがある。
世界的なイベントとしてはドイツで開かれたRevisionでのShader Showdownが知られている。
※まじめに説明すると、レイマーチングはレイトレ手法の一種で、プロシージャルスカイボックスで雲のボリュームを描くのに使ったりします
https://gyazo.com/d3fe806b3097c7a5df3f51eb43efd3e8
シェーダーライブコーディングの例
https://www.youtube.com/watch?v=g7wjA8mIq3Y
シェーダーのライブコーディングを披露すれば、はたから見ると謎なコードを書いているのになぜか唐突にすごい絵が出てきたりして楽しいです。
これからの忘年会シーズンに向けて、みなさまもこの宴会芸をやってみてはいかがでしょうか。
動くようすをお見せします。
※それまでのレンダリング過程を無視して任意の絵を描いている。シーンに何を配置していても、カメラに直接絵を描く。
https://gyazo.com/4a4f6708f2f7a26bcd42ed2cf8d5fe6b
レイマーチング以外の絵も当然出せます。
https://gyazo.com/01ad2485fe3ff97b85fcee5d02cc69f1
シェーダーアート展示用のプロジェクトとかをHDRPで簡単に作れますので、みなさまも試してみてはいかがでしょうか。
謝辞
ご清聴ありがとうございました。
Special Thx To
kaiwareさん : いつもUnity用LTプロジェクトを使わせてもらっております。
Kanetaaaaaさん : レイマーチング、Energy Labを使わせてもらいました。
keijiro神 : Kinoグリッチを使わせてもらいました。
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
資料
HDRP
HDRP PostProcessing Raymarching
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
作業痕跡
TODO
てきとうにHDRPいじくりながら発表内容をひねり出す DONE
タイトルを決める DONE
テーマはこれ DONE
もくじを書く DONE
Unity2020βの一番新しいやつをインストールする DONE
Unity2019.3にするかもしれないのでどこかで判断する Unity2020入れるだけで動いた
Unityスライドプロジェクトを作成する DONE
HDRPポスプロをいじくる DONE
HDRPポスプロでレイマーチングを描いてみる DONE
HDRPポスプロ+レイマーチングでブログ書く DONE
Unityスライドであれこれ書く DONE
LTはお笑いライブであるべきなので、何がガンに効くのか考える DONE
Googleスライドを作る DONE
かんたんエフェクト加工シェーダーに書き加える あとでやる
Rainyシェーダーも追加しちゃおうかな (ちょっと無理っぽいので諦めるかロジックに手を入れてがんばるかどうしよう)
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png