Shader Programming, Volume 4

Transparent and Holographic Shaders

Alright, so now we know how to add texture maps and normal maps to shaders and manipulate their UVs. Let’s see what else we can do with ‘em.

Chapter 2.6

Surface Shaders and Texture Mapping, Creating a transparent material

We’ll start by making a new shader and material. Have an image you’d like to use on hand. Edit the parts of the image you want to be semi-transparent and mask them with a darker color. The alpha channel of the image will determine the transparency of the glass.

Your shader’s code is going to look like this:

There are a few new concepts on display in this shader. Firstly, Tags are used to add information about the rendering of the object. In particular, the Queue tag is used to override Unity’s default behavior of sorting objects for you based on their distance from the camera — near objects are drawn over distant ones.

Here’s a list of the built-in render queues you can use in Unity shaders:

• Background: This render queue is rendered first. It is used for skyboxes, for example. (Render queue value = 1000)
• Geometry: This is the default render queue, used for most objects. Opaque geometry uses this queue. (Render queue value = 2000)
• AlphaTest: Alpha-tested geometry uses this queue. It’s different than the Geometry queue in that it’s more efficient to render alpha-tested objects after all solid objects are drawn. (Render queue value = 2450)
• Transparent: This render queue is rendered after Geometry and AlphaTest Anything alpha-blended (shaders that don’t write to the depth buffer) should use this render queue, like glass and particle effects. (Render queue value = 3000)
• Overlay: This render queue is meant for overlay effects. Anything rendered last should use this render queue, like lens flares. (Render queue value = 4000)

The IgnoreProjector tag makes this object unaffected by Unity’s projectors. The RenderType tag plays a role in shader replacement, which will be covered in a future section.

We also discovered a new #pragma directive, alpha:fade, which indicates that all the pixels from this material need to be blended according to their alpha values with what was on the screen before.

When we apply this new transparent material with a stained glass texture to our center sphere, we get this result. You can clearly see that some portions of the texture are more transparent than others.

Chapter 2.7

Surface Shaders and Texture Mapping, Creating a Holographic Shader

This shit straight out of Star Trek and all you need is transparency and a silhouette. Let’s get to it.

Starting with our textured shader, let’s add a new _DotProduct property. You’ll see it declared in the usual places in the code below. Also note that we need to add more tags to the tag section this time, and that our #pragma line is disables lighting, uses Lambertian reflectance (it’s way cheaper — we’re not trying to simulate a realistic material), and it signals to Cg that this is a transparent shader using alpha:fade.

When this new shader is applied to a lovely bunny we find that it looks like this.

The more orthogonal to the camera view vector the normal vector of the surface is, the more opaque it is.

Just as we intended!

Sweet.

That’s all for today! Up next we’re going to learn a little something about texture mapping and how to highlight the terrain under an object like an RTS unit!