# How to simulate cloud shadows on the ground (no actual clouds needed) **URL:** \ **Category:** Questions\ **Tags:** clouds, shadow\ **Created:** [November 16, 2024, 2:27am UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798 "2024-11-16T02:27:05Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![TooCalm](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/toocalm/32/3301_2.png) [@TooCalm](https://forum.babylonjs.com/u/TooCalm)\ **Post date:** [November 16, 2024, 2:27am UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/1 "2024-11-16T02:27:05Z")
Hey guys, I want to create shadows from clouds on the ground. I don’t need actual clouds I plan to create some texture above ground(and above camera but below light, camera is looking to the ground so it will not see texture) This texture will be with alpha channel and directional light with this texture will create shadows on the ground question is how to create such texture. Is there easy way? Or may be even easier solution? I found that babylon can create clouds by CloudProceduralTexture > **[Babylon.js Playground](https://playground.babylonjs.com/#NQDNM%2341)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes the only problem that only blue part should give shadows. at the moment all texture will generate shadows(just a square, no alpha in texture). and additional problem that it should move to some direction Thanks for help ---
**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\ **Post date:** [November 16, 2024, 10:35am UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/2 "2024-11-16T10:35:13Z")
I believe you may use projectionTexture - [Babylon.js docs](https://doc.babylonjs.com/features/featuresDeepDive/lights/lights_introduction/#projection-texture) - which is designed for this purpose. Example - [Babylon.js Playground](https://playground.babylonjs.com/#CQNGRK) > [@TooCalm](#): > > question is how to create such texture. Is there easy way? Or may be even easier solution? The easiest way to get such a texture is to google it. Another way is to create it in tools like Photoshop. You may also search for some ready [2d cloud generating algorithms](https://github.com/dzungpng/cloud-texture-generator), or create your own shader like here - [2D fog overlay - Godot Shaders](https://godotshaders.com/shader/2d-fog-overlay-2/) But actually all you need at the end is just one image with alpha channel. > [@TooCalm](#): > > additional problem that it should move to some direction You may slowly change coordinates of projectionTexture to create such illusion. ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [November 16, 2024, 11:29am UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/3 "2024-11-16T11:29:06Z")
Interesting question. I have been fiddling an playing around this procedural cloud texture I had no faen clue it existed. Obviously, @labris solution is the one I would have used. Eventually, using NME to create a texture that can be channeled to models as well (since having the shadow only on the ground and not on models feels a bit odd, doesn’t it? 😁 Nontheless, given BJS’s versatility, I felt compelled to try hack my way in and present something using this cloud procedural texture (for fun only, it’s not even a seamless texture so - honestly - I have no clue who would actually use this texture - must be an old one, before NME 😅 😂) Still, managed to do that (not recommended, no need to say… for anyone that would like to go back to BJS 3.1 🤣): > **[Babylon.js Playground](https://playground.babylonjs.com/#UU7RQ%234220)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes ---
**Author:** ![TooCalm](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/toocalm/32/3301_2.png) [@TooCalm](https://forum.babylonjs.com/u/TooCalm)\ **Post date:** [November 16, 2024, 11:38am UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/4 "2024-11-16T11:38:38Z")
it will be perfect if someone provide node material for such texture. it’s not clear from source code how to create it. if i had such node material i could update it for my needs ---
**Author:** ![Joe\_Kerr](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joe_kerr/32/39017_2.png) [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)\ **Post date:** [November 16, 2024, 11:52am UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/5 "2024-11-16T11:52:06Z")
Come to think of it: you can also use (hidden) cloud meshes and Babylon will do the shadow rendering for you. ---
**Author:** ![TooCalm](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/toocalm/32/3301_2.png) [@TooCalm](https://forum.babylonjs.com/u/TooCalm)\ **Post date:** [November 16, 2024, 11:58am UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/6 "2024-11-16T11:58:24Z")
clouds should be procedural because they are moving and new clouds are appearing constantly ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [November 16, 2024, 12:09pm UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/7 "2024-11-16T12:09:37Z")
Honestly, I don’t know about this. Doesn’t feel optimal to me knowing the performance of real-time shadowing through light and meshes. And you can also not handle the alpha properly, not to mention the geometry of a cloud. I wouldn’t want to go down this road. ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [November 16, 2024, 12:14pm UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/8 "2024-11-16T12:14:03Z")
> [@TooCalm](#): > > it will be perfect if someone provide node material for such texture. Agreed. I’m also not very good with NME, I have to admit 🤭 Else, I would have done it because it shouldn’t be all too complex (I mean for the logic). It’s basically creating a voronoi and noise and make it cube and seamless and then channel it with a few options. Sound to me like a base that would be great to have as a template… If we’re lucky, may be @PatrickRyan will agree and will want to tackle this for us, will you? 🤭 😁 ---
**Author:** ![TooCalm](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/toocalm/32/3301_2.png) [@TooCalm](https://forum.babylonjs.com/u/TooCalm)\ **Post date:** [November 16, 2024, 12:15pm UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/9 "2024-11-16T12:15:16Z")
i want to create moving procedural texture which will have 2d clouds on it. plane with this texture will be paralleled ground above ground. light will be above this plane and light will generate shadows on the ground based on the alpha of texture ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [November 16, 2024, 12:22pm UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/10 "2024-11-16T12:22:43Z")
Yes, I think we got it. Sounds legit and something that’s actually kind of ‘basic’ to use. Don’t know why this doesn’t seem to have been asked so far (probably because at this level, people would do it themselves). Nontheless, we do have sky material and other ‘helpers’ to quickly create an env… I think it would be a nice adding (my opinion only). Unless others will give you the ‘hands-on’ solution during the weekend 😅… I’d suggest you wait until monday and the reply of our guru 😀 , chief-master creative director, patrickRyan 😁… If you’re lucky, he might do part of the work for you… else, his insight and analyses to find the best approach and method is always something that’s worth considering in your project. Meanwhile, have a great weekend 🕶 ---
**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\ **Post date:** [November 16, 2024, 12:59pm UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/11 "2024-11-16T12:59:28Z")
Here is a good article - [How to Create Procedural Clouds Using Three.js Sprites | Codrops](https://tympanus.net/codrops/2020/01/28/how-to-create-procedural-clouds-using-three-js-sprites/) While there is no need in sprites in your case there is quite good explanation of shader stuff. ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [November 16, 2024, 1:04pm UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/12 "2024-11-16T13:04:19Z")
Nice article. It’s just sad it has all these broken links (or is it just me?) ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [November 16, 2024, 1:10pm UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/13 "2024-11-16T13:10:24Z")
For fun only 🧒, I quickly edited my attempt above, making the shadow more visible. > **[Babylon.js Playground](https://playground.babylonjs.com/#UU7RQ%234221)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes Still not the way to go (already since the procedural cloud texture is not seamless) but I find it still funny how you can twist and tweak things around in this framework using a combination of old-school methods and the versatility of the framework 😃 ---
**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\ **Post date:** [November 16, 2024, 1:56pm UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/14 "2024-11-16T13:56:13Z")
One also may use BABYLON.CloudProceduralTexture, adding some alpha to it Example - [https://playground.babylonjs.com/#NQDNM#42](https://playground.babylonjs.com/#NQDNM#42) ---
**Author:** ![TooCalm](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/toocalm/32/3301_2.png) [@TooCalm](https://forum.babylonjs.com/u/TooCalm)\ **Post date:** [November 17, 2024, 10:41pm UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/15 "2024-11-17T22:41:12Z")
I found good video with actual formulas for clouds. but I faced with a problem that i can’t reproduce second step which is on 13 min [![](https://img.youtube.com/vi/hwa6XRXd1xQ/maxresdefault.jpg "Making Clouds in a Shader") ](https://www.youtube.com/watch?v=hwa6XRXd1xQ) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/0/8063b414c71f2b511f6e1e37dc26533fa892eba8.jpeg) this is what i’ve got so far. shader looks as on first step but should be like on picture above > **[Babylon.js Node Material Editor](https://nme.babylonjs.com/#T7GGFS)** > > Babylon.js Node material editor - shader-based materials editor for Babylon.js could you please check? Thanks ---
**Author:** ![TooCalm](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/toocalm/32/3301_2.png) [@TooCalm](https://forum.babylonjs.com/u/TooCalm)\ **Post date:** [November 18, 2024, 9:12am UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/16 "2024-11-18T09:12:13Z")
found where is a problem and was able tor ecreate clouds/ this is draft version of shader > **[Babylon.js Node Material Editor](https://nme.babylonjs.com/#T7GGFS%231)** > > Babylon.js Node material editor - shader-based materials editor for Babylon.js ---
**Author:** ![PatrickRyan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrickryan/32/3417_2.png) [@PatrickRyan](https://forum.babylonjs.com/u/PatrickRyan)\ **Post date:** [November 18, 2024, 6:44pm UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/17 "2024-11-18T18:44:27Z")
@TooCalm, the approach I would take would have been similar… multiple noise textures that have their UVs animated in both offset and scale at different speeds and vectors. I would have likely baked one texture with 4 masks, one per channel, and used them to multiply or add against one another so that you have an organic shape that changes over time. It would be sampling the same texture four times in the shader, but channel packing saves on download and size in memory when loading four images, so it’s a tradeoff. The reason that I would bake it ahead of time is that texturing applications like Substance Designer can utilize several costly processes that can’t be run in real time to make realistic textures, and you have a lot of control to create cloud masses that feel right. This is the planet that I made for the Space Pirates demo for the Babylon.js 5.0 release. This entire texture set is procedurally generated so all land masses, colors, clouds, polar caps, etc. can be regenerated just by changing a few parameters and a new texture set can be saved out. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/7/370b29be338f5cdee49e000f43451218158cc91c.jpeg) Trying to generate this in real time would be possible if you do it as a texture generation step at load, but it will take time. Trying to do this in shader at 60fps is unrealistic. For example, generating one iteration of a cloud noise in Designer in that graph is taking nearly 18ms: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/5/95a89ed84b131b51460c5a0aa76477e47f92733e.png) I have nearly a dozen of these nodes in my graph and that’s just generating the noise, nothing about modifying, combining, warping or any other operation I do to them once they are generated. This leaves us with a few options. If you want to generate the noise procedurally and then do the combination of multiple noises at runtime so that you always have different masks to work with, I would build them as [procedural textures using node material](https://doc.babylonjs.com/features/featuresDeepDive/materials/node_material/NMEProceduralTexture/). This way you have control over the way the noise is built, but you only generate it once. Then you can pass this texture to your shader that is combining the textures and animating them. This way you are only generating the noises at launch of the experience and not needing to create the noise every frame. I would only try to generate the noise every frame if I need the noise pattern to change in real time. In this sense, it’s a matter of understanding the diminishing returns. If you are using dynamic noise regenerated per frame, how visible are your cloud shadows? Are they subtle enough that your users won’t notice the changing in the mask shape? If you put compute resources per frame to generating these shadows, what do you need to trade for it? What devices do you expect to hit your experience… only desktop machines, or will you have mobile or low-end devices as well? Every cost will have an impact on your frame rate and not all devices will be equal in terms of their frame rate due to graphics card (or lack thereof). If your experience is centering around the clouds, I can see allocating more resources to them. However, if you have an entire environment of assets to look at, a simpler approach to the clouds may be enough to make your scene shine while not taking too many resources. ---
**Author:** ![TooCalm](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/toocalm/32/3301_2.png) [@TooCalm](https://forum.babylonjs.com/u/TooCalm)\ **Post date:** [November 19, 2024, 4:46am UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/18 "2024-11-19T04:46:10Z")
Hey @PatrickRyan thanks very much for you answer, i want to achieve some thing like this (it’s not my game) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/b/3b798f31ac98819e1797aaeb10b1d3f837a2e200.jpeg) My game is a strategy game with camera from above looking at ground. i just want to add some dynamic on the map and think that clouds shadows is a perfect addition. i expect players will play mostly on PC. Anyway players will have possibility to remove shadows I faced with new problem that my shader can’t cast shadows. I found that i must use shadowDepthWrapper but it still doesn’t work. Could you please check? @Evgeni_Popov Maybe you can help? I saw you answered questions based on shadows and shaders I found such thread [Transparent shadows? - #2 by Evgeni\_Popov](https://forum.babylonjs.com/t/transparent-shadows/25844/2) where you did some specific changes to shader but it was long ago and maybe there is some changes in this area already? also you used some custom block which i don’t know where i can get it [https://playground.babylonjs.com/#ILEAN1#1](https://playground.babylonjs.com/#ILEAN1#1) Thank you very much for help ---
**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:** [November 19, 2024, 4:38pm UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/19 "2024-11-19T16:38:34Z")
You will have to enable `transparencyShadow` to have transparent materials generate shadows, and `enableSoftTransparentShadow` for better shadows. With only `transparencyShadow=true`: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/e/7e3e77820dc7a4ee939f6b6cb9bd470af4f525bd.png) With both `transparencyShadow=true` and `enableSoftTransparentShadow=true`: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/7/d7319e4c57b0989afc6ee322f872fb2ab0f4ca2d.png) Note that for `enableSoftTransparentShadow=true` to work with a node material, you’ll need to tell the system which shader variable contains the alpha value. As it happens, in both your node materials, `xyzw` (which is the last `VectorMerger` block in your graph) is the correct value to use. So use `xyzw.a` for alpha (see lines 56 and 72): > **[Babylon.js Playground](https://playground.babylonjs.com/#ILEAN1%234)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes ---
**Author:** ![TooCalm](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/toocalm/32/3301_2.png) [@TooCalm](https://forum.babylonjs.com/u/TooCalm)\ **Post date:** [November 19, 2024, 4:55pm UTC](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798/20 "2024-11-19T16:55:45Z")
@Evgeni_Popov Thank you very much for help! [Next page](https://forum.babylonjs.com/t/how-to-simulate-cloud-shadows-on-the-ground-no-actual-clouds-needed/54798.md?page=2)