Getting Started with WebAR

What is WebAR?

WebAR is the term given to the technology which enables Augmented Reality on Web Browsers.
Using WebAR, developers can show 3D models on websites just like they display images. This can be a single image like a portfolio website or it can be a catalogue or gallery of images like on any e-commerce website.

In this post, we will dig deeper into how to use this technology on websites.

3D rendering under the hood

3D Graphics has been around for decades now. As more powerful graphic processors became available, gaming experiences such as Call of Duty, Forza, Need For Speed became more feature-rich with powerful display and rendering.

To leverage these powerful processors, Graphics Library specifications were provided which developers can use for building their games, apps etc. One of them being OpenGL.

However, browsers were not equipped to take advantage of these GPUs or required external plugins/extensions to use OpenGL.

To solve this problem, WebGL was created. It is a low-level native Javascript implementation of the OpenGL specifications that allows browsers to use GPUs natively in the HTML5 <canvas> element.

Even though WebGL provided the required interface for browsers, it is a very low-level API that would need writing a lot of code even for a basic line or triangles rendering.

This is where libraries such as Three.js come in. Three.js built on top of WebGL and provided high-level concepts such as Scene, Object, Geometry, Mesh, Camera etc. These libraries provide high-level APIs to make it easier for application developers to build 3D objects and games online.

Augmented Reality on the Web

Leverage 3D graphics libraries such as Three.js, several open-source libraries have appeared in the last few years to render AR models via Web Browsers. Popular ones being

1. modelviewer.js
2. AR.js

These libraries download the AR file from server and display in your space using WebXR APIs which has been provided by both iPhone and Android.

Embedding AR Model on Browser

Both Google and Apple have provided WebXR support on their phones. Along with that, viewers have been made available as well. These viewers internally use ARKit and ARCore to process camera view and overlay AR content on top of it to give a seamless experience.

AR Quick Look – iPhone ARKit
Scene Viewer – Android ARCore

Code Example

Thanks to the modelviewer library, embedding an AR Model is as simple as using a HTML tag with few attributes.

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<!-- Use it like any other HTML element -->
<model-viewer alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" src="shared-assets/models/NeilArmstrong.glb" ar ar-modes="webxr scene-viewer quick-look" environment-image="shared-assets/environments/moon_1k.hdr" poster="shared-assets/models/NeilArmstrong.webp" seamless-poster shadow-intensity="1" camera-controls></model-viewer>

When this view is displayed on AR-enabled devices, it will show a button View in your Space. Clicking on this will start the AR View (Quick Look or Scene Viewer).
The first step would be detecting a plane. This is where AR analyses the surrounding. Once the plane is identified, the object will be placed in the view.

Try it yourself

Model Viewer has put a number of examples to try. https://modelviewer.dev/examples/loading/index.html
Search animal Tiger on Google in mobile and they click on View in 3D to see how Google plans to bring AR view directly on the search page.

Sketchfab

Sketchfab provides a library of 3D models which are AR-ready created by 1000’s of creators around the globe.

Nike Air Jordan (4K & UHD) Sneakers by alitvinenkoo13 on Sketchfab

Conclusion

The technology behind AR devices has improved greatly over the past decade. We have come to a point where consumer-level applications have become a reality without having to learn 3D development or Game development.

WebAR has a lot more potential than App-based AR. This is also where Meta’s Spark AR Studio is coming which will make Instagram, Facebook platforms AR ready and display AR content.

Our portfolio

BitBute Team has been focused on AR since the beginning. For demo purposes, see the following

Make My Apparel – AR Ready E-commerce website that can display 3D models using Web AR.
AR Board Game – Building a Board Game using ARKit