Building webAR by <model-viewer>
Building webAR today is a difficult work. There are lots of way to achieve it, but each method has advantages and disadvantages, such as AR.js, tensorflow.js, webXR device api and so on.
Today I want to share a simple and fast method to build webAR. That is model-viewer ! 😄
What is model-viewer? 🤔
As the official said, <model-viewer> is a webComponent released by Google, which aims to rendering interactive 3D models and strives to give you great defaults for rendering quality and performance. It sounds good~
Maybe you will worry about its compatibility, so how about its compatibility?
It looks nice~ It is supported on the last 2 major versions of most desktop and mobile browse.
What can it do in AR?👀
We hava know its role and its nice compatibility. But what can it do in AR? There are several features about AR，such as ar, ios src, quick-look-browsers, magic-leap and unstable-webxr.
Each attribute has a different role.
For example, ios-src means what you load in ios. Usually, you should provide a file in .usdz format. USDZ is a image format created by Apple, we can enjoy Apple’s AR quick look with it. Actually, this is how model-view work in ios. When you run the app in ios, model-view will use the .usdz file, Apple’ AR Quick Look will display the 3d content in your .usdz file. If you want to get more information about Apple’ AR Quick Look, you can click this link.
The attribute ar means that allow model-view to launch scene-viewer. This often happens in Android. Because unlike ios, android does not have AR quick look, it relies on sence-viewer to achieve augmented reality on the web in this case. Sence-viewer is an immersive viewer that enables AR experiences from your website. It lets Android mobile device users easily place, view, and interact with web-hosted 3D models in their environment. If you want to get more information about Sence-viewer, you can click this link.
The attribute unstable-webxr means that enables AR experiences by webXR device api, but just like its name, it is unstable, because the webXR Device Api Specification is being defined. Beside, few browsers support this feature now. You can get more information here.
The attribute magic-leap, make you AR work on Magic Leap’s Helio browser. And Requires that the primary model be a GLB file, and the @magicleap/prismatic library.
Let’s build a webAR demo!😍
Now, you have know a lot about model-viewer, it is time to build a webAR demo by model-viewer. It’s very easy.
result😕
This demo is working well in iOS, but not well in some Android device. Because not all android device supports sence-viewer which depends on ARCore 1.9 and later. The iOS device is my iphone xr, and the android device is my mother’s Xiaomi. Unfortunately, the demo does not work in my mother’s phone. And this is a list about which android device support ARCore.
Thanks for reading! If you found this article helpful, it would mean a lot if you shared to help others find it! And feel free to leave a comment below.
