Unity 5.x Shaders and Effects Cookbook: Master the art of Shader programming to bring life to your Unity projects

Surface Shaders have been introduced in Chapter 1, Creating Your First Shader, as the main type of shader used in Unity. This chapter will show in detail what these actually are and how they work. Generally speaking, there are two essential steps in every Surface Shader. First, you have to specify certain physical properties of the material that you want to describe, such as its diffuse color, smoothness, and transparency. These properties are initialized in a function called surface function and stored in a structure called surface output. Secondly, the surface output is passed to a lighting model. This is a special function that will also take information about the nearby lights in the scene. Both these parameters are then used to calculate the final color for each pixel of your model. The lighting function is where the real calculations of a shader take place as it's the piece of code that determines how light should behave when it touches a material.

The following diagram...

Before starting our journey into texture mapping, it is important to understand how diffuse materials work. Certain objects might have a uniform color and smooth surface, but not smooth enough to shine on reflected light. These matte materials are best represented with a Diffuse shader. While in the real world, pure diffuse materials do not exist; Diffuse shaders are relatively cheap to implement and find a large application in games with low-poly aesthetics.

Loosely speaking, the code inside a shader has to be executed for at least every pixel in your screen. This is the reason why GPUs are highly optimized for parallel computing. This philosophy is also evident in the standard type of variables and operators available in Cg. Understanding them is essential not just to use shaders correctly, but also to write highly optimized ones.

Textures can bring our shaders to life very quickly in terms of achieving very realistic effects. In order to effectively use textures, we need to understand how a 2D image is mapped to a 3D model. This process is called texture mapping, and it requires some work to be done on the shader and 3D model that we want to use. Models, in fact, are made out of triangles; each vertex can store data that shaders can access. One of the most important information stored in vertices is the UV data. It consists of two coordinates, U and V, ranging from 0 to 1. They represent the XY position of the pixel in the 2D image that will be mapped to the vertices. UV data is present only for vertices; when the inner points of a triangle have to be texture-mapped, the GPU interpolates the closest UV values to find the right pixel in the texture to be used. The following image shows you how a 2D texture is mapped to a triangle from a 3D model:

The UV data is stored in the 3D model and...

One of the most common texture techniques used in today's game industry is the process of allowing you to scroll the textures over the surface of an object. This allows you to create effects such as waterfalls, rivers, lava flows, and so on. It's also a technique that is the basis to create animated sprite effects, but we will cover this in a subsequent recipe of this chapter. Let's first see how we will create a simple scrolling effect in a Surface Shader.

Every triangle of a 3D model has a facing direction, which is the direction that it is pointing toward. It is often represented with an arrow placed in the center of the triangle and orthogonal to the surface. The facing direction plays an important role in the way light reflects on a surface. If two adjacent triangles face different directions, they will reflect lights at different angles, hence they'll be shaded differently. For curved objects, this is a problem: it is obvious that the geometry is made out of flat triangles.

To avoid this problem, the way the light reflects on a triangle doesn't take into account its facing direction, but its normal direction instead. As stated in Adding a texture to a shader recipe, vertices can store data; the normal direction is the most used information after the UV data. This is a vector of unit length that indicates the direction faced by the vertex. Regardless of the facing direction, every point within a triangle has its own normal...

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.

More and more space-themed games are being released every year. An important part of a good sci-fi game is the way futuristic technology is presented and integrated in the gameplay. There's nothing that screams futuristic more than holograms. Despite being present in many flavors, holograms are often represented as semi-transparent, thin projections of an object. This recipe shows you how to create a shader that simulates such effects. Take this as a starting point: you can add noise, animated scanlines, and vibrations to create a truly outstanding holographic effect. The following image shows an example of a holographic effect:

Textures are useful to store not only loads of data, not just pixel colors as we generally tend to think of them, but also for multiple sets of pixels in both the x and y directions and RGBA channels. We can actually pack multiple images into one single RGBA texture and use each of the R, G, B, and A components as individual textures themselves by extracting each of these components in the shader code.

The result of packing individual grayscale images into a single RGBA texture can be seen in the following image:

Why is this helpful? Well, in terms of the amount of actual memory that your application takes up, textures are a large portion of your application's size. So, to begin reducing the size of your application, we can look at all of the images that we are using in our shader and see if we can merge these textures into a single texture.

Any texture that is grayscale can be packed into one of the RGBA channels of another texture. This might sound a bit odd...

Many RTS games display distances (range attack, moving distance, sight, and so on) by drawing a circle around the selected unit. If the terrain is flat, this can be done simply by stretching a quad with the texture of a circle. If that's not the case, the quad will most likely be clipped behind a hill or another piece of geometry. This recipe will show you how to create a shader that allows you to draw circles around an object of arbitrary complexity. If you want to be able to move or animate your circle, we will need both a shader and C# script. The following image shows an example of drawing a circle in a hilly region using a shader: