Waterfall tutorial

Finished result:

Playing in the Slick Entertainment game engine above


Steps:



First create a waterfall image either by using brushes in photoshop or finding an image of a waterfall from the front and manipulating it. We have to make sure the image can nicely tile vertically since we will be scrolling the texture in the shader to make it look like the water is falling down.

The image on the left is from: http://www.cuhwc.net/2007/07conference.htm and may be copyrighted, so make sure you find one you can use for your purposes.

For my own watefall, I ended up created the waterfall image from scratch by using several brushes and the eraser in photoshop.










To make the waterfall image tile vertically, we use the 'offset' filter in photoshop to see where the image would not tile (set the vertical offset to half of the image height).

We then use the 'Stamp' brush (set to about 30% transparency) to remove any obvious tiling.





We are going to use the image only for transparency of the waterfall, so you want to convert the image to black and white by using the 'Desaturate' option in photoshop. Then use the 'Brightness/Contrast' option to make sure there is enough contrast between the light and dark areas.


Now it is time to create the scene and the shader inside 3dsMax:



All we really need for the waterfall is a single plane (with planar UVs), though you can shape the plane to follow the shape of the rocks.




Inside ShaderFX we start by creating an 'Advanced Material' and set the 'Blend Mode' of the material to: Additive.

You may also want to disable 'Z-write' depending on how your game engine handles transparent objects





Now it is time to lay down a bunch of nodes:



First we lay down the waterfall 'texture map node' and make sure we set the 'AddressU' and 'AddressV' to 'WRAP' so that the image will scroll properly when we animate the UVs.

We use the 'Time' node to allow us to animate the UVs over time.
We 'multiply' the time by a 'constant node' (called 'Waterspeed') so we have control over how fast the UVs will scroll (and thus how fast the water will flow).

We then place down the 'UV Input' node and subtract the scroll amount (coming from the time node).
We only want to scroll the 'V' axis of the UV's, so the remaining nodes are used to only multiply the V-axis and then combine the old U-axis back with the newly multiplied V-axis via the 'Vector construct' node.

We wire the manipulated UVs from the 'Vector Construct' node into the 'UV Coords' socket of the waterfall 'texture map node'.



The final step is to wire everything together:

In my case, I decided to also use vertex colors on top of the waterfall image so I could make the waterfall more transparent near the bottom. This is completely optional, you could also just wire the waterfall image directly into the 'Alpha' socket of the material node.

Notice how I used the 'A' socket of the waterfall texture map node. This really depends on how you saved the image.


I stored the black and white of the waterfall in the Alpha channel, but if you saved it in RGB, then you can use the 'R' socket instead and wire that into the Alpha socket of the material.

Finally I added a blue 'color node' to the 'Single Pass' socket to the material to give the waterfall some color.