スポンサーリンク

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

Shader

2020.10.18 2019.03.13

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

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

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

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

スポンサーリンク

目次

水滴シミュレーションCPU版
水滴シミュレーションGPU版
描画
まとめ

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

Build software better, together

GitHub is where people build software. More than 56 million people use GitHub to discover, fork, and contribute to over 100 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でオブジェクト版、全画面版両方解説してます。シェーダー芸ですね

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

改変してUnityで動くようにした雨の水滴シェーダー。
Heartfelt(https://t.co/n5Zttn3nOm)というクリエイティブ・コモンズのGLSLシェーダーをUnityで動くようにした～。
水滴以外の表現を消して、Grabpassでガラスみたいな感じにした。リフレクションプローブに対応もした。#Unity #Shader pic.twitter.com/etg8D5yjPK
— noriben🌒 (@noriben327) March 11, 2019

オリジナル版を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実装をする傾向にあります。