3
1

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-11-05

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

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

ソースコード

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

背景

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

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.gifbarrelDistortion.gif

Mosaic, Radiation blur ↓

mosaic.gifradiationBlur.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 を参考にし,Custom Package ManagerはXJINE師匠のUnity_PackageManagerSampleを参考にしています.

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

volume.png

また,Kinoから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のコメントに書いて盛られるとありがたいです.

最後に

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

参考

3
1
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
3
1