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?
And the answer is yes, and you can easily do it too, using existing libraries and frameworks for web development. The Oculus Rift, Samsung Gear VR, HTC Viva and more are making a lot of waves right now, but you don’t have to spend hundreds of dollars on a VR headset. If you are a JavaScript developer, you can play with this now, in a few minutes: just get a smartphone, slip it into a cardboard and you’re ready to go. What’s the first thing you need to make a DIY web project to experience Virtual Reality with already known technologies and frameworks?
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
The first thing you notice when you open the app is a scene of glowing balls of light (particles) floating around our head. All the magic happens with the help of Three.js, a fantastic 3D JavaScript library that makes rendering 3D in the browser much simpler to grasp.
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.
Want more? Read more on our blog or follow us on Facebook or Instagram accounts if you want to learn more cool tech stuff or find out about frameworks for innovation.
No Comments