ShaderToy上では、背景画像に雨粒エフェクトを加えるシェーダの実例があります。例えば Élie Michel 氏の「Rain drops on screen」というShaderToyデモが有名ですgodotshaders.com。このシェーダでは iChannel0 に入力した画像テクスチャ（背景）を使用し、雨滴が落ちる効果をオーバーレイしています。雨滴部分では背景テクスチャ座標をオフセットして屈折を表現しており、雨粒の位置ではぼやけた背景が上下逆に映るようなリアルな表現になりますgodotshaders.comgodotshaders.com。ShaderToyのページ上でフラグメントシェーダのGLSLコードも公開されており、実際に動作するデモをブラウザ上で確認できます（Creative Commons BY-NC-SAライセンス）godotshaders.com。なお、同様の雨エフェクトとして BigWings 氏の「Heartfelt」github.comといった高度なShaderToy作品も存在します（こちらはテクスチャを使わず完全にプロシージャルに背景と雨を生成する例ですが、コードは公開されています）。
The Book of Shaders Editor における雨エフェクト例
The Book of Shaders Editor（GLSLエディタ環境）でも、画像上に雨を重ねるシェーダを動作させることが可能です。公式に雨専用のサンプルが提供されているわけではありませんが、既存のGLSLコードをコピーして実行できます。例えば、前述のShaderToy用シェーダを少し修正し、u_tex0 として背景画像のサンプラーを定義すれば、同様の効果を得られます。また参考になるコードとして、Gene Kogan氏のProcessing向けシェーダ例集に含まれる「rain.glsl」がありますgithub.com（Processing用ですがGLSLフラグメントシェーダのコードが掲載されており、背景映像に雨のゆがみを与えるフィルタになっています）。このようなコードをBook of Shaders Editorに導入し、uniform sampler2Dで画像を読み込んでUV座標を歪ませることで、背景画像上に雨滴が垂れるエフェクトを表示できます。GLSLコード自体は公開されているため、エディタ上で編集・実行しながら確認できます。
Three.js を用いた雨エフェクト重ね合わせ
Three.js環境でも、シェーダーマテリアルを使って画像に雨エフェクトを重ねることが可能です。その実例の一つが NordicBeaver 氏によるデモ「rain-shader」ですdev.to。このデモでは、Three.jsで平面にテクスチャ（背景画像）を貼り、その上にGLSLフラグメントシェーダで雨滴によるUV歪みを加えています。雨粒は一定間隔でランダムに生成され、各雨粒の位置で背景テクスチャのUV座標をずらすことで、水滴を通したような背景像のゆがみを表現していますdev.todev.to。ライブデモが公開されており（リンク先で実際に雨滴が垂れるアニメーションを確認できます）、GitHub上で**GLSLコード（fragment shader）**も閲覧可能ですdev.todev.to。コード中には詳しいコメントも付されており、Three.jsでの実装方法（u_textureに背景画像、u_timeで時間経過を渡し、gl_FragColor計算時にUVを雨滴分だけオフセットしてtexture2Dサンプリングする処理など）が示されています。
p5.js（WEBGLモード）での雨エフェクト重ね合わせ
p5.js のWEBGLモードでも、画像や映像に雨のシェーダ効果を重ねた作品例があります。例えば、p5.js公式エディタ上の**「Rainy window」というスケッチ（作者: knagai, 2019年）では、背景となる映像の上に窓ガラスを伝う雨滴の表現を加えていますeditor.p5js.orghimco.jp。この作品ではビデオを背景テクスチャとしてキャンバスに描画しつつ、WEBGLシェーダで水滴による歪み効果と画面の曇りを実装しており、雨の日に窓越しに外を見るような演出がなされています（作品内ではビデオ音量の調整等も行われていますhimco.jp）。また、chooblarin氏による「Camera Rainy Window Effect」editor.p5js.orgというスケッチでは、カメラ映像を背景にリアルタイムで雨粒エフェクトを重ねています。こちらはユーザーのカメラ入力映像に対し、水滴が垂れる表現とそれによる背景像の逆転・拡大（屈折）をシェーダで実現したデモです。いずれの例でもGLSLフラグメントシェーダのコードは公開されており、p5.jsエディタやOpenProcessing上で実行可能です。コード中でshader()を用いてWEBGLモードのシェーダを適用し、uniformにテクスチャや時間を渡して雨のアニメーション**を描画しています。これらのデモページを実際に開いてみることで、静止画・動画と雨エフェクトの組み合わせを確認でき、GLSLコードも参照できます。
参考資料: ShaderToyの雨エフェクトgodotshaders.comgodotshaders.com、Codrops雨滴シェーダの概要webgl.souhonzan.org、Three.js雨シェーダのコード抜粋dev.to、p5.js雨窓効果スケッチ一覧editor.p5js.orgなど。
https://geni.us/o5KO1Qg
