Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

AR.js

Efficient Augmented Reality for the Web - 60fps on mobile!

Subscribe to updates I use AR.js


Statistics on AR.js

Number of watchers on Github 9953
Number of open issues 144
Average time to close an issue 3 days
Main language HTML
Average time to merge a PR 4 days
Open pull requests 28+
Closed pull requests 6+
Last commit over 1 year ago
Repo Created over 2 years ago
Repo Last Updated over 1 year ago
Size 316 MB
Organization / Authorjeromeetienne
Contributors4
Page Updated
Do you use AR.js? Leave a review!
View open issues (144)
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating AR.js for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

AR.js - Efficient Augmented Reality for the Web

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. An article has been published on uploadvr. 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

AR.js 1.0 Video

If you wanna chat, check Gitter chat

Try it on Mobile

It works on all platforms. Android, IOS and window phone. It run any browser with WebGL and WebRTC. (for IOS, you need to update to ios11)

To try on your phone is only 2 easy steps, check it out!

  1. Open this hiro marker image in your desktop browser.
  2. 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.

screenshot

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.

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.

screenshot

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 independent markers at the same time, or multiple markers acting as a single marker up to you to choose.

Whats New?

Recently, weve 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: screen shot 2017-03-16 at 21 06 24

Weve 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, weve been implementing refraction, giving the 3d a transparent/glassy effect. It ended up having a nice polished look. What do you guys think? screen shot 2017-03-06 at 16 31 28

Other crazy ideas weve been working on include a hole in the wall and a portal into another world. We want to take AR.js to new dimensions. screen shot 2017-03-12 at 15 19 51 screen shot 2017-03-07 at 10 08 39

principles

  • 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

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

Augmented reality for the web in less than 10 lines of html

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>

See on codepen or bl.ocks.org

Posts on medium

We started a AR.js blog, thus we can write about all the crazy ideas related to AR.js.

Great Posts by Users

Augmented Website

Seminal post explaining the concept. The service is available webxr.io/augmented-website

Augmented Website

Examples

Some applications:

ALL EXAMPLES

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

Browser Support

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 8.2 (iPad) (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

Future

FUTURE.md

FAQ

FAQ.md

How To Release ?

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'

# Go to master branch
git checkout master

# Merge dev branch into master branch
git merge dev

# tag the release
git tag 1.5.5

# 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"
AR.js open issues Ask a question     (View All Issues)
  • over 2 years Do a "floating Jewel" demo
  • over 2 years Do a demo like the reverse wii mote
  • over 2 years Do a multimarker setup to get more range in marker detections
  • over 2 years Do a "hole in the wall" demo
  • over 2 years Do a "portal" demo
  • over 2 years browser support
  • over 2 years npm package?
  • almost 2 years Front Camera loaded by defaults on Android/Samsung Galaxy
  • almost 2 years Possible to run off local file storage on Chrome (Android)?
  • almost 2 years can it run on iphone6 ?
  • almost 2 years Barcode patterns don't seem to scan
  • almost 2 years Is Markerless AR possible with AR.js?
  • almost 2 years tutorial code does not work: Augmented reality for the web in less than 10 lines of html
  • almost 2 years Few issues with the new-api
  • almost 2 years ios 10 artoolkit not render object on source image
  • almost 2 years Error when viewing demo on iPad Air - WebRTC issue! navigator.getUserMedia not present in your browser
  • almost 2 years Don't Aframe-AR support NFT?
  • almost 2 years How can I get positions of markers
  • almost 2 years Slow tracking performances on Wechat Browser
  • almost 2 years Support AR cube with artoolkit barcode
  • almost 2 years Cannot select camera source? Wrong default camera in Wechat
  • almost 2 years Markers without borders
  • almost 2 years [New Idea] Using three.js device motion events
  • almost 2 years A-Frame VR mode integration issue
  • almost 2 years Unable to scan custom markers
  • almost 2 years Markerless Location based AR.
  • almost 2 years Dead links in documentation
  • almost 2 years Gltf Loading Error
  • almost 2 years pose/normal incorrect
  • almost 2 years Custom pattern is not being recognized
AR.js open pull requests (View All Pulls)
  • Issue51 parameters-tuning.html
  • Adds a step-by-step explanation to the given example. Highlights the used components
  • fix invalid paths
  • Typo Fix
  • Improxe UX for mobile use with a Qr Code
  • Fixing readme typos
  • Automatic back camera selection for exotic browsers (Wechat)
  • Updated A-Frame release in README.md.
  • Fix for custom marker problem (issue #164)
  • Updated, consolidated, edited, and such...
  • Fixed minor typos
  • Emit events when a marker is found and lost, when using aframe's <a-marker>
  • Update README.md : Correct all grammatical mistakes and blank space
  • added iPhone 6 Plus test
  • Typo fixes
  • Added NPM, Gitter, twitter, patreon badges
  • Log marker name
  • Update README.md
  • Merge Arcore
  • Fix broken link
  • fix custom marker
  • Fixed dead links to ARToolkit v5
  • Add method that initialized by stream to ArToolkitSource
  • Fix non-working example in readme
  • Update artoolkit doc links
  • create lean builds that only support artoolkit tracking
  • remove tango-related scripts from three.js's AR.js
  • Some modifications (proposal)
AR.js list of languages used
Other projects in HTML