Creating a Waterfall Material

This is a Tutorial to create a Waterfall material for use on a brush in hammer. It will scroll downward and refract the image behind it.

You can look at the result of the material at the bottom of this page, and download a sample.

The bump map

A waterfall requires a Normalmap. This tutorial will teach you how to create the said normalmap, then scroll it on it's surface to give the illusion of moving, refracting water.
For this tutorial you can use an image editing program of your choice, however it is best to use the The_Gimp (free and open source) or Photoshop (Costly) since instructions are given here.

The 'solid noise' image or "base"

The 'Normalmap' image

For Photoshop

1. Open photoshop, and create a document with:
2. With a maximum size of 1024x1024; this has to be a power of 2 and it's best to be square.
   • Resolution of 200. The default of 72 may make the image lower quality.
   • Background Contents set to "Background Color".
3. We must now create a Solid Noise effect Filter → Render → Clouds.
4. Then to get the "falling" effect that you see to the right:
   • Filter → Render → Fibers. Then change the options to how you see fit.
5. Save your file as TGA, or PNG for the best quality.

For Gimp

1. Make a new Image with a maximum size of 1024x1024. This has to be a power of 2 (as with all VaLve texture formats), but don't make it too big since it will add to your file size.
2. We must now create a Solid Noise effect Filters → Render → Clouds → Solid noise. Set:
   • x to 16.0(the highest possible)
   • y to between 1.0 and 3.0
   • Detail to 15(highest possible)
   • Finally, you must check the Tileable box to make it seamless.
3. Save your file as TGA, or PNG for the best quality.

Continuing from ether...

Note:This greyscale image you made will be refered to as the "base image" from now on.

1. Import this file into VTFEdit. Keep an extra copy of the base image you just used, since we will need it later.
2. When the dialog comes up, select these options:
   • Normal Format and Alpha Format → DXT5.
   • Texture Type → Animated Texture.
   • Resize → Un-check or remove the check in the box. Only needed if it isn't square or power of 2.
3. Check the texture config dialogue's Generate Normal map box and set:
   • Kernel Filter to 4 Sample
   • Height Source to Average RGB
   • Scale to 9.0
4. In the "Advanced" tab change the "DXT Compression" to High.
5. Save this bump map in a folder like "nature/" in your mod materials folder or game materials folder and give it a name like "waterfall_n.vtf".

Note:Think of a good base name now and name all the files the same. Like: "waterfall.vtf" and the others (later on) "waterfall.vmt", "waterfall_n.vtf".

The Material

Note:If you have problems, disable all flags if there are problems later on. Open the "normal map" then go to the "image" tab and then uncheck any flags you can.

The basic Material

At first you have to create a material file(vmt) and name it something like waterfall.vmt.

Note:As noted above, it needs to have the same name as the other files.

In the material file you should use the Refract shader:

Refract
{
}

Note:Since we are using "refract" not "lightmappedgeneric" we don't need a $basetexture for this vmt file (or shader).

That is now the base of our Material. Now we add the Normalmap with $normalmap and the path to it like "nature/waterfall_n".

For the right refraction amount we add $refractamount with a value between 0 and 1 like 0.08.

Refract
{
	$normalmap nature/waterfall_n
 	$refractamount .08
}

See Refract for more commands you'll want to use.

Scroll animation

When you use your material in a map you should see that the refraction looks frozen, so you must add a "Scrolling" effect.

We can do this with an animated texture, or for the easier way we can add the TextureScroll material proxy:

Proxies
{
	TextureScroll
	{
		texturescrollvar $bumpTransform
		texturescrollrate 1.3
		texturescrollangle 270.00
	}
}

So now the whole vmt should look like this:

Note:Check the file slashes! It has to be the one in web addresses "/".

Refract
{
	$normalmap nature/waterfall_n
	$refractamount .08
	Proxies
	{
		TextureScroll
		{
			texturescrollvar $bumpTransform
			texturescrollrate 1.3
			texturescrollangle 270.00
		}
	}
}

Adding an Optional Refract Mask

Refracting masks go a long way for water based effects, often they can help to give depth to a refracting effect. In water's case, we can use it to help simulate a multitude of effects.

At the beginning of the tutorial you were guided to create a noise based image. That image can help serve as a refracting mask for the watefall effect. As previously you'll want to grab that image, load it up in a program capable of saving to the vtf format and saving it out. Refracting masks require an alpha channel. This tutorial will not go over creating the said alpha channel however.

After you've created the image's alpha channel, and saved it off to a DXT5 format, throw it into your materials directory and add:

"$refracttinttexture" "particle\liquids\waterflow_mask_corner"

Replacing the path to where your refracting mask is located.

$refracttint "[1.5 1.5 1.5]"

Refract tint can help control the opacity of the refracting mask. In this case it can help to make the water darker, or lighter, even help illuminate the effect itself more in areas where this might become desirable.

Final Product

Download a sample of the finished texture. http://s3g.brainnerd.com/forum/index.php/topic,142.0.html
You can also download a sample map that uses the textures from the same site.

Waterfall texture sample.

Another waterfall texture sample.