Adventures in Unity – 2.7 Mesh Fade

Fading a model out of the game can be a pretty useful technique.

When using the built-in shaders, fading a single mesh model in/out is a pretty straight forward process.

If you have model made up of multiple meshes – there is a couple of extra steps you may need to get the desired effect.

I’m going to try and cover both situations below;

---

For this example, I’m using Unity’s built-in ‘standard’ shader.

The standard shader provides two rendering modes that can be used to fade a mesh – Transparent & Fade.

The unity guide explains their intended usage;

Transparent – Suitable for rendering realistic transparent materials such as clear plastic or glass. In this mode, the material itself will take on transparency values (based on the texture’s alpha channel and the alpha of the tint colour), however reflections and lighting highlights will remain visible at full clarity as is the case with real transparent materials.

Fade – Allows the transparency values to entirely fade an object out, including any specular highlights or reflections it may have. This mode is useful if you want to animate an object fading in or out. It is not suitable for rendering realistic transparent materials such as clear plastic or glass because the reflections and highlights will also be faded out.

Though it’s generally best to try out both options and see which works best for your project.

---

To fade in/out a single mesh model;

Models use a material to manage their texture, each material has an assoiated colour.
To fade the mesh we change of the alpha value of this colour.

Alpha values are between 0 & 1;
0.0 = completely transparent
0.x = faded to some degree.
1.0 = fully opaque

To fade a mesh out by 50% (In a script attached to the model’s prefab);

Renderer renderer = GetComponent();
Color color = renderer.material.color;
color.a = 0.5f;
renderer.material.color = color;

to fade a specific colour in the material, use the SetColor function;

Renderer renderer = GetComponent();
Color color = renderer.material.color;
color.a = 0.5f;
renderer.material.SetColor("_Color", color);

Single mesh model – Standard shader set to Fade

Single Mesh Model – Standard shader set to Transparent

---

To fade in/out a multi-mesh mesh model;

If the model has multiple meshes, we need to reference the material(s) for each mesh.

(It can be useful to create an instance of each material.
That way the alpha change will only effect that instance of the model & not every model that uses the material)

We may also need to manually set the models ZWrite value
The ZWrite value determines the order in which each mesh is drawn to screen.

Multi-Mesh model – Standard Shader set to Fade – Default ZWrite order

Multi-Mesh model – Standard shader set to Transparent – Default ZWrite order

---

To put this in code (as a script attached to the models prefab);

First create a global variable to hold the renderer for each mesh;

Renderer[] rendererObjects;

Then in the init or start method, the renderer array is initialised & populated,
the ZWrite value (draw order) is defined (rather simply here)

 for (int counter = 0; counter < rendererObjects.Length; counter++)
 {
   Material material = rendererObjects[counter].material;
   material.SetInt("_ZWrite", counter);
 }

Once thats done & we are ready to fade – In the main code we can fade the model in or out (in this example I fade the model out – then destroy the instance once it is completely transparent);

for (int counter = 0; counter < rendererObjects.Length; counter++)
 {

   Color color = rendererObjects[counter].material.color;
   color.a -= (Time.deltaTime / 1f) % 1.0f;

   if (color.a <= 0)
      Destroy(gameObject);

   else
      rendererObjects[counter].material.SetColor("_Color", color);

}

The final result should look something like this;

Multi-mesh model – Standard shader set to Fade – ZWrite manually defined.

Multi-Mesh model – Standard shader set to Transparent – ZWrite manually defined.

---

Play the game (WebGL)

---

Next Post: 2.8 Tileset C64

Last post: 2.6 Pause & Resume

Contents page.

---