Unity: VJ等用のImage EffectをHDRPに移行した


<iframe width="560" height="315" src="https://www.youtube.com/embed/ryb3ZOTx8NY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Kaiware先生の作った[VJ用のImage effect (post effect)集](https://github.com/kaiware007/UnityVJShaderSlide20181108)があり，これをHDRP用に移行してみました（ただし，Barrel distortionを別途追加していたり，HDRP用に若干補正かけたり，Kinoに含まれているエッジ系のフィルターを削除していますが）．

今後、さらなるエフェクトは随時追加予定です。


## ソースコード

https://github.com/supertask/Cinema

映画で使うエフェクトを目指すため，**Cinema** にしました．また，Keijiro氏のKinoはスラングで「超最高傑作な映画」という意味らしく，それに寄せたというのもあります．

## 背景

ダンサーたちをRememory Studioでスキャンし，それをもとに映像コンテンツを作ったり（or VJ素材として使ったり）する，というプロジェクトを趣味でやっていて，その際にHDRP用のImage effect(post effect)を入れたいと思い，作りました．

https://twitter.com/rememoryapp/status/1454991293214445572

Keijiroさんの[Kino](https://github.com/keijiro/Kino)も知恵が蓄積された，かなり凄いImage effect集なのですが，自分でも独自のエフェクトを追加したいなと思っていて（現状はKaiware先生のが9割ですが），それで作成しました．



## Cinemaに入れたエフェクト

- Mosaic
- Radiation Blur
- Rect Block Glitch
- Noise Distortion
- Barrel Distortion
- RGB Shift
- Random Invert
- Reflection (bottom to top)
- Reflection (right to left)

個人的にオススメなのは，Noise distortion, Barrel distortion, mosaic, Radiation blurのあたりで映像のインパクトを出しやすいかなと感じています．

**Noise distortion, Barrel distortion ↓**

![noiseDistortion.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1771055/1a77c2bb-843d-2de0-5629-b6f4bd904476.gif)![barrelDistortion.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1771055/b2043212-747c-6ee5-c9a4-4a330af51eaf.gif)

**Mosaic, Radiation blur ↓**

![mosaic.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1771055/212051c0-5f3d-9f0e-a5f4-0c38c966338f.gif)![radiationBlur.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1771055/5912ad97-332a-ef9e-6f32-ececd4c23d97.gif)

## インストール方法


```
"jp.supertask.cinema.post-processing": "https://github.com/supertask/Cinema.git?path=/Packages/jp.supertask.cinema.post-processing",
```

をmanifestファイルに入れて，Project settings -> HDRP Default Settings -> After Post Processにプラスボタンで，エフェクトを追加するだけです．


## エフェクト作成にあたって

### HDRP用のImage effect作成は結構簡単

以下の記事や Keijiro氏の[Kino](https://github.com/keijiro/Kino/tree/master/Packages/jp.keijiro.kino.post-processing/Runtime) を参考にし，Custom Package ManagerはXJINE師匠の[Unity_PackageManagerSample](https://github.com/XJINE/Unity_PackageManagerSample)を参考にしています．

https://qiita.com/ruccho_vector/items/f71e9bc148a1b3bfdd4f

URPよりもシンプルで **CustomPostProcessVolumeComponentとIPostProcessComponentを継承したクラスと適当なShaderを作るだけ** でHDRPのVolume profileに表示されます．

![volume.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1771055/ef5e02c4-877f-4168-9d62-3fb172b5ee5c.png)

また，[Kino](https://github.com/keijiro/Kino/tree/master/Packages/jp.keijiro.kino.post-processing/Runtime)からC#ファイルとShaderの2ファイル分を，コピーして作るのが最短です．


### 実際に使っているShaderは，かなりシンプル

実際にやっている処理は30-40行程度のものが多く，例えばNoise distortionであれば

```
float3 uv1 = float3(uv * distortionNoiseScale, _Time.x * timeScale);
float3 noise = snoise_grad(uv1 + distortionNoisePosition);

noiseDistortedUV = getRotationUV(uv, noise.x, noise.y * distortionPower);
noiseDistortedUV = fukuokaTriangleWave2D(noiseDistortedUV);
```

uv座標に Simplex Noiseの勾配（snoise_grad）のxy座標を引数にした円の方程式（`x,y = r*cos(theta), r*sin(theta)`的なやつ）分だけ足して，座標変換させるだけで，その他のShaderも同じように結構シンプルになっています．

fukuokaTriangleWave2Dはuv座標が0~1の範囲を超えたときに，テクスチャをピンポン（または鏡）的に参照するための関数です．

## 今後の展望

新しいImage effect(post effect)も今後追加していく予定↓ で，もしCinemaにふさわしいカッコいいImage effectがあれば，issueのコメントに書いて盛られるとありがたいです．

https://github.com/supertask/Cinema/issues/2

## 最後に

ぜひ、フォローよろしくお願いいたします！

- [Twitterアカウント](https://twitter.com/supertask_jp)
- [YouTubeアカウント](https://www.youtube.com/c/TasukuTAKAHASHI)



## 参考

- kaiware007, UnityVJShaderSlide20181108, https://github.com/kaiware007/UnityVJShaderSlide20181108
	- He is one of the super coders I know.
- XJINE, Unity_ImageFilters, https://github.com/XJINE/Unity_ImageFilters 
- Ian McEwan, Ashima Arts (Simplex noise)
- Stefan Gustavson (Classic noise and others)