Skip to content
/ AR.js Public
forked from AR-js-org/AR.js

Image tracking, Location Based AR, Marker tracking. All on the Web.

License

MIT license
0 stars 940 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

TimothyLx/AR.js

BranchesTags
 
 

Repository files navigation

AR.js - Augmented Reality for the Web

Logo by Simon Poulter

Build Status
Gitter chat Twitter Follow Twitter Follow

AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Image Tracking, Location based AR and Marker tracking.

Welcome to the official repository!

This project has been created by @jeromeetienne and it is now maintained by @nicolocarpignoli.

🚀For frequent updates on AR.js you can follow @nicolocarp and Watch this repo!

Key points:

  • 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
  • Features : It features Image Tracking, Location Based AR and Marker Tracking.

⚠️ AR.js is coming in two, different build. They are both maintained. They are exclusive.

Please import the one you need for your project, not both:

Get started

đź–ĽImage Tracking:

// TODO GIF FOR Image Tracking with 3D model

Run the following code and scan this picture to see content over it.

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>

<script src="https://rawcdn.githack.com/AR-js-org/AR.js/a5619a021e6ff40427ff8f9c62169e99a390f56b/aframe/build/aframe-ar-nft.min.js"></script>
<!-- <script src="https://raw.githack.com/jeromeetienne/AR.js/3.0.0/aframe/build/aframe-ar-nft.min.js"></script> -->

<!-- <script>ARjs.Context.baseURL = '../../../../../three.js/'</script> -->

<body style="margin : 0px; overflow: hidden;">
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="antialias: true; alpha: true; precision: mediump;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
  >
    <a-nft
      type="nft"
      url="https://rawcdn.githack.com/AR-js-org/AR.js/tree/master/data/dataNFT/pinball"
      smooth="true"
      smoothCount="10"
      smoothTolerance="0.01"
      smoothThreshold="5"
    >
      <a-entity gltf-model="./Flamingo.glb" position="50 150 0" animation-mixer>
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>

🌍Location Based

// TODO GIF location based ar

Try the following snippet, and instead of add-your-latitude and add-your-longitude add the required values, without the <>. Activate GPS on your phone and run the example. Look around. You should see the text looking at you, appearing in the requested position, even if you look around and move.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>GeoAR.js demo</title>
    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
    <script src="https://rawcdn.githack.com/AR-js-org/AR.js/a5619a021e6ff40427ff8f9c62169e99a390f56b/aframe/build/aframe-ar-nft.min.js"></script>
    <!-- <script src="https://raw.githack.com/jeromeetienne/AR.js/3.0.0/aframe/build/aframe-ar-nft.min.js"></script> -->

    <!-- <script>ARjs.Context.baseURL = '../../../../../three.js/'</script> -->
  </head>

  <body style="margin: 0; overflow: hidden;">
    <a-scene
      vr-mode-ui="enabled: false"
      embedded
      arjs="sourceType: webcam; debugUIEnabled: false;"
    >
      <a-text
        value="This content will always face the user."
        look-at="[gps-camera]"
        scale="120 120 120"
        gps-entity-place="latitude: <add-your-latitude>; longitude: <add-your-longitude>;"
      ></a-text>
      <a-camera gps-camera rotation-reader> </a-camera>
    </a-scene>
  </body>
</html>

Marker tracking

Scan this marker to see the content over it.

<!DOCTYPE html>
<html>
  <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
  <!-- <script src="https://raw.githack.com/jeromeetienne/AR.js/3.0.0/aframe/build/aframe-ar.js"></script> -->
  <script src="https://raw.githack.com/jeromeetienne/AR.js/2.2.2/aframe/build/aframe-ar.min.js"></script>
  <body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs>
      <a-marker preset="hiro">
        <a-entity position="0 0.5 0" gltf-model="https://rawcdn.githack.com/nicolocarpignoli/nicolocarpignoli.github.io/0c3112919b0f27ef508bf1d9e354adf15c0a94d7/roma/models/scene.gltf"></a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

Index

⚠️ Please always give a look for new undocumented features on the Changelog until the documentation has been updated.

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

To see the full compatibility list and contribute to it yourself go to this google spreadsheet: AR.js platform and browser compatibility

Credits: @HelloDeadline, @sorianog

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.

Learn More

//////////// TO MOVE ////////////

What "Marker Based" means

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:

What "Location Based" means

Check out the Location Based documentation: here.

AR.js, on its aframe implementation, comes with few custom components that make possible to integrate data from GPS sensors.

Basically, you can add gps-entity-place - custom aframe entities that have a specific longitude/latitude values.

You can add them with a script, loading them from APIs (Foursquare, Google Maps, and so on) or just add them statically on your HTML.

Once you have added one or more gps-entities, and added the gps-camera on the camera entity, the system calculates, at every frame, your position and the distance of places from you.

Using your phone sensors for orientation/position, AR.js is able to show on your camera a content for each place on its 'physical' place (so if you point the camera towards the place in real life, you will see the content near it).

If you move the camera, it calculates again orientation and position. If places are far, it shows smaller content. If places are near you, it shows it bigger.

Learn more with this article.

🌍Click on the examples below to try it out. 📲Open from mobile phone with GPS data enabled.

  • Click Places

    Show place icon for every place. Clicking on the icon will show the place name.

  • Places Name

    Show icon and place name above. Clicking on places will redirect to a certain URL (now mocked up).

Every example uses the places.js script to load places. You set your places using static data, with specific coordinates, adding these info in the first lines of code (there are comments to explain it better).

Otherwise, as default, the script searches for places of interest near the user using Foursquare APIs. Please retrieve valid API credentials here in order to use it. Place credentials (replace both Client Secret and Client Id) on places.js.

You can also use GeoAR.js without the script, adding gps-entity-place entities directly on the index.html file.as documentated here.

See on codepen

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.

Guides for beginners

Marker Based

Location Based

Advanced guides

Marker Based

Examples

Try to get inspired by this great works:

Marker Based

Location Based

  • Click Places - set up remote credentials to fetch remote places (places.js file)
  • Places Name - add new places statically on javascript (places.js file)
  • Only HTML - add new places statically on html (index.html file)
  • Only HTML - like only-html but here content always face the user (index.html file)

Related Projects

Augmented Website

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

Community

Tools

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.

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

screenshot

What’s New?

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

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?

screen shot 2017-03-06 at 16 31 28

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.

screen shot 2017-03-12 at 15 19 51 screen shot 2017-03-07 at 10 08 39

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

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

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

About

Image tracking, Location Based AR, Marker tracking. All on the Web.

Resources

Readme

License

MIT license

Code of conduct

Code of conduct
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

13 tags

Packages

No packages published

Languages

  • JavaScript 55.8%
  • HTML 33.9%
  • Makefile 2.5%
  • Brainfuck 1.9%
  • C 1.9%
  • Forth 1.9%
  • Other 2.1%