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

Shader

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

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

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

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

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

Build software better, together
GitHub is where people build software. More than 65 million people use GitHub to discover, fork, and contribute to over 200 million projects.
Rain & Water Effect Experiments | Codrops
Some experimental rain and water drop effects made with WebGL and shown in different demo scenarios.

解説あり

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

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

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

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

ya7gisa0/Unity-Raindrops
raindrops shader. Contribute to ya7gisa0/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実装をする傾向にあります。