How to Render Light and Shadow in Unity for Augmented Reality
By Huang Hsing aka New Yellow
Lights and shadows are very important. They are used to give perspective to a scene. The lack of shadow will make a scene look fake. The picture below shows the difference. You can’t really tell if the man is standing on the plane or floating in the air, if there is no shadow.
You can see the difference in 3D above, and so it will definitely be the same in Augmented Reality as well. This article will guide you on how to be render light and shadow with Unity and Vuforia SDK (here is a beginners guide to Vuforia, if you are unfamiliar) for Augmented Reality applications. The idea behind this should also work on other SDK or game engines.
Rendering Light and Shadow: The Problem
In Unity, if you want to render lights or shadows, there has to be a mesh. But if we add a mesh on, we can’t see the camera’s view. As you can see in the picture below, with the gray plane I can’t see the desk’s surface.
I also tried with transparent material instead of the gray plane above, but the shadow can’t cast on it. At least not with Unity’s standard shader, maybe some custom shader can do it. As you can see in the picture below, with transparent material we see the desk’s surface, but there’s no shadow.
The Idea: Rendering Light and Shadow Separately
The first thought I got, is to try something like Addition or Multiplication effect. If I can render the light and shadows separately, and then using some post-effect to mix the shadows onto the camera’s view.
So I separate everything into 3 layers – Background, Light and Shadow, and 3D Object layer. And then mix them together. Background layer, only camera’s image:
Light and Shadow layer:
3D Object layer:
The final result with all 3 layers:
The image above might not be clear enough, since the desk is so dark, you can’t see the shadow properly. But you can check this demo video to see better:
This is an overview of the various steps that you have to do for rendering light and shadow. And to learn how to do it, view the video tutorial below it.
- There are some custom scripts used for this, which you will see in the video tutorial below. You can find them on my Github.
- You need to add 3 cameras to render Background, Light and the Augmented Reality Object separately. And these 3 camera’s views have to be exactly the same with the Vuforia’s Augmented Reality Camera. I use CopyCameraData.cs to do it.
- Since you can’t render an object’s shadow onto another layer, you need a copy to do it. Edit the copy’s Mesh Renderer: “Cast Shadows” setting to “Shadow Only”.
- To do the Post-Effect thing, I use Colorful FX‘s blend to do it. You can use other Post-Effect scripts as well.