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 :)
- Very Fast : it runs efficiently even on phones - 60 fps on my 2 year-old phone!
- Web-based : It is a pure web solution, so no installation required. Full javascript based on three.js + jsartoolkit5
- Open Source : It is completely open source and free of charge!
- Standards : It works on any phone with webgl and webrtc
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!
- Open this hiro marker image in your desktop browser.
- Open this augmented reality webapps in your phone browser, and point it at your screen.
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.
AR.js uses 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!
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.
More details about markers:
dev branch.
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.8.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/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>See on codepen or bl.ocks.org
We started a AR.js blog, thus we can write about all the crazy ideas related to AR.js.
- Details about 3D models that can be used with AR.js
- AR.js introduction and insight on patterns
- "WebVR for Augmented Reality - Using WebVR to write cross-platform AR applications" by @jerome_etienne
- "Augmenting The Web Page - Bringing augmenting reality to normal web pages" by @jerome_etienne
- "Server Rendering for Augmented Reality - Cloud Rendering with Web Standards" by @jerome_etienne
- "AR-Code:a Fast Path to Augmented Reality - From QR Code to AR.js content" by @jerome_etienne
- 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.
- "Area Learning with Multi-Markers in AR.js - For a Larger & More Stable Augmented Reality" by @AndraConnect
- Great post about WebAR for designer by nexus interactive arts
- How to deliver AR.js only with a QR Code
- How to handle click with AR.js
Try to get inspired by this great works:
Seminal post explaining the concept. The service is available webxr.io/augmented-website
- Pattern Marker Generator: Generate a pattern marker with your own image.
- ARCode Generator: Generator of AR-Code (source)
We are still early in the project but here are some initial numbers to give you an 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 for some. 40-45fps on lumia 930 for others.
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 :
- 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. 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?
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.
- 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
/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!
Augmented reality on phone have applications in many fields: history education , science or gaming. I exited to see what people will do with AR.js :)
Demo tested on the following browser setups:
- Desktop Chrome with webcam and 2 tabs (one for Hero, one for result) (works!)
- Android native 4.4.2 (doesn't work, doesn't ask for permission to use camera. I see white background and text)
- Android native 5.0 (doesn't work, doesn't ask for permission, I see white background and text)
- Chrome on Android 4.4.2 (works!)
- Chrome on Android 5.0 (doesn't work, asks for permission, I see black background, text and a chart)
- Safari and Chrome on iOS < 11 (doesn't work, doesn't ask for permission, I see white background and text)
- Microsoft Edge on Windows 10 (Chrome on Google Pixel phone to view hologram)
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. :)
For legal details, be sure to check jsartoolkit5 license and AR.js license.