Build 360 player – What you need

In the last article, I explained how I got started with VR and why it is important to focus on delivering 360 content now. If you haven’t read it already, I recommend reading it first.  Today, let’s look at the different possible solutions to delivering 360 content and figure out the best way. In short, we’ll be looking into building an awesome 360 player.

Let’s look at what we want first. First we need to come up with the requirements for the infrastructure and 360 viewer.

Requirements for 360 media player

• Should support 360 photo
• Should support 360 video
• Support 360 virtual tour
• Create gallery of 360 content
• Performance optimized
• Load fast on all platforms
• Support VR mode
• Navigate in VR
• Customizable
• Brandable

Current state of 360

360 is the most accessible content on VR platforms now. Even if you don’t consider 360 as full six degrees of freedom VR, you can’t deny the mass appeal of 360 content. And there is no denying that people like 360 content.

It’s already being uploaded to social media sites like Facebook and YouTube. On top of that, businesses have also embraced 360 content to tell their story and showcase their product.

With that in mind, what are the different ways 360 content is consumed now. The number one sources for 360 content is Facebook and Youtube without a doubt because of the sheer size of these platforms.

But for businesses who have to manage a lot of 360 content, using these platforms doesn’t make much sense. Businesses in real estate and tourism industries are already heavy users of 360 content. Platforms like Facebook and Youtube are made for immediate consumption of users of that website.

Let’s take an example. Imagine you’re running a real estate company. You have decided to invest in 360 content. You start taking 360 photos of the property. Let’s say there are five 360 photos per property. And you have 100s of properties. Suddenly, it doesn’t make any sense to upload each photo to Facebook individually. It’ll be a huge waste of time and managing all the content will be difficult.

What can be done?

I have been thinking what can be the possible solutions to this delivery and display problems of 360 content.

To completely understand the technical challenges of displaying and distributing 360 content, we need to look at how 360 images or videos are made. If you look at a 360 photo, without any 360 viewer, you’ll see it’s represented in a certain way. This type of images are called equirectangular images.

Image projections

If you have ever looked at a world map, you know what equirectangular projection is. It is a type of representation of our round earth in a flat form. If you didn’t know already, the countries at the top of the map are magnified than its original size. So Greenland is not larger than Africa.

A significant portion of the equirectangular images are taken by the smaller portions of the actual image. If you look at the world map for example, you can see that the polar regions take up a lot of space on the map. However, the actual area taken up by these regions are quite less compared to what the image would make us believe.

Because of this, an equirectangular projected image would be of greater size. But the advantage is that it represents the spherical image in 2d image that is humanly understandable.

A better image projection

What if the image can be projected in another way, which has more advantages? Let’s get introduced to cube map projections.

Cubemap projections

They project the spherical image to a cube and returns 6 faces of the cube. This way, it gets rid of the issue of blowing up less significant parts of the image. This eliminates geometry distortion and doesn’t have redundant information like equirectangular projection. It is also easier to project since each face is mapped to corresponding face of the cube.

This is great news since we can reduce the cost of storing and serving the content. It would become more apparent when we are serving the content at huge scale.

Images directly from 360 cameras and panorama apps usually output them as equirectangular images since the stitching is more straightforward. To convert them to cubemap requires additional processing.

Processing the images

You can process the image individually on your computer, but it would become cumbersome quickly when you have to process multiple images. A server based solution would be more appropriate for this.

Building 360 player

Now that you have 360 images optimized for viewing, let’s look at how to display the 360 media.

From my interactions with people interested in VR, I have noted down what people want most when they want to showcase their 360 content. Like we explored before, using Facebook or YouTube doesn’t really solve the problem. What we need is a customizable, brandable and flexible 360 player with certain features.

Supporting 360 virtual tour

One of the common use cases of 360 images is to create a virtual tour using 360 images. Typical use of this is in real estate where, the user can navigate through the photos to view the 360 photos of each area of the house.

Gallery of 360 content

Not every batch of 360 content doesn’t need to be a virtual tour. Sometimes, you just want to display a bunch of 360 images as a gallery.

Performance

Performance is really important for our 360 player and it should work properly on all platforms. This means managing the memory and reducing the size of the player so that it loads fast.

VR mode

There are two ways to consume 360 content. One is with a VR headset and one is without. If you’re not using VR headset, then you can move around the image using mouse, touch or device orientation.

To view using a VR headset, specific code needs to be written to manage that. For example, if you want to view it on the web, then WebVR should be used so that it works correctly across the different headsets.

It should also handle navigation inside VR. The most popular one is using a reticle. This simulates the effect of clicking using mouse when you’re on desktop.

Customizing and branding 360 player

A 360 player for businesses should also should be flexible to customize the player. Let’s say National Geographic want to display their branded 360 content. Then the primary player color should be yellow. A logo of National Geographic should be placed on top of the viewer. An optional title can be included.

A lot other options can also be included like autorotate, title, subtitle, logo url, and so on. If you can think of more customization options, let me know.

In the next article, I’ll talk about how to organize the backend to manage 360 content and how it improves performance.