{"id":13534638,"url":"https://github.com/hiukim/mind-ar-js","last_synced_at":"2025-10-04T21:49:34.228Z","repository":{"id":37074519,"uuid":"261748329","full_name":"hiukim/mind-ar-js","owner":"hiukim","description":"Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js","archived":false,"fork":false,"pushed_at":"2024-06-11T13:03:11.000Z","size":99883,"stargazers_count":2381,"open_issues_count":101,"forks_count":445,"subscribers_count":51,"default_branch":"master","last_synced_at":"2025-04-02T02:09:13.844Z","etag":null,"topics":["aframe","augmented-reality","mediapipe","tensorflowjs","threejs","webar"],"latest_commit_sha":null,"homepage":"","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/hiukim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"hiukim"}},"created_at":"2020-05-06T12:13:30.000Z","updated_at":"2025-04-01T01:53:41.000Z","dependencies_parsed_at":"2023-02-09T16:31:09.823Z","dependency_job_id":"24a029d4-43ed-46e4-98cd-20fa5f1344c5","html_url":"https://github.com/hiukim/mind-ar-js","commit_stats":{"total_commits":338,"total_committers":12,"mean_commits":"28.166666666666668","dds":0.3520710059171598,"last_synced_commit":"41e3e264c6861c45512364d724c620412cc67180"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiukim%2Fmind-ar-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiukim%2Fmind-ar-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiukim%2Fmind-ar-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiukim%2Fmind-ar-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hiukim","download_url":"https://codeload.github.com/hiukim/mind-ar-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247968368,"owners_count":21025823,"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","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","augmented-reality","mediapipe","tensorflowjs","threejs","webar"],"created_at":"2024-08-01T08:00:34.193Z","updated_at":"2025-10-04T21:49:29.189Z","avatar_url":"https://github.com/hiukim.png","language":"JavaScript","funding_links":["https://github.com/sponsors/hiukim"],"categories":["Frameworks \u0026 Libraries"],"sub_categories":[],"readme":"# MindAR\n\n\u003cimg src=\"https://hiukim.github.io/mind-ar-js-doc/assets/images/multi-targets-demo-8b5fc868f6b0847a9818e8bf0ba2c1c3.gif\" height=\"250\"\u003e\u003cimg src=\"https://hiukim.github.io/mind-ar-js-doc/assets/images/interactive-demo-1ab348a381cbd808f4d52c8750524d11.gif\" height=\"250\"\u003e\u003cimg src=\"https://hiukim.github.io/mind-ar-js-doc/assets/images/face-tryon-demo-369c4ba701f1df2099ecf05c27f0c944.gif\" height=\"250\"\u003e\n\n\nMindAR is a web augmented reality library. Highlighted features include:\n\n:star: Support Image tracking and Face tracking. For Location or Fiducial-Markers Tracking, checkout [AR.js](https://github.com/AR-js-org/AR.js)\n\n:star: Written in pure javascript, end-to-end from the underlying computer vision engine to frontend\n\n:star: Utilize gpu (through webgl) and web worker for performance\n\n:star: Developer friendly. Easy to setup. With AFRAME extension, you can create an app with only 10 lines of codes\n\n# Fund Raising\n\nMindAR is the only actively maintained web AR SDK which offer comparable features to commercial alternatives. This library is currently maintained by me as an individual developer. To raise fund for continuous development and to provide timely supports and responses to issues, here is a list of related projects/ services that you can support.\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd valign=\"top\"\u003e\n        \u003ch2\u003eUnity WebAR Foundation\u003c/h2\u003e\n        \u003cp\u003e\n          \u003ca href=\"https://assetstore.unity.com/packages/tools/integration/webar-foundation-250806\"\u003eWebAR Foundation\u003c/a\u003e is a unity package that allows Unity developer to build WebGL-platform AR applications. It acts as a Unity Plugin that wraps around popular Web SDK.\n        \u003c/p\u003e\n        \u003cp\u003e\n          If you are a Unity developer, check it out! \u003ca href=\"https://github.com/hiukim/unity-webar-foundation\" target=\"_blank\"\u003ehttps://github.com/hiukim/unity-webar-foundation\u003c/a\u003e\n        \u003c/p\u003e\n        \u003cp\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://user-images.githubusercontent.com/459126/240146462-c7c2559d-cde9-43cd-846a-cf490ce99bb3.png\" border=\"10\"/\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd valign=\"top\"\u003e\n        \u003ch2\u003eWeb AR Development Course\u003c/h2\u003e\n        \u003cp\u003eI'm offering a WebAR development course in Udemy. It's a very comprehensive guide to Web AR development, not limited to MindAR.\u003c/p\u003e\n        \u003cp\u003eCheck it out if you are interested: \u003ca target=\"_blank\" href=\"https://www.udemy.com/course/introduction-to-web-ar-development/?referralCode=D2565F4CA6D767F30D61\"\u003ehttps://www.udemy.com/course/introduction-to-web-ar-development/?referralCode=D2565F4CA6D767F30D61\u003c/a\u003e\u003c/p\u003e\n      \u003c/td\u003e\n      \u003ctd width=\"50%\"\u003e\n        \u003cimg src=\"https://user-images.githubusercontent.com/459126/141425015-f5fe2912-b26d-4366-8952-5866a072fb34.jpg\"/\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd valign=\"top\"\u003e\n        \u003ch2\u003eMindAR Studio\u003c/h2\u003e\n        \u003cp\u003e\n          MindAR Studio allows you to build Face Tracking AR without coding. You can build AR effects through a drag-n-drop editor and export static webpages for self-host. Free to use!\n        \u003c/p\u003e\n        \u003cp\u003e\n          Check it out if you are interested! \u003ca href=\"https://studio.mindar.org\" target=\"_blank\"\u003ehttps://studio.mindar.org\u003c/a\u003e\n        \u003c/p\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://www.mindar.org/content/images/2022/07/screenshot.png\" border=\"10\"/\u003e\u003c/td\u003e\n    \u003c/tr\u003e    \n    \u003ctr\u003e\n      \u003ctd valign=\"top\"\u003e\n        \u003ch2\u003ePictarize\u003c/h2\u003e\n        \u003cp\u003e\n          Pictarize is a hosted platform for creating and publishing Image Tracking AR applications. Free to use!\n        \u003c/p\u003e\n        \u003cp\u003e\n          Check it out if you are interested! \u003ca href=\"https://pictarize.com\" target=\"_blank\"\u003ehttps://pictarize.com\u003c/a\u003e\n        \u003c/p\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://hiukim.github.io/mind-ar-js-doc/assets/images/pictarize-studio-98ea8d35d963ebcd7d31ca7695c3f984.png\" border=\"10\"/\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n# Documentation\n\nOfficial Documentation: https://hiukim.github.io/mind-ar-js-doc\n\n# Demo - Try it yourself\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd valign=\"top\" width=\"50%\"\u003e\n        \u003ch2\u003eImage Tracking - Basic Example\u003c/h2\u003e\n        \u003cp\u003eDemo video: https://youtu.be/hgVB9HpQpqY \u003c/p\u003e\n        \u003cp\u003eTry it yourself: https://hiukim.github.io/mind-ar-js-doc/examples/basic/\u003c/p\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"https://hiukim.github.io/mind-ar-js-doc/assets/images/basic-demo-fde07aa7567bf213e61b37dbaa192fec.gif\" width=\"300px\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd valign=\"top\"\u003e\n        \u003ch2\u003eImage Tracking - Multiple Targets Example\u003c/h2\u003e\n        \u003cp\u003eTry it yourself: https://hiukim.github.io/mind-ar-js-doc/examples/multi-tracks\u003c/p\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"https://hiukim.github.io/mind-ar-js-doc/assets/images/multi-targets-demo-8b5fc868f6b0847a9818e8bf0ba2c1c3.gif\" width=\"300px\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd valign=\"top\"\u003e\n        \u003ch2\u003eImage Tracking - Interactive Example\u003c/h2\u003e\n        \u003cp\u003eDemo video: https://youtu.be/gm57gL1NGoQ\u003c/p\u003e\n        \u003cp\u003eTry it yourself: https://hiukim.github.io/mind-ar-js-doc/examples/interative\u003c/p\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"https://hiukim.github.io/mind-ar-js-doc/assets/images/interactive-demo-1ab348a381cbd808f4d52c8750524d11.gif\" width=\"300px\"/\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd valign=\"top\"\u003e\n        \u003ch2\u003eFace Tracking - Virtual Try-On Example\u003c/h2\u003e\n        \u003cp\u003eTry it yourself: https://hiukim.github.io/mind-ar-js-doc/face-tracking-examples/tryon\u003c/p\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"https://hiukim.github.io/mind-ar-js-doc/assets/images/face-tryon-demo-369c4ba701f1df2099ecf05c27f0c944.gif\"  width=\"300px\"/\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd valign=\"top\"\u003e\n        \u003ch2\u003eFace Tracking - Face Mesh Effect\u003c/h2\u003e\n        \u003cp\u003eTry it yourself: https://hiukim.github.io/mind-ar-js-doc/more-examples/threejs-face-facemesh\u003c/p\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"https://hiukim.github.io/mind-ar-js-doc/assets/images/face-mesh-demo-8f5bd8d1bcbffbdb76896b58171ecc8a.gif\"  width=\"300px\"/\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### More examples\n\nMore examples can be found here: https://hiukim.github.io/mind-ar-js-doc/examples/summary\n\n\n# Quick Start\nLearn how to build the Basic example above in 5 minutes with a plain text editor! \n\nQuick Start Guide: https://hiukim.github.io/mind-ar-js-doc/quick-start/overview\n\nTo give you a quick idea, this is the complete source code for the Basic example. It's static HTML page, you can host it anywhere.\n\n```\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image.prod.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://aframe.io/releases/1.2.0/aframe.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image-aframe.prod.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ca-scene mindar-image=\"imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.mind;\" color-space=\"sRGB\" renderer=\"colorManagement: true, physicallyCorrectLights\" vr-mode-ui=\"enabled: false\" device-orientation-permission-ui=\"enabled: false\"\u003e\n      \u003ca-assets\u003e\n        \u003cimg id=\"card\" src=\"https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.png\" /\u003e\n        \u003ca-asset-item id=\"avatarModel\" src=\"https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/softmind/scene.gltf\"\u003e\u003c/a-asset-item\u003e\n      \u003c/a-assets\u003e\n\n      \u003ca-camera position=\"0 0 0\" look-controls=\"enabled: false\"\u003e\u003c/a-camera\u003e\n      \u003ca-entity mindar-image-target=\"targetIndex: 0\"\u003e\n        \u003ca-plane src=\"#card\" position=\"0 0 0\" height=\"0.552\" width=\"1\" rotation=\"0 0 0\"\u003e\u003c/a-plane\u003e\n        \u003ca-gltf-model rotation=\"0 0 0 \" position=\"0 0 0.1\" scale=\"0.005 0.005 0.005\" src=\"#avatarModel\" animation=\"property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate\"\u003e\n      \u003c/a-entity\u003e\n    \u003c/a-scene\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n# Target Images Compiler\nYou can compile your own target images right on the browser using this friendly Compiler tools. If you don't know what it is, go through the Quick Start guide \n\nhttps://hiukim.github.io/mind-ar-js-doc/tools/compile\n\n\u003cimg src=\"https://hiukim.github.io/mind-ar-js-doc/assets/images/step2-9f3c4dcb8a2e60766d86f950d06929ea.png\" width=\"300\"/\u003e\n\n# Roadmaps\n1. Supports more augmented reality features, like Hand Tracking, Body Tracking and Plane Tracking\n\n2. Research on different state-of-the-arts algorithms to improve tracking accuracy and performance\n\n3. More educational references.\n\n# Contributions\nI personally don't come from a strong computer vision background, and I'm having a hard time improving the tracking accuracy. I could really use some help from computer vision expert. Please reach out and discuss.\n\nAlso welcome javascript experts to help with the non-engine part, like improving the APIs and so.\n\nIf you are graphics designer or 3D artists and can contribute to the visual. Even if you just use MindAR to develop some cool applications, please show us!\n\nWhatever you can think of. It's an opensource web AR framework for everyone!\n\n# Development Guide\n\n#### Directories explained\n\n1. `/src` folder contains majority of the source code\n2. `/examples` folder contains examples to test out during development\n\n#### To create a production build\n\nrun `\u003e npm run build`. the build will be generated in `dist` folder\n\n#### For development\n\nTo develop threeJS version, run `\u003e npm run watch`. This will observe the file changes in `src` folder and continuously build the artefacts in `dist-dev`.\n\nTo develop AFRAME version, you will need to run `\u003enpm run build-dev` everytime you make changes. The `--watch` parameter currently failed to automatically generate `mindar-XXX-aframe.js`. \n\nAll the examples in the `examples` folder is configured to use this development build, so you can open those examples in browser to start debugging or development.\n\nThe examples should run in desktop browser and they are just html files, so it's easy to start development. However, because it requires camera access, so you need a webcam. Also, you need to run the html file with some localhost web server. Simply opening the files won't work.\n\nFor example, you can install this chrome plugin to start a local server: `https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en`\n\nYou most likely would want to test on mobile device as well. In that case, it's better if you could setup your development environment to be able to share your localhost webserver to your mobile devices. If you have difficulties doing that, perhaps behind a firewall, then you could use something like `ngrok` (https://ngrok.com/) to tunnel the request. But this is not an ideal solution, because the development build of MindAR is not small (\u003e10Mb), and tunneling with free version of `ngrok` could be slow.\n\n#### webgl backend\nThis library utilize tensorflowjs (https://github.com/tensorflow/tfjs) for webgl backend. Yes, tensorflow is a machine learning library, but we didn't use it for machine learning! :) Tensorflowjs has a very solid webgl engine which allows us to write general purpose GPU application (in this case, our AR application). \n\nThe core detection and tracking algorithm is written with custom operations in tensorflowjs. They are like shaders program. It might looks intimidating at first, but it's actually not that difficult to understand.\n\n# Credits\nThe computer vision idea is borrowed from artoolkit (i.e. https://github.com/artoolkitx/artoolkit5). Unfortunately, the library doesn't seems to be maintained anymore.\n\nFace Tracking is based on mediapipe face mesh model (i.e. https://google.github.io/mediapipe/solutions/face_mesh.html)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiukim%2Fmind-ar-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiukim%2Fmind-ar-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiukim%2Fmind-ar-js/lists"}