Using All 360 Degrees

360-degree photos and videos are a different way of using Virtual Reality (VR) that is widely accessible to consumers today, both in terms of experiencing them as well as producing and publishing them. Viewing prerecorded images requires much less compute power than rendering full 3D scenes, and this works very well even on low-end mobile VR devices (such as Oculus Go) and mobile phone-based headsets such as Google Cardboard.

In this chapter, we will learn about using 360-degree media is Unity for VR projects. To begin, I will explain the difference between regular photos and spherical projections (equirectangular) and then demonstrate this in several cases, including crystal balls, globes, and inside-out magic orbs! Then, we'll create a new scene so that we can view 360-degree photos within VR and add a user interface to let the user switch between pictures. Likewise, we'll also learn how...

Technical requirements

To implement the projects and exercises in this chapter, you will need the following:

• A PC or Mac with Unity 2019.4 LTS or later, the XR plugin for your device, and the XR Interaction Toolkit installed
• A VR headset supported by Unity XR Platform

You can access or clone the GitHub repository for this book (https://github.com/PacktPublishing/Unity-2020-Virtual-Reality-Projects-3rd-Edition-) to use the following assets and completed projects for this chapter:

• The asset files for you to use in this chapter are located in the UVRP3Files/Chapter-11-Files.zip folder.
• All the completed projects for this book can be found in a single Unity project atUVRP3Projects.
• The completed assets and scenes for this chapter are located in the UVRP3Projects/Assets/_UVRP3Assets/Chapter11/folder.

Exploring 360-degree media

The terms 360-degree media and virtual reality are being tossed around a lot lately, often in the same sentence. Consumers may be led to believe that it's all the same thing, it's all figured out, and it's all very easy to produce, when, in fact, it is not that simple. Generally, the term 360-degree media refers to viewing prerecorded photos or videos in a manner that allows you to rotate your view's direction to reveal content that was just outside your field of view.

Non-VR 360-degree media has become relatively common. For example, many real-estate listing sites provide panoramic previews with a web-based player that lets you interactively pan around to view the space. Similarly, Facebook and YouTube support uploading and playback of 360-degree videos and a player with interactive controls so that you can look around during the playback. Google Maps lets you upload 360-degree panoramic photos, much like their Street View...

Having fun with photo globes

To begin exploring these concepts, let's have a little fun and apply ordinary (rectangular) images to 3D spheres. First, let's take a regular photo and apply it as a texture to a sphere, just to see what it does and how bad it looks. Then, we'll use a properly distorted equirectangular photosphere texture. You'll see why that's required to make a globe look correct, but you'll also need a compatible mesh geometry for the project to look right. Lastly, we'll invert the shader we're using to view the globes so that the image projects onto the inside of the sphere instead of the outside. Then, we'll play with it as a magic orb in VR.

Seeing crystal balls

"Auntie Em! Auntie Em!" cried Dorothy in the Wizard of Oz 1939 movie as she gazed into a crystal ball, seeking help from the Wicked Witch. Let's consider making a crystal ball using Unity, my little pretty!In Chapter 8, Lighting...

Viewing 360-degree photos

Yes sir, it's all the rage these days. It's better than panoramas. It's better than selfies. It may even be better than Snapchat! We're finally getting to the moment that you've been waiting for! It's 360-degree photos! We covered a lot of topics in this chapter, which will now make it fairly easy for us to talk about a 360-degree photo viewer. To build one, we'll just make a very big sphere with shader back faces rendered as they were previously. Start with a new empty scene:

1. Create a new scene by navigating toFile|New Scene. Then, navigate toFile|Save As...and name itPhotoSphere.
2. Add a stationary XR Camera Rig to the scene usingGameObject | XR | Stationary XR Rig.
3. Set the XR Rig's Positionto (0,0,0).

Now, to view a 360-degree photo, we simply make a giant sphere with the image on its inside, as follows:

1. Create an equirectangular sphere...

Playing 360-degree videos

The steps for playing a 360-degree video are pretty much the same as adding regular rectangular videos to a Unity project, that is, using a Video Player to render the video onto a Render Texture. In the case of 360 videos, we can render that Render Texture inside a photosphere, as we did in the previous section. Let's build that now.

If you do not have a 360-degree video handy, search for web-free downloads and pick one that's not too long and of a limited file size. (Try googling 360 videos download – https://www.google.com/search?q=360+videos+download). The example used here (licensed under Creative Commons) can be found at https://en.wikipedia.org/wiki/File:Hundra_knektars_marsch_p%C3%A5_Forum_Vulgaris.webm (the file download link is https://upload.wikimedia.org/wikipedia/commons/f/fb/Hundra_knektars_marsch_p%C3%A5_Forum_Vulgaris.webm). It's very low resolution (1,920 x 860) and is just being used for this demo. Usually...

Using Unity skyboxes

Back in the old days, or at least before 360-degree photos, we simply referred to 360 images as skyboxesas the way to create background imagery in computer graphic landscapes. Skyboxes depict what's far on the horizon, may contribute to the ambient lighting of the scene, can be used for rendering reflections on object surfaces, and are not interactable. Unity supports skyboxes as part of the Lighting Environment for each scene. We used skyboxes already in a few of the previous chapters' projects (including Wispy Sky and Skull Platform). Common sources of skyboxes include cylindrical panoramas, spherical panoramas (360 images), and a six-sided cube. We won't consider the cylindrical one since it's less useful for VR. We'll look at cubemaps first.

Six-sided or cubemap skyboxes

A skybox can be represented by six sides of a cube, where each side is akin to a camera capturing its view pointing in each of the six directions...

Capturing 360-degrees in Unity

We've talked about using 360-degree media captured using 360 cameras. But what if you wanted to capture a 360 image or video from within your Unity app and share it on the internet? This could be useful for marketing and promoting your VR apps, or just simply using Unity as a content generation tool but using 360-degree video as the final distribution medium. First, I'll explain how to capture 360 images, including cubemaps and reflection probes, within Unity with a simple script. Then, I'll suggest some third-party tools you should consider that have more features.

Capturing cubemaps and reflection probes

Unity includes support for capturing scene views as part of its lighting engine. A call to camera.RenderToCubemap() will bake a static cubemap of your scene using the camera's current position and other settings.

The example script given in the Unity documentation, https://docs.unity3d.com/Documentation...

Summary

360-degree media is compelling because VR tricks your FOV by updating the viewable area in real-time as you move your head around, making the screen of your HMD seem to have no edges. We started this chapter by describing what 360-degree images are, as well as how the surface of a sphere can be flattened (projected) into a 2D image by using equirectangular projections in particular. Stereo 3D media includes separate equirectangular views for the left and right eyes.

We began exploring this in Unity by simply mapping a regular image on the outside of a sphere, and were perhaps frightened by the distortions. Then, we saw how an equirectangular texture covers the sphere evenly for rendering a globe. Next, we inverted the sphere with an inverted shader, mapped the image inside the sphere, and made it a 360-degree photosphere viewer that can load photos from the web. After that, we added video.

Then, we looked at using skyboxes instead of a game object for rendering...