I finally managed to use MINDAR to superimpose multiple colorful AUGMENTED REALITY Alebrijes over multiple black-and-white Alebrije prints.
MINDAR AUGMENTED REALITY
over ALEBRIJE Prints
MINDAR
AUGMENTED REALITY PRINTS
Scan the QR Code below -- or click on the Blue Links -- then hoover your smart phone over the black-and-white print images below to see the colorful Augmented Reality "ALBU-BRIJES":
Better Alternative?
We hung up the "ALBU-BRIJES" Prints at Quelab on July 12th to show off the MINDAR AUGMENTED REALITY -- anticipating their Grand Re-Opening on July 25th, 2026. The three below worked pretty well:
then hoover your smartphone over this print
to see the colorful 3D Alebrije below
Augmented Reality "Albu-brije"
then hoover your smartphone over this print
to see the colorful 3D Alebrije below
Augmented Reality "Albu-brije"
then hoover your smartphone over this print
to see the colorful 3D Alebrije below
Augmented Reality "Albu-brije"
***
CRITICAL POINTS
in MINDAR
1) The key was first uploading all the print images to the IMAGE TARGET COMPILER, which makes a "TARGETS.MIND" file. That single file contains all the "target" images in an order "0,1,2,3..." The "target" images are the black-and-white prints in the real world.
2) Then one has to list all the AUGMENTED REALITY files between the <a-assets> </a-assets> tags. In this case I listed all the GLB files (which are in the same folder as the HTML CODE). These are the colorful 3D AUGMENTED ALEBRIJES that will superimpose themselves over the black-and-white prints when one hoovers their smart phone over the prints:
- <a-asset-item id="target0" src="alebrijev.glb"></a-asset-item>
3) Each AUGMENTED REALITY file has to be associated with each numbered "target" image -- and listed individually in the <a-entity></a-entity> tags:
- <a-entity mindar-image-target="targetIndex: 0"> <a-gltf-model rotation="0 0 0 " scale="1 1 1" position="0 0 0.5" src="#target0"> </a-entity>
- <a-entity mindar-image-target="targetIndex: 1"> <a-gltf-model rotation="0 0 0 " scale="1 1 1" position="0 0 0.5" src="#target0"> </a-entity>
HTML CODE
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
</head>
<body>
<a-scene mindar-image="imageTargetSrc: targets.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="target0" src="alebrijev.glb"></a-asset-item>
<a-asset-item id="target1" src="alebrijek.glb"></a-asset-item>
<a-asset-item id="target2" src="alebrijeb.glb"></a-asset-item>
<a-asset-item id="target3" src="alebrijeh.glb"></a-asset-item>
<a-asset-item id="target4" src="alebrijecc.glb"></a-asset-item>
<a-asset-item id="target5" src="alebrijec.glb"></a-asset-item>
</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-gltf-model rotation="0 0 0 " scale="1 1 1" position="0 0 0.5" src="#target0">
</a-entity>
<a-entity mindar-image-target="targetIndex: 1">
<a-gltf-model rotation="0 0 0 " scale="1 1 1" position="0 0 0.5" src="#target1">
</a-entity>
</a-entity>
<a-entity mindar-image-target="targetIndex: 2">
<a-gltf-model rotation="0 0 0 " scale="1 1 1" position="0 0 0.5"src="#target2">
</a-entity>
</a-entity>
<a-entity mindar-image-target="targetIndex: 3">
<a-gltf-model rotation="0 0 0 " scale="1 1 1" position="0 0 0.5" src="#target3">
</a-entity>
</a-entity>
<a-entity mindar-image-target="targetIndex: 4">
<a-gltf-model rotation="0 0 0 " scale="1 1 1" position="0 0 0.5" src="#target4">
</a-entity>
</a-entity>
<a-entity mindar-image-target="targetIndex: 5">
<a-gltf-model rotation="0 0 0 " scale="1 1 1" position="0 0 0.5" src="#target5">
</a-entity>
</a-scene>
</body>
</html>
ISSUES
Casandra Encinias' "Albu-brije" dog print --
Did not work in MINDAR,
but did work with another AR program
JITTER
MINDAR discusses that with a TRACKING CONFIG post
This is further discussed in the following posts
This is further discussed in the following posts
The solution seems to be to add some extra lines at the beginning of the <a-scene mindar-image=...> tag (as shown deep in the post #379)
- <a-scene mindar-image="filterMinCF:0.0001; filterBeta: 0.001; imageTargetSrc: https://cdn.jsdelivr.net/...
PREVIOUS ALEBRIJE POSTS
- May 22, 2026 -- ALEBRIJES
- MORE ALEBRIJES -- Real and Fake
- ALEBRIJES at NIGHT
- ¡ALBUЯ-BRIJES!
- ALBU-BRIJE PROGRESS
- ALBU-BRIJES -- Real and Augmented
- PRINTING ALEBRIJES
PREVIOUS MINDAR POSTS
I have be working on this for a year and posted my agonies and ecstasies:
AR PROGRAMS
- MINDAR -- the one this blog post is about -- free, but has to be "hosted" on a server
- <model-viewer> -- free, but has to be "hosted" on a server
- 8th Wall (defunct, but now Open Source)
- Artivive (paid)
- Web-enabled AR experiences (GPS)
- AR CODE (with Gaussian Splatting)
- Adobe Aero -- discontinued as of December 2025
- Worldcast
