Creating a Waterfall Material

From Valve Developer Community
Revision as of 11:49, 4 February 2011 by DarK St3alth (talk | contribs) (Added the error section and the notice about downloading the sample map to see the result of the the texture.)
Jump to navigation Jump to search

This is a Tutorial to create a Waterfall material. It will scroll downward and refract the image behind it.

The bump map

For a waterfall you need a Normalmap which Refracts the light so that the things behind it gets distorted. I used The_GIMP for this Tutorial.

The 'solid noise' image
The 'Normalmap' image
  1. Make a new Image with a maximum size of 1024x1024, I used a size of 512x512 pixels.
  2. We create now a solid Noise so you go to 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 and open it with VTFEdit.
  4. Check the texture config dialogue's Generate Normal map box and set:
    • Filter to 4 Sample
    • Height Source to Average RGB
    • Scale to 9.0
    • Normal Format and Alpha Format to RGBA8888.
  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".

The Material

Some Errors

If your image looks like [1] then it has the possibility of not working. If your image when compiled and shown in game has squares in it, follow the thought below.

In VTFEdit, Xuxa and DarK_St3alth found out, you need to check the image flags. It could cause your image not to work...

11:09 AM - DarK_St3alth[S3G]: if you open your base image
11:09 AM - DarK_St3alth[S3G]: are there any flags checked?
11:10 AM - Xuxa: open the vtf or the tga?
11:10 AM - DarK_St3alth[S3G]: the vtf
11:10 AM - DarK_St3alth[S3G]: in vtfedit
11:10 AM - Xuxa: no mipmap, lod, 8bit alpha
11:10 AM - Xuxa: those are the ones checked
11:10 AM - DarK_St3alth[S3G]: ah..
11:10 AM - DarK_St3alth[S3G]: I have none...


Icon-Bug.pngBug:However, it seems that it's a weird bug since when the flags were added back, it still worked...  [todo tested in ?]


11:19 AM - Xuxa: i dont get it, its not bugging again
11:19 AM - Xuxa: :/
11:19 AM - DarK_St3alth[S3G]: What!
11:19 AM - DarK_St3alth[S3G]: ><
11:22 AM - Xuxa: yeah
11:22 AM - Xuxa: even tried to delete the vtf
11:22 AM - Xuxa: and re-save
11:22 AM - DarK_St3alth[S3G]: worked...
11:22 AM - DarK_St3alth[S3G]: wow
11:22 AM - Xuxa: worked with the flags

We were unable to determine the problem, even when working from EP2 to TF2.

The basic Material

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

Side Note: Vmt files need to have the same name as the texture you created. I named all of my files the same name: "waterfall.vtf", "waterfall.vmt", "waterfall_n.vtf".


In the material file you should use the Refract shader:

Refract
{
}


Side 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

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

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.

Image of waterfall.
Waterfall texture sample.
Image of waterfall.
Another waterfall texture sample.