The Build Marker Based AR Solution is an application that can detect a marker and create a semblance of an augmented reality experience.
The marker can be detected and identified using the phone's camera and OpenCV library. When the marker is detected, it is then analyzed for color, size, and orientation. This information is used to determine what kind of marker it is (3D or 2D) and whether it can be used to place 3D objects in the scene. If this check passes, the 3D object is drawn at the correct position and orientation in relation to the camera feed from the device.
We used MindAR for marker detection and VSCode for development. We also used aframe and three.js for our applications. Mind AR is a platform that allows developers to build Augmented Reality applications. It is written in Javascript, HTML, and CSS. Mind AR works with the marker-based AR system.
Deployment Information
The mind-ar library added in this section is primarily used to create Marker Based AR project. The entire solution is available as a package to download from the source code repository.
- Download, extract and double-click the kit installer file to install the kit.
- After the successful installation of the kit, press 'Y' to run the kit.
- To run the kit manually, press 'N' and locate the zip file 'mind-ar-js'.
- Open the folder in Visual Studio Code.
- Run the 'image.html' file.
- Scan the respective 'rock.png' and 'bear.png' images.
- Now, you will experience Augmented Reality in your own Environment!
Click on the button below to download the solution and follow the deployment instructions to begin set-up. This 1-click kit has all the required dependencies and resources you may need to build your Marker based AR App.
Troubleshooting
- While running batch file, if you encounter Windows protection alert, select More info --> Run anyway
- During kit installer, if you encounter a Windows security alert, click Allow
For a detailed tutorial on installing & executing the solution as well as learning resources including training & certification opportunities, please visit the OpenWeaver Community
Development Environment
Visual studio code IDE is used for this development. It becomes easy and simple to develop an interactive UI with Visual studio code.
AR Libraries
A-Frame is an open-source web framework used for building Augmented reality (AR) experiences. Web-based augmented reality (WebAR) is the most advanced technology that allows users to access AR experiences directly from their smartphones. Three.js is the open-source web framework used to develop augmented reality (AR) projects.
aframeby aframevr
:a: Web framework for building virtual reality experiences.
aframeby aframevr
JavaScript 15445 Version:v1.4.2 License: Permissive (MIT)
AR.jsby AR-js-org
Image tracking, Location Based AR, Marker tracking. All on the Web.
AR.jsby AR-js-org
JavaScript 4613 Version:3.4.5 License: Permissive (MIT)
Kit Solution Source
mind-ar-jsby hiukim
Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js
mind-ar-jsby hiukim
JavaScript 1610 Version:v1.2.2 License: Permissive (MIT)
Support
If you need help using this kit, you may reach us at the OpenWeaver Community.