On Fog, Clouds and Geometry

I was reading about the Threejs fog.

There are two types, linear and exponential.
In the linear you state near and far.
And in the exponential you state density.
And to both you send color.

I think there really should just be one fog.
Because in the physical world, there is only one fog.
And near and far should not be stated, they are just derivatives of the density.

One should not state how far it reaches, one states the fog density and from that, its distance can be deduced.

Also, I really think fog should have a geometry.
Fog should really be, a material.

We have an object and it can have the material fog.
Then we can place the fog somewhere in this world.
Without needing to understand, how fog works.

Then we can create foggy areas in the world.

Maybe one day we can have:
Geometry, cloud.
Material, cloud.

Then we can create clouds with the push of a button.

Which coincidentally, is also a fog… if you’re in it.

2 Likes

By using the volumetric cloud example, you can tweak the material to display objects as if surrounded by local fog and clouds. Then progressively change opacity as camera get closer, change the size of the volume too. three.js examples

Of course it may require further changes to reach your description (like a whole tool/plugin). But it’s a good start, and it’s not that expensive.

very quick test with slight modifications to display a cube inside it

1 Like

I’m curious as to how you got the clouds to be rendered in front of the cube.

Nothing fancy, the material is set to THREE.BackSide.
Just remove the line 265

https://raw.githack.com/Oxynt/cloud/main/index.html

There are 2 fog types because they are useful in different circumstances, and they have different performance impacts. Linear fog is cheaper than exp2 fog… and can be used to generate linear depth gradients for other kinds of effects besides just fog… exp2 fog is a bit closer to the behavior of irl fog, but is slightly more complex.

The ideas you proposed would make great addons to threejs and the community would probably find them useful, but imo they don’t belong in the core library, since the aim of the core library is to provide a scene graph+lighting model on top of webGL and not a whole lot more.

drei has a fairly good (and inexpensive) cloud component, here are some examples

here’s a website using it, looks near realistic to me https://twitter.com/s_lempens/status/1759648580216766766

and it can also do mist (1 minute into the video) https://twitter.com/felixkit/status/1759531985280676055

from what i’ve heard, sdf based clouds are not feasible in webgl because of cross platform/browser bugs. they’re also on the expensive side.

1 Like

I agree…I had to do just that to place it where I wanted in scene map and I also use the strategy for explosion smoke. example here I use random rotating geometry with materials to create clouds or fog effects


Three.js Examples - Loading & Animating a Mandalorian Grogu 3D Model

One thing I don’t understand is why people creating volumetric clouds don’t start with a solid object in the center. Most clouds are not transparent and have a solid center that completely blocks the sun. The center object would not necessarily be a sphere, but would be something that conforms to the standard shape of a cloud - perhaps even something that looks like a cartoon cloud. You would then add volumetric highlights to the outside of the cloud shape to make it look even more realistic. It seems that would be a massive time-saver compared to trying to create a whole cloud one water droplet at a time.

Regarding fog, it is my understanding that the way fog is currently implemented takes very little processing time.

If you are interested in creating some interesting variations of clouds, fog, smoke, fire, etc., for three.js your should check out the YouTube tutorials by SimonDev. In one tutorial, he discusses how to create “patchy” fog.

1 Like

A bit related:

Overall, unless the primary feature of your app / game / website is the clouds quality - I’d say doing even the volumetric details on sides of solids is simply not worth it, when comparing cost of raymarching vs the result. For websites / games, [using automatically generated impostors[(https://www.youtube.com/watch?v=JrBjEoX28-c) is way cheaper and, on most devices, will give effects similar or even better than volumetrics.

If you are nevertheless really really really into volumetric rendering - after going through a bunch of papers frustum-aligned volumetric rendering (also used in AC: Black Flag) approach feels like the most viable option for WebGL.

2 Likes

I agree. There are a lot of types of clouds for which volumetric clouds are not required, even with the kinds of flight simulations that I create. For high clouds - I can generally use transparent images visible only from below. I have used semi-transparent textured boxes to simulate a fog layer and sprites to create low cloud layers and also isolated small clouds.
You only need something more if you want to fly near big fluffy clouds (once you are inside, it is all white, or gray, or dark gray if you have made a big mistake). And you shouldn’t be flying near them unless you have an instrument rating. :sunglasses:
That said, there is nothing more fun that flying in and out of big puffy clouds - something about the transition from white to the open air is especially entertaining. :scream: