VR Development with JavaScript

by Sysco LABS Blog 30 May 2016

In this innovation session, Nirojan Selvanathan from the CAKE Reports team talked about developing virtual reality applications with JavaScript. The session covers an introduction to Virtual Reality, how the VR systems work, a demo on developing a VR experience using Three Js, and how VR fits into the CAKE ecosystem.

VR has become one of the hottest trending and heavily invested areas of computer science in the recent past. Virtual Reality (VR) is the use of computer technology to create a simulated environment. Unlike a traditional interface, VR places the user inside an immersive experience. VR works on follows principles similar to stage magic. If we can trick our senses, then our mind will eventually make it look real. VR tricks our brain into thinking the illusions we see are real by providing a stereoscopic view of the Virtual Scene. Sound plays an important part in creating a VR experience immersive. To have a truly immersive VR experience sound, Binaural Audio helps to deliver authentic sound experience to VR, and the real work movements are translated to Virtual world movements by using sensors such as accelerometer and gyroscope.

Immersive experience can be classified into four categories such as immersive photography, immersive video, 3D graphics and augmented reality. Few years back in order to develop VR applications we need to go native. Which means we need to develop device specific code. It’s similar to developing the same application in Android and iOs. And there was no common platform such as web to develop VR applications. So Mozilla Firefox spearheaded the movement called Web VR. This was an experimental API a few years back and new browsers now come equipped with this web VR. This API helps to develop VR application without having to worry about the multitude of devices in use.

The demo focused on creating a VR experience of the CAKE LABS engineering lounge. This is simply done by taking an equi-rectangular image (360 photo) of the scene or a 360 video and mapping this image as a texture on a sphere which we have created with three Js. Then the sphere is inverted so the outside plane will be on the inside. So whatever the texture we applied over the sphere will be on the inside of the sphere. Then we place a perspective camera inside the sphere in order to get an immersive photo/video experience. The perspective camera has been used to provide a first person view of the virtual scene. The stereoscopic plugin and device orientation control plugin were used to generate the stereoscopic view and to get the sensor data such as movement.

Virtual Reality can help the restaurant industry by providing an immersive experience of the restaurant before we decide to dine in the restaurant. When people make dining choices they don’t dine at the same restaurant for the entire year; they tend to switch restaurants in order to taste new dishes and to have different dining experiences. And when dining or organizing a party, one of the major concerns apart from food is the ambience of the place, how spacious is the restaurant, what’s the décor like etc. So by providing VR experiences of the restaurants in the restaurant discovery platforms such as, it will help the customer experience being inside the restaurant and make better dining decisions.

Leave a Comment