Faking Refraction

Droplet Distortion in Unity for iPad

The start of the video rendered a little screwy

Goal

My team needed an indication for when the player's boat was hit. I offered to make it look like water droplets were flowing across the screen with the typical red edges you see in a lot of games these days. I opted to go for a lean post process effect (14 pixel shader instructions).

Development

UDK Shader Tree Prototype

Things to keep in mind

1. Water refracts
2. Refraction can lead to magnification

The goal here is to grab less UV's around the droplets and then move them out of alignment slightly. This will make it appear as if the image is being magnified and refracted. The droplets shape dictates how this happens and a normal map can do a good job at indicating the weights of the UV distortion. One of the first things I did was bring the red and green channels to to go from [0,1] to [-0.5, 0.5] . This allows me to grab the proper UVs in the direction of the normals.

But how about Fresnel? The Fresnel was literally made for this sorta thing but we are in tangent space with technically no camera.  Solution? Use the blue channel of the normal map. We want to clearly see through the front parts of the droplets but get more distortion along the edges. I invert the blue channel so that flat portions are now 0 and multiply it by the RG channel. Doing this wont distort UV's that are not part of a droplet since we are multiplying by zero. As a side note this is the same as having a camera placed at (0,0,1) and using a Fresnel since the RG channels would wind up being zero when dotted.

Lastly, I have a scalar multiplication at the end to control the whole thing. Oh and you may be wondering why I have that green channel being piped and multiplied in as well. Honestly, that was just intuition and messing around. I ended up liking the result a lot better. This whole thing ends up being added to the texture coordinates of an image as distortion.

Faking Refraction in UDK

Improvements and Polish

The water droplets are pretty stagnate and becomes more evident once they start popping out more. One way to fix this would be to flip book through a set of droplet normal maps to make it look more like the water droplets are changing shape. This would effectively also add trails to the droplets.

A small splash particle effect on the screen could also help the player notice he's being splashed on the initial strike.

Lastly, droplets tend to have some shadowing and lighting. Using a gradient map of some sort could help sell this effect.

UV Flows on iPad

I rendered the video on my pc and the water droplets tend to flow in the wrong V direction. However, they flow in the right direction on iPad. I guess it's just a strange quirk.