2D Perlin noise

Noise is a very important aspect in game programming. Noise is not the same as static. Static is a set of totally random datapoints, where each point has nothing to do with its neighboring points. An example of a 2D static map is shown on the left side of the image below.

In a noise map, the value of each point smoothly changes from point to point. So although the value in each point is different, the value of a point is probably close to the values of its neighboring points. An example of a noise map is shown on the right side of the image below.

Thus far in this 4th series, weíve already been using noise maps. The cloudmap is a nice example, together with the noisemap used for growing our forests. But thereís more you can do with noisemaps. For example, how would you generate a heightmap? Thatís right, a heightmap is nothing more than a well-smoothed noisemap. Furthermore, noisemaps can be used to define the borders of countries and such on your terrain.

Now I hope youíre convinced a 2D noise map is quite useful, letís see how we can generate one. To this end, Iíve coded a HLSL effect that is an adapted version of the Perlin Noise generation. This is how it works. You start from multiple static maps, which are easy to generate as they only contain random numbers. The resolution of the static maps has to be the same, but the level of detail increases by a factor 2 from map to map:

Now if you all add them together, you get this:

Whow thatís easy!

Iím glad you think so. Thereís one difficult point in the story: the high resolution image is based on only 5x5 values, but all pixels of the image are linear interpolation between these values. But thatís entirely no problem, as the texture interpolator on our graphics card will do this job automatically for us! Also, instead of using 6 different maps, weíre going to use the same map 6 times, with differently scaled texture coordinates.

So in our XNA code, we will start by coding a small method that generates a low-resolution static map:

Simply specify the resolution, and this method will return a square texture will completely random values stored as red color component in all its pixels.

Since we are going to render the noise map as a HLSL effect, weíll need 2 triangles covering the whole screen. 2 triangles need 6 vertices as a TrianleList, or 4 vertices as a TriangleStrip (see Series 3):

With all of the initialization stuff done, weíre ready to move over to the HLSL code! Thereís absolutely nothing fancy about the effect, the vertex shader simply needs to pass the texture coordinates to the pixel shader. So add this code to the end of our Series4Effects.fx file:

This corresponds to the 6 image above: you take the static image, and sample it 6 times at different resolutions! Since we want the perlin value to remain between 0 and 1, we need to scale the result down a bit. The first line, which has the lowest resolution, has the largest influence: 50% of the final result. The next one has 25%, then 12.5% and so on to the highest resolution. Make sure that when you sum everything up, you end with a total of exactly 100%.

If we would let this run and capture the output, we would already have a very nice noise map!! But we can do something way more fancy. Imagine you would use the resulting noise map as cloudmap, and you put it over the skydome. To make it move, you could simply move it over the skybox. Nice, but thatís not whatís going on if you take a look outside. In reality, clouds are not only moving, but they are also changing shape!

As with most things, this can also be programmed into our pixel shader. The trick is to make the images of different resolution scroll over each other at different speeds! This is what you get:

According to the current time, the images will be scrolled over each other at different speeds! This will give you a new shifted version for each new xTime value.

Obviously, this pixel shader still misses an output. Add these lines:

Output.Color = 1.0f-pow(perlin, xOvercast)*2.0f;return Output;

Since the perlin value is between 0 and 1, you can sharpen up the image by taking it to a power larger than 1. The larger the xOvercast value will be, the smaller and sharper your perlin clouds will be, but since you subtract this value from 1.0f, you get the inverse: the larger the xOvercast value, the more clouds you will have.

Letís not forget to add this xOvercast XNA-to-HLSL variable to the top of our effect:

This should be basic stuff by now. You activate the custom render target and clear it to Black. Next, you select the PerlinNoise technique we just coded and pass it the basic static map, together with the xOvercast and xTime values. Then you render the 2 triangles covering the whole render target, and you store the contents into the cloudMap texture, so itís ready for the next chapter!

Letís not forget to call this method from the top of our Draw method:

GeneratePerlinNoise(time);

If you save the cloudMap texture to file, you would get something like this:

This concludes this chapter on noise map generation. It has become quite lengthy, but I think thatís fine as it is an important topic which I did not manage to cover in my book.

The next and final chapter of this series will use the on-the-fly generated noisemap as texture for the skydome.

Our XNA code:

using System; using System.Collections.Generic; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Audio; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.GamerServices; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Input; using Microsoft.Xna.Framework.Net; using Microsoft.Xna.Framework.Storage;