Augmented Reality (AR): Do more with the browsers?
Today’s web browsers have come a long way since the days of Sir Tim Berners-Lee and his Nexus software. Thanks to fantastic JavaScript APIs like WebGL, modern browsers are fully capable of rendering advanced 2D and 3D graphics without help from third-party plugins. By leveraging the horsepower of dedicated graphics processors, WebGL gives our web pages access to dynamic shading and realistic physics. Emanating from an effort to constantly explore, we at Globant are thinking what if we can achieve more than this?
Why Web ??
There are 2.71 billion smartphone users in the world, and it keeps growing day by day.
The analyst has estimated it can zoom to half of the world’s population in the coming years. Now just sit back and think this as an opportunity, what if you can deliver this great Immersive user experience to them via PWA (Which is powered by browsers)?
The pervasive nature of the web is an ideal choice for the technology to reach to the masses. Instant access to an immersive experience over the browser would help various businesses to be able to connect to its end users much faster.
Imagine a shopping hyper-market where All you do is pull up your phone, hit a URL on your browser to open up the store’s page instantly that could allow you to scan the merchandise and provide relevant information then and there in an augmented way to make it easy for you to shop. This would entirely cut short the pain of going to the app store to download an app to get the same experience over the native platforms. Moreover, the experience can be enhanced seamlessly as the web can be upgraded behind the curtains.
Native apps are currently dominating the market of Immersive experience and it has its own pros and cons, While each day browser’s specification is adopting a new way to provide the best user experience.
“I do think that a significant portion of the population of developed countries, and eventually all countries, will have AR experiences every day, almost like eating three meals a day. It will become that much a part of you.” — Tim Cook
Can a Merchandise Manager get rid of Fitting rooms in his store?
Aren’t these creations amazing? Who wouldn’t like to give this bizarre(but delightful) experience to the end users!
W3C is working on a new browser specification that has been used by many frameworks and libraries to support AR-VR on the web. This is opening up to support the following on the web:
- 360 view
- Virtual reality
- Augmented reality
- 60 FPS animations
- Gaming
Top tech companies like Google (ARCore), Apple (ARKit), Mozilla (A-Frame), Facebook (React360) and Microsoft (Babylon.js) are putting huge efforts to bring AR-VR into browsers to bring a seamless and immersive user experience at scale since the web is highly scalable and universal.
In this article, we have listed a few most promising frameworks and libraries aiding more to the web by way of bringing immersive experience.
React 360 supports 3D and VR user interfaces. As it is built on top of React, it allows you to use familiar tools and concepts to create immersive 360-degree content on the web. If your application is driven by user interaction and has many 2D or 3D UI elements, React 360 will provide the tools you need. Photo and video viewers, 360 tours, classic adventure games, and 3D board games are all examples of things that have been built with React 360 so far.
Three.js was created with one goal in mind: to take advantage of web-based renderers for creating GPU enhanced 3D graphics and animations. As such, this framework employs a very broad approach to web graphics without focusing on any single animation niche.
This flexible design makes Three.js is a great tool for general purposes web animations like logos or modelling applications, and on top of that it allows to use .glTF assets <<link>> which is very efficient in transmission and loading of 3D scenes. A glTF asset may deliver one or more scenes, including meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and/or cameras. An interesting example of loading glTF using ThreeJs.
Where Three.js attempts to bring a wide range of animation features to the WebGL table, Babylon.js takes a more targeted approach. Originally designed as a Silverlight game engine, Babylon.js maintains its penchant for web-based game development with features like collision detection and antialiasing.
Babylon.js subtly differentiates itself by focusing on traditional game engine requirements like engines and custom lighting.
A-Frame is a web framework for building virtual reality (VR) experiences. A-Frame is based on top of HTML, making it simple to get started. It is not just a 3D scene graph or a markup language; the core is a powerful entity-component framework that provides a declarative, extensible, and composable structure to three.js
It supports most VR headsets such as Vive, Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard, Oculus Go, and can even be used for augmented reality. A big plus is that the A-frame community is very active — more experienced developers are frequently adding new components to the library.
WebVR is a JavaScript browser API that acts as an interface for the VR hardware. WebVR is cross-platform and can be used to develop, view and share VR content on any browser that supports VR. The WebVR API provides interfaces to VR hardware to allow developers to build compelling, comfortable VR experiences on the web.
Imagine if you can build a virtual classroom that lets you train new employees around the world, or you can build a virtual environment that enables people to tour Burj Khalifa remotely. With Amazon Sumerian which based on Web VR, one can build highly immersive and interactive scenes that run on popular hardware such as Oculus Go, Oculus Rift, HTC Vive, HTC Vive Pro, Google Daydream, and Lenovo Mirage as well as Android and iOS mobile devices. WebXR makes it easy to create all the building blocks needed to build highly immersive and interactive 3D experiences including adding objects (e.g. characters, furniture, and landscape), and designing, animating, and scripting environments.
One can build a virtual classroom that lets you train new employees around the world, or you can build a virtual environment that enables people to tour a building remotely. We @ Globant explored the potential of web Vr via Amazon Sumerian by creating an HR boat that has the personality, here is a glimpse of it.
8i is a volumetric video technology company that provides SDK to enable people to experience human content and each other in the most realistic way through holograms. With this SDK you can Create, distribute and experience volumetric video of real people that look and feel as if they’re in the same room.
Just look at the below scene, it is not from the game or pre-edited video.
It’s just a person’s hologram that is placed in the video and it looked so natural.
Takeaways and the path ahead…
The evolution of immersive experiences has already started touching lives of human in a variety of ways. Be it a virtual tour of an apartment, Google map’s street view or a 360-degree view of a car, it’s changing the way we explore the world with the greatest of such technology.
By using the immersive web technologies discussed, we @Globant are delving into creating interactive interfaces of the next generation as we do believe that such experiences are much more natural and have the potential to elevate the usability to the next level. We want to capitalize on the web as it has a more natural and universal reach making discoveries easy for the users.
Where do you think we are heading with Immersive Web? Tell us in the comments section below.
