This is the second part of the activities on Web-based XR. If you have not completed Part I, you can find it here.
In this activity we will use our VR scene from Part I and put it in an Augmented Reality (AR) demonstration, which you can try with your smartphone, or your desktop as long as you got a camera.
You can see a screenshot of the rainbow, placed upon an AR marker, below:
Our demo will use the AR.js library, created by @jeromeetienne and it is now maintained by @nicolocarpignoli. You can find the Github page here: https://github.com/AR-js-org/AR.js
In this demo, we will use the Hiro Marker, shown below:
Print the marker, ensuring there is about 2cm of white space around the black box. The best way is to print in the middle of a page. You can use your mobile phone to display the image, but screen glare may affect the quality of the tracking. The AR.js algorithm will track the boundary box and use it to place any graphics we need, on the marker.
Another important aspect of the marker is that it does not exhibit rotational symmetry – i.e., that the algorithm can detect which way is up and therefore determine the orientation of the graphics we place on the marker. Finally, the larger you print the marker, the larger the graphic will render, unless we tweak its scaling (more on that, below).
index.html file from Part I, as
indexAR.html. Then add the AR.js library by adding the following link to its CDN. Not sure what CDNs are? Have a look here.
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.1.6/aframe/build/aframe-ar.js"> </script>
Note, AR.js now has separate marker-based and image-based tracking, available here.
Then, modify the body tags as follows:
<body style="margin: 0px; overflow: hidden;"> <a-scene embedded arjs> <a-marker preset="hiro"> <a-entity scale="0.2 0.2 0.2"></a-entity> </a-marker> <a-entity camera></a-entity> </a-scene> </body>
The body attributes ensure that what is captured from your cammera is show on the whole webpage.
The next elements wrap the content of your page in an A-Frame scene with AR.js functionality (denoted from the attribute arjs) enabled:
<a-scene embedded arjs> ..... </a-scene>
The next element, down the hierarchy specifies the marker type, as the Hiro preset marker (denoted from the attribute
The final bit specifies what is place on a marker – in this case an
<a-entity> with a scale attribute. Notice that the scaling attribute requires that you specify scaling in terms of
z dimensions. See how scaling works in A-Frame here.
<a-entity scale="0.2 0.2 0.2"></a-entity>
indexAR.html) in your browser, give access to your browser to use your camera, and put the printed Hiro marker in front of it. You should be able to display the scene, as shown above.
If the rainbow looks too big, tweak the scale values above. The
.2 at the moment worked for a marker with a side of 7.5 cm.