Logo by Simon Poulter
AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Marker based and Location based AR.
Welcome to the official repository!
🚀For frequent updates on AR.js you can follow @nicolocarp and Watch this repo!
AR.js v2.0.0 introduces, for the first time, another type of Augmented Reality: Location Based.
AR.js can now be used with its default Marker Based feature, with Location Based or both combined.
See the project that has been integrated into AR.js: GeoAR.js.
You can find additional details below.
It works on all platforms. Android, IOS and window phone. It runs on any browser with WebGL and WebRTC (for iOS, you need to update to iOS11),
To try it on your phone, it is only 2 easy steps, check it out!
You are done! It will open a webpage which read the phone webcam, localize a hiro marker and add a 3D model on top of it!
artoolkit, and so it is marker based.
artoolkit is a software with years of experience doing augmented reality. It is able to do a lot!
More details about markers:
AR.js, on its
aframe implementation, comes with few custom components that make possible to integrate data from GPS sensors.
Basically, you can add
gps-entity-place - custom
aframe entities that have a specific longitude/latitude values.
You can add them with a script, loading them from APIs (Foursquare, Google Maps, and so on) or just add them statically on your HTML.
Once you have added one or more gps-entities, and added the
gps-camera on the
camera entity, the system calculates, at every frame, your position and the distance of places from you.
Using your phone sensors for orientation/position, AR.js is able to show on your camera a content for each place on its ‘physical’ place (so if you point the camera towards the place in real life, you will see the content near it).
If you move the camera, it calculates again orientation and position. If places are far, it shows smaller content. If places are near you, it shows it bigger.
Learn more with this article.
🌍Click on the examples below to try it out. 📲Open from mobile phone with GPS data enabled.
Show place icon for every place. Clicking on the icon will show the place name.
Show icon and place name above. Clicking on places will redirect to a certain URL (now mocked up).
Every example uses the
places.js script to load places. You set your places using static data, with specific coordinates, adding these info in the first lines of code (there are comments to explain it better).
Otherwise, as default, the script searches for places of interest near the user using Foursquare APIs. Please retrieve valid API credentials here in order to use it. Place credentials (replace both Client Secret and Client Id) on
You can also use GeoAR.js without the script, adding
gps-entity-place entities directly on the
index.html file.as documentated here.
⚠️ Please always give a look for new undocumented features on the Changelog until the documentation has been updated.
<!doctype HTML> <html> <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script> <script src="https://raw.githack.com/jeromeetienne/AR.js/2.2.1/aframe/build/aframe-ar.js"></script> <body style='margin : 0px; overflow: hidden;'> <a-scene embedded arjs> <a-marker preset="hiro"> <a-box position='0 0.5 0' material='color: yellow;'></a-box> </a-marker> <a-entity camera></a-entity> </a-scene> </body> </html>
See on codepen
A-Frame magic :) All details are explained in this super post “Augmented Reality in 10 Lines of HTML - AR.js with a-frame magic” by @AndraConnect.
Try to get inspired by this great works:
We are still early in the project but here are some initial numbers to give you an idea.
Obviously you mileage may vary. The performance you get will depend on 3 things: How heavy your 3D is, How you tune your parameters and the hardware that you are using.
So we shown it is now possible to do 60fps web-based augmented reality on a phone. This is great for sure but how did we get here ? By standing on the shoulders of giants! It is thanks to the hard work from others, that we can today reach this mythic 60fps AR. So I would like to thanks :
Only thanks to all of them, I could do my part : Optimizing performance from 5fps on high-end phone, to 60fps on 2years old phone.
After all this work done by a lot of people, we have a web-based augmented reality solution fast enough for mobile!
Now, many people got a phone powerful enough to do web AR in their pocket. I think this performance improvement makes web AR a reality. i am all exited by what people are gonna with it :)
Recently, we’ve been getting creative and working on developing new things with AR.js. One of them is playing around with shadows, syncing the position of virtual lights with reality for a more life-like finish:
We’ve been collaborating very closely with Fredrick Blomqvist. His input has had a great impact on AR.js innovation and we want to thank him. Together, we’ve been implementing refraction, giving the 3d a transparent/glassy effect. It ended up having a nice polished look. What do you guys think?
<a-marker>tag. It becomes real easy to use. It allows the things three.js extension does. Here are some slides aframe-artoolkit
/three.jsis the extension to use it with pure three.js
/aframeis the extension to use it with a-frame
/webvr-polyfillis the WebVR polyfill so you can reuse your #AR / #VR content easily
We did good on performance, but there are still a lot of room for optimisation. Using webworkers would increase cpu usage. Compiling in webassembly instead of asm.js should improve loading time and likely cpu performance. And obviously, we can still do more parameters tweaking :)
I would like people start experience augmented reality and play with it. This is highly creative! Just look at this puzzle game in #AR playing with mirror and laser beam. You could do it with AR.js, so opensource and running on normal phones, no need to buy a new device. isn’t that great!
Demo tested on the following browser setups:
To see the full compatibility list and contribute to it yourself go to this google spreadsheet: AR.js platform and browser compatibility
Credits: @HelloDeadline, @sorianog
It is all open source! jsartoolkit5 is under LGPLv3 license and additional permission. And All my code in AR.js repository is under MIT license. :)