This is my first attempt to render volumetric clouds in a fragment shader. Initially, I started implementing the clouds of Horizon Zero Dawn, as described in “The real-time volumetric cloudscapes of Horizon Zero Dawn” by Andrew Schneider and Nathan Vos. In the end, I probably created something totally different. The clouds are rendered using the improved integration method of volumetric media, as described in “Physically Based Sky, Atmosphere and Cloud Rendering in Frostbite” by Sébastien Hillaire.
You can find (the full source of) the fragment shader here: https://www.shadertoy.com/view/MdGfzh.
The shader above combines the output of 4 different shaders (buffers in Shadertoy). This is mainly done to improve performance but also because I had to precalculate some lookup tables. The clouds are rendered in Buffer D; the landscape is rendered in Buffer C. To reduce noise, I use temporal reprojection (both for clouds and the terrain) separately.
Volumetric clouds (Buffer D)
The shape of the clouds is modeled by using two look-up textures filled with different frequencies of (Perlin -) Worley noise:
- Buffer A: The main look-up texture for the cloud shapes.
- Buffer B: A 3D (32x32x32) look-up texture with Worley Noise used to add small details to the shapes of the clouds. I have packed this 3D texture into a 2D buffer.
Because it is not possible (yet) to create buffers with a fixed size or 3D buffers, the look-up texture in Buffer A is 2D, and a slice of the volume is described in the article. Therefore, and because I didn’t have any slots left (in Buffer C) to use a cloud type/cloud coverage texture, the modeling of the cloud shapes in this shader is, in the end, mostly based on trial and error and is probably far from the code used in Horizon Zero Dawn.
Landscape (Buffer C)
To create an interesting scene and to add some scale to the clouds, I render a terrain using a simple heightmap based on the work by Íñigo Quílez on value noise and its analytical derivatives.
In fact, the height map of this shader is almost exactly the same as the heightmap that is used in Íñigo Quílez’ shader Elevated
Similar posts
If you like this post, you may also like one of my other posts:
- Augmented Reality and Shadertoy
- Abandoned base
- Tokyo – breakdown of a webgl fragment shader
- Rendering a planet with two triangles
- Human Document