Development

Step 1: Create a simple VR scene

  1. Take a look at index.html this is where we will be working. It has some JavaScript libraries added which will enable us to write HTML to build our VR and AR scene. We use the library A-Frame.

  2. First we will add the HTML tag for the AR/VR environment to the <body> of the page.

    <a-scene>
    
    </a-scene>  
    
  3. You can view the page by clicking Show and the page will now have a small icon in the bottom right showing that it is VR ready.

  4. The scene is currently empty and white because it has nothing in it. Let's add a box to the <a-scene> by adding <a-box color="palegoldenrod"></a-box>. Try picking your own color for the box. The box should be placed directly below the camera so you may have to drag the camera down to look for it.

  5. To make it easier to see what we are working on, we can set the position of the camera using <a-camera>. We will position the camera in three dimensions where the x is left to right, y is up and down, and z is in and out from the screen. We will position it 1m up and 2m out from the screen.

    <a-camera position="0 1 2"></a-camera>
    
  6. The goal is to make a duck in a small pool. We will turn this cube into a pool by moving it down into the ground with the attribute position="0 -0.5 0" and by turning it inside out. To make it inside out we will add the attribute material="side:back". The final line looks like so:

    <a-box color="palegoldenrod" position="0 -0.5 0" material="side:back"></a-box>
    
  7. Let’s add some floor around the pool. We will want to add 4 <a-plane> to cover the area around the pool. Here is an example <a-plane>:

    <a-plane width="1" height="10" position="0 0 5.5" rotation="-90 0 0" color="lavenderblush"></a-plane>    
    

    It is rotated -90 degrees in the x axis to make it lie flat against the floor. Can you position 3 more <a-planes> to complete the floor like the below diagram.

    The final result should look similar to the image below:

  8. A final <a-plane> for some water is a nice touch.

    <a-plane width="1" height="1" rotation="-90 0 0" position="0 -0.2 0" color="lightblue" opacity="0.5"></a-plane>
    
  9. Now we can place the duck in the pool. There is a model prepared in advance from:
    https://poly.google.com

    The model is licensed CC-By by Robert Mark. The URL is:
    https://poly.google.com/view/1cAO2jZEz1L

    The model is stored in the Assets folder for this project and can be added like so:

    <a-gltf-model
        scale="0.5 0.5 0.5"
        position="0 -0.3 0"
        src="https://cdn.glitch.com/32f1ec0f-1e16-448a-b891-71f24804e417%2FDuck.glb?v=1561641862851">
    </a-gltf-model>    
    

    The code is written on multiple lines to make it clearer but the new-lines do not matter in HTML.

    The model is shrunk down to half-size to fit the pool we have made. It is also lowered into the water.

Step 2: Turn the VR scene into AR

  1. To turn it into AR we need to include some libraries. Copy the following lines to the bottom of the <head>.

    <script src="https://rawcdn.githack.com/jeromeetienne/AR.js/788d27310cb89be906506a7abbdbfd593a9303ac/aframe/build/aframe-ar.min.js"></script>
    <script src="https://unpkg.com/aframe-render-order-component@1.1.0/dist/aframe-render-order-component.min.js"></script>
    <script src="./extras.js"></script>      
    
  2. Add the following attributes to <a-scene> to configure the AR:

    embedded arjs="debugUIEnabled:false;detectionMode:mono;"
    
  3. Replace the <a-camera> with the AR marker camera:

    <a-marker-camera
        type="pattern"
        size="0.15"
        url="https://cdn.glitch.com/ad3ec37d-23ba-4a92-9419-7530fd48edea%2Fpattern-silnb2.patt?v=1566997297835">
    </a-marker-camera>   
    

    This tells the AR library that it is looking for a pattern "15cm" large. The URL points at a file describing our AR marker.

    This should now track the marker correctly.

  4. Hiding the floor.

    The floor is really large, we could delete it but that will look weird.

    We want the floor to still occlude the underground parts of the scene but still be hidden from the camera.

    We will mark the floor as invisible by making it render first but not draw anything so those pixels remain transparent.

    We do this by adding the following attributes to the floor elements:

    occlusion-material render-order="-1"
    
  5. Now, try running your code again by pressing Show.

You're done!

Congratulations! You have successfully achieved the goal of this Code Lab activity. Now, you can create a Web AR by yourself!