Hey there,
i am looking for a framework for the development of a web ar app for mobile devices. Textured 3D models should be displayed on markers.
I found some frameworks but would like to hear a recommendation.
AR.js? three.ar.js? anything else?
Best regards
UPDATE: After tons of tries i figured out that using AR.js with Three.js (not A-Frame!) is the best option right now.
Related:
Hi @Mugen87 thank you for the link.
I read about this but they want you to use an experimental browser for mobile devices (WebARonARCore) which is not ready for a consumer experience.
Any idea about which framework someone should use if we he wants to build a real world (consumer friendly) web ar app?
Best wishes
Jaudatus,
I’ve been using aframe and ar.js for displaying 3d models over markers. Mostly, non interactive artistic stuff. I used to copy files back and forth to my server (https is required for AR. Camera browser security), but discovered it’s easier to remix on glitch and once functional, move to own server.
Some challenges are (good model/bad model or bad code) so test models first.
Package them as glb. Just do it. It’s so much easier than trying to figure out where all your textures go (subfolders and relative paths etc…) I use this one. https://cesiumjs.org/convertModel/. Don’t even talk about the animation external .js files, glb will do all the work for you. [I suppose if you’re doing a commercial application, then serving dynamic json data to the model would be ok and glb might not work for this - not sure]
Scaling. Too big / too little = won’t work (or impossibly small) and relative scaling for scenes - it’s ok to do on PC, but in ar, impossible to test or preview until you actually deploy and “see it” - so it’s time consuming. Haven’t tested much with multiple devices (iphone etc…) so don’t know about how content is displayed everywhere. I did snag some code to set camera zoom level (small, med, large) just in case camera is too close (or far) on a device - the user could set their own zoom level.
Jitter/shake camera fighting. There are so many variables (that I don’t know) about how the camera detects a scene. For me, shake and jitter is my #1 nemesis.
Audio. Sometimes audio plays, sometimes it doesn’t (trying to do it without user interaction), so I’m using “on model loaded” - attaching the play to the loaded event.
Asset hosting. You need a fast CDN with https. Actually had to add the mime type for gltf and glb on personal server because it would 403 on those file types. Tried github, but they don’t always show you the link you “actually need” - it will complain about larger files and never show you the link. Round and round, so I discovered it’s MUCH easier to add an asset to a glitch project (file size irrelevant) and you’ll get a nice copy paste button.
Consumer friendly (to me) means no app-store, no download. But I might be in the minority. Lots of examples of people/companies requiring a 200 MB download for the “experience”.
and finally…
USER CONFUSION. I use opera on android. When I click my search bar, there is a QR scanner already. So I haven’t had an issue - intuitive and easy. But if I’d be danged if every single person, every single time, every instance always and forever to this day, cannot figure out how to open a QR reader or doesn’t have one on their phone yet (another app to download).
Hey,
thank you for the detailed reply.
I use ar.js with three.js now. This gives a much more stable tracking. I don’t really like A-Frame…
Since it’s recommended to use gltf I always use it anyway.
Thank you 
Hi, I hope you see this, I’m not a programmer but looking to create a web site where people can scan QR code and it will open AR camera in a browser to display a 3d model on top of the QR code. Did you do something similar to this? Can you send me a reference file?
Thank you very much in advance,
Adam
Hey, this is exactly what i did.
There you go: https://github.com/jeromeetienne/AR.js/blob/master/README.md
Could become hard if you are not a programmer. For easy (but laggy) version use a-frame. For a good version you should use three.js and ar.js (needs custom programming).
Greets
Hey, I am building an app using react native and i am looking to add an feature where user can scan surface and 3D model will appear. Can anyone help me with this that which tool or library should i use?
Best regards
Hey everyone,
Zappar recently released our Universal AR SDK for ThreeJS which we hope will be useful for any developers who are interested in using ThreeJS to create augmented reality websites. Our library supports Zappar’s leading face, image and instant world tracking APIs, plus you can also host using ZapWorks if you wish.
Sharing a few links here which will be valuable for getting started.
https://zap.works/universal-ar/threejs/
https://docs.zap.works/universal-ar/threejs/
(Full disclosure I am the Head of Product at the Zappar)
Hey @Chris_Holton, I just did a bit of a dive into Zappar and I love the features, couldn’t get it to work though, and I have to be honest in that you guys aren’t very up front about pricing around licenses in your documentation at all. If someone wanted to host their own assets, and include Zappar as a dependency in a library that we would provide as a service, is that even possible? If I had 50 people sign up for my library that has Zappar in it, that’s 50 different domains. Would I need to manually enter these domains in for licenses? How much do they even cost?