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.
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
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
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.
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
Tigeron Google in mobile and they click on
View in 3Dto see how Google plans to bring AR view directly on the search page.
Sketchfab provides a library of 3D models which are AR-ready created by 1000’s of creators around the globe.
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.