AR.js - Efficient Augmented Reality for the Web using ARToolKit

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!
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

Try it on Mobile

It works on any browser with WebGL and WebRTC. So android works. Window mobile works. IOS doesnt work unfortunately. IOS safari doesn't support WebRTC at the moment. Apple is currently working on it tho.

To try on your phone 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 to 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.

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 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 :)

Performance

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.

Full Featured Marker based

With this project, we bring more performance to artoolkit. artoolkit is a 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 independant markers at the same time, or multiple markers acting as a single marker up to you to choose.

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)
profile : three.js example for profile (source)
hole-in-the-wall : three.js example for hole-in-the-wall (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-independent-markers : a-frame example for multiple-independent-markers (source)
noinstall : a-frame example for noinstall (source)

WebVR-polyfill Examples:

aframe : a-frame example for aframe (source)
basic : a-frame example for basic (source)

Folders

/three.js is the extension to use it with pure three.js
/aframe is the extension to use it with a-frame
/webvr-polyfill is 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

CHANGELOG.md

What's Next ?

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 :)

Futures

add webworkers
add the nft
handle sensor fusion with the IMU ?

Ideas

AR Gaming - https://www.youtube.com/watch?v=EmGGGzibGok
AR Business Card - https://vimeo.com/4979525
IDEA: produce a single image able to do qr-code and pattern marker. https://twitter.com/nlehuen/status/834115970641829888
- about having an image able to do qr-code and pattern marker at the same time. If we have such image, we skip one step.
- The person first acquire the qr-code with his phone, and then it goes to a webpage which is a webar application.
- thus the publisher only has to publish this on its ads, likely on paper ads in magazine or in the street.
- and the user can use his phone to immediatly see the related augmented reality
- https://techcrunch.com/2017/02/02/google-chrome-gets-its-own-qr-code-barcode-scanner/

How To Release ?

# replace REVISION to the proper version
atom three.js/threex-artoolkitcontext.js package.json

# 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 npm package.json
npm publish

# update the a-frame codepen 
open "https://codepen.io/jeromeetienne/pen/mRqqzb?editors=1000#0"

License

blq/AR.js

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages