A look at WebXR and its frameworks as an important future of XR technology.

#webxr #babylonjs #webdev #javascript

What is covered in this article?

In this article, we'll look into a future of Extended reality (XR) technology; specifically WebXR. This will be a light overview for developers, newbies and enthusiasts alike willing to explore the side of XR focused on creating 3D, VR and AR experiences on the WEB thereby making XR accessible via web browsers such as Chrome and Firefox, reducing the need for an expensive VR headset and increasing accessibility. We'll also look into two major popular WebXR frameworks - Aframe and babylonjs, see some advantages they offer and how easy it is to get started with them, with a few key details.

Quick definitions: skip ahead if you must

Glitch: This platform is a lifesaver, it provides a free online code editor as well as website deployment and hosting. As you would be finding out in the course of this article, Glitch allows you to remix (i.e. create a copy) of existing projects and make them our own, so you have something to start with. Examples made in this article are available for you to experiment with on Glith. enjoy.

Gltf/Glb: glTF is a derivative short form of Graphics Language Transmission Format, it is a standard file format for three-dimensional scenes and models. A glTF fileis usually the best file for WebXR compared to fbx, obj or other similar 3D filr format.

WebGL: this is a JavaScript API (application programming interface) for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins, many useful frameworks have been built on it

Three.js: A framework built on top of WebGL which makes it easier to create 3D graphics in the browser, it uses a canvas + WebGL to display the 3D scene.

Virtual Reality (VR): The use of computer technology to create a simulated environment is known as virtual reality (VR). In contrast to typical user interfaces, virtual reality immerses the user in an experience.

Augmented reality (AR): Snapchat and Instagram filters rely on augmented reality technology, AR is defined as enhancing the physical world by incorporating digital elements in real-time to create a 3D experience.

Extended reality (XR): XR is an umbrella term for all immersive technologies (AR/VR/MR).

Introduction
Before we go on, meet Jaimee a cool Seagull enjoying his music and having his fun after being loaded as a gltf (see definition above) model from Babylonjs Mesh library to a web browser using Aframe a nifty framework for building virtual experiences on the web, to see and interact with Jaimee click this. HERE is the code fully available to you on Glitch the free online code editor for you to experiment with.

Extended reality technology is on a sure path to becoming one of the most important tools to help navigate daily, personal and professional parts of our lives, which makes it no surprise the iPhone is an AR powerhouse in people’s pockets, its powerful processors and chips, spatial audio, LiDAR sensor that scans spaces and can create 3D maps are amongst the many capabilities carved into the device than the average user is aware of or ever uses, which makes many wonders why they keep pushing the power and capabilities of Apple devices. I am sure there are many reasons, both simple (a bid to stand out amongst others) and complex, but what they all result in is the availability of XR technology for as many people as possible. XR isn’t always about big headsets or smart glasses, XR experiences can be and are being delivered via mobile devices and web browsers. As a developer and strong advocate of XR, my biggest dilemma has been how to improve accessibility for XR, especially in the African continent. XR shouldn’t be just for those who can afford or have access to VR headsets, nor should it be just for those who work for companies rich enough to afford the Hololens, everyone should and must have access to the technology and be exposed to its impact, be it in learning, gaming or performing daily activities. This is why I find WebXR interesting and worth exploring. With powerful frameworks like Babylonjs, Aframe, THREE and many more, granting the average person/developer the ability to deliver XR experiences on web browsers, a substantial amount of people who may not have the funds to get headsets nor afford the latest iPhone, can access XR experiences via there web browsers. WebXR has shown itself to be an integral part of XR technology especially when it comes to adoption.

Harnessing the power of your web browsers
WebXR harnesses the power of the web along with the unification of XR realities, under one philosophical tent, making it easier to build interactive environments, immersive 3D arts, VR tools and more, which are compatible across browsers, operating systems, and devices. The goal of WebXR API is to allow the rendering/showing of XR content on browsers, it doesn't care how the content is created or what device is used to view it, making it so that developers can utilize whatever libraries are best for their needs and develop on top of it. You do not necessarily need to be familiar with C# or C++, which VR developers used to need to build projects in Unity and Unreal, with WebXR, people with basic knowledge of web development tools - HTML, CSS and JS know enough to get started.

The WebXR Device API is the primary conduit by which developers can interact with immersive headsets, AR eyeglasses, and AR-enabled smartphones, major web browsers have been focused on integrating XR features into their ecosystem, browser support has sped up adoption and encouraged the building of new and more powerful APIs to support XR. Browsers like Chrome, Microsoft Edge, firefox… etc now lead the battle, with WebXR support added to the most recent versions of these browsers making development and testing extremely easy. This article will be in series, I will be explaining what WebXR is and provide helpful resources for getting started with it in this series, then we will go on to creating projects subsequently.

Choosing the right Framework for you - Tools for developing WebXR apps
It is a sensible rule that you don't have to start from scratch when you have tools to assist you with your tasks. Frameworks are pieces of software that developers create and utilize to make creating applications as easy as possible. In the WebXR context, examples of frameworks readily available for you to start building immersive experience in no particular order are A-frame, Threejs, Babylonjs, Modelviewer, PlayCanvas, Godot...etc. game engines such as Unity and Unreal also support WebXR development although to a limited and growing capacity. Choosing the right tool for yourself should be based on the sort of experience/knowledge you already have, the sort of immersive experience you wish to design and the framework that has the right components to meet your needs, it would be a good idea for example for those with little to no knowledge on programming or with just a base knowledge on HTML and CSS to design experiences with a simple tool like A-frame while those with very deep knowledge in programming could use three.js, which provides far more robust features and flexibility than A-frame. If you are already a unity3D developer, it might also be a good idea to pick a framework that works with unity support, so you could leverage past knowledge and experiences in your immersive experience design journey. One way or another, it is important to remember that WebXR is fast growing with new and enthusiastic developers joining the ecosystem daily with enough documentation and examples available to get just about anyone started irrespective of their previous experience. For this article I will focus on just two frameworks, Aframe and Babylonjs, Enjoy!

