Flying through clouds

Questions
1

I wanted to create an effect like this:
https://mrdoob.com/lab/javascript/webgl/clouds/

How to get started with this - do I need to create the clouds in Blender? If not then which other method is the best approach?

Basically using the mouse to move the camera right?

2

If you look into the source code, you will see that the clouds are based on an image.

var texture = THREE.ImageUtils.loadTexture( 'cloud10.png', null, animate )

There are some more techniques. With shader, filter, gradient … something more advanced.

Maybe you’ll have a look at some examples from the
Collection of examples from discourse.threejs.org ?

:slightly_smiling_face:

1 Like
3

Thanks!

Sorry, I noticed after that I can use a cloud.png like img. Isn’t that going to cause a lot of stress on the browser? How to make in a less browser demanding way?

4

Using billboards clearly isn’t expensive, using volumetric clouds though (raymarched) can be very expensive without a lot optimizations. Raymarched can look most realistic especially with their dynamic lighting nature https://www.shadertoy.com/view/XtBXDw

But mrdoobs example looks excellent and realistic too, A good texture and smooth blending can be enough already, you just might notice the billboards when rotating the camera.

1 Like
5

I guess you need that：
https://www.babylonjs-playground.com/#EWME8L#12

1 Like