WebVR: Creating a 360 Image Background for VR

A step-by-step guide

Published in

The Stories Within

4 min readMay 27, 2020

This post is a part of The Stories Within series, a project by the students of Parsons School of Design as a part of the Spatial Computing Challenge under the guidance of the R&D team at The New York Times and NYC Media Lab. The project is introduced in The Future of News Series!

What are 360 Images?

Usually, we see images on a screen, and they are non-interactive. But, in a 3D environment, as you are moving your screen, the contents on the screen should update, giving you a level of immersion. 360 images make that happen. A 360 image is a snapshot of the 360 degree view taken from a particular spot. It’s like a panorama on your iPhone, just extended in all directions. Hardware devices like Samsung GearVR and Insta360 allow the user to capture these images. But, they can also be downloaded from Google Street View.

How to download 360 images from Google Street View?

To download an image from Google Street view, you would need to use “iStreetView,” software developed by Thomas Orlita. First, you need the Panorama ID of the location for which you need a 360 image. To get that, visit iStreetView.com. Next, navigate to the desired location and copy the Panorama ID from there.

Once you have the Panorama ID, download the “Street View Download 360” software from https://svd360.istreetview.com/ and paste the Panorama ID there. Then, click on the Download button after stating the location where you would like to save the file.

[Reference: https://svd360.istreetview.com/]

That’s it! Open the downloaded image and use it in your VR project in Unity.

How to use 360 images in Unity?

To use a 360 image inside Unity, you will need to create a material with this image and assign it to the Skybox.

In order to do so follow the steps below:

Import the downloaded 360 image or your own 360 image in Unity (Download 360 images from Google street view) , on the inspector towards the right change Texture shape to “Cube”, Mapping to “Latitude-Longitude Layout (Cylindrical)” and then click on Apply.

The next step is to create a material and apply the image to it. Right click in the project assets folder and Create -> Material
Select the material and change the Shader in the inspector to Skybox -> Cubemap and drag and drop the 360 image that was imported in the texture field

Once skybox material is created, we need to update the skybox in the scene. In order to do that we go to lighting settings (Found at Window -> Rendering -> Lighting Settings) and change the skybox material.

About the Team

Akshansh Chaudhary is an XR Experience Designer. In his projects, he focuses on social and world issues like privacy and local news. His design approach is to create immersive and playful experiences to spread awareness. Follow his work on akshansh.net.

Karen Asmar is a design technologist working at the intersection of the built environment, society and human-computer interaction. Her work focuses on exploring the impact of emerging technologies on ways we interact in space, with space and with data in space. Follow her work on karenasmar.com.

Ponvishal Chidambaranathan is a fervent immersive storyteller and digital producer with a strong inclination towards innovative, philosophically charged content in unconventional storytelling and interactive media. Follow his work on ponvishal.com.

Yashwanth Iragattapu is a creative technologist and interaction designer. He creates products that encompasses human and spatial interactions through emerging technologies like Augmented reality and Virtual reality. Follow his work on yashwanthiragattapu.com.

Debra Anderson is an entrepreneur and educator specialized in XR. She is recognized for designing data-driven and research based approaches to immersive experiences with a focus on how data and emerging technologies can be used for civic engagement and social impact.