By Sue Smith

December 16, 2021

Create your own reality on Glitch

*Illustration: ~koi-garden by @adarosecannon

The real metaverse was the friends we made along the way: here’s a look at how Glitch creators have created hundreds of thousands of VR and AR experiences. #

Whether you’re into Virtual Reality, Augmented Reality, Mixed Reality or some other new form of reality we haven’t discovered yet, Glitch is home to a thriving community of creators exploring the boundaries of 3D content. In fact, Glitch is home to one of the largest communities of XR creators in the world, with hundreds of thousands of projects created by artists, coders and designers.

You’ve probably heard a lot of talk about VR recently (especially as hype and attention around the metaverse has jumped in recent months)! The good news is, for the Glitch community, the metaverse has already been with us for years. So let’s take a look at the frameworks developers are using to build WebXR–and discover some incredible Glitch community apps along the way. Stay tuned for tomorrow, when we’ll share a really fun starting point for creating your first WebXR experience, and even offer a sneak peek at how we’ll be improving the XR creation experience on Glitch in the new year.

Like everything on Glitch, creating XR happens thanks to open standards and open code. And you can view them all on standard devices, ranging from your regular web browser to the fanciest 3D headset. Let’s take a look at some of the best tools, all of which you can use for free.

What is WebXR? #

The term WebXR refers to “eXtended” or “cross” reality experiences you can access on the web. The X is there to represent a broader range of applications than Virtual Reality (VR) alone. Where VR creates virtual worlds, Augmented Reality (AR) overlays the physical world, and Mixed Reality (MR) is a hybrid of both. So WebXR creates these on the web–which means you can access them through your browser. Still confused? You’re not alone, but here’s the thing–it doesn’t matter, you can still try VR! (lol, there won’t be a test.)

As a user, you can try these experiences out on a computer, phone, or VR device. The apps can utilize client info from the device, allowing developers to create responsive, immersive experiences, for example, tailoring behavior to user position and movement. The standards for building WebXR support headsets like Oculus, Google Cardboard, Samsung Gear, and HTC Vive among others.

Creating WebXR applications can involve a seemingly overwhelming variety of techniques and technologies. However, it’s surprisingly easy to get started, and luckily you can see a ton of amazing demos on Glitch, where the creators have made their source code available openly for you to learn and remix. Let’s dive in.

WebVR, WebXR, and WebGL APIs #

A-Frame Gallery

~aframe-gallery in the browser on mobile before entering AR or VR mode

The gist of WebXR is that you can access it on the web, by navigating to addresses in your browser, just like you would to visit websites. This is possible because the supporting technology is now built into browsers like Chrome and Firefox. Mozilla initially led development with the WebVR, WebXR, and WebGL APIs:

Three.js and Babylon.js #

Shaderify

*~material-shaderify by @manthrax

The virtual world is rendered in three dimensions: Three.js and Babylon.js are common JavaScript frameworks that help developers to describe those spaces by utilizing WebGL in the browser.

3D graphics require extensive mathematical calculations and can therefore be challenging to code directly in WebGL. Graphics frameworks built on top of WebGL abstract the process, making them more accessible to code in. They also provide a camera view that WebXR experiences are able to incorporate in order to build the immersive world. These libraries only take care of the graphics and rendering for AR and VR experiences, so you’ll use additional frameworks to create interactive apps.

A-Frame #

A-Frame allows you to build VR on top of HTML, so you can create WebXR experiences just by including a script and markup in your web pages–check out index.html in the ~aframe base project on Glitch, it genuinely just looks like an ordinary web page!

A-Frame is an open source framework that uses Three.js in its implementation, and you can manipulate it using JavaScript just like other web applications. In A-Frame you can write cross-platform VR apps that users on multiple device types can access.

Networked A-Frame

*~networked-aframe by @haydenjameslee

A-Frame allows you to build WebXR experiences by including elements in the body of an HTML page to define a scene. This makes A-Frame remarkably low-barrier to get started with–if you’ve ever written HTML you can write A-Frame code. Above and beyond this, A-Frame gives you the ability to use the DOM APIs as you would when developing a standard web app. It also benefits from a visual inspector built right into the browser dev tools that helps develop and troubleshoot your scenes.

A-Frame uses an Entity-Component-System architecture, which is common in game development. You create scenes by declaring entities, with the attributes acting as the components (they define characteristics like geometry, material, and position).

Device platforms #

A Toon Ocean

*~a-toon-ocean by @adarosecannon

Since WebXR is very much a joint effort between hardware manufacturers, browser developers, and software frameworks, you’ll find useful learning resources and apps being generated by teams working on device platforms, like Samsung Internet. These teams are also involved in the W3C working groups focused on developing support for building immersive experiences on the web using the standard APIs.

Supporting tools #

We already learned that creating 3D spaces is complex. While you can define scenes purely using A-Frame markup elements, once your apps get beyond the basics, they’re likely to include assets created externally. Graphical models using GLTF (GL Transmission Format) describe a 3D model as a node hierarchy, together with materials and shaders. GLTF files themselves are coded in JSON, but they typically rely on external resources including GLB (binary) files describing geometric info, and can include image resources in formats like JPG and PNG. Developers and WebXR artists use a variety of specialist tools to build GLTFs, such as Blender.

Showcase #

There is a staggering amount of WebXR development on Glitch–we’ve highlighted a few throughout this post but be sure to check these projects and user profiles out:

**Experience them all in the community showcase playlist**!

When visiting a WebXR site in your browser, make sure you use https:// so that it can access the relevant device sensors.

Next steps #

Hopefully this post has given you a clearer sense of how the pieces in WebXR fit together and introduced you to some cool examples of what people have built with them. We’ve been delighted to see the WebXR development on Glitch and want to support the growth of this community of creators with some exciting editor developments you’ll see in the new year.

If you like what you see so far and want to try WebXR development yourself, check out the ~xrxmas festive scene, and for more in-depth learning our intro to WebVR starter kit. The A-Frame team and community have made getting into WebXR development incredibly easy with a host of Glitch projects you can dive into–tomorrow we’ll share a tutorial on remixing the ~aframe base project to make a holiday greetings card!