What are the best free libraries for WebAR?

Questions
,
1

Can anyone tell me the pros and cons of the various libraries such as ar.js, a-frame, playcanvas-ar, etc. And also which is the best in your opinion?

1 Like
2

With my experience of using them

Three.js + WebXR - You can do anything, still WIP APIs, supports only Chrome on Android, no support on iOS Safari yet (soon maybe)

https://threejs.org/examples/?q=webxr#webxr_ar_cones
https://threejs.org/examples/?q=webxr#webxr_ar_hittest
https://threejs.org/examples/?q=webxr#webxr_ar_paint

ar.js - marker based, location based, pretty good set of components and helpers avaiable from ar.js repo, works everywhere Android and iOS. most of the times I have seen it’s not maintaining 60 FPS. and has limitations how the marker should look like, it needs black border to detect images. No Markerless feature.

a-frame - You can use A-Frame with AR.js easily too. AR.js creators have created A-Frame componets to use it.

playcanvas-ar - Not sure havn’t used it

One more things you should take a look at is https://modelviewer.dev/ if your requirement is all about rendering 3D models on web pages and have a AR feature to view in your space.

it has pretty good AR features too
https://modelviewer.dev/examples/augmented-reality.html
https://modelviewer.dev/examples/webxr.html

5 Likes
3

Thanks a lot for the detailed answer. I appreciate it.
Can’t decide between threejs and modelviewer. Modelviewer seems to be the easiest for the end user as well as the programmer but I don’t think I can customize it much or turn it into a game, however I can use threejs to make a game but it will be slightly more complicated.

However I am confused about one thing.

Both these examples do pretty much the same thing. They display a model in 3D as well as in AR. What’s the difference?

4

Can’t decide between threejs and modelviewer. Modelviewer seems to be the easiest for the end user as well as the programmer but I don’t think I can customize it much or turn it into a game, however I can use threejs to make a game but it will be slightly more complicated.

Ya true if you are looking to make something like a game you can’t use model viewer.

so the first link
https://modelviewer.dev/examples/augmented-reality.html

this uses Scene Viewer and AR Quick Look to make AR possoble
they are native level binding that Google and Apple provide to do AR

where as second link
https://modelviewer.dev/examples/webxr.html

this uses the WebXR Standard that is in early stages of it’s development
currently only supports chrome on Andorid

hope that anwsers your question :slight_smile:

1 Like
5

Thanks a lot for the detailed answers. Really appreciate it.

1 Like
6

Have you looked at https://www.babylonjs.com/?