How to simulate cloud shadows on the ground (no actual clouds needed)

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

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

I believe you may use projectionTexture - Babylon.js docs - which is designed for this purpose.
Example - Babylon.js Playground

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, or create your own shader like here - 2D fog overlay - Godot Shaders
But actually all you need at the end is just one image with alpha channel.

You may slowly change coordinates of projectionTexture to create such illusion.

2 Likes

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? :grin:

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 :sweat_smile: :joy:)

Still, managed to do that (not recommended, no need to say… for anyone that would like to go back to BJS 3.1 :rofl:):

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

Come to think of it: you can also use (hidden) cloud meshes and Babylon will do the shadow rendering for you.

clouds should be procedural because they are moving and new clouds are appearing constantly

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.

Agreed. I’m also not very good with NME, I have to admit :face_with_hand_over_mouth: 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? :face_with_hand_over_mouth: :grin:

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

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 :sweat_smile:… I’d suggest you wait until monday and the reply of our guru :grinning: , chief-master creative director, patrickRyan :grin:… 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 :sunglasses:

1 Like

Here is a good article - How to Create Procedural Clouds Using Three.js Sprites | Codrops
While there is no need in sprites in your case there is quite good explanation of shader stuff.

1 Like

Nice article. It’s just sad it has all these broken links (or is it just me?)

For fun only :child:, I quickly edited my attempt above, making the shadow more visible.

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 :smiley:

One also may use BABYLON.CloudProceduralTexture, adding some alpha to it
Example - https://playground.babylonjs.com/#NQDNM#42

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

this is what i’ve got so far. shader looks as on first step but should be like on picture above

could you please check? Thanks

found where is a problem and was able tor ecreate clouds/ this is draft version of shader

1 Like

@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.

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:

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. 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.

3 Likes

Hey @PatrickRyan thanks very much for you answer,

i want to achieve some thing like this (it’s not my game)


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 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

Thank you very much for help

1 Like

You will have to enable transparencyShadow to have transparent materials generate shadows, and enableSoftTransparentShadow for better shadows.

With only transparencyShadow=true:

With both transparencyShadow=true and enableSoftTransparentShadow=true:

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):

3 Likes

@Evgeni_Popov Thank you very much for help!