Convert Figma logo to code with AI

AR-js-org logoAR.js

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

5,373
919
5,373
222
View on GitHubView on NPM

Top Related Projects

jeromeetienne's avatar

AR.js

15,782

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

hiukim's avatar

mind-ar-js

2,195

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js

Quick Overview

AR.js is an open-source library for Augmented Reality on the web. It allows developers to create AR experiences that run directly in web browsers, without the need for dedicated apps. AR.js supports marker-based and location-based AR, making it versatile for various applications.

Pros

  • Easy to use and integrate into existing web projects
  • Works on most modern devices with a camera and web browser
  • No need for users to install additional apps
  • Supports both marker-based and location-based AR

Cons

  • Performance can be limited compared to native AR apps
  • Requires a stable internet connection for optimal experience
  • Some advanced features may not be available compared to native AR SDKs
  • Browser compatibility issues may arise on older devices

Code Examples

  1. Creating a simple marker-based AR scene:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>

<a-scene embedded arjs>
  <a-marker preset="hiro">
    <a-box position="0 0.5 0" material="color: red;"></a-box>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>
  1. Adding a custom image as a marker:
<a-scene embedded arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
  <a-marker type="pattern" url="path/to/pattern-marker.patt">
    <a-entity
      gltf-model="path/to/your/model.gltf"
      scale="0.05 0.05 0.05"
      position="0 0 0"
    ></a-entity>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>
  1. Creating a location-based AR experience:
<a-scene
  vr-mode-ui="enabled: false"
  embedded
  arjs="sourceType: webcam; debugUIEnabled: false;"
>
  <a-text
    value="This content is 100 meters away"
    look-at="[gps-camera]"
    scale="50 50 50"
    gps-entity-place="latitude: <YOUR_LATITUDE>; longitude: <YOUR_LONGITUDE>;"
  ></a-text>
  <a-camera gps-camera rotation-reader> </a-camera>
</a-scene>

Getting Started

  1. Include AR.js and A-Frame in your HTML file:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  1. Create an AR scene with a marker and 3D object:
<a-scene embedded arjs>
  <a-marker preset="hiro">
    <a-box position="0 0.5 0" material="color: yellow;"></a-box>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>
  1. Open the HTML file in a web browser on a device with a camera to experience the AR content.

Competitor Comparisons

jeromeetienne logo

AR.js

15,782

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

Pros of AR.js (jeromeetienne)

  • Longer development history and more established codebase
  • Wider range of supported AR features and functionalities
  • Larger community and more extensive documentation

Cons of AR.js (jeromeetienne)

  • Less frequent updates and maintenance
  • Potentially outdated dependencies and compatibility issues
  • More complex setup and configuration process

Code Comparison

AR.js (jeromeetienne):

<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
  <a-marker preset="hiro">
    <a-box position='0 0.5 0' material='color: red;'></a-box>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

AR.js (AR-js-org):

<a-scene embedded arjs='sourceType: webcam;'>
  <a-nft type="nft" url="path/to/image.jpg" smooth="true" smoothCount="10" smoothTolerance="0.01" smoothThreshold="5">
    <a-entity gltf-model="path/to/model.gltf" scale="5 5 5" position="50 150 0"></a-entity>
  </a-nft>
  <a-entity camera></a-entity>
</a-scene>

The AR-js-org version showcases more advanced features like NFT (Natural Feature Tracking) and improved smoothing options, while the jeromeetienne version demonstrates a simpler marker-based AR setup.

hiukim logo

mind-ar-js

2,195

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js

Pros of mind-ar-js

  • Focuses on image tracking, providing more accurate and stable tracking for image-based AR
  • Offers a simpler API and easier setup process for developers
  • Includes built-in features for creating image targets and handling multiple targets

Cons of mind-ar-js

  • Limited to image-based tracking, lacking support for location-based AR
  • Smaller community and fewer resources compared to AR.js
  • May have higher computational requirements, potentially affecting performance on low-end devices

Code Comparison

AR.js example:

<a-scene embedded arjs='sourceType: webcam;'>
  <a-marker preset='hiro'>
    <a-box position='0 0.5 0' material='color: red;'></a-box>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

mind-ar-js example:

<a-scene mindar-image="imageTargetSrc: ./targets.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
  <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
  <a-entity mindar-image-target="targetIndex: 0">
    <a-box position="0 0.5 0" rotation="0 45 0" color="blue"></a-box>
  </a-entity>
</a-scene>

Both libraries use A-Frame for rendering, but mind-ar-js focuses on image tracking with its mindar-image component, while AR.js uses marker-based tracking with a-marker.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

AR.js - Augmented Reality on the Web

