{"id":19815156,"url":"https://github.com/akbartus/simple-ar","last_synced_at":"2025-08-13T02:45:00.572Z","repository":{"id":182847006,"uuid":"669030724","full_name":"akbartus/Simple-AR","owner":"akbartus","description":"Simple AR is a web-based image tracking library (platform) based on WebAssembly. It is also compatible with A-Frame, BabylonJs and ThreeJs frameworks.","archived":false,"fork":false,"pushed_at":"2024-08-15T16:31:00.000Z","size":7591,"stargazers_count":47,"open_issues_count":5,"forks_count":10,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-01T10:39:03.863Z","etag":null,"topics":["aframe","aframe-vr","augmented-reality","babylonjs","image-tracking","threejs","wasm","webar"],"latest_commit_sha":null,"homepage":"https://webar-simple.glitch.me/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akbartus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-07-21T07:18:26.000Z","updated_at":"2025-04-28T22:03:55.000Z","dependencies_parsed_at":"2023-07-21T20:55:57.830Z","dependency_job_id":"4cac65de-c305-4b36-9a85-6700f3861104","html_url":"https://github.com/akbartus/Simple-AR","commit_stats":null,"previous_names":["akbartus/simple-ar"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/akbartus/Simple-AR","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FSimple-AR","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FSimple-AR/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FSimple-AR/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FSimple-AR/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akbartus","download_url":"https://codeload.github.com/akbartus/Simple-AR/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FSimple-AR/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270170133,"owners_count":24539353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aframe","aframe-vr","augmented-reality","babylonjs","image-tracking","threejs","wasm","webar"],"created_at":"2024-11-12T10:04:52.922Z","updated_at":"2025-08-13T02:45:00.481Z","avatar_url":"https://github.com/akbartus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple-AR\n\u003cimg src=\"img/screenshot.gif\" title=\"screen capture\" alt=\"screen capture\" width=\"250\" style=\"text-align: center\"\u003e\n\n### **Description / Rationale**\nSimple AR is a web-based image tracking library (platform) based on WebAssembly. Unlike other web-based AR libraries it: \n* allows loading image targets without training;\n* recognizes partially visible targets;\n* can recognize target at a greater distance. \n\n### **Instructions**\nIn 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): \n* \u003cb\u003esrc: { type: \"string\" }\u003c/b\u003e - The URL or source of image target. Can be .jpg or .png file. \n* \u003cb\u003eminCutOffValue: { type: \"float\", default: 0.01 }\u003c/b\u003e - One Euro Filter related parameter for smoothing the tracking.\n* \u003cb\u003ebetaValue: { type: \"float\", default: 0.1 }\u003c/b\u003e - One Euro Filter related parameter for smoothing the tracking.\n* \u003cb\u003edCutOffValue: { type: \"float\", default: 0.001 }\u003c/b\u003e- One Euro Filter related parameter for smoothing the tracking.\n\nThe code below shows the sample implementation:\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eSimple AR - A Web based AR for A-Frame\u003c/title\u003e\n    \u003cscript src=\"https://aframe.io/releases/1.4.2/aframe.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript\n      src=\"https://cdn.jsdelivr.net/gh/akbartus/Simple-AR/dist/0.1.2/simple-ar.min.js\"\n      onload=\"onWasmLoaded();\"\n    \u003e\u003c/script\u003e\n    \u003ca-scene\u003e\n      \u003ca-entity simple-ar=\"src: img/target.jpg; minCutOffValue: 1; betaValue:0.1;\"\u003e\n        \u003ca-plane\n          position=\"0 0 0\"\n          rotation=\"0 0 0\"\n          width=\"1\"\n          height=\"1\"\n          material=\"src: https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg\"\n        \u003e\u003c/a-plane\u003e\n      \u003c/a-entity\u003e\n      \u003ca-camera position=\"0 0 0\"\u003e\u003c/a-camera\u003e\n    \u003c/a-scene\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n\n```\nPlease note: Current version only supports single image tracking. Sample target, used in this example can be found \u003ca href=\"img/target.jpg\"\u003ehere\u003c/a\u003e. In order to improve smoothness of tracking to the desired level, play with One Euro filter values.\n\n### **Events Handling**\nThe library has the following events:\n* \u003cb\u003etargetFound\u003c/b\u003e: Triggered when the target image is found by Simple AR.\n```js\ndocument.addEventListener(\"targetFound\", function (event) {\n    console.log(\"Target found!\");\n});\n```\n* \u003cb\u003etargetLost\u003c/b\u003e: Triggered when the target image is lost by Simple AR.\n```js\ndocument.addEventListener(\"targetLost\", function (event) {\n    console.log(\"Target lost!\");\n});\n```\n* \u003cb\u003eonVideoStarted\u003c/b\u003e: Triggered when webcamera video is started.\n```js\ndocument.addEventListener(\"onVideoStarted\", () =\u003e {\n    console.log(\"video started!\");\n});\n```\n* \u003cb\u003earPause\u003c/b\u003e: A toggle, which lets pause tracking system or unpause.\n```js\nconst pauseButton = document.createElement(\"button\");\npauseButton.setAttribute(\"style\", \"position: absolute; left:10px; top:10px; z-index:3\");\npauseButton.textContent = \"Pause\";\npauseButton.addEventListener(\"click\", arPause); // call here\ndocument.body.appendChild(pauseButton);\n```\n* \u003cb\u003eonDistance\u003c/b\u003e: Show distance between camera and image target.\n```js\ndocument.addEventListener(\"onDistance\", (event) =\u003e {\n const distance = event.detail;\n console.log(\"Distance:\", distance);\n});\n```\n\n### **Version**\nMost current version is 0.1.2.\n\n### **Updates / Bug Fixes**\nPlease note that the work on this library (platform) is in progress. Future updates:\n* \u003cdel\u003eAdding \"onDistance\" event, which will let measuring distance between camera and AR target and trigger interactive events\u003c/del\u003e.\n* \u003cdel\u003eFixing rotation bug\u003c/del\u003e.\n* \u003cdel\u003eFixing positioning bug\u003c/del\u003e.\n* \u003cdel\u003eFixing centering issue\u003c/del\u003e.\n* \u003cdel\u003eFull Babylon.js example created\u003c/del\u003e.\n* \u003cdel\u003eFull Three.js example created\u003c/del\u003e.\n* Adding runtime target image loading feature.\n* \u003cdel\u003eAdding a computer vision example for reading/segmenting texture of image target on a screen.\u003c/del\u003e\n* Adding interactive examples.\n* Adding Unity support (Unity WebGL exporter).\n* Adding React example.\n\n### **Tech Stack**\nThe 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).\nThe library(platform) is compatible with latest version of A-Frame (1.4.2). Tests with older versions of A-Frame were not perfomed yet.\n\nExample implementation of Simple AR is also given for Three.js and Babylon.js (see \"other_frameworks\" folder).   \n\n### **Demo**\nSee A-Frame demo here: [Demo](https://webar-simple.glitch.me/)\n\nSee ThreeJs demo here: [Demo](https://simplear-threejs.glitch.me/)\n\nSee BabylonJs demo here: [Demo](https://simplear-babylonjs.glitch.me/)\n\nSee a computer vision example for reading/segmenting texture of image target on a screen here: [Demo](https://webarcoloring-simplear.glitch.me/). Get image target \u003ca href=\"https://github.com/akbartus/WebAR-Coloring/blob/main/img/target_3d.jpg\"\u003ehere\u003c/a\u003e. For further guidance refer \u003ca href=\"https://github.com/akbartus/WebAR-Coloring\"\u003eto this repository.\u003c/a\u003e  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbartus%2Fsimple-ar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakbartus%2Fsimple-ar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbartus%2Fsimple-ar/lists"}