Augmented Reality in 10 Lines of HTML
Alexandra Etienne
Apr 10, 2017
AR.js with A-Frame Magic
Do you want to do Augmented Reality on the web ? You can now do it in 10 lines of HTML! Seriously! Let me walk you through the code, it's crazy simple.
We released AR.js recently. You can experience efficient augmented reality for the web directly on your phone without installing any applications. But let’s go further and see how to produce your own augmented reality experience. The shortest example of AR.js is only 10lines of HTML thanks to the magic of a-frame. You can see it live on codepen:
<!-- Augmented Reality on the Web in 10 lines of html! https://github.com/jeromeetienne/ar.js -->
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded artoolkit='sourceType: webcam;'>
<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
Let’s break it down line by line.
Including the Libraries
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>
First, you include a-frame, an effort started by MozillaVR to build VR experiences. A-frame contains three.js. Then you simply include AR.js for a-frame. AR.js will make the 3d displayed in AR run very fast on your phone, even if it’s a 2–3 year old phone!
Defining the Body
<body style='margin : 0px; overflow: hidden;'>
<!-- ... -->
</body>
In this step, it’s all business as usual. You define the body, like you would in all HTML pages.
Creating a 3d Scene
<a-scene embedded artoolkit='sourceType: webcam;'>
<!-- put your 3d content here -->
</a-scene>
Next, we are going to create our a-frame scene. We also need to add the ARToolkit component. ARToolKit is an open-source library that we use to localize it through the phone camera.
Adding Simple Content
<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
Once we have created the 3d scene, we can start adding objects to it. In this line, we add a simple box. We then modify its material to make it transparent. We also change its position so it displays on top of the AR marker.
Adding the AR Camera
<a-marker-camera preset='hiro'></a-marker-camera>
In this last step, we are going to add a camera. We include the preset ‘hiro’ (as in Hiro marker). Finally, we make it move as if it were your phone. Easy right?
Congratulations! You are done. You now have augmented reality, in only 10 lines of HTML, running fast on your phone and free of charge.
Check out this video version I made of the tutorial:
Thanks for reading, and if you like this post, don’t forget to share 😉
Also, please feel free to contact me anytime @AndraConnect
AndraConnect
Process: Aesthetic Engine 2
Vladimir Mitrović on February 13, 2017
Interview with Ryan Betts: A Look Into The Future of VR
CodeCore on February 01, 2017
Jasonette and Template Engines
Camilo Castro on August 19, 2017
Twitter
GitHub
Is it possible to use my own image instead of Hiro? Like a face with a black border or something?
Hi! Thanks for your interest...this might be able to help artoolkit.org/documentation/doku.p...
Also - if you're running into any difficulties please report them on the github issue and we'll be happy to help github.com/jeromeetienne/AR.js/issues
I would like to know this too, please!
Wow, that's awesome!
This was really helpful, thank you.
P.s. Could anyone help? I've tried loading a different texture, but all I'm getting is a white material (if url is wrong/file not found, then A-frame seems to apply a black material) -- so it looks like the texture file is being found OK, but not being applied.
codepen.io/RedHenDev/pen/MogOXb
I've tried deployment from both Glitch and CodePen, without success.
Any idea how to solve this?
Thanks again!
This is the kind of project that really brings together Imagination and Engineering at their best ✨
Awesome demo, great execution, good quality 👌
I am really looking forward to play around with these demos 😃
Congratulations!
Liked it...
Amazing 😱
Thanks so much for all the kind words and the support guys! We wanted to make AR seem easy-to-learn for everyone 👍
This is awesome! But I meet an error with message "WebRTC issue! navigator.getUserMedia not present in your browser", how should I solve it?
Hey waihow...make sure that you are not using iOS....also, please report your bug on the github issue and we'll be happy to help github.com/jeromeetienne/AR.js/issues 😀
Excellent demo. Thanks
That was really cool. Congrats.
Really cool stuff
Looks pretty easy.I wanna try it
Awesome, thanks for share alexandra
This is remarkable. Amazing demo.
Awesome project! Thanks for sharing
I just tried this in Chrome 58 with the hiro.jpg marker printed out on an 8.5 x 11 and nothing happened. I've never worked AR before... am I missing something? Thanks!
Hi :) Were i dev the 3d to put on scene? Unity? Thankyou :)