Creating a transparent material

All the shaders seen so far have something in common—they are used for solid materials. If you want to improve the look of your game, transparent materials are often a good way to start. They can be used for anything from a fire effect to a window glass. Working with them, unfortunately, is slightly more complicated. Before rendering solid models, Unity orders them according to the distance from the camera (Z ordering) and skips all the triangles that are facing away from the camera (culling). When rendering transparent geometries, there are instances in which these two aspects can cause problems. This recipe will show you how to solve some of these issues when it comes to creating a transparent Surface Shader. This topic will be heavily revisited in Chapter 6, Fragment Shaders and Grab Passes, where realistic glass and water shaders will be provided.

Getting ready

This recipe requires a new shader, which we'll be calling Transparent, and a new material so that it can be attached to an object. As this is going to be a transparent glass window, a quad or plane is perfect. We will also need several other non-transparent objects to test the effect. In this example, we will use a PNG for the glass texture. The alpha channel of the image will be used to determine the transparency of the glass. The process of creating such an image depends on the software that you are using. However, these are the main steps that you will need to follow:

1. Find the image of the glass you want for your windows.
2. Open it with a photoediting software, such as GIMP or Photoshop.
3. Select the parts of the image that you want to be semi-transparent.
4. Create a white (full opacity) layer mask on your image.
5. Use the selection previously made to fill the layer mask with a darker color.
6. Save the image and import it to Unity.

The toy image used in this recipe is a picture of a stained glass from the Meaux Cathedral in France (https://en.wikipedia.org/wiki/Stained_glass). If you have followed all the steps, your image should look like this ( RGB channels on the left, and A channel on the right):

How to do it…

As mentioned previously, there are a few aspects that we need to take care of while using a Transparent Shader:

1. In the SubShader{} section of the shader, add the following tags that signal the shader is transparent:

   Tags
   {
     "Queue" = "Transparent"
     "IgnoreProjector" = "True"
     "RenderType" = "Transparent"
   }

2. As this shader is designed for 2D materials, make sure that the back geometry of your model is not drawn by adding the following:

   Cull Back

3. Tell the shader that this material is transparent and needs to be blended with what was drawn on the screen before:

   #pragma surface surf Standard alpha:fade

4. Use this Surface Shader to determine the final color and transparency of the glass:

   void surf(Input IN, inout SurfaceOutputStandard o)
   {
     float4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
     o.Albedo = c.rgb;
     o.Alpha = c.a;
   }

How it works…

This shader introduces several new concepts. First of all, Tags are used to add information about how the object is going to be rendered. The really interesting one here is Queue. Unity, by default, will sort your objects for you based on the distance from the camera. So, as an object gets nearer to the camera, it is going to be drawn over all the objects that are further away from the camera. For most cases, this works out just fine for games, but you will find certain situations where you will want to have more control over the sorting of your objects in your scene. Unity has provided us with some default render queues, each with a unique value that directs Unity when to draw the object to the screen. These built-in render queues are called Background, Geometry, AlphaTest, Transparent, and Overlay. These queues weren't just created arbitrarily; they actually serve a purpose to make our lives easier when writing shaders and interacting with the real-time renderer. Refer to the following table for descriptions on the usage of each of these inpidual render queues:

So, once you know which render queue your object belongs to, you can assign its built-in render queue tag. Our shader used the Transparent queue, so we wrote Tags{"Queue"="Trasparent"}.

Note

The fact that the Transparent queue is rendered after Geometry does not mean that our glass will appear on top of all the other solid objects. Unity will draw the glass last, but it will not render pixels that belong to pieces of geometry hidden behind something else. This control is done using a technique called ZBuffering. More information on how models are rendered can be found at http://docs.unity3d.com/Manual/SL-CullAndDepth.html.

The IgnoreProjector tag makes this object unaffected by Unity's projectors. Lastly, RenderType plays a role in shader replacement, a topic that will be covered briefly in Chapter 9, Gameplay and Screen Effects.

The last concept introduced is alpha:fade. This indicates that all the pixels from this material have to be blended with what was on the screen before according to their alpha values. Without this directive, the pixels will be drawn in the correct order, but they won't have any transparency.