Cloud Quads |
The CloudQuadSample (see Samples) shows how to render clouds using textured quads. This article explains how the sample was created.
This topic contains the following sections:
DigitalRune Graphics supports procedural cloud layers. Cloud quads provide a much simpler technique for cloud rendering:
The result looks like this:
First, a cloud" texture was created using Photoshop. The texture was created like this: Use "Render Clouds". Add some bright spots with a brush. Erase some parts. Blur the image a few times.
Next, a simple quad was created in Blender and exported as a FBX model. Then a new material was created. Here is the DigitalRune material (.drmat) file:
<?xml version="1.0" encoding="utf-8"?> <Material> <Pass Name="AlphaBlend" Effect="Cloud.fx" Profile="HiDef"> <Parameter Name="SampleDistance" Value="0.02" /> <Parameter Name="ScatterParameters" Value="10, 5, 0.3" /> <Parameter Name="DensityScale" Value="1" /> <Parameter Name="Alpha" Value="1" /> <Texture Name="DensityTexture" File="Cloud.png" Format="Color" /> </Pass> </Material>
This material uses the custom shader described below. All parameters in this file are effect parameters of Cloud.fx (included in the sample).
At runtime, the model is loaded and added to the scene several times using random positions, scaling and orientations.
The quads are automatically rendered together with all other alpha-blended meshes in the "AlphaBlend" render pass of the deferred lighting graphics screen – no need to change the render pipeline.
To save fill-rate and improve performance, we could trim the billboards. Since the clouds are alpha-blended meshes, we are not restricted to quads; cloud meshes can have any shape.
The shader used for these clouds is similar to the shader used for the procedural cloud layer of DigitalRune Graphics. It uses sun direction, sun light and ambient light of the sky to simulate cloud lighting.
Here are more screenshots with random cloud positions and different lighting conditions (still the same texture):
The shader tints clouds with the sun light color (white/yellow/red depending on time-of-day) in the direction of the sun. On the opposite side the clouds use more of the ambient sky color (light blue).
This technique is not as sophisticated as the built-in procedural cloud layer rendering, but it has some advantages:
For more details, please check out the sample source code.