A-Frame Intermediate JavaScript Project Rainbow WebXR

Introduction to Web-based XR – Part II

Using the VR scene from Part I create an Augmented Reality (AR) rainbow demonstration.

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 Rainbow, from Part I, superimposed on a Hiro marker (see below). The demo is accessible as a Webpage, via your browser.

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:

AR.js is a lightweight library for AR on the Web, providing capabilities such as Image Tracking, Location based AR and Marker tracking. It is based jsartookit5, a JavaScript port of ARTookit, which is the most popular library for marker-based AR.

In this demo, we will use the Hiro Marker, shown below:

The Hiro marker is named after Hirokazu Kato, who developed the ARToolKit, used in this demo through JavaScript ports. It was originally developed by of Nara Institute of Science and Technology in 1999, and was later released by the University of Washington HIT Lab.

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).

Save your 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.


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-entity camera></a-entity>

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>

The next element, down the hierarchy specifies the marker type, as the Hiro preset marker (denoted from the attribute preset="hiro“)

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 x, y and z dimensions. See how scaling works in A-Frame here.

<a-entity scale="0.2 0.2 0.2"></a-entity>

Now, as long as you have not changed your JavaScript code from Part I, that code should ‘pick’ the first <a-scene> instance and place the same rainbow scene, upon the marker. You can run the webpage (remember, the name is 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.

By Panos Ritsos

Panos (Panagiotis) is a Lecturer in Visualization, at Bangor University - His research is on Mixed and Virtual Reality, Immersive Analytics, Data Visualization and Human-Computer Interaction | Scale Modeller and Mountainbiker

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.