I am focusing hard on making AR for the web a reality. This repository is where i publish the code. Contact me anytime @jerome_etienne. Stuff are still moving fast, We reached a good status tho. So i wanted to publish thus people can try it and have fun with it :)
- Very Fast : it runs efficiently even on phones. 60 fps on my 2 year-old phone!
- Very Webby : It is a pure web solution, so no installation required. Full javascript based on three.js + jsartoolkit5
- Free and Open : It is completly open source and free of charge!
- Pure Standards : It works on any phone with webgl and webrtc
Try it on Mobile
It is done in 2 easy steps :)
- Direct your android browser to this url.
- Point your phone at a hiro marker.
You are done! It will open a webpage which read the phone webcam, localize an hiro marker and add 3d on top of it. Here is an example of hiro marker. You can print the marker too or you can just display it on your desktop screen, like below.
Status
- At the three.js level is the main one. It is working well and efficiently
- a-frame component - it export
<a-marker>tag. It becomes real easy to use. It allows the things three.js extension does. Here are some slides aframe-artoolkit - webvr-polyfill: it is kind of working - still a work-in-progress
Examples
Three.js Examples:
- cameratransform : three.js example for cameratransform (source)
- markerroot : three.js example for markerroot (source)
- mobile-performance : three.js example for mobile-performance (source)
a-frame Examples:
- basic : a-frame example for basic (source)
- demo : a-frame example for demo (source)
- aframe-logo : a-frame example for aframe-logo (source)
- hatsune : a-frame example for hatsune (source)
- minecraft : a-frame example for minecraft (source)
- marker-camera : a-frame example for marker-camera (source)
- multiple-independant-markers : a-frame example for multiple-independant-markers (source)
- noinstall : a-frame example for noinstall (source)
WebVR-polyfill Examples:
Folders
/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
Licenses
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. :)
For legal details, be sure to check jsartoolkit5 license and AR.js license.
Change Log
Phone Support
It works on any browser with WebGL and WebRTC. This is the principle. So android works and window mobile works. It doesn't work on IOS unfortunately. safari IOS safari doesn't support WebRTC at the moment. Apple is currently working on it tho.
It is the beginning of this project. Here are some initial performance numbers just to give an idea. It highly depends on how heavy your 3d is and what are your tuning of AR.js, so you milage may vary . That said they give a rough idea.
- I got 60fps stable on nexus6p
- Some reports Sony Xperia Z2 (2.5 years old) runs around 50fps - this is a 170euro phone
- Some reports ~50fps on a old nexus5, and ~60fps on nexus 9 - nexus5 is 3.5 years old!
- Some reports it working on windows phone edge!! 13fps on Lumia 950 Ok it is slow at the moment but still! it run on window phone, it is amazing :)
Standing on the Shoulders of Giants
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 those mythic 60fps AR. So i would like to thanks :
- 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.j! thus we could compile artoolkit c into javascript
- chromium browser! 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 it! We have a web-based augmented reality library fast enough for mobile. Now, a lot of people got a phone powerful enough to do web AR in their pocket. I think this performance improvement make web AR a reality. i am all exited :)
How To Release ?
# replace REVISION to the proper version
atom three.js/threex-artoolkitcontext.js
# Rebuild a-frame and webvr-polyfill
(cd aframe && make minify) && (cd webvr-polyfill && make minify)
# Commit everything
git add . && git commit -a -m 'Last commit before release'
# tag the release
git tag 1.0.0
# push the tag on github
git push origin --tags
# update the a-frame codepen
open "https://codepen.io/jeromeetienne/pen/mRqqzb?editors=1000#0"
