# Atmospheric Scene of Rain ☔🌈 **URL:** \ **Category:** Demos and projects\ **Created:** [September 20, 2020, 10:27am UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294 "2020-09-20T10:27:26Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![HiteshSahu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hiteshsahu/32/50817_2.png) [@HiteshSahu](https://forum.babylonjs.com/u/HiteshSahu)\ **Post date:** [September 20, 2020, 10:27am UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/1 "2020-09-20T10:27:26Z")
I have used ripple and rain shader to create a scene of Rain: **[https://hiteshsahu.com/Rain](https://hiteshsahu.com/Rain)** Left-click/Tap on the screen to throw beach balls. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/70c1e007ba8adf91da84db22cb826e91ca3f7e24.jpeg) Press F to enter immersive FPS mode. In FPS mode you can feel the rain on the face while walking on the ground using W, S, A, D keys. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/da00338d9fb11e9f8434e7977de8f3b4ada3a552.jpeg) Enjoy let me know your feedback. ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [September 20, 2020, 11:05am UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/2 "2020-09-20T11:05:49Z")
Cool rain effects on the face, it reminds me of: > **[Rain Effect Experiments | Demo 1 | Codrops](https://tympanus.net/Development/RainEffect/)** This one also is cool: > **[Shadertoy](https://www.shadertoy.com/view/ltffzl)** ---
**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\ **Post date:** [September 20, 2020, 11:08am UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/3 "2020-09-20T11:08:08Z")
Hi, It’s pretty. For the rain when we are in Game mode, I have the impression that water is streaming on the camera (or on the windshield of a car). I also noticed that the frogs disappears when you get too close to it. Maybe that’s the intended effect. But otherwise it’s pretty. Beautiful little autumn scene ---
**Author:** ![HiteshSahu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hiteshsahu/32/50817_2.png) [@HiteshSahu](https://forum.babylonjs.com/u/HiteshSahu)\ **Post date:** [September 20, 2020, 2:26pm UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/4 "2020-09-20T14:26:56Z")
Wow, I thought no one will notice that 😃 . All Frogs you see there are randomly distributed instances of one Animated Frog Mesh. The Frog that doesn’t disappear when you go too close to it is the Real Frog. 🐸 It is just like Dr. Strange & Multiple Man make copies of themselves and you need to find out which one is real. ![1539301809_tumblr_pcpp35bV8F1qhjdd8o2_540](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/75e957ed70c56d4aa773956a980c7de6b073d167.gif) ![tumblr_piaxu5BqNU1wgu2dio4_500](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/e/ec16b34eac4210e63be49b2594c1c0067a7b5067.gif) Found the Real Frog: 🐸🙂 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/fd7335a1ac52d1e5a081b547b8c8b2c8fe3afa42.jpeg) ---
**Author:** ![Richard](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@Richard](https://forum.babylonjs.com/u/Richard)\ **Post date:** [September 20, 2020, 2:28pm UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/5 "2020-09-20T14:28:18Z")
I like how you always include some option to shoot objects 🙂 This didn’t load for me on firefox so I had to open it with chrome. The console logged the error “ammo” is not defined. So perhaps the ammo js library wont load on Firefox for some reason. Just thought I would mention it. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [September 21, 2020, 3:48pm UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/6 "2020-09-21T15:48:45Z")
beautiful as usual! ---
**Author:** ![HiteshSahu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hiteshsahu/32/50817_2.png) [@HiteshSahu](https://forum.babylonjs.com/u/HiteshSahu)\ **Post date:** [September 22, 2020, 1:49pm UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/7 "2020-09-22T13:49:20Z")
Many thanks🙂. That is a very useful feedback, I will fix AmmoJs issue. ---
**Author:** ![HiteshSahu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hiteshsahu/32/50817_2.png) [@HiteshSahu](https://forum.babylonjs.com/u/HiteshSahu)\ **Post date:** [September 26, 2020, 8:12am UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/8 "2020-09-26T08:12:56Z")
> [@Richard](#): > > me on firefox so I had to op Hi Richard, It worked fine on Firefox in my Windows machine. Are you using Macbook? ---
**Author:** ![Richard](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@Richard](https://forum.babylonjs.com/u/Richard)\ **Post date:** [October 10, 2020, 11:03am UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/9 "2020-10-10T11:03:32Z")
Sorry for the delay in replying. I just looked at your demo again in Firefox. I disabled my add-ons this time and it worked this time, so the issue was caused by one of my add-ons. ---
**Author:** ![gryff](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gryff/32/1855_2.png) [@gryff](https://forum.babylonjs.com/u/gryff)\ **Post date:** [October 10, 2020, 5:40pm UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/10 "2020-10-10T17:40:24Z")
@HiteshSahu : Very very nice :). I like a lot of your stuff - including the Space/Time warp! Is there a shader somewhere for the rain and raindrops, or is it your code ? Stay Safe, gryff 🙂 ---
**Author:** ![HiteshSahu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hiteshsahu/32/50817_2.png) [@HiteshSahu](https://forum.babylonjs.com/u/HiteshSahu)\ **Post date:** [October 11, 2020, 3:15pm UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/11 "2020-10-11T15:15:17Z")
Thanks @gryff. For rain shader see @evgeni_popov comment: [Shader - Shadertoy BETA](https://www.shadertoy.com/view/ltffzl). For water ripple you can use this one [Shader - Shadertoy BETA](https://www.shadertoy.com/view/ldfyzl) ---
**Author:** ![Jackson](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jackson/32/17989_2.png) [@Jackson](https://forum.babylonjs.com/u/Jackson)\ **Post date:** [August 17, 2021, 7:52am UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/12 "2021-08-17T07:52:56Z")
open source closed ? ---
**Author:** ![superTigery](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/supertigery/32/37903_2.png) [@superTigery](https://forum.babylonjs.com/u/superTigery)\ **Post date:** [October 24, 2024, 10:08am UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/13 "2024-10-24T10:08:00Z")
I’ve changed a few things so that raindrops can come out, but there’s still a problem Here is the pg：[Rain drop](https://playground.babylonjs.com/#SY7E8D#3) More help is needed @Evgeni_Popov ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [October 24, 2024, 4:22pm UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/14 "2024-10-24T16:22:49Z")
You have a CORS problem: Access to image at ‘[https://www.shadertoy.com/media/a/8de3a3924cb95bd0e95a443fff0326c869f9d4979cd1d5b6e94e2a01f5be53e9.jpg](https://www.shadertoy.com/media/a/8de3a3924cb95bd0e95a443fff0326c869f9d4979cd1d5b6e94e2a01f5be53e9.jpg)’ from origin ‘[https://playground.babylonjs.com](https://playground.babylonjs.com)’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. ---
**Author:** ![superTigery](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/supertigery/32/37903_2.png) [@superTigery](https://forum.babylonjs.com/u/superTigery)\ **Post date:** [October 25, 2024, 1:40am UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/15 "2024-10-25T01:40:26Z")
It’s not a very serious problem [new PG](https://playground.babylonjs.com/#SY7E8D#5) ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [October 25, 2024, 2:57pm UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/16 "2024-10-25T14:57:18Z")
You must use `textureLod` and not `texture2D` line 222, as in the original ShaderToy shader: > **[Babylon.js Playground](https://playground.babylonjs.com/#SY7E8D%239)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes ---
**Author:** ![superTigery](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/supertigery/32/37903_2.png) [@superTigery](https://forum.babylonjs.com/u/superTigery)\ **Post date:** [March 6, 2025, 7:11am UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/17 "2025-03-06T07:11:33Z")
I’m not particularly proficient in shaders. How can I achieve the complete effect without using texturedLod? I wrote most of the code in PBRCustomMaterial, but I can’t achieve such a great effect. Like the refraction of raindrops, the trailing effect on glass Could you help me? [this is the PG](https://playground.babylonjs.com/#PXD8KZ#9) ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [March 6, 2025, 9:47am UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/18 "2025-03-06T09:47:50Z")
From what I can see in your PG, it seems the trailing effect works, only the refraction is missing? It’s easier to see it if you set the metallic / roughness properties ([https://playground.babylonjs.com/#PXD8KZ#11](https://playground.babylonjs.com/#PXD8KZ#11)). From my understanding, the refraction effect works because it looks up into the `iChannel0` texture with an offset. If you want the same effect, you will have to use a texture too. ---
**Author:** ![HiteshSahu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hiteshsahu/32/50817_2.png) [@HiteshSahu](https://forum.babylonjs.com/u/HiteshSahu)\ **Post date:** [February 23, 2026, 9:05am UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/19 "2026-02-23T09:05:46Z")
The demo has been moved to a new location and I have added a bit of improvemnts: > **[Monsoon | Rain In Forest](https://www.hiteshsahu.com/lab/monsoon/)** > > Experience a monsoon forest with real-time rainfall rendered using GPU shaders. Walk through dense woods, feel the atmosphere of heavy rain, and explore dynamic weather effects built with Babylon.js. Btw can you find snake in this scence? Its hidinging in mud somewhere. ![Screenshot 2026-02-23 at 09.31.21](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/3/0390f787be302692ca20ebbfb8808321b53c4c7c.jpeg) ![Screenshot 2026-02-23 at 09.32.00](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/b/db5e9483100f5b2cbe49520de01d7a89eda71772.jpeg) ---
**Author:** ![bvaisman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bvaisman/32/20835_2.png) [@bvaisman](https://forum.babylonjs.com/u/bvaisman)\ **Post date:** [February 23, 2026, 9:22am UTC](https://forum.babylonjs.com/t/atmospheric-scene-of-rain/14294/20 "2026-02-23T09:22:40Z")
This scene is very cool. Could you share your code in a PG or something ?