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

Shader

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

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

水滴表現に関しては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.
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

解説あり

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.

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

VR Conservatory Part 1: Rainy Glass Shader – Toadstorm Nerdblog

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

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

Making a rainy window in Unity – Part 1
たぶん一番丁寧、frag shaderでオブジェクト版、全画面版両方解説してます。シェーダー芸ですね

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

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

Unity-Raindrops/Raindrop/Assets/Raindrop.shader at master · yumayanagisawa/Unity-Raindrops
raindrops shader. Contribute to yumayanagisawa/Unity-Raindrops development by creating an account on GitHub.

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

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

Unity Compute Shader実装です

Unity: Window Rain Drop Effect: Amplify Shader Tutorial

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

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

描画

とても丁寧な解説です。

まとめ

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