Learn how to render light and shadow with Unity and Vuforia SDK for augmented reality applications.

Light and shadow 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. If there is no shadow, you can't really tell if the man is standing on the plane or floating in the air.

86c97e20f17ea24b16f40feae8fa1ec7.jpeg

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 light or shadow, 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.

fcc34cce5b6de7a081689fd20472c66b.jpeg

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 a custom shader can do it. As you can see in the picture below, with the transparent material, we see the desk's surface, but there's no shadow.

e890fa30cb9133dd676ded414b5c4ed6.jpeg

The Idea: Rendering Light and Shadow Separately

The first idea I got is to try something like an addition or multiplication effect. If I can render the light and shadows separately, then I could use some post-effect to mix the shadows onto the camera's view.

So I separate everything into three layers—background, light and shadow, and 3D object layer—and then mix them together. Here is the background layer, which is just the camera's image:

4b70256692836e117f9df76259126088.jpeg

This is the light and shadow layer:

904dfb875797b057b9a987533cdd98d1.jpeg

And the 3D object layer:

6ca3010a41b5d5d42001fc08742eea50.jpeg

The final result with all 3 layers:

28ee1450dfdc1e2c225390bae140286d.jpeg

In the image above, the desk is so dark, you can't see the shadow properly. But you can check this demo video to see better:

Step-by-Step Tutorial

This is an overview of the various steps for rendering light and shadow. To learn how to do it, view the video tutorial below.

  1. There are some custom scripts used for this, which you will see in the video tutorial below. You can find them on my Github.
  2. You need to add three cameras to render background, light, and the augmented reality object separately. And these three cameras' views have to be exactly the same with the Vuforia's Augmented Reality Camera. I use CopyCameraData.cs to do it.
  3. 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".
  4. To do the post-effect thing, I use Colorful FX's blend to do it. You can use other post-effect scripts as well.

Maker Pro Logo
Continue to site
Quote of the day

-