Develop the Three.js version of MindAR
masterTo develop the Three.js version, use the watch command. This will observe changes in the src folder and continuously rebuild the artefacts in the dist-dev folder.
npm run watchMindAR
repository·master·Indexed 25 days ago
https://github.com/hiukim/mind-ar-jsA web-based augmented reality framework (version 1.2.5) written in pure JavaScript that supports image tracking and face tracking. It utilizes WebGL via TensorFlow.js and Web Workers for high performance in the browser. The library provides integrations for A-Frame and Three.js, and includes a Detector class for identifying feature points within images.
What's inside MindAR
Develop the A-Frame version of MindAR
masterWhen developing the A-Frame version, you must run the build command every time you make changes, as the
--watchparameter does not currently support automatically generatingmindar-XXX-aframe.jsfiles.npm run build-devCompile Target Images for MindAR
masterTo use custom images for tracking, you must first compile them into a
.mindfile. You can use the browser-based Target Images Compiler tool to upload your images and generate the necessary target data for MindAR.https://hiukim.github.io/mind-ar-js-doc/tools/compileBuild MindAR for Production
masterTo create a production build of the library, use the following npm command. The resulting build will be located in the
distfolder.npm run buildQuick Start with MindAR and A-Frame
masterYou can build a basic Image Tracking AR application using MindAR with the A-Frame extension. This requires three main scripts: the core MindAR image tracking library, the A-Frame library, and the MindAR A-Frame component. The setup involves defining an
<a-scene>with themindar-imagecomponent, specifying theimageTargetSrc(a compiled.mindfile), and using<a-entity mindar-image-target>to anchor content to specific images.<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image.prod.js"></script> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image-aframe.prod.js"></script> </head> <body> <a-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"> <a-assets> <img id="card" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.png" /> <a-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"></a-asset-item> </a-assets> <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> <a-entity mindar-image-target="targetIndex: 0"> <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane> <a-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"> </a-entity> </a-scene> </body> </html>Access MindAR Face Tracking via window.MINDAR.FACE
masterThe Face tracking module is exposed globally on thewindow.MINDAR.FACEobject. This allows you to access theControllerandUIcomponents directly in a browser environment without using ES modules if necessary.Detect feature points from a TensorFlow Tensor
masterUsedetect(inputImageT)to process an image provided as atf.Tensor. This is the primary method for low-level detection when working directly with TensorFlow.js tensors.Initialize the Detector class
masterTheDetectorclass is used to identify feature points within an image. It requires the image dimensions and an optional debug mode. The detector automatically calculates the number of octaves based on the provided width and height, up to a maximum of 5 octaves or until the dimensions fall below 8 pixels.Import Face Tracking Controller and UI
masterWhen using ES modules, you can import theControllerandUIcomponents directly from the face target module to manage face tracking logic and user interface elements.Detect feature points from ImageData
masterUsedetectImageData(imageData)to process standard browserImageDataobjects. This method converts the grayscale/RGBA data into a format suitable for the detection engine and returns the identified feature points.Import MindAR Image Tracking modules as ES modules
masterYou can import the core image tracking components directly using ES module syntax:
Controller: The main engine for managing image targets.Compiler: The utility for processing target images.UI: The UI management module.
Access MindAR Image Tracking via the global MINDAR object
masterThe
mind-arpackage exports its core components for image tracking. These are available both as ES modules and via the globalwindow.MINDAR.IMAGEobject in browser environments.Key components available under
MINDAR.IMAGE:Controller: Manages the image tracking lifecycle and state.Compiler: Used for compiling target images into a compatible format.UI: Provides user interface elements for the AR experience.