Top AR/VR Technologies for Web 3D Apps: Ultimate Tier List & Expert Insights #AR #vr #web3d #about3d
What is a best technology for web AR and VR? How to make a right choice and build a robust and scalable application? Hey guys, in this video we're going to talk about web technologies with a specific focus on AR and VR capabilities. I already have a video on my channel when I talk about 3D web engines and technologies and we already have a tier list but this one is a bit different. We will talk specifically about AR and VR and discuss which is better for what case. Let's jump in right there and start doing rates I will also provide a lot of feedback from our experience, share my expertise and this tier list will be a little bit special and you see why in a bit. Instead of having a tier list with A, B, C, something like that, we will not do that. Instead, we will sort them by purpose and that makes a lot of sense because most of the technologies that you might have heard of and you might know, most of them use the same basis.
For example, there is ARCore for AR preview that is used by half of the engines in this list. There is also WebXR that is supported by most of the engines like Three.js, Babylon.js etc. There is some unique technology based on WebXR plus WebGL or maybe some custom development like 8th Wall, for example.
Even Unity has a WebGL version that supports AR, etc. There is not much of a technology difference between some of the engines but there are differences on the level of how easy you approach the development. It is really important to know what case or what problem or what is your project about that you're trying to apply this technology.
That is a really number one question when you choose any of the technology because some of them may do some job fast but you will not or the solution is open source but you're not going to achieve the results you want. We'll talk in examples and I will show you some of them. Let's start for the first one, Three.js. Everyone knows Three.js, right? Most popular 3D library and Three.js basically have AR and VR support but that's not what this engine is about.
It supports WebXR. Again, WebXR is some sort of technology that allows VR, AR right from the browser. Three.js actually utilizes it. I will put it inside support because when it comes to tracking, space tracking, face tracking, location tracking or maybe some advanced VR experience, that's not about it because you will have to use additional libraries etc etc etc but Three.js is near to any other technology.
It's not an engine, it's just a library basically that just uses WebXR and it has access to AR and VR but within the WebXR capabilities. A little bit about WebXR. It has limited support right now per devices. Android devices have great support for WebXR but with iPhones still a lot of struggles. Some browsers support it as experimental technology. We hope any soon that Safari starts to support it as a standard.
Device-to-device WebXR is not really we're talking about like AR and VR experience to WebXR. There is also ARCore, we will talk just right after, that also have AR that can be connected to Three.js application but again that's a mix. Three.js by itself have access like to
WebXR from the library itself. So ARCore is basically a Google IP that have some deep linking and it's pre-installed on most of the devices right now like Android and Google devices, sorry Android and iOS devices. So the thing it do is when you have a deep link on your website. The good example here will be let me show you just right now.
So when we talk about ARCore one of the most common example of usage right of ARCore it is a model viewer and basically this model viewer is based on ARCore. So there's like when you open this from mobile you most likely will see a button here in the bottom and when you press it, it actually triggers your device. It triggers your device to open a device -based app that triggered that AR.
So basically you prepare 3D model in GLB and USDZ, USDZ for iPhones and GLB for Androids. This ARCore basically pushes this 3D model to your device and device know what to do with that. So like Apple USDZ format is specifically designed for AR preview right. Same actually works with Apple Vision Pro if I'm not mistaken. GLB also is recognized as AR format so that's how it works. The thing is that this might be connected or this API like let's say API like the Google API might be used by any of the engine.
You can combine it right. But the technology itself is ARCore and we should just know what is fundamental or a basis for other ones. So we should not think that there is a difference. They just use the same one. Okay so I will put it to the AR basic because this is not about VR. It's only about AR or just like simple 3D model preview doesn't support like VR in that way that we expect.
What else we have? A-Frame. That is something unique developed by Mozilla and it's still supported and which is nice and I will put it in AR VR basis. What is A-Frame? Basically a different way of 3D combined with AR and VR but it differs from Three .js but it also can be combined. But in fact it is very close to what WebXR have and it also have possibility to connect ARCore. Yeah but again ARCore is not really an engine is just a deep link to trigger a device to show AR. So if we prepare a model like 3D models like GLB and USDZ we can just trigger it within ARCore.
So it might be connected to any engine. But again that is used in a lot of cases in e-commerce where you need to preview a product. I guess that is much more robust than the WebXR that we discussed before.
So A-Frame VR and AR is like in my opinion smoother than WebXR and especially VR. So they have a lot of tools to make developments especially of like some simple simple projects very easy. And for those who are more familiar with React and something like that that will be maybe pretty much more convenient to use like compared to Three.js. So that definitely worth considering in case like you are going to the VR experience. For AR it is very basic extremely basic. So the next one will be AR.js
basically based on A-Frame. If you open the github they actually explicitly mentioned that. AR.js is basically an extension for A-Frame and what it does is that it adds some options to image detection right some world location detection etc. So basically tracking and by default it is not included in A-Frame.
But the problem with AR.js right now it is not really updated and compared to other technologies that we talked today it is not that advanced and not precise like in terms of tracking in terms of optimization etc. But in some cases it might be very useful and helpful to do something fast. So I will put it here right maybe like AR basis like basically yeah.
The next one Verge3D. This is basically something that is based on Three.js and the cool thing about Verge3D is that it have very convenient exports from Blender or 3DS Max or Maya right into the project and then you can run a project like just in a few clicks in browser right. But the thing is it based on Three.js is not much different from the technology perspective so it's definitely here if you are like a blender artist and you want to achieve some web experience very fast.
Yeah I mean just use Verge3D and you have it by by it supports like pure WebXR. So not only you can export just a single model but you can create something that happens like run animations maybe some actions etc. within WebXR and probably it's time to mention like one significant difference between WebXR as a technology and like ARCore and technology that just do preview right. And that's important like ARCore is a preview so like you basically cannot do anything like you you have a model you push it to the device and that's it like just device will just show this model. Yeah obviously you have like some repositioning scaling stuff that's it.
Other thing are like the whole logic is on the device basically zero logic and WebXR is about having some interaction so you're not only detecting a surface and placing like something some pretty object there but you can I mean you know change colors of that object right. So WebXR running through browser not a device which means that you can add some logic interaction anything else like I mean I don't know like you can can show like current market rates in AR like because yeah you can you can control that state so that's the difference. All right Unity. So Unity have WebGL export right and you can basically create an app there and export it as an application that can be viewed through web browser right and logically we can assume that they also have 3D. Yes but they don't have that really nice AR by default. To achieve that you have to run some of the extensions or plugins to Unity to your application and one of the example is Zappar.
I will say like Zappar is a really nice guys like they develop like a lot of AR solution but Unity have like a side support. If your first goal is to develop something for web and make it like smooth and you want to reduce costs it's actually like make it easier you definitely not choose Unity as a starting point like as a technology to invest time to learn or like start developing. It is worth considering if you already have something developed in Unity so then you definitely just use the same engine and do a AR web application as extension but I will definitely not suggest to consider Unity against some native technologies like I mean any any in the list basically.
So that's my short comment. Vectary. So Vectary and Spline 3D actually very popular like Spline 3D like last half year I guess like we have so many people like asking about Spline 3D like it's this very convenient tool. So Vectary and Spline 3D basically have ARCore support. They don't have like WebXR as again I explained that WebXR is not really supported on Apple devices like there's like some troubles and Vectary pretty much smart move they have ARCore support so what they can do is like when you create some 3D models within Spline 3D or Vectary they can help you automatically create GLB and USDZ model that is used by ARCore.
Basically you can have like a button within your Spline view that will trigger actually the same that ARCore trigger. It means ARCore or like AR experience within Vectary and Spline limited by just previewing one single model and you cannot add a logic there. Makes sense right? If that's your goal just to have a 3D model you can preview definitely a thing to consider. Okay and the next one is Snapchat.
So the Snapchat actually is really interesting thing and I immediately will put it to the AR Advanced. Why? Snapchat is pretty targeted on AR since the very foundation right? They did a lot and a lot of work within like face tracking, body tracking, I mean like you can even track like fingers like pretty much everything and the precise level of tracking is probably the highest right now because they just exist longer that they have more experience. Snapchat is basically providing us with the camera kits, camera kit web that is allowing just to have lenses that we create in Snapchat in our web pages. So there might be a lot of use cases how we can use it. It is not something that you can troll out right from web right? So it's something that you can troll and you can create lenses and this is Lens Studio.
You can create it there. You can even add some logic right? A finger drawing right? Okay and here you go. So it has some logic and that's pretty cool but this one you manipulate very, very limited. So you can just have something prepared and use it as a preview. That's good for some clothing maybe, something that requires face tracking, some hats or glasses maybe, that's a good thing because like the precise of tracking probably the coolest here. Maybe for some cool effects like this it actually will work but if you want to control that experience and I mean like do some variations or control it dynamically and include it in your pipelines that is something that you consider very carefully but the tool itself is extremely powerful.
So next technology is MediaPipe and it's basically an extension for any other library like Three.js and it also mostly focuses on VR and especially on tracking some gestures, some emotions, some facial face mesh etc like AR, like Snapchat do but compared to Snapchat it does it in a different way. It's like native technology so you can control it.
Like if it's Snapchat you have to create a lens in Lens Studio, publish it and then you can use it on web. Then MediaPipe you can use as a library while you're developing on Three.js for example and control and manipulate with that face tracking like finger tracking in real time and do a lot of stuff like do dynamic experience, I mean add a lot of logic like replace objects, I don't know anything basically what is not limited by technology itself. It has like good tracking of gestures, fingers, hands, something like that but compared to Snapchat if we talk about like really precise level it still will lose. Like I mean we compared face mesh tracking with MediaPipe and Snapchat and if we talk about some like big objects like hats, glasses, the difference might be minor but if we want to track like eyes, like brows, something like that then you start to feel different quite.
So but it's still really nice technology if you don't need some overcomplicated experience like if you don't build something sophisticated. The next one will be PlayCanvas. So we talked about this technology like mostly for the games and we talked about it in last video pretty much that's exactly the same as all the guys that we have in this list. I'm not sure it has ARCore support directly but you can definitely connect it but it has WebXR support same as like these guys and next one is Sketchfab.
So Sketchfab is a platform for designers and it pretty much focuses on showcasing one 3D object as cool as possible. So and Sketchfab have a lot of pipelines that convert like loaded, uploaded model into GLB, USDZ. You can download GLB and USDZ when you press on like free model for example and you can think that this actually goes in the direction of ARCore. Yes GLB and USDZ that Sketchfab provides can be used within Sketchfab API to also have that AR preview but just use Sketchfab for AR that's probably too much that's probably too expensive as well.
So yeah I mean if you are a 3D artist and you have all your models in Sketchfab maybe you can consider this option but for development in my opinion that's actually like too luxurious and don't really have that need. Okay and here we go with the giant, giant called 8th Wall. This guy actually goes to the AR and VR basic but it also have quite advanced AR compared to these guys but not that good as Snapchat in terms of face tracking like and some other options you might need. We did a lot of tests and when it comes to again when it comes like to precise tracking like even like simple thing like simple example with glasses like I mean the way 8th Wall does it, it has some artifacts but compared to these guys it's still quite huge and the thing that this 8th Wall is compatible with almost all popular like libraries like Babylon, like Three.js or something like Three.js Fiber or something like that that
makes it outstanding and from all the technologies mentioned today for some complex development where you need a dynamic experience probably 8th Wall is a good choice for the precise face tracking and but when you need a preview like some specific products Snapchat for a simple AR development, MediaPipe, ARCore for single preview or maybe some other technologies but there is one disadvantage of 8th Wall at least for some of the development or some projects that it is but there is like one disadvantage compared to other technologies is a cost so probably 8th Wall is most expensive from all of the technologies that were mentioned today but in some cases it is actually worth it. Yes, that's my opinion and two left, two technology left. Okay, we have a ShapeDiver. Basically, ShapeDiver is same as Vectary or Spline. They have, they support like the model viewer that we reviewed, the model viewer slash ARCore so they also have that expert within engine but not that cool as in Vectary or Spline so you have to prepare models etc but ShapeDiver is not about like 3D models.
ShapeDiver is about CAD models so if you have CAD models and you use ShapeDiver to preview them in 3D and you're thinking like okay now I want an AR extension you probably should think about ShapeDiver again because that will save you incredible amount of time converting like CAD to the polygonal models and then like use one engine for that like one engine to preview CAD etc so for those who use a lot of like manufacturer like I don't know based on CAD model production ShapeDiver is a really nice choice even if the AR is not that easy to approach like in Vectary or Spline something like that. All right and the last one in the list is Babylon.js and Babylon.js I will put this guy here but it's basically supposed to be inside support because it's also based on like WebXR and you can also connect ARCore here but in my opinion Babylon.js compared like to Three.js and other like open source engine have a lot of work done in the VR direction I mean they have like mesh UI interfaces right in engine and that's a huge deal while like using other engines you might like invent something from scratch or like do use a lot of additional libraries they have it optimized which is also a very big news because the optimization for VR experience is like huge thing so I will say Babylon.js is really good consideration for VR but in general we should just understand that if we use it we still rely on WebXR so and but yeah but we always can also use ARCore and most importantly I hope you can find a best fit for your project or your case thanks for watching and don't forget to hit subscribe button and leave a comment see you in the next videos
2024-09-07 21:01
