Skip to content

360° Image and Video Viewer

In this section I distill the content of a tutorial at this address which is a bit outdated (written in 2017).

We’re going to create a very simple but very useful application: display 360° stimuli (also called omnidirectional). These are images or videos that capture an environment in all directions. An observer will find visual information wherever they look. Therefore they are often conceptualized as spheres.

360° files are stored in different formats. Unity supports several, including two very commonly used types.

Cubemap Projection

The omnidirectional content is projected onto the faces of a cube.

Equirectangular Projection

(source images)

This projection is also called cylindrical; it’s familiar to us because it’s how Earth is often shown on maps. It heavily distorts the poles of the sphere (each colored area is actually a square).

To begin, download at least one image and one video from the list just below. Add them wherever you like in your Unity project (create a new Unity scene for this module).

There are two simple ways to present 360° content in Unity.

  • Create a sphere, apply a 360° stimulus as its texture, invert its normals so that the texture is only visible from the inside.

  • Use the stimulus as a Skybox. A skybox in a game engine is an image/video that is fixed relative to the observer and fills the world omnidirectionally. For example, Unity uses the skybox below by default.

360° Image

Sphere Method

In your scene create a sphere (3D Object > Sphere). Also create a new material, assign the image you downloaded as the material’s “Base Map,” then change the “Render Face” option to “Back.” Assign this material to your sphere.

The “Render Face” parameter controls whether a 3D model is displayed by the 3D engine normally or inverted (viewed from the inside). In our case, this means displaying only the inside of the sphere, which is what we want because our camera must be at the exact center of the sphere.

Therefore place both the camera and the sphere at coordinates (0, 0, 0). Your sphere must also be very large or your observers will go cross-eye in VR: change the scale of the sphere to a value of 15 or greater (15 m is roughly the distance at which our eyes converge “at infinity”).

You now have a 360° image viewer 🥳🎉

Skybox Method

Be aware that skybox settings are tied to your camera and to the global settings of your project. Changing one skybox may potentially affect all your scenes.

Ensure your camera is set to display a skybox as the background. Check in the camera component:

A Skybox Material is not just any material; it must be of type “skybox.”
Create a new material named “SkyboxMaterial.” Change its shader type to “Skybox/Panoramic,” then assign your 360° image to the “Spherical (HDR)” parameter:

Control over which skybox is displayed is found in the Lighting settings (Window > Rendering > Lighting > Environment). Assign your new material as the “Skybox Material.”

The background of your 3D scene changed instantly! You can move the camera however you like; it will have no effect on the background—only its rotations now change the visual background.

360° Video

I describe the appropriate method for displaying 360° videos with the “Skybox” method, but the same applies to the sphere method.

If you drag and drop a video into your hierarchy you’ll see it becomes a particular GameObject: it contains a “Video Player” component that uses the video as its source.

“Play on Awake”: the video starts as soon as this object is initialized (when the game starts). You can also choose to start the video manually via code or a “Unity Event” when the user interacts in VR.

A video cannot be placed directly as the image of a Material; we must use a video player that reads the video and outputs frames. We will tell the “Video Player” to put those frames into a “Render Texture” object. Search for and choose “Render Texture” in “Create.” Change its “Size” parameter to match your video’s dimensions (here: 3840 by 1920 pixels).

Change the “Video Player” component’s options as below so that the “Render Texture” receives the video frames. Set “Render Mode” to “Render Texture,” then drag-and-drop the “Render Texture” you just created into “Target Texture.”

Finally, go back to your “SkyboxMaterial” and assign your “Render Texture” in place of the image we had used previously.

Start the game -- the 360° video plays in the background 🥳🎉

P.S.: if you want to use the Sphere method instead, simply assign your “Render Texture” as the “Base Map” on the “SphereMaterial.”