Amongst all the different fashionable technologies, Augmented Reality and Virtual Reality represent a very interesting context which allow people to “really” live some immersive experiences. Both of them will see a rapid expansion in the next future since they both offer the opportunity of improving men’s abilities in domains of different competencies.
Augmented Reality and Virtual Reality
Augmented Reality consists in giving the user additional info about the surrounding environment, sharing details about the context the camera is looking at. It is used in different fields from tourism to marketing. It also gives useful insight about direction.
Google Maps, for example, has recently introduced such feature in its App, for the walking mode, to give its users more precise and relevant info.
Virtual Reality allows to create a 3D environment which completely simulates the real world. It can be therefore used in games or in any kind of simulations, but people are hoping it will give a lot of positive results in both the medical and people’s health fields too.
Different Virtual Reality applications already exist for fashion or engineering and also for the interior design space (think of IKEA), which allow customers to have an immersive 360 degrees visualization of what will be either realized or bought. It’s true that we have not got to the stage where we can actually try how comfy the sofa in the window of our favorite shop is yet but an option is already in place to virtually assess how the furniture will look like in your house before actually buying it.
Let’s deep dive into the technical details after this small introduction of such world and you will be learn more on how a voting app is realized.
The Available Technologies
The base of such technologies is the same: the option of designing and animating tridimensional shapes inside a web page.
The underlying technology is called WEB GL (Web-based Graphics Library) and it has been used on the web for a while now, especially to create games or specific graphic representations of data, such as dashboards and complex relations of different types of info.
To cut a long story short, the hardware used in modern devices and the way in which such hardware is being used by browsers, have helped to improve both the potentialities and the performance of graphic rendering softwares allowing users to use in a more interesting way the graphics on the web.
On top of all this, giant steps have been made in the communication and iteration amongst browsers and the sensors of devices, helping the web page to obtain different types of info regarding the position, the orientation and the movement of the device in respect to the external environment.
The so-called Open Source projects really helped this technology to evolve since they have given developers simple tools to realize attractive graphics. The most famous one is threejs (a JavaScript library and a programming interface of the cross-browser app used to create and visualize 3D digitalized and computer graphics in a Web browser).
Another one which is worth mentioning since it is widely used for data visualization with graphs and data trees is D3 (Data-Driven Documents, a JavaScript library to create dynamic and interactive visualizations starting from organized data which can be seen through a browser).
Starting with an experimental Mozilla project, followed by Google and whilst trying different options and possible solutions, we finally got to a definition of a standard called WebXR, which consists of a series of API, developer by browsers, to make the browser itself communicate with the physical device to be able to use the data of the sensors (accelerometer, gyroscope, proximity sensor and GPS).
At the same time, the browsers have tried to use in a more satisfactory way hardware accelerators and GPU memory of graphic cards to improve the performance and the fluidity of graphical contents in both 2 and 3 dimensions.
Voting Room, a 3D experience in a voting app
Because of the good level reached by 3D graphic, Interlogica have decided to experiment these options in a voting application – “Voting Room” – that the public of our Code in the Dark event can try. Code in the Dark is a “blind coding” competition happened in Venice last September.
The content and the setting were absolutely perfect for experimenting such tool! Randomly, some different super useful Open Source projects saw the light too which allowed developers to use simple tools to create environments and elements in both 2 and 3 dimensions.
On a technical level, the focus for the voting app was concentrated on two different libraries:
- AFRAME (Virtual Reality Framework) for Virtual Reality,
- AR.js (Augmented Reality experience) for Augmented Reality.
For the version 1.0 of the app AFRAME was chosen to create a 3D virtual environment so the space of the environment could be recreated during the contest. AFRAME allows you to choose different HTML tags which consent (through ThreeJS) to create environments and tridimensional forms.
The fundamental elements which allowed to design the environment of the contest were:
- sky: allows the creation of a 3D room with the option of using an image in the right way as a background of the room;
- camera: allows the simulation for positioning a projector inside the virtual room. It communicates with the sensors of the device, it helps movement around the room just by tilting the phone;
- light: allows adding light intensity, direction and variable position;
- entity: it visualizes 2D and 3D models. In this specific case Lego® characters were used, and they were the digital lookalikes of the participants of the contest. It was also used for the info panels during the event.
The knot to untie: the cross browser compatibility
Once all the objects have been developed and the right positions of everything are set in the environment, well, it seems as if there is not much left to do. Instead, the worst nightmare every developer has, becomes the harsh reality: cross browser compatibility!
Such technology is still being experimented and it is not consolidated yet: this means not all manufacturers and browsers are aligned on the same level of implementations. The most difficult element is surely the activation and the use of movement and position sensors of the device.
Different standards are now being developed but only the latest versions of Mozilla and Chrome seem to be aligned whilst Safari, for example, still maintains some particular features.
Android and IOS systems are becoming stricter (IOS especially), triggering the need of going through a confirmation from the user first before activating and using data of sensors in a web page.
With Android and iOS we won our challenge using the latest versions of both browsers. In some older contexts, some sensors had to be disabled (accelerometer and gyroscope specifically) and the touch sensor was used for capturing movement instead. In some rare cases, where APIs were nowhere to be found, we used our plan B: using a static and alternative pages for voting.
AFRAME provides a cross browser support which is quite good: it covers some implementing gaps but some extra work was however needed just to have full visibility on all the possible cases of malfunctioning.
A successful challenge. Interlogica starts experimenting new things
“Voting Room” did what it was created for, giving very few issues. It wasn’t that bad as a first experiment!
Using new technologies is a constant challenge but, because of our success here at Interlogica we have decided to continue, and we are already working on a 2.0 version of the voting application. We are also pondering on how to use such technologies in other contexts too.
You might also like:
Virtual Reality: the space is the story
Is our reality actually a simulation?
WEBASSEMBLY 1.0