Passing through A-frame
Before we get into it, the image below is a screenshot of the first scene I made with Aframe, as a big fan of space, I decided to recreate the earth, as realistic as I could, with textures and a fantastic space skybox. Click this to see how the journey turned out. HERE is the code on Glitch for you to experiment with.

A-frame is an open-source web framework for creating virtual reality experiences on the web maintained by Supermedium and Google developers. Being based on top of HTML, A-Frame is accessible to everyone because HTML is easy to read, understand, and copy-and-paste allowing web developers, VR enthusiasts, artists, designers, educators and kids to use HTML to construct 3D and WebVR environments. In other words, A-frame can be developed from a plain HTML file without having to install anything, right there on your browser. With a simple script editor like Glitch, you can build an XR environment, create beaches filled with sand, construct celestial bodies to mimic the solar system… etc. The A-frame library not only supports the rendering of 3D images, objects, and models, it also includes event handling scripting. Gaze events, for example, can be handled to detect when a user is staring at a specific object. You may move parts around, activate physics for items to bounce off of one another, and even integrate 3D spatial sound (sound effects that trigger and get louder/softer as you get closer to certain objects).

A-frame is simply one of the simplest tools to start with, the example above shows my first attempt at making an estimated model of the earth, with the right texture and skybox (spacelike background) to fit, this was made when I was just getting introduced to the framework, I made many mistakes and I made sure I made them early and learnt from them. Practical learning includes observing and doing things yourself, as you would notice, this approach to what I set out to achieve thought me a lot about importing files into Aframe, assigning textures and more. A-Frame's fundamental components are readily available to you include geometries, materials, lighting, animations, models, raycasters, shadows, positional/spatial audio, text, and controllers for most major headsets; these definitely get you started quickly. Hundreds of community components, such as environment, state, particle systems, physics, multi-user, oceans, teleportation...etc. all available for your learning and use in your projects.

Why consider using A-frame on a project?

It is easy to build with and test due to how it leverages Glitch.
There are many examples and resources to remix and build from.
It has a huge and supportive community.
It has a lot of learning resources.
It has unity support( unity-to-aframe ): which I tried but didn't stick around long enough to learn it in-depth.
It has a built-in A-frame inspector, that should be familiar to Unity and Maya users, which allows more flexibility and agile development.
Cool projects built with aframe: SoundBoxing WebVR, Hubs by Mozilla.

To put it simply, with A-frame you can build and deploy an XR experience on the web within minutes, I guess this was why it was the first tool recommended to me online when I wanted to begin my WebXR journey, I loved the simplicity of the framework and would recommend it for fast prototyping, although I believe a lot still has to improve with the framework and its community.

On to Babylonjs
I created the Hell on set scene below drawing inspiration from a similar example on Babylonjs playground, see how cool Babylonjs is? Click this to see how the journey turned out. HERE is the code on Glitch for you to experiment with.

After spending a few weeks with Babylonjs, I have to confess that I have become a very big fan and a bigger fan of its community and extremely powerful sets of tools, so forgive me for my bias. Babylonjs was first released in 2013 under the Microsoft Public License, having been developed as a side-project by two Microsoft employees, David Catuhe and David Rousset, with the help of artist Michel Rousseau as a 3D game engine, since then it has warmed it's way into the hearts of many developers, becoming one of the most popular 3D game engines for the Web. Being a robust 3D library, it provides very useful built-in functions such as Sandbox, Node editors, particle effects and the popular Playground, these functions help you implement common 3D functionality in efficient and accurate ways. It was developed using TypeScript language based on WebGL and javascript.

Babylonjs has enough resources, documentation, examples and tools to get started with, on their playground (PG) you can design, develop and test your experience right on your browser (instead of having to use a code editor like VS code), you can also download directly from the playground snippets of codes, particle effects and animations and plug or reuse them in entirely different projects with ease. Experimenting with babylonjs has been fun, interesting and intriguing, I personally found it easier to achieve the things I set out to do compared to Aframe, it was a tidbit harder to connect my Babylonjs experiments to HTML outside the playground, but looking back now, I would say it isn't hard at all, it just took me longer to figure out but the journey was mightily rewarding. The best way to pick Babylonjs up, after you've done your research and determined it is the best tool for your solution, is to start from their Documentations, it is structured with tons of examples to try out right on your browser. Including XR functionalities that would work across devices, including oculus quest just requires a few lines of code, the Babylonjs framework truly made life easy.

Why consider using Babylonjs on a project?

Amazing Community: the thing I love most about using babylonjs is the huge, active and extremely helpful community. Always ready to provide help when you are stuck.
Playground: The playground is a very useful tool, like Glitch it allows you to build experiences from almost any device that can access the web, saving, sharing and changing your code on the go. It has a lot of learning resources and readily available assets, you usually do not have to start from scratch, there are thousands of playground fully functional examples and assets, ready for you to effectively utilize. 4.Cool projects built with babylonjs: Speedboard by Mercedes-benz, Shiba inu token to the moon, Temple run 2 by Imangi Studios, Marble tower on PG... etc. Here for more.

Conclusion:
My intention for this series is to at least show you the possibilities and the opportunities provided by these powerful frameworks and to also provide a brief knowledge to prepare you for future series which will be dealing with creating simple, useful and reusable experiences on the Web. you do not have to be a developer to have an interest in this, WebXR is universally available as more people have access to web browsers than XR headsets, which means it is increasingly becoming an important segment of XR driving adoption. Much to write, but until the next keep learning.