VR (virtual reality) and AR (augmented reality) are clearly the technologies of the year, but still widely inaccessible for most of us, although with often get the promise of easier access shortly. But who’s got time to waste? Virtual Reality (VR) means experiencing things through our computers/devices that don’t exist in your nearby environment. VR is a believable, interactive 3D computer-created world that you can explore so you feel you are there, both mentally and physically.
So, can we create a similar experience with traditional technologies like website development?
Cardboard. What’s cardboard and where do I get one?
What are we going to build?
We love using our rapid prototyping methodology to bring immediate experience using reusable components: and today we’re going to use it to rapidly create a proof of technology with ready-made components. We’re going to build a relatively simple, yet very pretty application that will display 360 videos. There is a working demo available here, all source code and such is non-minified and ready for you to look at and use however you wish. All of the source code is also available on QUALITANCE GitHub.
Starting your project
We are using the Ionic Starter Cardboard boilerplate, it’s easy to make it get up and running using Ionic, Three.js, and WebGL for a great VR Experience. Just follow the steps below to get started:
1. Install the ionic and cordova CLI tools using npm package manager. $ npm install –g ionic cordova $ ionic start video360 cardboard
2. Then, to run it, cd into video360 and run (you can use android instead of ios): $ ionic platform add ios $ ionic build ios $ ionic emulate ios
Adding a 360 video
How does a 360 video work? 360 degree virtual reality video / photography is not just a gimmick, it’s a whole new way of experiencing, contributing to the world, manifesting and, obviously, selling. Let’s just modify this boilerplate a bit so we can include a 360 video.
1. First let’s remove the floor and lights. You need to comment/delete the following lines of code in the app.js file located in /video360/www/js. Start and comment the code from line 129 to line 177. With this action we remove the lights, floor texture and the particles that appear in our screen.
2. Grab a 360 video Make a simple search on google and search for a free downloadable 360 Video. We choose for our example a tour in Dubai. You can find the same video here.
3. Add video 360 to our project After you downloaded the video, go into your project folder at location /video360/www and create a new folder named video, and copy downloaded video.
4. Add a SphereGeometry and render the video so it can be visible in 360 view Open the same app.js file edited in step 1 and insert the following lines at line position 96.
Let’s see the result:
You can run $ ionic emulate ios and view the results on the iPhone emulator or $ ionic serve to view the result in your browser.
Feel free to customize it with new videos and add your own preferences, or create a totally new visualization.
That’s all part of the fun! Ta-daaaaaa! By now you should have a pretty good level of knowledge in what’s required to get a 360 VR experience going in Google Cardboard and using web technologies to implement something so immersive.