Two new item submitted
Marketing Manager
52 JPG file Generated
FontEnd Developer
25 PDF File Uploaded
Digital Marketing Manager
Anna_Strong.doc
Web Designer
John Doe
UI designer
Michal Clark
FontEnd Developer
Milena Gibson
Digital Marketing Manager
Anna Strong
Web DesignerTempusXR is an opensource web augmented reality library. It supports Image Tracking and Face Tracking.
TempusXR support AFRAME integration, so majority of these documentations are written for AFRAME integration.
For Image Tracking, please go to Image Tracking Quick Start
For Face Tracking, please go to Face Tracking Quick Start
TempusXR project can be run directly in plain static HTML file. It's super easy!
TempusXR comes with different types of tracking capabilities, including Image Tracking and Face Tracking. To minimize library size, each of these are independently built. Moreover, TempusXR provides native support for three.js or AFRAME. They are also being built independently. So altogehter, there are 2x2 = 4 sets of distributions.
For each type of tracking, there are two javascript files: tempusxr-[TYPE].prod.js and tempusxr-[TYPE]-aframe.prod.js
The first one is the core tracking library while the second one is a aframe extension. Normally, you will import the first script, followed by aframe library, then followed by the second script. We decided to not embed AFRAME inside TempusXR to make it more flexible. Also, for highly customizable applications, you can write your own aframe extension (second script).
There are two generally two ways to install the library.
Your code here
Your code here
TempusXR project can be run in plain static HTML file. It's super easy!
In this quickstart guide, you will build a AR webpage, which will start the device camera, detect an image target, and show an augmented object on top.
To give you a quick idea of how easy it is, below is the complete source for the example!
<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/TempusXR-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/TempusXR-image-aframe.prod.js"></script>
</head>
<body>
<a-scene TempusXR-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 TempusXR-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>
Before working on the webpage, we first need to preprocess (a.k.a. compile) the images. We need to scan the images and extract interesting locations (a.k.a. feature points) so we can detect and track the images later.
This preprocessing step takes time, therefore we want to do it beforehand as to reduce the loading time when users actually use your AR app later.
TempusXR comes with a super friendly compilation tool to do this. Image Targets Compiler
Head over to the compiler and you will see this
In this QuickStart demo, we will be using this image, so please download this image first
Then, drop this image to the compiler and click Start.
Once the compilation is done, we will see some features visualization.
This visualization tool gives you an idea of the feature distributions of your images. In general, you want to have good amount of features with well distribution. Actually, this sample isn't a very good one because you can see a blank space on the top left corner.
If you want to learn more about that, this article series give a detailed explanation about how to choose good target images. https://blog.pictarize.com/how-to-choose-a-good-target-image-for-tracking-in-ar-part-1/
At the bottom of the visualization, you will see a Download button. This will gives you a targets.mind file. It stores the feature data in compact format, and we will need this later when building the webpage.
Now you have the targets.mind file ready, we can start building the webpage.
First, create a clean folder for your project, let say TempusXR-project. Put the targets.mind file there and create a blank html file, let's say index.html. So the folder should have two files like this:
./targets.mind./index.html
Now, let's start with something simple to display a rectanglar plane just on top of the target image. Open index.html with editor of your choices, and paste the following content:
<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/TempusXR-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/TempusXR-image-aframe.prod.js"></script>
</head>
<body>
<a-scene TempusXR-image="imageTargetSrc: ./targets.mind;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity TempusXR-image-target="targetIndex: 0">
<a-plane color="blue" opaciy="0.5" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
</a-entity>
</a-scene>
</body>
</html>
Let's digest them:
html, head, meta and body are just standard html stuff, and we will skip.
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/TempusXR-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/TempusXR-image.aframe.js"></script>
They are the TempusXR and aframe library hosted in cdn. They are the only things you need to build a web AR application!
TempusXR comes with an AFRAME extension that allows you to construct a 3D scene easily. We will not go into the details of AFRAME in this tutorial. If you want to learn more about it, please refer to AFRAME
In short, you can see the <a-scene> block inside body. This is the main part of the application. If you don't have AFRAME background, don't worry. Most of the time you can just copy this block of code as a template to start.
We'll highlight two things here related to TempusXR.
Within <a-scene> you can see a property TempusXR-image="imageTargetSrc: ./targets.mind;" It tells the engine where is the compiled .mind file you built earlier.
There is an <a-entity>, with a prpoerty TempusXR-image-target="targetIndex: 0". This tells the engine to detect and track a particular image target. The targetIndex is always 0, if your targets.mind contains only a single image. You can however compile multiple images together, and the targetIndex will follows the order of the images. We will talk more this later when we have multiple image targets.
Remember this. The AR engine only does ONE thing! - It updates the visibility and positions of a-entity
The AR engine consume your camera feed, then detect, track the target images and update the visibility and positions of this a-entity. It means, whatever attached to the entity will be properly magically displayed accordingly. Once you have this setup properly, what you usually need to do is to construct the content inside this a-entity according to your application needs.
This is minimal case, you see a <a-plane color="blue" opaciy="0.5" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>. This is the object we want to show on top of the target image. Obviously, it's just a blue plane.
width=1 means the width is the same as the target image
As you can see we set the width to 1, to make it having the same width of the target image in reality. Why are we setting the height to 0.552, you asked? Good question, because the target image has a ratio of 0.552/1. If you set height to 1, which means also equal to the width of the target image. It will turn out to be a square (You should try and see the effect). Now this rectangular plane will perfectly overlay the target image.
Also, note that the anchor point of the entity is the center of the target image.
Now, you are all set! Let's head over to the next section and see the effect!
Although, it's a simple html page, you probably cannot run it simply by opening the file in browser. The reason is that the page requires camera access.
I believe there are many possible workarounds to that problems, like setting the browser policy or something. One way to this problem is to setup a localhost server that can server webpage.
If you are web developer, I'm sure you probably have some sort of localhost already in your machine. If not, you can try this chrome extension: Web Server for Chrome. It will launch a simple web server, and you can use it to open the index.html built in the last section.
If you can successfully launch the page, the camera will start. After you point it to the image target, you will see a blue rectangle sticked on top.
It's likely that you now are using your desktop computer to go through this tutorial. In that case, you can start run the webpage with your computer, which hopefully has equiped with a webcam.
Then, you can use your mobile phone to open this target image, and put your phone screen in front of your desktop webcam to see the effect.
If you don't have two devices, you can also choose to print this image out and test it in paper.
Make sure you get it working before going to the next section, in which we will start doing interesting stuff!
It's an augmented reality app, so it's not fun without some 3D assets!
The first thing we need to do is to add some assets to the scene. In AFRAME, we do this by a-assets. Add this block of code inside the <a-scene/> element
<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>
The first one is actually our target image. The second one is a 3D model in gltf format. AFRAME basically supports all the standard 3D format, so you can probably replace it with the models of your choices later.
Now we can replace the dull rectangular plane in the earlier example with an image asset.
<a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
Also, we will add an animated 3D model on top of the image.
<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">
The scale of the 3D model we use here was normalized to -1 to 1, therefore we set an appropriate scale 0.005. We also have an animation to make the model oscillate between 0 to 0.1 in z-axis. We will not go into the details of the animation, but they are just standard AFRAME stuff.
Finally, we have also modify some rendering properties inside <a-scene> (Optional)
color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights"
Sorry, I'm not entirely sure what that does, but it seems like the rendering is prettier. You can skip this and still see the effect, not a big deal.
Putting it together, your html page is something like below.
<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/TempusXR-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/TempusXR-image-aframe.prod.js"></script>
</head>
<body>
<a-scene TempusXR-image="imageTargetSrc: ./targets.mind; showStats: true;" 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 TempusXR-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>
The effect is what we saw in the Overview. Easy, right?
Congratulations! You have now developed your first TempusXR application. I hope you are enjoying it!
You can go through the Examples section to learn more about the available features.
TempusXR comes with the following configurable parameters to fine tune the tracking.
Jittering is a common issue in AR applications. The library computes the position of the targets in every frames. The problem is that there are always slight variations across aframes (e.g. noises coming from camera input or computational errors) even though you may think you are holding the devices steadily. Result is that the augmented contents will appear shaky.
One solution to smooth the jittering is to apply filtering. At a high level, it means taking some kind of rolling average of multiple frames to position the targets. The contents will then appeared more stable.
However, smoothing also comes with a price. Since we are using the previou N frames to interpolate the position, there will be a delay for the content to move to the latest position. This is more obvious if you move the camera quickly.
TempusXR implements OneEuroFilter. There are two adjustable parameters called cutoff frequency (filterMinCF) and speed coefficient (filterBeta). In general, decreasing the value of filterMinCF can reduce the jittering and increaseing the value of filterBeta reduce the delay. They are, however, somehow fighting against each others.
They default values of filterMinCF and filterBeta are 0.001 and 1000. You can change them by specifying these parameters in TempusXR-image attribute. e.g.
<a-scene TempusXR-image="filterMinCF:0.1; filterBeta: 10"/>
By default, there is a small intentional delay to trigger the target found event to avoid false positive. More specifically, it requires the target image being detected in a continous of warmupTolerance frames to be considered a success. The default value of warmupTolerance is 5, and you can change it by specifying this parameter in the TempusXR-image attribute, e.g.
<a-scene TempusXR-image="warmupTolerance: 1"/>
Similar, there is also a small intentional delay to trigger the target lost event. It requires the target image being un-detected in a continuous of missTolerance frames. The default value of missTolerance is 5, and you can change it by specifying this parameter in the TempusXR-image attribute, e.g.
<a-scene TempusXR-image="missTolerance: 1"/>
This is a minimal example. It detects a target image and display a blue rectangle on top.
We have a step-by-step tutorial in Quick Start. If you are new to TempusXR, please check that out to understand some basic principles.
You can use the following target image for testing:
<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/TempusXR-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/TempusXR-image-aframe.prod.js"></script>
</head>
<body>
<a-scene TempusXR-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.mind;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity TempusXR-image-target="targetIndex: 0">
<a-plane color="blue" opaciy="0.5" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
</a-entity>
</a-scene>
</body>
</html>
This is a very typical example that detect and track one target image, and display a 3D effects on top.
We have a step-by-step tutorial in Quick Start. If you are new to TempusXR, please check that out to understand some basic principles.
You can use the following target image for testing:
<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/TempusXR-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/TempusXR-image-aframe.prod.js"></script>
</head>
<body>
<a-scene TempusXR-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 TempusXR-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>
TempusXR allows you to compile multiple target images, and show different AR effects individually, like this demo:
You can use the following target images for testing:
<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/TempusXR-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/TempusXR-image-aframe.prod.js"></script>
</head>
<body>
<a-scene TempusXR-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/band-example/band.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<a-asset-item id="bearModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/band-example/bear/scene.gltf"></a-asset-item>
<a-asset-item id="raccoonModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/band-example/raccoon/scene.gltf"></a-asset-item>
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity TempusXR-image-target="targetIndex: 0">
<a-gltf-model rotation="0 0 0 " position="0 -0.25 0" scale="0.05 0.05 0.05" src="#raccoonModel" animation-mixer>
</a-entity>
<a-entity TempusXR-image-target="targetIndex: 1">
<a-gltf-model rotation="0 0 0 " position="0 -0.25 0" scale="0.05 0.05 0.05" src="#bearModel" animation-mixer>
</a-entity>
</a-scene>
</body>
</html>
It's more or less the same as the Basic example. The main difference is that you now have two <a-entity>, with different targetIndex.
Unlike the previous example, TempusXR allows you to track multiple targets simultaneously.
You can use the following target images for testing:
<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/TempusXR-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/TempusXR-image-aframe.prod.js"></script>
</head>
<body>
<a-scene TempusXR-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/band-example/band.mind; maxTrack: 2" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<a-asset-item id="bearModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/band-example/bear/scene.gltf"></a-asset-item>
<a-asset-item id="raccoonModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/band-example/raccoon/scene.gltf"></a-asset-item>
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity TempusXR-image-target="targetIndex: 0">
<a-gltf-model rotation="0 0 0 " position="0 -0.25 0" scale="0.05 0.05 0.05" src="#raccoonModel" animation-mixer>
</a-entity>
<a-entity TempusXR-image-target="targetIndex: 1">
<a-gltf-model rotation="0 0 0 " position="0 -0.25 0" scale="0.05 0.05 0.05" src="#bearModel" animation-mixer>
</a-entity>
</a-scene>
</body>
</html>
This is exactly the same as the previous example, with only one difference. There is a maxTrack: 2; parameter set inside a-scene
This parameter specify the maximum number of target that will be tracked simultaneously. Default is 1.
This parameter has a great impact on performance. You should avoid tracking many targets at the same time.
TempusXR comes with a set of default UI to help you bootstrap your application quickly. More specically, it comes with the followings:
| Loading Screen | Error Screen | Scanning Screen |
|---|---|---|
| | |
| This loading screen will shows when the engine is booting up. | If the engine failed to start (probably because camera failed to start), this error screen will be shown. | If the engine started successfully, this scanning screen will show. |
All of these are customizable, and there are two levels of customization.
Follow the same logical flow, but customize the UI of the overlay
Customize the logical flow and UI entirely
First, let's see how to disable the default UI. Inside <a-scene>, you can specify the following params:
uiError=nouiLoading=nouiScanning=noFirst, let's see how to disable the default UI. Inside <a-scene>, you can specify the following params:
First, let's see how to disable the default UI. Inside <a-scene>, you can specify the following params:
<a-scene TempusXR-image="imageTargetSrc: ./targets.mind; uiError=no; uiLoading=no; uiScanning=no"/>
If you do this, then none of the above will be shown.
Now, instead of setting them to no, you can also put down the id of the DOM element, e.g. uiScanning=#example-scanning-overlay; This element will be your new scanning screen, and you can make it look like however you want.
For example, I can modify the scanning screen to include a semi-transparent target image at the center to guide user. Live Demo
<head>
<style>
#example-scanning-overlay {
}
#example-scanning-overlay.hidden {
display: none;
}
...
</style>
</head>
<body>
<div id="example-scanning-overlay" class="hidden">
...
</div>
<a-scene TempusXR-image="uiScanning: #example-scanning-overlay; imageTargetSrc: ./targets.mind">
...
</a-scene>
</body>
Let's take a look at the most important elements in the above example. First of all, you need to have an element with id=#example-scanning-overlay. The AR engine is going to add/remove a class name hidden according to the default logic (i.e. when the scanning screen should show/hide)
Normally, you want to hide it display: none when in hidden state. The rest are just standard HTML and css, so we will omit here. You can look at the source of the example to see how I implemented it if you are interested.
You can do the exact same thing with Loading and Error screen.
If you want more freedom, you can disable our default ui completely and write your own. You might want to do this because, for example, you want the loading screen to show longer because you want to wait for other things other than TempusXR.
To do that, you will have to interact with events API. This will be discussed in the next example.
This section requires basic knowledge of web development
To try this example, you need to run on desktop browser and open the development console to see the logs. Live Demo
We will go through the available events one by one in the following sub-sections.
<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/TempusXR-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/TempusXR-image-aframe.prod.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const sceneEl = document.querySelector('a-scene');
const arSystem = sceneEl.systems["TempusXR-image-system"];
const exampleTarget = document.querySelector('#example-target');
const examplePlane = document.querySelector('#example-plane');
const startButton = document.querySelector("#example-start-button");
const stopButton = document.querySelector("#example-stop-button");
const pauseButton = document.querySelector("#example-pause-button");
const pauseKeepVideoButton = document.querySelector("#example-pause-keep-video-button");
const unpauseButton = document.querySelector("#example-unpause-button");
startButton.addEventListener('click', () => {
console.log("start");
arSystem.start(); // start AR
});
stopButton.addEventListener('click', () => {
arSystem.stop(); // stop AR
});
pauseButton.addEventListener('click', () => {
arSystem.pause(); // pause AR, keep video feed
});
pauseKeepVideoButton.addEventListener('click', () => {
arSystem.pause(true); // pause AR and video
});
unpauseButton.addEventListener('click', () => {
arSystem.unpause(); // unpause AR and video
});
// arReady event triggered when ready
sceneEl.addEventListener("arReady", (event) => {
// console.log("TempusXR is ready")
});
// arError event triggered when something went wrong. Mostly browser compatbility issue
sceneEl.addEventListener("arError", (event) => {
// console.log("TempusXR failed to start")
});
// detect target found
exampleTarget.addEventListener("targetFound", event => {
console.log("target found");
});
// detect target lost
exampleTarget.addEventListener("targetLost", event => {
console.log("target lost");
});
// detect click event
examplePlane.addEventListener("click", event => {
console.log("plane click");
});
});
</script>
</head>
<body>
<div style="position: absolute; z-index: 1000">
<button id="example-start-button">Start</button>
<button id="example-pause-button">Pause</button>
<button id="example-pause-keep-video-button">Pause (keep video)</button>
<button id="example-unpause-button">UnPause</button>
<button id="example-stop-button">Stop</button>
</div>
<a-scene TempusXR-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.mind; autoStart: false;" embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-camera position="0 0 0" look-controls="enabled: false" cursor="fuse: false; rayOrigin: mouse;" raycaster="far: 1.1.4; objects: .clickable"></a-camera>
<a-entity id="example-target" TempusXR-image-target="targetIndex: 0">
<a-plane id="example-plane" class="clickable" color="blue" opaciy="0.5" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
</a-entity>
</a-scene>
</body>
</html>
The first thing to introduce is the arSystem component. It's embedded inside a-scene and you can get the object by the following:
const sceneEl = document.querySelector('a-scene');
const arSystem = sceneEl.systems["TempusXR-image-system"];
arSystem provides a few api call to control the engine lifecycle
arSystem.start(); // start the engine
arSystem.stop(); // stop the engine
arSystem.pause(keepVideo=false); // pause the engine. It has an optional parameter. if true, then ar will stop, but camera feed will keep
arSystem.unpause(); // unpause
By default, AR engine will start immediately, but you can disable the auto start by giving a param autoStart: false inside <a-scene>
TempusXR will fire the events when happen:
arReadyAfter arSystem.start(), or autostart, AR engine needs to boot up, when it's ready, this event will be fired up. You can listen to this event throught the scene element
const sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener("arReady", (event) => {
// console.log("TempusXR is ready")
});
arErrorSometimes, AR engine might be failed to start. There could be many reasons, but one most likely reason is camera failed to start. When this happens, this event will be fired up.
const sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener("arError", (event) => {
// console.log("TempusXR failed to start")
});
targetFound and targetLostThis events are fired up when the image target is detected/lost. You can listen to these events through the <a-entity>
// detect target found
const exampleTarget = document.querySelector('#example-target');
exampleTarget.addEventListener("targetFound", event => {
console.log("target found");
});
// detect target lost
exampleTarget.addEventListener("targetLost", event => {
console.log("target lost");
});
<a-entity id="example-target" TempusXR-image-target="targetIndex: 0">
</a-entity>
clickWhen you want to do inteaction with the content, one thing you likely want to detect is when the user click/touch a certain elements. Actually, this is AFRAME stuff, but we'll also included here for reference.
First, you need to include the following cursor and raycaster in the <a-camera> element like this:
<a-camera position="0 0 0" look-controls="enabled: false" cursor="fuse: false; rayOrigin: mouse;" raycaster="far: ${customFields.libVersion}; objects: .clickable"></a-camera>
and then in the object that you want to detect, add a class clickable. Actually, it doesn't mean to be clickable, but the same as what you specified in the raycaster above.
<a-plane id="example-plane" class="clickable" color="blue" opaciy="0.5" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
Then, it's ready. You can listen to the click event like this:
// detect click event
const examplePlane = document.querySelector('#example-plane');
examplePlane.addEventListener("click", event => {
console.log("plane click");
});
Cool, you have now basically learnt everything about TempusXR image tracking. It should gives you enough tool to do some very cool applications!
This is a comprehensive example that showcase what can be done by utilizing all the available heatures provided in TempusXR. There is nothing new, so we will not go into the details. You can checkout the Demo and view the complete source for references.
Live Demo
If you have done some impressive stuff. Please share with us too!
TempusXR project can be run in plain static HTML file. It's super easy!
In this quickstart guide for face tracking, you will build a simple virtual tryon application. It will start the device camera, detect a face, and show some augmented objects.
TempusXR application can be as simple as a regular webpage, which is a single .html file.
Let's start with a minimal example to understand how face tracking work in TempusXR. Create a blank index.html with editor of your choices and paste the following content:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/dist/tempusxr-face.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/dist/tempusxr-face-aframe.prod.js"></script>
</head>
<body>
<a-scene tempusxr-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-camera active="false" position="0 0 0"></a-camera>
<a-entity tempusxr-face-target="anchorIndex: 1">
<a-sphere color="green" radius="0.1"></a-sphere>
</a-entity>
</a-scene>
</body>
</html>
Although, it's a simple html page, you probably cannot run it simply by opening the file in browser. The reason is that the page requires camera access.
I believe there are many possible workarounds to that problems, like setting the browser policy or something. One way to this problem is to setup a localhost server that can server webpage.
If you are a web developer, I'm sure you probably have some sort of localhost already in your machine. If not, you can try this chrome extension: Web Server for Chrome. It will launch a simple web server, and you can use it to open the index.html built in the last section.
If you can successfully launch the page, the camera will start. After you point it to any face, you will see a green sphere sticked on the nose tip.
You should try to change the anchorIndex to something else to see how the position of the green sphere changes.
Make sure you get it working before going to the next section, in which we will start doing interesting stuff!
It's an augmented reality app, so it's not fun without some 3D assets!
The first thing we need to do is to add some assets to the scene. In AFRAME, we do this by a-assets. Add this block of code inside the <a-scene/> element
<a-assets>
<a-asset-item id="glassesModel" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/image-tracking/assets/glasses/scene.gltf"></a-asset-item>
</a-assets>
It's a 3D glasses model in gltf format. AFRAME basically supports all the standard 3D format, so you can probably replace it with the models of your choices later.
Now we can replace the dull sphere in the earlier example with this glasses. We also changed the anchorIndex to 168 because that is a better position for glasses.
<a-entity tempusxr-face-target="anchorIndex: 168">
<a-gltf-model rotation="0 0 0" position="0 0 0" scale="0.01 0.01 0.01" src="#glassesModel"></a-gltf-model>
</a-entity>
The scale 0.01 is set by trial-and-error. It depends on the original size of the 3D models.
Putting it together, your html page is something like below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/dist/tempusxr-face.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/dist/ar-face-aframe.prod.js"></script>
</head>
<body>
<a-scene tempusxr-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<a-asset-item id="glassesModel" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/image-tracking/assets/glasses/scene.gltf"></a-asset-item>
</a-assets>
<a-camera active="false" position="0 0 0"></a-camera>
<a-entity tempusxr-face-target="anchorIndex: 168">
<a-gltf-model rotation="0 0 0" position="0 0 0" scale="0.01 0.01 0.01" src="#glassesModel"></a-gltf-model>
</a-entity>
</a-scene>
</body>
</html>
If everything works correctly, you should see something like this:
If you turn your head a bit, you will probably notice a problem (the arm of the glass should be invisible since it's behind the head):
It's a common problem in augmented reality application. AR application does not alter the video. Instead it is jsut merely drawing another layer on top. Therefore, none of the video content can obscure our drawing layer (i.e. augmented realty objects).
To solve this issue, we will need to add an aribitrary 3D head-like object in the scene. But unlike a regular 3D object, this arbitrary head has two special properties. First, obviously it needs to be transparent. Second, despite being transparent, it still need to cover every behind. Normally, we call this kind of special 3D objects as occluders.
Adding a occluder object is very similar to adding a regular object. In TempusXR, you just need to add a property tempusxr-face-occluder to the entity.
<a-assets>
<a-asset-item id="headModel" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/face-tracking/assets/sparkar/headOccluder.glb"></a-asset-item>
</a-assets>
...
<a-entity tempusxr-face-target="anchorIndex: 168">
<a-gltf-model tempusxr-face-occluder position="0 -0.3 0.15"rotation="0 0 0" scale="0.065 0.065 0.065" src="#headModel"></a-gltf-model>
</a-entity>
Putting it together, your new html page should be like this:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/dist/tempusxr-face.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/dist/tempusxr-face-aframe.prod.js"></script>
</head>
<body>
<a-scene tempusxr-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<a-asset-item id="glassesModel" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/image-tracking/assets/glasses/scene.gltf"></a-asset-item>
<a-asset-item id="headModel" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/face-tracking/assets/sparkar/headOccluder.glb"></a-asset-item>
</a-assets>
<a-camera active="false" position="0 0 0"></a-camera>
<a-entity tempusxr-face-target="anchorIndex: 168">
<a-gltf-model tempusxr-face-occluder position="0 -0.3 0.15"rotation="0 0 0" scale="0.065 0.065 0.065" src="#headModel"></a-gltf-model>
</a-entity>
<a-entity tempusxr-face-target="anchorIndex: 168">
<a-gltf-model rotation="0 0 0" position="0 0 0" scale="0.01 0.01 0.01" src="#glassesModel"></a-gltf-model>
</a-entity>
</a-scene>
</body>
</html>
and when you run the app again, the arm of the glasses will be somehow hidden.
One major limitation of occluder is that the arbitrary head is a predefined 3D model, and the shape won't fit perfectly with the persons' head in the video.
That's more or less everything you need to know about face tracking in TempusXR. It's extremely to use, you pick anchor points and put objects there.
To make a fully functional virtual try-on application, you just need to prepare more 3D objects and add them to the scene. Then you programatically control their visibilities.
To toggle visiblity, you can set a property "visible" for the model, e.g.
<a-entity tempusxr-face-target="anchorIndex: 10">
<a-gltf-model rotation="0 -0 0" position="0 1.0 -0.5" scale="0.35 0.35 0.35" src="#hatModel" visible="false"></a-gltf-model>
</a-entity>
The rest is just standard javascript and HTML, and we will not go into details. The full source code can be found here: Virtual Try-On Example
This is a minimal example. It detects a face and display a green sphere on nose tip.
We have a step-by-step tutorial in Quick Start. If you are new to tempusxr, please check that out to understand some basic principles.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/dist/tempusxr-face.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/dist/tempusxr-face-aframe.prod.js"></script>
</head>
<body>
<a-scene tempusxr-face embedded vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-camera active="false" position="0 0 0"></a-camera>
<a-entity tempusxr-face-target="anchorIndex: 1">
<a-sphere color="green" radius="0.1"></a-sphere>
</a-entity>
</a-scene>
</body>
</html>
This is a typical example of face tracking. It allows user to try out different accessories.
We have a step-by-step tutorial in Quick Start. If you are new to tempusxr, please check that out to understand some basic principles.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/dist/tempusxr-face.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/dist/tempusxr-face-aframe.prod.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const list = ["glasses1", "glasses2", "hat1", "hat2", "earring"];
const visibles = [true, false, false, true, true];
const setVisible = (button, entities, visible) => {
if (visible) {
button.classList.add("selected");
} else {
button.classList.remove("selected");
}
entities.forEach((entity) => {
entity.setAttribute("visible", visible);
});
}
list.forEach((item, index) => {
const button = document.querySelector("#" + item);
const entities = document.querySelectorAll("." + item + "-entity");
setVisible(button, entities, visibles[index]);
button.addEventListener('click', () => {
visibles[index] = !visibles[index];
setVisible(button, entities, visibles[index]);
});
});
})
</script>
<style>
body {
margin: 0;
}
.example-container {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
}
.options-panel {
position: fixed;
left: 0;
top: 0;
z-index: 2;
}
.options-panel img {
border: solid 2px;
width: 50px;
height: 50px;
object-fit: cover;
cursor: pointer;
}
.options-panel img.selected {
border-color: green;
}
</style>
</head>
<body>
<div class="example-container">
<div class="options-panel">
<img id="hat1" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/face-tracking/assets/hat/thumbnail.png"/>
<img id="hat2" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/face-tracking/assets/hat2/thumbnail.png"/>
<img id="glasses1" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/face-tracking/assets/glasses/thumbnail.png"/>
<img id="glasses2" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/face-tracking/assets/glasses2/thumbnail.png"/>
<img id="earring" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/face-tracking/assets/earring/thumbnail.png"/>
</div>
<a-scene tempusxr-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<a-asset-item id="headModel" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/face-tracking/assets/sparkar/headOccluder.glb"></a-asset-item>
<a-asset-item id="glassesModel" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/face-tracking/assets/glasses/scene.gltf"></a-asset-item>
<a-asset-item id="glassesModel2" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/face-tracking/assets/glasses2/scene.gltf"></a-asset-item>
<a-asset-item id="hatModel" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/face-tracking/assets/hat/scene.gltf"></a-asset-item>
<a-asset-item id="hatModel2" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/face-tracking/assets/hat2/scene.gltf"></a-asset-item>
<a-asset-item id="earringModel" src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/examples/face-tracking/assets/earring/scene.gltf"></a-asset-item>
</a-assets>
<a-camera active="false" position="0 0 0"></a-camera>
<!-- head occluder -->
<a-entity tempusxr-face-target="anchorIndex: 168">
<a-gltf-model tempusxr-face-occluder position="0 -0.3 0.15"rotation="0 0 0" scale="0.065 0.065 0.065" src="#headModel"></a-gltf-model>
</a-entity>
<a-entity tempusxr-face-target="anchorIndex: 10">
<a-gltf-model rotation="0 -0 0" position="0 1.0 -0.5" scale="0.35 0.35 0.35" src="#hatModel" class="hat1-entity" visible="false"></a-gltf-model>
</a-entity>
<a-entity tempusxr-face-target="anchorIndex: 10">
<a-gltf-model rotation="0 -0 0" position="0 -0.2 -0.5" scale="0.008 0.008 0.008" src="#hatModel2" class="hat2-entity" visible="false"></a-gltf-model>
</a-entity>
<a-entity tempusxr-face-target="anchorIndex: 168">
<a-gltf-model rotation="0 -0 0" position="0 0 0" scale="0.01 0.01 0.01" src="#glassesModel" class="glasses1-entity" visible="false"></a-gltf-model>
</a-entity>
<a-entity tempusxr-face-target="anchorIndex: 168">
<a-gltf-model rotation="0 -90 0" position="0 -0.3 0" scale="0.6 0.6 0.6" src="#glassesModel2" class="glasses2-entity" visible="false"></a-gltf-model>
</a-entity>
<a-entity tempusxr-face-target="anchorIndex: 127">
<a-gltf-model rotation="-0.1 -0 0" position="0 -0.3 -0.3" scale="0.05 0.05 0.05" src="#earringModel" class="earring-entity" visible="false"></a-gltf-model>
</a-entity>
<a-entity tempusxr-face-target="anchorIndex: 356">
<a-gltf-model rotation="0.1 -0 0" position="0 -0.3 -0.3" scale="0.05 0.05 0.05" src="#earringModel" class="earring-entity" visible="false"></a-gltf-model>
</a-entity>
</a-scene>
</div>
</body>
</html>
This example demonstrates how to handle events from tempusxr engine. It also explains how to programatically control the lifecycle of AR engine, including start, stop and switching camera.
The full source code is attached first and we will go through them one by one.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/dist/tempusxr-face.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/tempus-xr-js@1.1.4/dist/tempusxr-face-aframe.prod.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const sceneEl = document.querySelector('a-scene');
const arSystem = sceneEl.systems["tempusxr-face-system"];
const startButton = document.querySelector("#example-start-button");
const stopButton = document.querySelector("#example-stop-button");
const switchCameraButton = document.querySelector("#example-switch-camera-button");
// arReady event triggered when ready
sceneEl.addEventListener("arReady", (event) => {
console.log("ar ready");
});
// detect target found
sceneEl.addEventListener("targetFound", event => {
console.log("target found");
});
// detect target lost
sceneEl.addEventListener("targetLost", event => {
console.log("target lost");
});
// arError event triggered when something went wrong. Mostly browser compatbility issue
sceneEl.addEventListener("arError", (event) => {
console.log("ar error");
});
startButton.addEventListener('click', () => {
arSystem.start(); // start AR
});
stopButton.addEventListener('click', () => {
arSystem.stop(); // stop
});
switchCameraButton.addEventListener('click', () => {
arSystem.switchCamera();
});
});
</script>
<style>
body {
margin: 0;
}
.example-container {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
}
#example-control-overlay {
position: fixed;
top: 0;
right: 0;
background: none;
height: 30px;
z-index: 2;
}
#example-control-overlay >div {
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div class="example-container">
<div id="example-control-overlay" class="overlay">
<div>
<button id="example-start-button">Start</button>
<button id="example-stop-button">Stop</button>
<button id="example-switch-camera-button">Switch Camera</button>
</div>
</div>
<a-scene tempusxr-face="autoStart: false" embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-camera active="false" position="0 0 0" look-controls="false"></a-camera>
<a-entity tempusxr-face-target="anchorIndex: 1">
<a-sphere color="green" radius="0.1"></a-sphere>
</a-entity>
</a-scene>
</div>
</body>
</html>
The first thing to introduce is the arSystem component. It's embedded inside a-scene and you can get the object by the following:
const sceneEl = document.querySelector('a-scene');
const arSystem = sceneEl.systems["tempusxr-face-system"];
arSystem provides a few api call to control the engine lifecycle
arSystem.start(); // start the engine
arSystem.stop(); // stop the engine
arSystem.switchCamera(); // switch between front/back cameras
By default, AR engine will start immediately, but you can disable the auto start by giving a param autoStart: false inside <a-scene>
tempusxr will fire the events when the followings happen:
arReady
After arSystem.start(), or autostart, AR engine needs to boot up, when it's ready, this event will be fired up. You can listen to this event throught the scene element
const sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener("arReady", (event) => {
// console.log("tempusxr is ready")
});
arError
Sometimes, AR engine might be failed to start. There could be many reasons, but one most likely reason is camera failed to start. When this happens, this event will be fired up.
const sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener("arError", (event) => {
// console.log("tempusxr failed to start")
});
targetFound and targetLostThis events are fired up when a face is detected/lost. You can listen to these events through the <a-entity>
sceneEl.addEventListener("targetFound", event => {
console.log("target found");
});
sceneEl.addEventListener("targetLost", event => {
console.log("target lost");
});