Simple-AR

Description / Rationale

Simple AR is a web-based image tracking library (platform) based on WebAssembly. Unlike other web-based AR libraries it:

allows loading image targets without training;
recognizes partially visible targets;
can recognize target at a greater distance.

Instructions

In order to use it, attach "simple-ar" to a-entity. The library (platform) has the following attributes (new attributes will be added in the process of development):

src: { type: "string" } - The URL or source of image target. Can be .jpg or .png file.
minCutOffValue: { type: "float", default: 0.01 } - One Euro Filter related parameter for smoothing the tracking.
betaValue: { type: "float", default: 0.1 } - One Euro Filter related parameter for smoothing the tracking.
dCutOffValue: { type: "float", default: 0.001 }- One Euro Filter related parameter for smoothing the tracking.

The code below shows the sample implementation:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple AR - A Web based AR for A-Frame</title>
    <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
  </head>
  <body>
    <script
      src="https://cdn.jsdelivr.net/gh/akbartus/Simple-AR/dist/0.1.2/simple-ar.min.js"
      onload="onWasmLoaded();"
    ></script>
    <a-scene>
      <a-entity simple-ar="src: img/target.jpg; minCutOffValue: 1; betaValue:0.1;">
        <a-plane
          position="0 0 0"
          rotation="0 0 0"
          width="1"
          height="1"
          material="src: https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg"
        ></a-plane>
      </a-entity>
      <a-camera position="0 0 0"></a-camera>
    </a-scene>
  </body>
</html>

Please note: Current version only supports single image tracking. Sample target, used in this example can be found here. In order to improve smoothness of tracking to the desired level, play with One Euro filter values.

Events Handling

The library has the following events:

targetFound: Triggered when the target image is found by Simple AR.

document.addEventListener("targetFound", function (event) {
    console.log("Target found!");
});

targetLost: Triggered when the target image is lost by Simple AR.

document.addEventListener("targetLost", function (event) {
    console.log("Target lost!");
});

onVideoStarted: Triggered when webcamera video is started.

document.addEventListener("onVideoStarted", () => {
    console.log("video started!");
});

arPause: A toggle, which lets pause tracking system or unpause.

const pauseButton = document.createElement("button");
pauseButton.setAttribute("style", "position: absolute; left:10px; top:10px; z-index:3");
pauseButton.textContent = "Pause";
pauseButton.addEventListener("click", arPause); // call here
document.body.appendChild(pauseButton);

onDistance: Show distance between camera and image target.

document.addEventListener("onDistance", (event) => {
 const distance = event.detail;
 console.log("Distance:", distance);
});

Version

Most current version is 0.1.2.

Updates / Bug Fixes

Please note that the work on this library (platform) is in progress. Future updates:

~~Adding "onDistance" event, which will let measuring distance between camera and AR target and trigger interactive events~~.
~~Fixing rotation bug~~.
~~Fixing positioning bug~~.
~~Fixing centering issue~~.
~~Full Babylon.js example created~~.
~~Full Three.js example created~~.
Adding runtime target image loading feature.
~~Adding a computer vision example for reading/segmenting texture of image target on a screen.~~
Adding interactive examples.
Adding Unity support (Unity WebGL exporter).
Adding React example.

Tech Stack

The library(platform) is powered by AFrame, Three.js and WebAssembly (Emscripten). One Euro Filter was taken/adapted from the following sources ( https://github.com/hiukim/mind-ar-js/blob/master/src/libs/one-euro-filter.js, https://jaantollander.com/post/noise-filtering-using-one-euro-filter/#mjx-eqn%3A1). The library(platform) is compatible with latest version of A-Frame (1.4.2). Tests with older versions of A-Frame were not perfomed yet.

Example implementation of Simple AR is also given for Three.js and Babylon.js (see "other_frameworks" folder).

Demo

See A-Frame demo here: Demo

See ThreeJs demo here: Demo

See BabylonJs demo here: Demo

See a computer vision example for reading/segmenting texture of image target on a screen here: Demo. Get image target here. For further guidance refer to this repository.