I am going to try to persuade you that using A-Frame it is not hard to do some simple Augmented Reality (AR) for free, via a browser, but that also can run on a mobile device.
Introduction
This is part of a short series of articles about some experiments with WebVR Web-based Virtual Reality - in this case based on the wonderful A-Frame (https://aframe.io) . In the first post WebVR playtime 1: Basics of setting up, images and rotating blocks, I looked at setting up a scene and then rotating an object. In the second post, recapped the basics, then look at adding video, 360 degree video, and models developed elsewhere.
In this post we are going to start looking at using WebVR as part of an augmented reality solution. I going to start by building on the great resource Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne, creator of AR.js - the starting code below and the basis of the solution comes from that resource.
Getting started.
In the previous two posts I used Thimble from Mozilla, I had a problem with access my camera using Thimble so I switched to Glitch - you may need to register - and Codepen.io.
The code below was adapted from the Creating Augmented Reality with AR.js and A-Frame page.
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<!-- create your content here. -->
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
</body>
The first script line is the same as in the previous posts setting up the A-Frame WebVR. The second one adds the additional functionality for Augmented Reality via markers. The only other new feature is within the <a-scene></a-scene> tags, a new set of tags <a-marker-camera> saying which markers is being used; in this case, a preset one called Hiro (see below), which available in AR.js.
A blue box and text were added to the scene - just in the same way as adding boxes and text in the first of this series. Shown in code pen below
Using the Hiro marker go to https://codepen.io/scottturneruon/pen/gKVWYq to play!
Next Step
To take this forward I wanted to replace the text and box with some rotating text when the marker is visible. On the AR in action can be found at http://bit.ly/2N0nvWx; you will need the Hiro marker.
The code for the AR in action is shown below.
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<!-- create your content here. just a box for now -->
<a-text value="University of" color="blue" position="0 0.5 -0.5" align="center" height="2"><a-animation attribute="rotation" dur="5000" to="360 0 0" direction="alternate" repeat="indefinite"></a-animation>
</a-text>
<a-text value="Northampton" color="blue" position="0 0.325 0" height="3" align="center"><a-animation attribute="rotation" dur="5000" to="360 0 0" direction="alternate" repeat="indefinite"></a-animation>
</a-text>
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
</body>
Where next
Adding images to objects and adding models are the next experiments.
To read more go to
All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon
Introduction
This is part of a short series of articles about some experiments with WebVR Web-based Virtual Reality - in this case based on the wonderful A-Frame (https://aframe.io) . In the first post WebVR playtime 1: Basics of setting up, images and rotating blocks, I looked at setting up a scene and then rotating an object. In the second post, recapped the basics, then look at adding video, 360 degree video, and models developed elsewhere.
In this post we are going to start looking at using WebVR as part of an augmented reality solution. I going to start by building on the great resource Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne, creator of AR.js - the starting code below and the basis of the solution comes from that resource.
Getting started.
In the previous two posts I used Thimble from Mozilla, I had a problem with access my camera using Thimble so I switched to Glitch - you may need to register - and Codepen.io.
The code below was adapted from the Creating Augmented Reality with AR.js and A-Frame page.
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<!-- create your content here. -->
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
</body>
The first script line is the same as in the previous posts setting up the A-Frame WebVR. The second one adds the additional functionality for Augmented Reality via markers. The only other new feature is within the <a-scene></a-scene> tags, a new set of tags <a-marker-camera> saying which markers is being used; in this case, a preset one called Hiro (see below), which available in AR.js.
A blue box and text were added to the scene - just in the same way as adding boxes and text in the first of this series. Shown in code pen below
Using the Hiro marker go to https://codepen.io/scottturneruon/pen/gKVWYq to play!
Next Step
To take this forward I wanted to replace the text and box with some rotating text when the marker is visible. On the AR in action can be found at http://bit.ly/2N0nvWx; you will need the Hiro marker.
The code for the AR in action is shown below.
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<!-- create your content here. just a box for now -->
<a-text value="University of" color="blue" position="0 0.5 -0.5" align="center" height="2"><a-animation attribute="rotation" dur="5000" to="360 0 0" direction="alternate" repeat="indefinite"></a-animation>
</a-text>
<a-text value="Northampton" color="blue" position="0 0.325 0" height="3" align="center"><a-animation attribute="rotation" dur="5000" to="360 0 0" direction="alternate" repeat="indefinite"></a-animation>
</a-text>
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
</body>
Where next
Adding images to objects and adding models are the next experiments.
To read more go to
- https://aframe.io/docs/0.7.0/introduction/
- Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne
- WebVR playtime 1: Basics of setting up, images and rotating blocks
- http://robotsandphysicalcomputing.blogspot.com/2018/02/webvr-playtime-2-video-360-video-and.html
All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon
Very informative!!!!
ReplyDeleterobot kit
This comment has been removed by a blog administrator.
ReplyDeleteGood post... Augmented and virtual reality have a great potential which leads to get a good results in the particular business.
ReplyDeleteVirtual Reality Shopping
VR real estate
VR architecture
Great post.
ReplyDeleteVirtual Reality
Hello author, very informative post about the aggressive increasing of VR and AR in the technical world, and yes its really useful indeed.
ReplyDeleteSoumya Dasa from - E3iq - VR and AR Company in Palo Alto, CA
Wonderful piece of information. Really very strategically you have shared the ideas on Virtual Reality. Modern World needs it.
ReplyDeleteIn this era of blog ,we easily get nice & updated information for research purposes.. I'd definitely appreciate the work of the said blog owner. Custom Software Development
ReplyDeleteAwesome blog.I find it interesting and is pretty fascinating, By reading your blog i got very useful information.Thanks for sharing this blog.
ReplyDeleteSalesforce Consulting Services
Ecommerce Development Services
Mobile App Development Services
Magento Development Services
Augmented reality adds graphics, sounds, tactile interaction and smell to the natural world as it exists. This in itself, is enough to let the imagination of developers run wild with ideas on how the human experience can be enhanced in pretty much all aspects of how we interact with the world around us.
ReplyDeleteVirtual Reality Canada
Great Blog post! thanks for sharing
ReplyDeleteeCommerce Development Company
Digital Marketing Company.
Nice Blog. Thank you for sharing.
ReplyDeleteAugmented Reality App Development Company
Mobile App Development Company in Gurgaon
Excellent post. I enjoyed the read and discovered a fresh take on AR technology. Arporntube AR
ReplyDelete