Adding a photo

Now, let's add a photo for the big-screen backdrop of our diorama.

In computer graphics, an image that is mapped onto an object is called a texture. While objects are represented in the x, y, and z world coordinates, textures are said to be in the U, V coordinates (such as pixels). We'll see that textures and UV maps can have their own scaling issues. Follow the following steps:

1. Create a plane by navigating to GameObject | 3D Object | Plane and rename it PhotoPlane.
2. Reset the plane's transform. In the Inspector panel, find the gear icon on the upper right-hand side of the Transform panel. Click on this icon and select Reset.
3. Next, rotate it by 90 degrees around the z axis (set its Transform component's Rotation value of z to -90). That's minus 90. So, it's standing up, perpendicular to the ground.
4. Rotate it by 90 degrees around the y axis so that its front is facing us.
5. Move it to the end of the ground plane at Position value of z = 5 and above, at Position value of y = 5 (you may recall that the ground plane is 10 x 10 units).
6. Choose any photo from your computer to paste on this photo plane using Windows Explorer or Mac Finder. (Alternatively, you can use the GrandCanyon.jpg image that comes with this book).
7. In the Project panel, select the top-level Assets folder and navigate to Create | Folder. Rename the folder to Textures.
8. Drag the photo file into the Assets/Textures folder. It should automatically import as a texture object. Alternatively, you can right-click on the Assets folder, select Import New Asset..., and import the picture.

Select the new image Texture in the Project panel and review its settings in the Inspector panel. For Unity's rendering purposes, even if the original photo was rectangular, the texture is square now (for example, 2048 x 2048) and looks squished. When you map it onto a square-shaped face, it will be squished there too. Let's perform the following steps:

1. Drag the photo texture from the Project panel onto the photo plane (in the Scene panel).

Oops! In my case, the picture is rotated sideways—yours, too?

1. Select PhotoPlane (the photo plane) and set the Transform component's Rotation value of X to 90 degrees.

OK, it's upright, but still squished. Let's fix this. Check the original resolution of your photo and determine its aspect ratio. My Grand Canyon image was 2576 x 1932. When you pide its width by its height, you get the 0.75 ratio.

1. In Unity, set the PhotoPlane plane Transform component's Scale value of Z to 0.75.

Because its scale origin is the center, we also have to move it back down a bit.

1. Set the Position value of y to 3.75.

Why 3.75? The height started at 10. So, we scaled it to 7.5. The scaling of objects is relative to their origin. So now, the half of the height is 3.75. We want to position the center of the backdrop 3.5 unit above the ground plane.

We have the size and position set up, but the photo looks washed out. That's because the ambient lighting in the scene is affecting it. You might want to keep it that way, especially as you build more sophisticated lighting models and materials in your scenes. But for now, we'll un-light it.

With PhotoPlane selected, note that the photo's Texture component in the Inspector panel has its default Shader component set as Standard. Change it to Unlit | Texture.

Here's what mine looks like; yours should be similar:

There! That looks pretty good. Save your scene and project.

You may notice that Planes are only visible from their front. All surfaces in computer graphics have a front-facing direction (normal vector). The view camera must be towards the front face or else the object will not be rendered. This is a performance optimization. If you require a plane with faces on both sides, use a Cube scaled thinly, or two separate Planes facing away from each other.

Notice that if you check your Materials folder now, you'll find that Unity has automatically created a GrandCanyon.mat material for you that uses the GrandCanyon.jpg texture.