This project provides all the tools needed to easily test and implement multiple types of web based AR/VR projects.
Be advised that content is changing rapidly.
- Very Fast : Runs efficiently on most devices. See Performance data. (https://twitter.com/jerome_etienne/status/831333879810236421)!
- Web-based Standards : Works with any browser with WebGL and WebRTC no installation or app required.
- Multi-platform : Android, IOS (Must be IOS 11), Windows phone, Windows, OSX
- Open Source : It is completely open source and free of charge!
If you wanna chat, check
While AR.js is experimenting with other tracking methods, the core feature AR.js offers is marker-based tracking, made possible via an asm.js port of ARToolKit5.
Learn more about marker types, limitations, and marker training at ARToolKit's documentation site.
-
Three.js implementation is working efficiently. three.js examples in source
-
aframe exporting
<a-marker>tags will make it easier to use. - See Info here: aframe-artoolkit aframe examples in source -
Babylon.js implementation is working as well. babylon.js examples in source
-
webvr-polyfill: Work-in-progress. webvr-polyfill examples in source
-
Open this HIRO marker image in your desktop browser.
-
Open this link Augmented Reality Viewer - Example in your phone browser, and point it to your screen.
Ready to go?! Use your mobile device to view the HIRO marker image on your mobile device to reveal the example Augmented Reality.
- Pattern Marker Training: Pattern Marker Training
- Generate a pattern marker with your own image. Barcode and Multi
- ARCode Generator : Generator of AR-Code (source)
- WebAR Playground : Playground running in WebAR with ar.js/chromiumAR
Detailed walkthrough at "Augmented Reality in 10 Lines of HTML - AR.js with a-frame magic" by @AndraConnect.
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded artoolkit='sourceType: webcam;'>
<a-box position='0 0 0.5' material='opacity: 0.5;'></a-box>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>See the result on codepen
Any browser that supports WebGL and getUserMedia/Stream API can run AR.js.
See caniuse.com for up-to-date browser support metrics: WebGL, getUserMedia
- Chrome
- Firefox
- Chrome on Android
- Safari on iOS 11
If the browser you are using should be able to run AR.js, but doesn't, there are several potential causes.
- The webpage is served through
httpinstead ofhttps, which doesn't allow user media access. - The webpage is opened inside another app through a webview, which doesn't support
getUserMedia.- In this situation, try opening the same url in mobile Chrome/Safari.
- The webpage couldn't detect the device's camera.
- The device does not have a camera.
- The browser doesn't support WebGL.
- WebGL is blocked for the device's graphics driver version.
There are three determining factors for performance:
- How large is your 3D/AR?
- How you tune your parameters? More info soon
- Hardware!
We hope to have additional benchmarking results soon.
- 60fps stable on Nexus 6P
- 50+fps on Nexus 5X ~50fps on a old nexus5, and ~60fps on nexus 9
- Sony Xperia Z2 (2.5 years old) runs around 50fps - This is a 170 Euro phone.
- Some reports ~50fps on a old nexus5, and ~60fps on nexus 9
- 40-45fps on lumia 930 for others.
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.
Other crazy ideas we’ve been working on include a hole in the wall and a portal into another world. We want to take AR.js to new dimensions.
Seminal post explaining the concept. The service is available webxr.io/augmented-website
The project started a AR.js blog to keep everyone up to date. Please check there for the newest content.
- How to write a AR.js application? Here is a full tutorial by marmelab featuring François Zaninotto. It explain how to code a full application on phone! Step by Steps, with explaination and videos. Very great! the perfect step if you want to start writing AR application today.
- Great post about WebAR for designer by nexus interactive arts -This is highly creative! Just look at this puzzle game in #AR playing with mirror and laser beam.
- Augmented reality on phone have applications in many fields: history education , science and gaming.
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.
Please thank and contribute to these teams:
- three.js for being a great library to do 3d on the web.
- artoolkit! years of development and experiences on doing augmented reality
- emscripten and asm.js! thus we could compile artoolkit c into javascript
- chromium! thanks for being so fast!
"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 and I am all exited by what people are going to do with it :)" - Jerome Etienne
"Shared #ar is a lot more real than solo #AR." - Augmented reality principle tweet
"The marker must be a portal from where the virtual emerges." by @AndraConnect - #AR principles at dinner 😏 tweet
jsartoolkit5 is under LGPLv3 license and additional permission. Other code in AR.js repository is under MIT license.
For legal details, be sure to check jsartoolkit5 license and AR.js license.
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 :)
# replace REVISION to the proper version
atom three.js/src/threex/threex-artoolkitcontext.js package.json README.md
# Rebuild a-frame and webvr-polyfill
make minify
# Commit everything
git add . && git commit -a -m 'Last commit before release'
# Go to master branch
git checkout master
# Merge dev branch into master branch
git merge dev
# tag the release
git tag 1.5.1
# push the tag on github
git push origin --tags
# push commits tag on github
git push
# update npm package.json
npm publish
# Come back to dev branch
git checkout dev
# update the a-frame codepen
open "https://codepen.io/jeromeetienne/pen/mRqqzb?editors=1000#0"