Augmented Reality for mobile (which framework?)

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.

2 Likes

Related:

1 Like

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.

Example

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).

2 Likes

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 :slight_smile:

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