Unity VR : Mirror

/ Tutorial, Unity, VR / By

One of the best things about VR is the feeling of immersion. One way of creating a deeper connection for our players is by allowing them to see their character.  Mirrors are a great tool for helping our players see themselves and they provide a means for customization without breaking immersion from the game world.

In this guide, we’ll learn how to setup a mirror for our players to try on different hats with. We already covered Socket Interactors to be able to use our hats, which can be found here.

With that, let’s make a mirror!

1 : Scene Review

Opening the scene, we’ll be greeted with our favorite pink table, as well as two hats and a hand mirror that isn’t working yet. The Main Camera found on the XR Origin already has a hat socket that will allow us to put hats on our heads. That’s really it for this one! Now we just need to create a mirror so we can see ourselves.

2 : Creating a Mirror

Let’s start off by doing the following.

  • Right click in the scene and create a Cube
    •  Name it Mirror
    • Position = (0, 1.3, 1.7)
    • Rotation = (0, -90, 0)
    • Scale = (.01, 1, -1)
Now we have something to project reflections on. The way we’re going to create that reflection is through the use of a camera. First we will need to attach a camera to the mirror object we just created.
  • Right click on the Mirror object in the scene and add a  Camera to it.
    • Position = (0 , 0 , 0)
    • Rotation = (0, -90, 0)
If we click on the Camera, a small window will appear and show us what the camera sees. This will serve as our “reflection”. Next we need to make a material out of what this camera sees and apply it to our cube called Mirror.

To make a material that can display what our camera captures, we need to do the following.

  •  In our Assets folder, Right click -> Create -> Render Texture
    • Name this MirrorRenderTexture
  • In our Assets folder, Right click -> Create -> Material
    • Name this MirrorMat
    • Select and change its size to 1024 x 1024
  •  Select the Camera attached to the Mirror
    • In the Inspector, find the Target Texture and drag the MirrorRenderTexture into the empty slot.
  • Select the MirrorMat located in our Assets folder.
    • Click and drag the MirrorRenderTexture into the small box left of the word Albedo
  • Drag and drop the MirrorMat onto the Mirror object in the Scene.

 

3 : First Conclusion!

With that, we have a functioning mirror. Some things I would like to point out before heading to the Bonus section.

You’ll notice that the Mirror object in the Scene has a negative Z scale. This seems strange, but it actually helps us get the correct reflection that we’re after. If we left the scale at a positive and positioned our camera correctly, we would actually end up with our items appearing reversed.

Notice how the top hat is now reflecting on the far left. This is the magic trick that giving the Z scale a negative value provides. It gives us the appearance of how a mirror actually works by inversing things on the Z scale.

4 : Bonus - Hand Mirror

In the video for this tutorial, I won’t go over how to implement this, but I’m more than happy to do it here if people get stuck. 

 

For those who are trying to figure out how to implement this, let’s think what we need.

  • A camera to capture a “reflection” and attach it to the hand mirror to it follows when the hand mirror moves.
  • A Render Texture for the camera to output to.
  • A Material to use the Render Texture and then apply it to the Mirror portion of our hand mirror.
  • An inversed scale to help the reflection display properly.

With these things in mind, lets put it all together.

  • Right click on the Mirror attached to the Hand Mirror and add a Camera to it.
    • Rotation = (270, 0, 0) 
  • Right click our Assets folder and add a RenderTexture
    • Name it “HandMirrorRenderTexture”
    • Increase the size to 1024 x 1024
  • Select the Camera attached to the Hand Mirror and drag and drop the newly created Render Texture into the Target Texture slot.
  • Right click our Assets folder and add a new Material
    • Call it “HandMirrorMat”
    • Drag and drop the Hand Mirror Render Texture into the box next to Albedo
    • Select the material and drag it onto the Mirror located on the Hand Mirror object.
  • Select the Mirror portion of the Hand Mirror object and inverse the Z scale by adding a negative in front of it.

There you have it! A working hand mirror!

5 : Conclusion!

Mirrors are a great way to help with player immersion. Don’t get too carried away with them though! They can be taxing on processing power and shouldn’t be used excessively. These things can be fixed by reducing the size found on the Render Texture, which will effectively lower the resolution for the reflection. You could also play with the Clipping Planes found on the Camera. The far one can help reduce rendering objects very far away if you give it a smaller number.

Besides that… MIRRORS! Go use them. Cheers!