Volumetric Clouds (Patreon)

I've been curious about volumetric rendering for a while. When I looked at pictures like this I couldn't figure out how light could render in an 'empty' space:

It turns out this kind of rendering doesn't use 3D models - it's all an illusion! This picture is rendered using raymarching, which is a technique that casts a ray for every pixel on the screen and uses maths to construct the shape of the scene. That's why the scene is constructed of geometric shapes like circles and rectangles.

Raymarching

Each ray travels forward until it hits something, and then reports information back about what it hit, such as:

• how far it travelled before it hit something
• the angle of the surface it hit
• if it passed through any 'illuminated space' along the way

Let's say you're standing in a very dusty room with a window on the left. You're the green icon at the bottom, and we cast a ray from you out into the room (green dotted line).

Each time the ray moves forwards, it checks two things:

• Have I hit a wall?
• Can I see the sun?

In this scenario it saw the sun 7 times, and we can then use this value to increase the brightness of the colour of the pixel on your screen. This creates the illusion that you're looking at fog or dust in the air.

Clouds

We can use this same approach to render clouds. We'll cast a ray for each pixel on the screen, and each time the ray steps forward it checks if it's inside a cloud. The more time it spends inside a cloud, the thicker the cloud is and the more opaque it should be.

I followed this tutorial to create the video for this post, and it does a much better job of explaining all this than a noob like me does. There's also a Shadertoy demo here.

From what I understand, the cloud is formed from multiple 2D layers of cloud-shaped noise:

Each time the ray steps forwards, it checks which layer is closest, and then samples a pixel from that layer. Each layer has cloud-like noise like below, where white pixels represent the thickest cloud and black pixels represent thin air.

Sometimes these layers are visible when the raymarching algorithm isn't quite right. It looks terrible when animated but I think it's pretty cool for a screenshot:

There are more failed attempts and a high-quality video available on Dropbox.

Thanks for reading and joining the Patreon, I hope you found this interesting!