今回以下のアドベントカレンダーにも投稿しました
・ARKit Advent Calendar 2018:UnityとARkitで電脳コ◯ルなアプリを作った話
https://qiita.com/awesome/items/5b8ee2b62c0076fbc569
以前Twitterで話題になっていた、UE4による水彩画風ポストエフェクト
以下ツイッターに投稿した動画
■OnRenderImageを使う。
引数としてレンダリングされた結果をRenderTextureとしてもらえるので、それに対してシェーダーでフィルターをかけることでエフェクトをかけることができる。
OnRenderImage関数内で
とすることでレンダーターゲットにシェーダーを割り当てることができます。
引数に渡すrenderTargetとマテリアルを何個かあらかじめ作成しておき、
何度も何度も反復してマテリアルとrenderTargetを差し替えていくことで絵を作っていきます。
必要であれば、その間3Dモデルのマテリアルも差し替えます。
版画で色を重ねていくような作業ですね!
1.ベースとなるレンダリング結果
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F59095%2F21ef6251-2674-0ad0-6931-cc4a7cbde15a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2d5d3bdbe0e3aac251ff8fa8003a9ecd)
2-1.アウトラインのみのレンダリング結果
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F59095%2F2280ad88-18a5-d6c4-dc4c-96e58db9f849.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7fd40ca6292f81d3d78554b23f2e084e)
2-2アウトラインにノイズフィルターをかけたレンダリング結果
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F59095%2Fadbee6ad-3e00-3312-2338-625e026f6ef2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=02870aaa110e413473008f5390259458)
以下フラグメントシェーダーの記述です
//ノーマルマップで歪ませる
float4 col = tex2D(_MainTex, i.uv + n.xy * 0.03 ); //0.03はstrength
![スクリーンショット 2018-12-22 19.11.58.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F59095%2F497917f1-f390-4a37-6752-1166c9498f1b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fc401378f7ff747fd11a14c4fffd656c)
3.ディフューズのレンダリング結果
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F59095%2Fb2929bdc-4b3a-4826-f882-f1d57247eb27.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=cc298d6a288c3a466cbaec5d32c3effc)
4.テクスチャカラーのみのレンダリング結果
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F59095%2F1bf069f2-abca-a109-c4a3-d482ef181cb3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=708a4dcccc90f057be6033bcc5ccc2dc)
5.ハイライトのみのレンダリング結果
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F59095%2Ff5a757ab-31f8-7b29-e422-0a0a6aebc0ba.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8a87268a9c36886308ebf06b705d5769)
6.影のマスクのみのレンダリング結果
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F59095%2F96333966-2eef-8794-b807-c3f7662d3623.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=00ed686da66d5ca4818303638ec237cf)
![スクリーンショット 2018-12-22 19.14.16.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F59095%2F7423e902-44bf-8f4c-546b-8fa298eb3be8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b9479cef739499ebf0ad0a9ad7a28811)
1〜6全てを合成したレンダリング結果
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F59095%2Fdf4b9a4f-e903-7514-d498-75ad62b615be.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3410255437b518195e9ffa6b24414435)
アウトライン+ディフューズ+カラー+ハイライト+シャドウ
を全て合成した結果です。
例えるならば、雰囲気的にはPhotoshopのレイヤーモードを変更したり、フィルターをかけたり・・・というふうに合成していく感じです。
最後に
体調悪くて雑な記事になってしまいすみません・・・