CI code style: prettier Gitter chat Twitter Follow Twitter Follow

You can now own the first commit of AR.js! 👉OpenSea

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

30/12/21 Update: There is now also a brand new OSS Web AR JS library around, called MindAR. If you need a great Image tracking feature (also multiple image tracking) and Face tracking, go check it out!
As for now, AR.js is still the only library providing Marker based and Location based AR features.

This project has been created by @jeromeetienne, previously managed by Nicolò Carpignoli and it is now maintained by the AR.js org.

🚀For frequent updates on AR.js you can follow @the official 𝕏(Twitter) account and Watch this repo!

Logo is courtesy of Simon Poulter .

⚡️AR.js has now an official Documentation!⚡️

Check it out: AR.js Official Documentation.

If you want to give a first look at AR.js potential, you can continue with this Readme.

⚡️ AR.js is coming in different builds. They are both maintained. They are exclusive.

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

You can also import a specific version replacing master keyword with version tag:

  <script src="https://raw.githack.com/AR-js-org/AR.js/3.4.5/aframe/build/aframe-ar-nft.js">

Get started

🖼 Image Tracking

Please follow these simple steps:

  • Create a new project with the code below (or open this live example and go directly to the last step)
  • Run it on a server
  • Open the website on your phone
  • Scan this picture to see content through the camera.
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1.3.0/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>

<body style="margin : 0px; overflow: hidden;">
  <!-- minimal loader shown until image descriptors are loaded -->
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true; precision: medium;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
    <a-nft
      type="nft"
      url="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <a-entity
        gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
        scale="5 5 5"
        position="150 300 -100"
      >
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>

🌍Location Based Example

Please follow these simple steps:

  • Create a new project with the following snippet, and change add-your-latitude and add-your-longitude with your latitude and longitude, without the <>.
  • Run it on a server
  • Activate GPS on your phone and navigate to the example URL
  • 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://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
  </head>

  <body>
    <a-scene
      vr-mode-ui="enabled: false"
      arjs="sourceType: webcam; videoTexture: true; debugUIEnabled: false;"
    >
      <a-text
        value="This content will always face you."
        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 Based Example

Please follow this simple steps:

  • Create a new project with the code below (or open this live example and go directly to the last step)
  • Run it on a server
  • Open the website on your phone
  • Scan this picture to see content through the camera.
<!DOCTYPE html>
<html>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <!-- we import arjs version without NFT but with marker + location based support -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <body style="margin : 0px; overflow: hidden;">
        <a-scene embedded arjs>
        <a-marker preset="hiro">
            <!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
            <a-entity
            position="0 0 0"
            scale="0.05 0.05 0.05"
            gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
            ></a-entity>
        </a-marker>
        <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

Important! Be aware that if you are referring to external resources, in any app, especially those using NFT, you will encounter CORS problems if those resources are not in the same server of the code. If you can’t see the tracking, please open your Browser Dev Tools and check if you have CORS errors in the console. If so, you have to fix those errors in order to see your content. The correct fix is to place your resources on the same server of your code.

If you cannot do that, you can host a proxy anywhere server to solve that (https://github.com/Rob--W/cors-anywhere). Please note that several hosting services have policies that does not permit to use such server. Always check hosting services policies before using them to avoid account suspensions

Learn more on the AR.js Official Documentation.

ES6 npm package

You can install AR.js with npm and use in any compatible project that support npm modules (React.js, Vue.js, Next.js or whatelse), to install it run:

// Install with npm
npm install @ar-js-org/ar.js

// Install with yarn
yarn add @ar-js-org/ar.js

For some examples read this issue.

Troubleshooting, feature requests, community

You can find a lot of help on the old AR.js repositories issues. Please search on open/closed issues, you may find interesting stuff.

Contributing

From opening a bug report to creating a pull request: every contribution is appreciated and welcome. If you're planning to implement a new feature or change the api please create an issue first. This way we can ensure that your precious work is not in vain.

Issues

If you are having configuration or setup problems, please post a question to StackOverflow. You can also address the question to us in our Gitter chatroom

If you have discovered a bug or have a feature suggestion, feel free to create an issue on Github.

Submitting Changes

After getting some feedback, push to your fork and submit a pull request. We may suggest some changes or improvements or alternatives, but for small changes your pull request should be accepted quickly.

Some things that will increase the chance that your pull request is accepted:

Licenses

It is all open-source! artoolkit5-js is under LGPLv3 license and additional permission. And all my code in the AR.js repository is under MIT license. :)

For legal details, be sure to check artoolkit5-js license and AR.js license.

Full Changelog: AR.js changelog

NPM DownloadsLast 30 Days