Creating a Waterfall Material: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
mNo edit summary
(great job - I've cleaned it up and linked to existing tutorials in a few places instead of reiterating stuff)
Line 1: Line 1:
{{toc-left}}
This is a Tutorial to create a Waterfall material. It will scroll downward and refract the image behind it, and optionally reflect.


This is a Tutorial to create a Waterfallmaterial.
== 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]] with a normalmap plug-in for this Tutorial.


== The Normalmap ==
#Make a new Image with a maximum size of 1024x1024, I used a size of 512x512 pixels.
For a waterfall you need a Normalmap which Refracts the light so that the things behind it gets distorted.<br>
#[[Image:Solid_noise(15%2C16%2C1_2).png|thumb|The 'solid noise' image]] We create now a solid Noise so you go to ''Filters → Render → Clouds → Solid noise''. Set:
I used [[The_GIMP]] with a normalmap plug-in for this Tutorial.<br>
#* ''x'' to ''16.0''(the highest possible)
Make a new Image with a maximum size of 1024x1024, I used a size of 512x512 pixels.
#* ''y'' to between ''1.0'' ''and 3.0''
We create now a solid Noise so you go to ''Filters → Render → Clouds → Solid noise''<br>
#* ''Detail'' to ''15''(highest possible)
you have to set the ''x'' value to ''16.0''(the highest possible) the ''y'' value between ''1.0'' ''and 3.0''<br>
#* Finally, you must check the ''Tileable'' box to make it seamless.
the ''Detail'' to ''15''(highest possible)  
#Save your file as TGA and open it with [[VTFEdit]].
and you must check the ''Tileable'' box to make it seamless.<br>
# Check the texture config dialogue's ''Generate Normal map'' box and set:
Now it should look similar to Pic1.<br>
#* ''Filter'' to ''4 Sample''
[[Image:Solid_noise(15%2C16%2C1_2).png|thumb|Pic1]]
#* ''Height Source'' to ''Average RGB''
Save your file as TGA and open it with [[VTFEdit]].<br>
#* ''Scale'' to ''9.0''
A dialog will open like in Pic2.<br>
#* ''Normal Format'' and ''Alpha Format'' to ''RGBA8888''.
You have to check the ''Generate Normal map'' box and set the ''Filter'' to ''4 Sample'',<br>
#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 ''Height Source'' to ''Average RGB'' and the ''Scale'' to ''9.0'' like in the Pic2.
You can set ''Normal Format'' and ''Alpha Format'' to ''RGBA8888''.
[[Image:Vtfe_.png|thumb|Pic2]]
 
After you converted it to a Normalmap it should look like Pic3.<br>
Save the Normalmap now in a folder like "nature/" in your mod materials folder or game materials folder and give it a name like "''waterfall_n.vtf''".
[[Image:Solid_noise_n(15%2C16%2C1_2).png|thumb|Pic3]]


== The Material ==
== The Material ==
=== The basic Material ===
=== The basic Material ===
At first you have create a materialfile(vmt) and name it waterfall.vmt or similar.
At first you have create a materialfile(vmt) and name it waterfall.vmt or similar.
In the materialfile you should use the '''LightmappedReflective''' shader:
In the materialfile you should use the '''[[LightmappedReflective]]''' shader:


  '''"LightmappedReflective"'''
  '''LightmappedReflective'''
  {
  {
  }
  }
