Develop a web augmented reality app with MindAR in 5 minutes!
MindAR.js is an open source web augmented reality framework allowing you to develop AR web applications extremely easily!
There is zero external dependencies. You can code the entire webpage in plain HTML and javascript, and you can host and publish it like any other static webpages. Believe it or not, you can do it in five minutes!
Demo
No bullshit. Here is a live demo that you can try.
- Open this page with your phone: https://hiukim.github.io/mind-ar-js-doc/samples/basic.html
- Allow camera access, and then look at the image below to trigger effects.
This is the expected effect:
Source Code
To show you how easy it is, here is the complete source code for the above example. 100% workable source code, not even with any external stylesheets.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@0.3.1/dist/mindar.prod.js"></script>
</head>
<body>
<a-scene mindar="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@0.3.1/examples/assets/card-example/card.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@0.3.1/examples/assets/card-example/card.png" />
<a-asset-item id="avatarModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@0.3.1/examples/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>What does the library do exactly?
In short…
MindAR can turn any images into anchors for augmenting digital contents in physical world.
OK, I might be a bit exaggerated. Your images cannot be too plain in pattern or unidentifiable though. But most images will do fine.
There are tremendous amount of use cases, including AR cards, books, brochure and any form of paper marketing materials.
How do I do it?
Generally, there are two steps :
- Pick an image, and process it with a provided compilation tool
- Construct your 3D scene / effects with AFRAME (a web framework for createing 3D world with HTML and entity based components)
This is a quick start guide for MindAR: https://hiukim.github.io/mind-ar-js-doc/quick-start/overview I guarantee it’s extremely easy to follow!
What’s Next
The above example only demonstrates the simplist use case of the library. There are a lot more features:
- Multiple Targets / Multiple Tracking
- Default and customizable UI / UX
- Events Interfaces for doing interactive applications
Here is another business card demo to shows the possibilities! Even this, you can do it in 30 minutes!
Last but not least…..
MindAR is open source under MIT license. It’s completely free to use! Here is the source repo:
I hope you like it! Happy coding!
