Click or drag to resize
DigitalRuneCloud 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:

Overview

DigitalRune Graphics supports procedural cloud layers. Cloud quads provide a much simpler technique for cloud rendering:

  • An artist creates a cloud texture.
  • This texture is applied to transparent quads/billboards in the sky.
  • A custom shader fakes cloud lighting.

The result looks like this:

Cloud-Quad-01
Cloud texture

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.

Cloud-Quad-Texture
Cloud-Quad-Texture
Rendering quads

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.

Cloud-Quad-02
Screenshot showing cloud quads

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.

Cloud shader and lighting

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):

Cloud-Quad-03
Cloud-Quad-04

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).

Advantages

This technique is not as sophisticated as the built-in procedural cloud layer rendering, but it has some advantages:

  • It is simple.
  • No special game engine render code needed.
  • The artist has absolute control over the shape of the clouds. She can create textures for different cloud types or use pictures of real clouds.
  • The cloud meshes can be positioned randomly or manually by the level designer.

For more details, please check out the sample source code.