<br>
<br>
So we don't need a '''$basetexture''' but we need a '''$RefractTexture''' and optionaly a '''$ReflectTexture'''.<br>
So we don't need a '''$basetexture''' but we need a '''$RefractTexture''' and optionaly a '''$ReflectTexture'''.
The attribute for the '''$RefractTexture''' parameter is ''_rt_WaterRefraction'' and for '''$ReflectTexture''' is it ''_rt_WaterReflection''.<br>
Now it should look like this:<br><br>


  "LightmappedReflective"
The attribute for the '''$RefractTexture''' parameter is ''_rt_WaterRefraction'' and for '''$ReflectTexture''' is it ''_rt_WaterReflection''.
 
Now it should look like this:
 
  LightmappedReflective
  {
  {
  '''"$RefractTexture" _rt_WaterRefraction'''
  '''$RefractTexture _rt_WaterRefraction'''
  }
  }
<br>
That is now the base of our Material.<br>
Now we add the Normalmap with '''$normalmap''' and the path to it like ''"nature/waterfall_n"''.<br>
For the right refraction amount we add '''$refractamount''' with a value between 0 and 1 like ''0.08''.<br>
Now your vmt should look like this:<br>


  "LightmappedReflective"
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''.
 
  LightmappedReflective
  {
  {
  "$RefractTexture" _rt_WaterRefraction
  $RefractTexture _rt_WaterRefraction
  '''"$normalmap" "nature/waterfall_n"'''
  '''$normalmap nature/waterfall_n'''
   '''"$refractamount" .08'''
   '''$refractamount .08'''
  }
  }


==== $Surfaceprop ====
See [[Water (shader)]] for more commands you'll want to use.
You should add '''"$surfaceprop" "Water"''' for correct effects and physics.


=== Scroll animation ===
=== 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.<br>
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 the easier way we add "Proxies" like this<br>
 
  "Proxies"
We can do this with an animated texture, or for the easier way we can add the [[TextureScroll]] [[material proxy]]:
 
  Proxies
  {
  {
  "TextureScroll"
  [[TextureScroll]]
  {
  {
'''texturescrollvar $bumpTransform'''
'''texturescrollrate 1.3'''
'''texturescrollangle 270.00'''
  }
  }
  }
  }
<br>
 
For the '''TextureScroll''' Proxy we need '''"texturescrollvar"''', '''"texturescrollrate"''' and '''"texturescrollangle"'''.<br>
 
With '''"texturescrollvar"''' we specify the target like we need ''"$bumpTransform"''. <br>
With '''"texturescrollrate"''' we specify the scrolling speed you have to test yourself which value could be the best, I used ''1.3''.<br>
With '''"texturescrollangle"''' we specify the moving direction in degrees we use ''270'' degrees for it, for a down flowing.<br>
So now the whole vmt should look like this
So now the whole vmt should look like this


  "LightmappedReflective"
  LightmappedReflective
  {
  {
  "$RefractTexture" _rt_WaterRefraction
  $RefractTexture _rt_WaterRefraction
  "$normalmap" "nature/waterfall_n"
  $normalmap nature/waterfall_n
  "$refractamount" .08
  $refractamount .08
  "Proxies"
  Proxies
  {
  {
  "TextureScroll"
  TextureScroll
  {
  {
  '''"texturescrollvar" "$bumpTransform"'''
  texturescrollvar $bumpTransform
  '''"texturescrollrate" 1.3'''
  texturescrollrate 1.3
  '''"texturescrollangle" 270.00'''
  texturescrollangle 270.00
  }
  }
  }
  }
Line 119: Line 115:


*embeding into a map
*embeding into a map
[[Category:Material System]]
[[Category:Tutorials]]

Revision as of 09:24, 8 August 2008

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

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 with a normalmap plug-in for this Tutorial.

  1. Make a new Image with a maximum size of 1024x1024, I used a size of 512x512 pixels.
  2. The 'solid noise' image
    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

The basic Material

At first you have create a materialfile(vmt) and name it waterfall.vmt or similar. In the materialfile you should use the LightmappedReflective shader:

LightmappedReflective
{
}


So we don't need a $basetexture but we need a $RefractTexture and optionaly a $ReflectTexture.

The attribute for the $RefractTexture parameter is _rt_WaterRefraction and for $ReflectTexture is it _rt_WaterReflection.

Now it should look like this:

LightmappedReflective
{
	$RefractTexture _rt_WaterRefraction
}

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.

LightmappedReflective
{
	$RefractTexture _rt_WaterRefraction
	$normalmap nature/waterfall_n
 	$refractamount .08
}

See Water (shader) 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

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

Optional: Reflection

When you want Reflections you must add $ReflectTexture, $reflectamount and $fresnelpower. Use for $fresnelpower a value of 5 because I think it looks the best. For $reflectamount you must find your own value because there is no "Perfect value".

"LightmappedReflective"
{
	"$RefractTexture" _rt_WaterRefraction
	"$ReflectTexture" _rt_WaterReflection
 	"$normalmap" "nature/waterfall_n"
 	"$refractamount" .08
 	"$reflectamount" .3
	"$fresnelpower" 5
 	"Proxies"
	{
		"TextureScroll"
		{
			"texturescrollvar" "$bumpTransform"
			"texturescrollrate" 1.3
			"texturescrollangle" 270.00
		}
	}
}


TODO

  • embeding into a map