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.

Fire!!

Fire - No Flip books here.

I recently watched a tutorial by Doug Holder of Naughty Dog. He went over making some fire using distortion maps. While the concept isn't new to me, learning how a Naughty Dog VFX artist uses it was certainly neat. I especially payed close attention to the texture generation portion. A built-in 3D fluid container was used from Maya for the fire base. Rendering clouds in Photoshop and shearing them in two different directions, and assigning them to the red and green channels were used to distort the fire texture.

Flamin' Volcano

Volcano

Active volcano by the sunset

Smoke Puffs

The smoke puffs are a bit over saturated in the video. H.264 seems to like to do that. Anyways, I started this by using a tutorial found on ImbueFX to learn about having lit particles. You can see me changing the directional light's angle and having it effect the smoke in the video.

A normal map was created procedurally in the shader. The Light Vector was then used to light the particle using the created normals. It's essentially using Lambert lighting and suffers from all the problems that come with it but it's fast and good enough for smoke with no sub surface scattering or inner shadowing.

Another issue that the particle system is that it appears that all the particles must be lit (by the same light) before the particles are actually lit. I think this has to do with UDK's implementation of the Light Vector. I originally tried to only light the bottom part of the smoke stack with this orrangy spotlight but it just wouldn't take. However, you are able to light your particles using more than one light as I did in the video.

Rolling Fire

I reused the explosion material from an earlier post in order to create this fire. Since that shader was so customizable I was able to change a few parameters to get the right look of the fire. The particle animation however did take me some time. I wanted to make sure the particles blended well into the smoke puffs. By carefully changing the temperature and alpha curves and tweaking some color values I was able to do so.

Confessions of a Non-Art Major

Reading Reading Reading...

I don't come from an art background and knowing that manipulating color can make or break VFX I've been reading Color. The first chapter goes over ways of categorizing and organizing colors but the most interesting and commonly used one today that I've seen is Hue, Saturation, and Value.

HSV Color Wheel

Hue, Saturation, and Value

Most modern color pickers use something like the two images below to show HSV.

A Slice of the above pie

Another common interpretation but this one is actually for something called HLS. Very similar.

However, what do these mean and how are they important? First off what does each mean. Hue are you base color or Chromatic Hues. Saturation is how pure the hue is. As you begin to mix a Hue say for example blue with its opposite color in the color wheel in this case yellow, you begin to get a gray color. Finally value (also called brightness) is how close the hue is to white. This can lead to HSV having this weird top shape since as your desaturate your color you need less steps in value in order to get it to black.

Weird Cone Shape

So how is this useful?

Value can play a major role in how your effects are lit. If you have similar values (no matter the hues) you may end up getting very evenly lit looking pieces. If you stick to using smooth gradients in value you may instead get effects that appear to be lit from specific areas.

Of course looking at the color wheel can help you tell which colors match well (the opposite ones). This can also be called contrasting hues. These naturally help each other stand out more.