AR Engine

Welcome to the AR Engine documentation! Our AR Engine allows you to create immersive augmented reality experiences with ease. This guide will help you understand how to integrate and utilize the AR Engine in your projects.

Introduction

The AR Engine provides tools and libraries to develop augmented reality applications. Whether you're building for mobile, web, or other platforms, our AR Engine offers powerful features to bring your AR ideas to life.

Key Features

Cross-platform Support: Develop AR applications for multiple platforms.
Real-time Rendering: High-performance real-time rendering for smooth AR experiences.
Object Recognition: Recognize and interact with real-world objects.
Customizable UI: Build custom user interfaces for your AR applications.
Extensive API: Access a wide range of functionalities through our comprehensive API.

Getting Started

Prerequisites

Before you begin, ensure you have the following:

A basic understanding of JavaScript/TypeScript: Familiarity with these languages is essential.
Node.js and npm/yarn installed: The AR Engine is distributed via npm, so you'll need Node.js and npm or yarn installed on your machine.

Installation

You can install the AR Engine using npm or yarn.

Using npm

npm install @mirrar-sdm/ar-engine

Setup & Initialize the AR Engine

The setup of AR Engine requires the following inputs -

Dimensions - The dimensions of the AR container
Container - A HTML Element which will contain the AR Engine

import {AR_Engine} from "@mirrar-sdm/ar-engine"
import { TrackingTypeEnum } from "@mirrar-sdm/ar-engine/lib/TrackingManagers/MachineLearningTrackingManager"
 
function setupAREngine() {
    const container = document.getElementById('ar-container')
    const canvas = document.getElementById('canvas')
 
    // You can set any dimensions here but it is advised
    // to set the dimensions of AR Engine same as camera feed 
    const options = {
                container: container,
                dimensions: {
                    width: canvas.width,
                    height: canvas.height
                }
    }
    const arEngine = new AR_Engine(options)
}

Setup Face or Hand Tracking

The AR Engine works in 2 modes -

Face Tracking - The realtime face tracking mode. The users face is tracked in this mode and the jewellery like Earrings and Necklaces are placed in this mode.
Hand Tracking - The realtime hand tracking mode. The users hand is tracked in this mode and the jewllery like Rings and Bracelets are placed in this mode.

You can choose to run any of these modes but only one mode at a time can work. This function is supposed to be called only once each for Face tracking and Hand tracking.

 
// choose tracking type as face or hand
const trackingType = TrackingTypeEnum.Face // TrackingTypeEnum.Hand
 
// function to get the download progress of the AI model
const progressFunction = (values) -> {
    console.log("Download Progress", values)
}
 
// callback that will be called after completion of Face/Hand Tracking Setup
const onComplete = () => {
    console.log("Tracking setup successfull")
}
 
arEngine.setupTracking(trackingType, progressFunction, (data) => {
    onComplete(data)
})

Change Tracking Mode

This is required to switch to hand tracking from face tracking and vice versa. This method required setupTracking to load and initialize Face / Hand Tracking.

arEngine.startTracking(TrackingTypeEnum.Face)
 
// or
 
arEngine.startTracking(TrackingTypeEnum.Hand)

Process each camera frame in AR Engine

// on camera frame callback
const onCameraFrame = () => {
    // here you will get each of the camera frame to process
    let canvas = CameraService.getCanvas()
 
    const onProcessingComplete = (results) => {
        console.log(results)
    }
 
    if(arEngine) {
        arEngine.processFrame(canvas, onProcessingComplete)
    }
}

To augment a specific type of jewellery please follow the guide here - Product management

Features Model Mode