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.
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.
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);
});Most current version is 0.1.2.
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)
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).
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
