How are we building this app?

Unlike regular video that has a rectangular frame, 360 video has the shape of a sphere. So, we first need to create a spherical screen to project our 360 video onto. The player (or viewer) will be located inside this sphere and will be able to watch the video in any direction. The steps below should make you feel empowered to make your own changes, by explaining how it all works under the hood. For step-by-step instructions

Step 1: What You Need

An Android phone with a gyroscope to sense head movements, running on KitKat or newer OS.

A Cardboard headset. If you don’t own one, you can find many on Amazon for less than 10 dollars.

Unity3D, a cross-platform game engine, that you need to install on your computer, version 5.6 or newer. We will use this software to build our whole project.

The GoogleVR SDK for Unity, which you can download beforehand.

A 360 video. Shoot one with a 360 camera or you can find 360 video on Youtube,Facebook or Any 360 Video Website

Step 2: Build a Sphere

First, let’s open a new Unity Project if you are starting from scratch (or a new Scene if you want to integrate the 360 video player in an existing project.) Think of a Scene as one level of a video game, and a Project as a full game.

Afterwards, add a sphere object in the Scene, placed at its center (Position = 0, 0, 0), with a radius of 50 (Scale = 50, 50, 50). The Camera’s position should also be set to 0, 0, 0. The Camera is the player/viewer’s eyes so we want it at the center of the Sphere. Placing it elsewhere would make the video look distorted. Once the Camera is placed inside the Sphere, the latter is no longer visible in the Scene. Don’t worry, there is an explanation for that! Indeed, most game engines do not, by default, render by default the inner side of 3D objects. This is because we rarely need to see them, it would be a waste of resource to render them. We’ll fix that next.

Step 3: Flip the Sphere’s Normals

In our case, we do need to see our Sphere from the inside. That’s the whole point of the app, so we are going to turn it inside-out.

In Unity, spheres are not actually spheres (what? We’ve been lied to all along!), they are polygons made with thousands of teeny, tiny facets. The external sides of the facets are visible, but not the internal ones. For that reason, we are going to make a program to flip these little facets like pancakes. In 3D geometry, we call this transformation « reversing normals » or « flipping normals ». We’ll use a program called a Shader, that we’ll apply to the Material of the Sphere. Materials control the appearance of objects in Unity. Shaders are small scripts that calculate the color of each pixel rendered, based on lighting and information pulled from their Materials. Hence create a new Material for the Sphere, then a new Shader applied to this Material. We need to write custom code for the Shader… but have no fear, you can copy-paste the code below:

Click this Link for Code --> Link

This little Shader is going to turn each pixel of the sphere inside out. Now our Sphere appears like a big white ball, viewed from inside, within our Scene. The next step is to turn this white sphere into a video player.

Step 4: Project Your 360 Video Inside the Sphere

Here you need to have a 360 mp4 video on hand. Import it in the project, then drag it onto the Sphere. And that’s when the magic happens: a ‘Video Player’ component appears and boom, the video is ready to play.
You can play with the settings like loops and audio. It also supports streaming!

Step 5: Set Up Google Cardboard ?

In this step, we’ll make the experience really feel immersive. That’s why we want to view it in a VR headset, here a Google Cardboard.

We are going to create a “stereoscopic” view (the screen will be split in two, with some fisheye effects on both sides — one side for each eye), using the GoogleVR SDK. The fisheye effect on each eye, combined with the distortion of the Cardboard’s plastic lenses, is what gives you the illusion of depth and immersion.

To add the GoogleVR SDK to our project, download and import the plugin, then we’ll adjust a bunch of Android settings:

Go to top bar menu > File > Build Settings. Add your open scene if it isn’t already added, then select Android in the list of supported platforms.
Click on Switch Platform. It should take a little while the first time you make the switch.
Click on Player Settings. Components appear in the Instructor panel.

In the Player Settings’ Instructor, under the ‘Other Settings’ section:

Check Virtual Reality Supported. Under Virtual Reality SDKs, select the + icon, then select Cardboard to add it to the list.
Enter a package name into the Bundle Identifier field (for example, com.yourdomain.demo360). It has to be unique and is used to distinguish our app from others in the Google Play store.
Set the Minimum API Level drop-down menu to “Android 4.4 ‘Kit Kat’ (API level 19)”.

Afterwards, take the ‘GvrViewerMain’ element from the GoogleVR\Prefabs folder in the Project Browser, and drag it into the scene. In the Inspector, give it the same Position as the center of the Sphere — (0, 0, 0).

The GvrViewerMain prefab controls all VR Mode settings, such as adapting the screen to the Cardboard’s lenses. It also communicates with your phone’s gyroscope to track your head movements. When you turn your head, the Camera and what you see also turn inside the 360 video player. Now you can look in all directions when the video is on and the screen is split in two, to accommodate both lenses of the Cardboard.

Step 6: Run the App on Android ?

For our final step, we’ll run the app on an Android phone and share it with friends!
There are two ways to do that: Go back to File > Build Settings. You can plug an Android phone with a USB cable to your computer and click on Build & Run. This installs the app straight to your phone.The other option is to click on Build only. This does not install it on a phone, but instead generates an APK file. You can share the APK by email with anyone who wants to try the masterpiece you just built. They have to double-tap on the APK attachment to install it on their phones.During the build process, you may be asked to select the root Android SDK folder. If that’s the case, download the Android SDK then select its folder location. Launch the app, pop your phone into a Cardboard headset, you’re good to go! You can replace the video with anything in 360 format and experience VR 360 immersion at home.

Going Further

Congratulations, you made a 360 video app, and you are one step away from creating a VR video app! While the terms are often used alike, 360 and VR define two different experiences: 360 video is recorded from all angles, with a special camera or an assembly of multiple ones. The user can watch in any direction desired, but there’s no interactivity to the experience.VR usually refers to a computer-generated environment in which the user is immersed. It is an interactive experience: the player can move around and control objects, in addition to looking in all directions.

Step 7:

Your new app can serve as a starting point to build a richer VR experience. Unity has plenty of features you can leverage, such as adding 3D elements or cool particle effects ✨ to overlay and enhance your video, or throwing in some interactive elements.

Step 8: Not a Step Walking Script (Optional)

You can also place a full 3D environment inside the 360 video player and use the latter as a skybox. The user can navigate in the scenery, using this nifty walking script.