-
Notifications
You must be signed in to change notification settings - Fork 0
AR FRAMEWORK COMPARISON TABLE
Here you can view the detailed analysis table for the AR frameworks I tried out. If you are interested in some live demos, videos or code, you can look over here
FEATURES | mindAR | AR.js | 8th wall | ViroReact | Unity AR Foundation |
---|---|---|---|---|---|
MindAR is a free open-source web augmented reality library, focussed on image and face tracking. It is based on AR.js. | AR.js is a lightweight library for Augmented Reality on the Web, which includes features like Image Tracking, Location based AR and Marker tracking. The library is open-source and free. | 8th wall is a paying platform to create web-based AR experiences. | ViroReact is a platform to help build AR/VR applications in a cross-platform way via React Native. | Unity's AR Foundation is a cross-platform framework that allows you to write augmented reality experiences once, then build for either Android or iOS devices without making any additional changes. It does not provide any AR functionalities within itself, but if you have the needed native AR plugins, such as ARCore and/or ARKit, AR Foundation provides an easy way to set up your AR scene and takes care of creating the builds for each platform, without you needing to write any native code yourself. | |
web/native | WEB | WEB | WEB | NATIVE | NATIVE |
free | yes | yes | no | yes | included within Unity |
open-source | yes | yes | no | yes. It was first owned by Viro Media, but became open source since 2019 and is now managed by the Viro community. | no |
github |
https://github.com/hiukim/mind-ar-js 1.4k stars |
- current github: https://github.com/AR-js-org/AR.js 4.3k stars - old github project: https://github.com/jeromeetienne/AR.js15.7k stars |
8th wall has an official github page as well, where they offer the code of most of their templates https://github.com/8thwall/web 409 stars |
https://github.com/ViroCommunity/viro 616 stars |
/ |
Community | Very small. Almost no existing examples, except for the limited ones given in the documentation. Almost no representation in Stackoverflow (6 questions, 2/6 answered, max votes: 1, max views: 518). Googling for a problem, gives no help. At most you will find someone with the same unanswered question. | Fairly big. One of the biggest free AR libraries. Big on stackoverflow (500 questions, max 78 votes, max 39k views) and CodeSandbox. However, when looking into React specific issues, the resources were very limited. No real working examples were found. Overall more resources for the A-frame based version than the THREE.js version. | Around 5000 people on their slack page. 113 questions on Stackoverflow. In my experience, when I had a problem, I did not find a lot of people with the same one. From the 8th Wall platform itself, there is a lot of support. | Not that big. There is a discussions section on their official documentation page, that is barely used. Limited presence on Stackoverflow (28 questions, half of them unanswered. Most viewed 3k views). There are quite some articles with tutorials, but they are outdated and work with the previous (non-open source) version. Their Viro Media app is downloaded 10k+ times. | The Unity community in general is very big. I easily found a fitting tutorial on youtube for exactly what I needed. Unity has its own forum, that is often used. When I had issues myself, this is where I ultimately found the solutions. |
Documentation |
The documentation is still limited, but clear for the pure html examples. There are very few examples and the examples are not all up to date. I do appreciate the image target compiler tool to pre-handle your tracking images for easy integration. The main concepts are very clearly explained. However, for going a bit further than the obvious, you will not find much help in the resources. It also does not explain any of the A-frame components, even-though most of the use-cases are clear. I am still missing some references to the A-frame systems. |
Despite the rather large community, the official documentation is very lacking. It is very short, their demo examples do not work for the moment (heroku issue with the assets) and I am missing a step-by-step overview or quickstart guide. It is not at all detailed and without any background, you need a lot more information to get familiar with the library. |
Very extensive and clear documentation. They have their own youtube channel with tutorials. They also offer a lot of templates. They have a github page to access the code locally (needs a key to use). They have their own Cloud Editor with a lot of built in features. Sometimes, because the documentation is so large, I found it hard to know where to find something again that I had come across before. | The documentation is not immediateley apparent to find. A lot of sources refer to a documentation site that does not exist anymore (https://viromedia.com/). The new documentation can be found from their github page. The documentation itself is quite clear, especially the starter kit quick start and the specific documentation about the different elements and syntax. What is lacking however, is the guide of integrating VrioReact in an existing project. Even though they mention that since being open source, the documentation is not fault less, it is lacking in a clear set-up guide that works and handles common problems. A positive is that they sometimes do try to mention mistakes that are often occurring. Sometimes it works, sometimes it doesn't help and sometimes it is brushed off as "We know, but that's the way it is, sorry!". | The documentation of Unity is very extensive. The part about AR Foundation itself is rather limited, but that is because the building stones itself are clear. Everything you need is there, the different components that it offers, what they do... I also didn't really need them because of the very clear demo I found. |
Ease of use | Very simple in plain html. They also provide platforms to create no-code example, for example Pictarize, their platform for image tracking and Studio MindAR, meant for face-tracking examples. | So far, demo examples do not work as given from documentation. The nft (natural feature tracking) image tracking has some real issues, even in plain html, errors persisted. The marker tracking did work, but there are a lot of restrictions on the custom markers. | As a starter, their Cloud Editor is very customer minded: an easy image target upload and process system. You can preview 3D models, with a relative scale system. They have a lot of easy starting templates and support a lot of different backgrounds (A-frame, THREE js, babylon). However, if your want some more custom features, their self-contained platform can be somewhat restrictive. If you want to do some more difficult things, you can be hindered by lack of access to their underlying file handling system. And you need to fall back a lot more on general a-frame knowledge for example. Hosting can be done easily from their own platform. You need extra steps to deploy and work locally. | In general, the development process for native AR is much more convoluted, because of the device restrictions. But, apart from that, if you use the set-up via the starter kit, the process is rather easy. (One personal downside: the start-up project is in the class component syntax and the general project structure could be more clear in their overview.). They even have a free Viro Media App, where you can easily see a testing version of your app. However, testing with a, Android emulator did not work for me. And specifically they mention on the documentation that iOS emulators do not work with ViroReact. The syntax and structure of the built-in AR elements is clear and similar to other AR frameworks I have seen so far (the scene structure with target markers that group some visual elements). However, if you want to integrate it in existing frameworks, it is very complicated. Linking does not happen automatically. There is also confusing info for expo project specifically and I did not even find a clear answer about whether it is because of something I am still missing and don't understand, or whether it is not yet possible to do at all. |
To set up a basic AR Image tracking scene, the set-up is very easy. You can start from an AR project template file from unity, which is available when creating a new project, if you added the needed AR plug-ins within your Unity set-up. The hardest part for me was Adding the C# script to add link the target images to your 3D assets in the right way. But this difficulty mostly stems from my inexperience with writing C# code. And since I had an easy tutorial to follow, it was not that hard to set up the basic image tracking demo. A lot of the construction consists of just adding the right type of item and component and linking them to each other or a script. And because of the larger community and available tutorials, I would say it is possible for starting developers. Though creating a more complex scene and structure might be more challenging, but this mostly comes down to general Unity knowledge, more than something AR specific. The easy thing is that you just set up the structure via the AR Foundation platform, and Unity automatically builds it for the chosen platform, without you needing to do any platform specific coding. |
Integration in other frameworks | Very difficult. Apart from plain html, I could not get it to work in React (either create-react-app or Next.js). | Difficult. The normal html examples do not even work as given. There are some react wrappers, such as https://github.com/artcom/react-three-arjs, but they provide very limited examples, only for marker based tracking, no nft image tracking. I did manage to implement the marker tracking functionalities with my custom markers into an existing Next.js project. Without the react-wrapper, implementing Ar.js directly in React did not work as well in the limited time frame I had to experiment with it. |
They have one template based on React (create-react-app). There is also an option to just integrate a specific page via i-frame into other projects. Working locally on an 8th wall project is only accessible for self-hosted projects, which is only for the pro-plan, and not during free-trial period. | Like I said, integration in existing projects is very difficult. I did not manage to do this, and found no clear resources of solving similar issues. This could partly be because of my limited experience with native development and React Native specifically, but still, with my background, I was not able to implement the ViroReact package into my own expo project. It seems that the versions of react-native and react also don't match. | Not really applicable here. But I do think that it would be easy to integrate an AR component in another Unity project. You just need to make sure you have added the right plug-ins that provide the AR functionalities itself. |
Dependency on other frameworks | A-frame, THREE.js. Based on AR.js. | A-frame, THREE.js | A-frame, THREE.js, babylon.js | React Native. The AR/VR uses ARKit for iOS and ARCore for Android. | The AR Foundation package contains interfaces for AR features, but doesn't implement any AR features itself. To use AR Foundation on a target platform, you also need a separate provider plug-in package for that platform. This means for native AR, it needs ARKit and ARCore to be able to actually build an AR app. |
Pre-required knowledge | For most examples basic html knowledge is enough. | A-frame use is not really that self-explanatory, so some pre-required A-frame knowledge is needed. It is also not that clear how AR.js differentiates from A-frame. THREE js knowledge is needed when working with the React wrapper I used. | Basic knowledge of THREE js or A-frame. The more you need to step away from their templates and structure, the more you will need to compensate with pre-existing knowledge of these other dependency-frameworks. However, their Cloud Editor system for adding target images and so on is made very self-explanatory. Using their basic templates, you do not need a lot of background knowledge. | For a new project, some basic React Native knowledge is enough. The AR components are very self-explanatory, especially with the documentation. For integration in existing projects, a lot more knowledge of React Native is needed and even some native development and set-up. | I would say you do need some basic Unity and C# knowledge. However, to just achieve a very basic image tracking scene, the youtube tutorial was enough, despite my inexperience with both Unity and C#. I did have to dive a bit deeper to solve some build issues, but the answer was eventually found on the Unity forum. |
AR features | Image tracking & Face tracking | Image tracking (NFT), face tracking, location based tracking, marker tracking. | marker-less, image tracking, face tracking, occulus, world tracking, object tracking | AR and VR options. For AR you have image tracking, location tracking, ... The built in example works with object/geometry recognition (marker-less AR). | Image tracking, face tracking, marker-less AR (plane detection), object detection, body tracking, ... But it depends on your device |
AR accuracy | Fairly accurate. Good enough for most projects. There is some lagging with the image tracking itself. Can still track with target image partly in view. | Marker tracking was fairly accurate, with limited lagging, but tracking ends quickly when image is partly out of sight. In the first example I tried, when tracking got lost, you needed to obstruct the camera for a second, as it would not re-register a marker, even-though it was perfectly back in camera view. In my second try, using the react wrapper package, the tracking seemed better. However, there are very strict limitations when making your own custom markers. |
Least lagging among the web frameworks so far. Tracking itself is mostly accurate. Effects disappear when image is not tracked anymore. More dependent on quality of the images compared to mindAR. Some images that worked as targets in mindAR, did not always work with 8th wall. It did depend on which phone I was using. |
This is where ViroReact is at the top right now from what I tried out so far. The image tracking is very accurate with no visual lagging. And most impressive is the AR effects that continue without the image target staying in frame. This makes the whole experience more immersive and really plays into the realistic environment of the user. | The tracking itself was among the better ones I could try. No real lagging, rather accurate. But, compared to Viro React, the AR elements disappear when image is not being tracked anymore. |
Target images | You can use any image using their compiler tool . More detailed images work best, but a simple flat illustration also work for the most part in my experience. Image can have any shape. | Marker tracking is very limited in the options. You need a thick border around your image. Moreover, the ratio of border to image really made a difference in my case. If I deviated too much from a 0.5 ratio of border to image, my custom marker did not work. It is also very contrast sensitive, if your colours lie too close to each other, your custom marker will also not be recognised. I created my own markers with this tool: https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html Nft image tracking should be more free for any type of image. They also provide a link for choosing good images for NFT and a image to nft converter. (https://github.com/Carnaux/NFT-Marker-Creator/wiki/Creating-good-markers). However, I was not able to produce a working image with my example. |
There is a very easy upload and storage system for your target images in the Cloud Editor. Very clear upload process. You upload simple png or jpg files. Up to 5 images, you can auto load, which means you don't need any extra code, you can just refer to them by their name. However, the ratio is fixed, only orientation can be chosen. Image tracking on curved objects is also possible (e.g. cans and cones). | Works with just png, jpg, webp files. No pre-processing is needed, which gives more options. You do need to take into account the basics of choosing good images (resolution, contrast, recognisable features, ...). But we have the option in theory of using uploaded pictures for the user. More flexible without pre-processing. | No pre-processing needed. Can be just a png or jpg that you load in your unity assets. Just add them to a Reference Library for XR specifically. |
Device range | Any device with a camera that can run a browser with webRTC and webGL support. | Any device with a camera that can run a browser with webRTC and webGL support. | Any device with a camera that can run a browser with webRTC and webGL support. No desktop support. A plus: it will automatically create a redirect button ‘start AR’ if you are in a browser that doesn’t support (like built in facebook browser), and redirect it to open in a browser that does support it (e.g. chrome on android). |
Limited to devices that support either ARCore or ARKit. | Limited to devices that support either ARCore or ARKit. |
Overall impression | Small, but promising framework. Even-though it is still limited in resources and in community, I do see some great value with their easy html examples. I think for the small, unexperienced developers, this might be a great way to get a quick, substantial image tracking AR project up and running. However, if you have more complex use-cases, you can not rely on many resources or a big community, and since developers greatly depend on each other and on finding similar solved problems online, the reach stays limited. | So far a bit disappointed. I expected a lot more as the library comes up as the most-used free AR library at the moment. The more unconstrained NFT image tracking did not work in any form for me. Not in plain html and not in react. For the marker tracking, I did manage to implement AR.js via a react package based on the THREE js version of AR.js. However, the documentation and examples I found online for React and AR.js, were very limited. The aframe based version, did not work for me in react, only in plain html. |
I get the appeal of the platform and I understand the pricing. Compared to the other web frameworks, I needed to do a lot less extra research to just get something to work. The cloud Editor is easy to use. However, you are constricted a lot to their platform. Deviation is possible, but requires more work and/or many. Ease of use is best among the web frameworks, however, I don't know if the price is compensated enough with the image tracking performance itself. | If you need a new, stand-alone native AR project, this definitely has some great options from the starting project. However, if you want to integrate it into an existing project, you would need much more experience than me, because their set-up guide does not help you enough for this. The AR tracking is well-done. But for the extra hassle compared to web AR and the restrictions of devices, both for reaching the public and testing throughout the development process, I would ask yourself whether the extra performance is really worth it. | Despite my lack of experience with Unity and native development in general, I could easily set up a basic AR project. I did have some build issues for Android, but this was because of Unity in general, but I did loose a lot of time trying to solve it. The widespread use of the platform did result in some easy tutorials being available, which made the process of setting up a basic project easy. AR effects in general were among the better once I've been able to try out. |