Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/akbartus/simple-ar
Simple AR is a web-based image tracking library (platform) based on WebAssembly. It is also compatible with A-Frame, BabylonJs and ThreeJs frameworks.
https://github.com/akbartus/simple-ar
aframe aframe-component aframe-vr augmented-reality babylonjs image-tracking threejs webar
Last synced: 3 months ago
JSON representation
Simple AR is a web-based image tracking library (platform) based on WebAssembly. It is also compatible with A-Frame, BabylonJs and ThreeJs frameworks.
- Host: GitHub
- URL: https://github.com/akbartus/simple-ar
- Owner: akbartus
- License: mit
- Created: 2023-07-21T07:18:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-15T16:31:00.000Z (6 months ago)
- Last Synced: 2024-08-15T18:36:33.653Z (6 months ago)
- Topics: aframe, aframe-component, aframe-vr, augmented-reality, babylonjs, image-tracking, threejs, webar
- Language: JavaScript
- Homepage: https://webar-simple.glitch.me/
- Size: 7.24 MB
- Stars: 31
- Watchers: 5
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```html
Simple AR - A Web based AR for A-Frame
```
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.
```js
document.addEventListener("targetFound", function (event) {
console.log("Target found!");
});
```
* targetLost: Triggered when the target image is lost by Simple AR.
```js
document.addEventListener("targetLost", function (event) {
console.log("Target lost!");
});
```
* onVideoStarted: Triggered when webcamera video is started.
```js
document.addEventListener("onVideoStarted", () => {
console.log("video started!");
});
```
* arPause: A toggle, which lets pause tracking system or unpause.
```js
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.
```js
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](https://webar-simple.glitch.me/)
See ThreeJs demo here: [Demo](https://simplear-threejs.glitch.me/)
See BabylonJs demo here: [Demo](https://simplear-babylonjs.glitch.me/)
See a computer vision example for reading/segmenting texture of image target on a screen here: [Demo](https://webarcoloring-simplear.glitch.me/). Get image target here. For further guidance refer to this repository.
