HDRPによる高品質なPBRとトゥーン表現の両立を試みる【Unity】

本記事は[VTuber Tech #1 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/vtuber)の18日目の記事です．

前日の記事
https://qiita.com/gon0515/items/a7841f964b358a24dbcc

## はじめに

Unity HDRP(High Definition Rendering Pipeline)は一般的にPBR表現に特化しており，ToonShaderなどのNPR表現はターゲットとされていません．
しかし，HDRPに含まれている高皮質なVolumetric FogやPlanar Reflection Probe，Post Processingなどは魅力的であり，***ぜひトゥーン表現と両立したい！***

そこでこの記事では，HDRPで辛うじて動作するToonShaderの実装と実際のシーンへの組み込みを行います．

制作したシェーダと実際にHDRPに組み込んだスクリーンショットが以下になります．

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">HDRP環境でトゥーン表現をするためのシェーダを組みました（注. HDRPはNPR非推奨）<a href="https://t.co/cLTdxMIs5N">https://t.co/cLTdxMIs5N</a> <a href="https://t.co/msFIEI3e8t">pic.twitter.com/msFIEI3e8t</a></p>&mdash; とぐち (@togucchi) <a href="https://twitter.com/togucchi/status/1205542218930376706?ref_src=twsrc%5Etfw">December 13, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170854/d9bbf45b-6458-bd63-2102-fd604a4cfbfd.png)


## 環境
- Unity 2019.3.0f3
- HDRP v7.1.6

## HDRPについて

>Unity 2018.1 で、スクリプタブルレンダーパイプライン（SRP）という新しいシステムが登場しました。これにより、プロジェクトのニーズに応じた独自のレンダリングパイプラインの作成が可能になりました。SRP には「ライトウェイトレンダーパイプライン（LWRP）」および「HD レンダーパイプライン（HDRP）」という既成の 2 つのパイプラインが含まれます。HDRP は忠実度の高いビジュアルに重点を置いており、PC や据え置き型プラットフォームに適しています。

[
HD レンダーパイプライン：アーティストのためのクイックスタートガイド](https://blogs.unity3d.com/jp/2018/09/24/the-high-definition-render-pipeline-getting-started-guide-for-artists/)

Unity社がアーティスト向けのわかりやすいチュートリアルを出してくれています．
最近previewも外れたはずです！

## ToonShaderの実装

### 厳しいところ
HDRPをはじめSRPでのシェーダ実装は主にShaderGraphで行うことが推奨されていると思いますが，HDRPのShaderGraphではライト情報を受け取ることができなかったり，ToonShaderを実装する上での弊害があります．

また，ShaderGraph上ではアウトラインパスによるアウトラインの描画も行えないため，一般的なToonShaderに存在するアウトラインの実装も難しいことになります．

#### 余談
[Unity HDRPをカスタマイズしてアウトラインパスを追加する](https://nanka.hateblo.jp/entry/2019/08/04/024339)

Litシェーダ，レンダリングパイプラインの改造によりアウトラインを実装されている方もいらっしゃいます．
特にLitシェーダを元にできるとLightProbeの情報なども扱えそうですので，今後挑戦したいと思っています．（が，レンダリングパイプラインを改造する性質上配布する形に落とし込むのは厳しいかもしれません）

### 解決(妥協)案
アウトラインの描画はレンダリングパイプラインの改造が必要であると考えられるため，今回は***シェーダを配布できる形にするため捨てます***．

さらに，ライト情報の受け渡しはDirectional Lightの方向，色，光量のみC#スクリプトからシェーダのパラメータに渡す簡易的な実装で行います．

### ShaderGraphでの実装

実際にShaderGraphで実装したシェーダがこちらです．Specularは実験的実装で，恐らく正しく動作しません）
以下，***HDToon***と呼称します．

https://github.com/togucchi/HDToon

![shadergraph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170854/2748ffb5-8738-7ca3-b15a-b1bcd1746009.png)



恐らく，一般的なToonShaderの処理をなぞっている感じになっているかと思いますので，実装についてはToonShaderの解説記事や実際のシェーダをご覧ください．

実装に際して，主に以下を参考にしています．
https://github.com/andydbc/unity-shadergraph-sandbox
https://connect.unity.com/p/zelda-inspired-toon-shading-in-shadergraph

## HDRPへの組み込み

### 準備
まず，Unity Hubの新規プロジェクト作成画面から，HDRPテンプレートを選択して新規プロジェクトを作成します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170854/7586f178-3416-34b9-ab5c-80f794eac6d9.png)

サンプルシーンが最初に現れると思いますが，今回は見栄えを良く，実際の利用環境に近づけるため環境モデルのアセットを導入します．

この記事ではこちらの教室のアセットを導入します．（有料アセットですが，必須ではないのでご容赦ください）
https://assetstore.unity.com/packages/3d/environments/japanese-school-classroom-18392

アセットをImportし，Edit/Render Pipeline/Upgrade Selected Materials to High Definition Materialsでマテリアルを変換，その後手動でマテリアルやシーン，Post Processingを調整した結果以下のようになりました．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170854/ea6940a4-50b3-ec03-5f45-427d185725fa.png)

記事の簡略化のため，シーンのセットアップの説明は省略します．
多くの方が素晴らしい解説記事を書いてくださっているためそちらをご覧ください．HDRPは頻繁にバージョン更新されているため情報が古くなっている可能性があることに注意してください．一部貼っておきます．
http://sayachang-bot.hateblo.jp/entry/2018/09/23/203758
https://www.kemomimi.dev/2019/09/16/lightwayonhdrp/

HDToonでライト情報を利用するため，メインとなるDirectional Lightに"ToonShaderLightSettings.cs"をアタッチしておきます．
これでこのライトの方向，色，光量をHDToonで利用できるようになります．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170854/0a348dc0-9fb6-3a52-81c8-d97965bd9003.png)


