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 is still moving fast, we have reached a good status though. An article has been published on uploadvr. So I wanted to publish this so people can try it and have fun with it :)
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 iOS 11).
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 3d on top of it, as you can see below.
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 thank:
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 that has been done by a lot of people, we have a web-based augmented reality solution fast enough for mobile!
Now, many people have 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 going to do with it :)
We are still early in the project, but here are some initial numbers to give you an idea.
Obviously your 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.
With this project, we bring more performance to artoolkit. artoolkit is software with years of experience doing augmented reality. It is able to do a lot!
It is marker based. It supports a wide range of markers: multiple types of markers pattern/barcode multiple independent markers at the same time, or multiple markers acting as a single marker up to you to choose.
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
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.
<!doctype HTML> <html> <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script> <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/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: black;'></a-box> </a-marker> <a-entity camera></a-entity> </a-scene> </body> </html>
We started a AR.js blog, thus we can write about all the crazy ideas related to AR.js.
/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
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. :)
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:
Credits: @HelloDeadline, @sorianog
This one is mainly for me to remember :)
# Update CHANGELOG.md - remove the -dev into version atom CHANGELOG.md # replace REVISION to the proper version, search/replace on the version string should do it atom three.js/src/threex/threex-artoolkitcontext.js package.json README.md # Rebuild and minify everything - aka a-frame and three.js make minify # Commit everything git add . && git commit -a -m 'Last commit before release' && git push # Go to master branch git checkout master # Merge dev branch into master branch git merge dev # tag the release git tag 1.6.2 # 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 CHANGELOG.md - start new dev version atom CHANGELOG.md # update the a-frame codepen if needed open "https://codepen.io/jeromeetienne/pen/mRqqzb?editors=1000#0"