Search Instagram Twitter Facebook Spotify Grid Tag Date Folder Chat Pencil

Wind Waker Waterfall or: Adventures in Shader Writing

60GBK5I
I spent the past two days trying to figure out how to implement a wind waker style waterfall in the game.

I hadn’t written a shader in quite a long time, so my shader writing skills were very rough. I’d compare it to learning to write shaders from scratch, but it wasn’t that bad. I had forgotten how to declare variables and the specific order in which parts of code need to be in for the shader, but most of the stuff came back relatively quickly.

In the future, I’d like to try to stay in shape by writing shaders on a more regular basis.

Anyway, I thought it’d be a good idea in any case to take some time to write down what I’ve learned, for when I forget later.

First, some resources:

Cg Programming / Unity Wiki – Probably the best tutorial on writing shaders for Unity. Plenty of examples that you can use to study from and tweak.

Vertex Shaders in Unity A great intro and breakdown of shaders in Unity. I think there’s some issues with terminology, specifically with the post using the term ‘vertex shaders’ incorrectly, but overall, it’s pretty good.

Also, Visual Studio and Monodevelop doesn’t do text highlight for shader code by default, which makes writing shaders unnecessarily more difficult.

There’s a Visual Studio extension called NShader which adds highlighting, but unfortunately it hasn’t been updated for a while, and doesn’t work with Visual Studio 2013.

Fortunately, someone over at the Unity forums upgraded NShader to work with Visual Studio 2013.

The instructions aren’t great though.

In the thread, someone says:

if it doesn’t work. go to the folder where it is installed.
C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\Extensions\some random numbers
now copy the downloaded files into that folder.

now go to regedit and search for
HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\12.0\FontAndColors\Cache
and delete it.

start up vs.

 

The “some random numbers” part tripped me up. Basically, in the folder ‘Extensions’, there are several folders that are each named a random collection of letters and numbers. You have to open each one to figure out which one is the NShader one. It’s pretty obvious once you do, as it’ll be a bunch of NShader files. Now, copy the downloaded files into this folder, and then do the search on regedit and delete the cache file.

Attempt #1

vertex_displacement_shader

What tripped me up was that I had forgotten how to incorporate time to control a variable.

It’s basically _Time, a float4, which is actually this: (t/20, t, t*2, t*3)

So if you want to use time, you can just write: _Time.y

Anyway, here are a bunch of shaderLab built in values.

Attempt #2

vertex_displacement_shader_napoleon-dynamite

This reminds me of Napoleon Dynamite dancing.

Attempt #3

vertex_wave
I got sine wave offset on vertex displacement working!

Transparency

jD6Dz5r

I wrote a separate shader that handles texture trasparency.

Result

The final version it was just a matter of combining the sine wave offset, transparency, and finally a scrolling texture:wind_waker_style_waterfall

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.