### キャラクターのセットアップ

今回テスト用に戸森ひかげさんのシャーロちゃん（冬服）モデルを使用します．
https://tomori-hikage.booth.pm/items/1572472

キャラクターをシーンに入れた段階ではマゼンタ（シェーダエラー）になっていると思いますので，マテリアルをHDToonに入れ替えていきます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170854/6ad0cd54-1c47-b48d-a84b-d2ec313dc2cc.png)

マテリアルの設定項目はこのようになっています(Specularは使わないほうが良いです...)．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170854/6a18ccd3-ae42-5eda-365b-41d11d11c64c.png)

- Base~ 
    - 通常色の設定
- Shadow~
    - 影色の設定
- ShadingToony
    - 影の境界をはっきりさせる
- ShadowThreshold
    - 影の閾値
- Brightness
    - 明るさ
- Rim~
    - リムライトの設定

簡易的な設定にまとまってるかと思います．
うまくシーンに馴染まない場合は，Brightnessを上下させてマスタの明るさを調節するのをおすすめします．

マテリアルの設定，テクスチャ等をすべてキャラクタに適用して調節するとHDRPシーンの中にToonShaderのかかったキャラクタが現れます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170854/445a65a4-a3f4-b92a-d5b6-56e2891f5dcd.png)


Brightnessをかなり高くしてShadow~をベースカラー，Base~をハイカラーとして扱い強い光が当たっているような表現をすることもできます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170854/430ae4c2-07ef-337d-b12a-d4cf61a6f9cd.png)


教室のシーンに組み込んでポーズや表情などつけてみると以下のようになります！かわいい！
シーンに馴染むようにHDToonのBrightnessや，Post Processingのカラーグレーディングなどを調整しています．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170854/f55b6b57-3a3c-db04-7a08-744feb641c67.png)

HDRPにはPlanar Reflection Probeが含まれているのでこのような鏡面反射をキャラクタに適用することもできます．（鏡面反射教室，なんか"良い"ですね）

![image_0004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170854/8ed3779f-5d29-6c6e-b8be-f26ddc2a4897.png)


まだ適当にシーンに入れるだけで綺麗に馴染む汎用的なものには仕上がってませんが，映像用途，VTuber用途などですとある程度カット毎の調節をかけられるのでまだ使えるかなーとは思います．（ゲームでの利用もしてくださったら嬉しいです！）
使ってくださった方はご一報いただけると嬉しいです．


### アウトライン付けてみる（おまけ）

ShaderGraphでアウトラインつけるのは厳しいのは前述しましたが，***ポストプロセス***でアウトライン付けてみても面白いかなと思ったので試してみました．

keijiroさん（神）が公開してくださっているHDRP用のポストプロセス集のKinoの中に輪郭線強調ができるものがありましたので，一旦そちらを利用させて頂きます．
https://github.com/keijiro/Kino

プロジェクトにKinoを導入（上記リンクを参考）して，シーンに配置されているVolumeのプロファイルに"Recolor"を追加します．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170854/550df668-22f1-d44d-fe18-c683c001bbc8.png)

一番上の"Edge"が輪郭線を出すエフェクトなので，ColorのAlphaを255にしてその他パラメータもいい感じに調整します．

結果，まあまあなアウトラインが出せていることがわかります（ポストエフェクトなので，もちろんキャラクタ以外のものの輪郭線も出ます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170854/818c3780-3b7e-610e-3366-87c0b2bd591c.png)

keijiro先生のRecolorはもちろんそれ用に作られたものではないので，トゥーン表現用のポストエフェクトなど作ると，HDRPで更に良い表現ができるかもしれません！

## 最後に
フォトリアル風景に２次元キャラクタが立っている絵，好きですよね？（僕は好きです）
みなさんもぜひHDRPに自慢のキャラクタを入れて遊んでみてください！