[シェーダー]ガラスにつく雨、水滴の表現

窓ガラスにつく水滴表現したいですね。ヒントとなりそうな情報をまとめてみました。

基本的には全画面エフェクトが多いです。ゲームであればカメラに水滴が垂れるような演出ですね。窓ガラスのようなオブジェクトに対応するためには基本情報を基に自分で何とかしないとダメです。

水滴表現に関しては2つのパートからなります

• 垂れる水滴のシミュレーション（だいたいは水滴群を表現するグレースケール画像作るのが目標
  • CPU実装
  • GPU実装
• 描画（水滴っぽい見た目にする

水滴シミュレーションCPU版

Build software better, together

GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

github.com

Rain & Water Effect Experiments | Codrops

Today we'd like to share some WebGL experiments with you. The idea is to create a very realistic looking rain effect and

tympanus.net

解説あり

雨の日のカメラを作る - しゅみぷろ

はじめに カメラのレンズに雨が付着した感を出してみました。 ささっと作ったのですが、ちょっといい感じになったので自分で驚いてます。 雨粒が付着した部分は背景の映り込みが歪むようになっています。 Unity Standerd Assetに含まれるガラスシェーダーを使いまわしたので、10分くらいで実装することが出来ました。...

esprog.hatenablog.com

Breakdown: Animated Raindrop Material in UE4

Harry “deBug” Emelianov kindly prepared a step-by-step breakdown of his animated Raindrop opaque and transparent materials made in UE4.

80.lv

最も軽量、flowmap使ったテクニック。ue4だけどノードベースなので簡単に移植できます。

VR Conservatory Part 1: Rainy Glass Shader – Toadstorm Nerdblog

www.toadstorm.com

最も軽量2、同じくflowmap。unity amplify。

水滴シミュレーションGPU版

Shadertoy

Build shaders, share them, and learn from the best community.

www.shadertoy.com

オリジナル版をUnityに移植したもの。これは全画面エフェクトではないですね。ソースコードの公開は停止されてます。

https://github.com/ya7gisa0/Unity-Raindrops/blob/master/Raindrop/Assets/Raindrop.shader

github.com

こちらに全画面エフェクト版が公開されてます。

http://hojogames.blog.fc2.com/blog-entry-313.html

hojogames.blog.fc2.com

Unity Compute Shader実装です

もしかしたら一番優しい？　Amplify Shaderですが、ShaderGraphでも実現できるだろうと言ってますね。

particle systemで水滴等のシミュレーションを行い、結果をRenderTextureに描きこんでいます。得られたグレースケールRenderTexutreuをAmplify Shaderで箱やキューブ用の水滴テクスチャとしていい感じにしています。

描画

Unity シェーダーチュートリアル　屈折表現

ノーマルマップを使用した屈折表現の作り方

tsumikiseisaku.com

とても丁寧な解説です。

まとめ

水滴系は毎フレームグレースケール画像相当のものを作成するところが重すぎるのでGPU実装をする傾向にあります。