DIY AvatARs!

DIY AvatARs!

posted in: AR, The Body, Tutorials | 0

Later this month, we will be attending the IX (Immersion Experience) Symposium at the Montreal Société Des Arts Technologiques.  We were asked to run a web-enabled AR or VR workshop along the theme of ‘The Year of the Body’, so we decided to run a ‘DIY AR Avatar’ workshop! We were excited to try a workshop exercise that involved your body and bodily movements as part of the output, and making personalized AR avatars seemed fitting.  Also, web-enabled AR opens up possibilities for people who want to learn about AR with easily accessible devices that they may already have, like laptops and non-iOS smartphones. If you’d like to try a version of our workshop for yourself, follow along with the instructions below. Please feel free to share any feedback with us about how the workshop works (or doesn’t work!) for you.  Happy AvatAR-ing!

 

🕵🏾🤖🐯 DIY AvatARs Workshop 🐼🍔😎

 

What is Augmented Reality?


Augmented Reality (AR) is a view of a physical space with overlayed computer imagery.  The overlayed imagery can be generated based on physical image-markers (or fiducials) which tell the camera where to place the overlayed imagery, or it can be generated based on computer vision that detects certain elements in the physical scene, like a specific face.  To make AR apps, you just specify which computer imagery to place when a certain marker or target is detected.

In this workshop, we will be making marker-based AR apps using A-Frame, an HTML-based markup language.  We will also be using AR.js by Jerome Etienne, an easy-to-use library that lets you specify which A-Frame objects appear when a certain marker is detected.  A disclaimer: A-Frame and AR.js are both available at the links in the code will be using, but may update or change in the future.

 

1. Sign up for Neocities

  1. Visit http://www.neocities.org
  2. Under Sign up for free, fill in your info and click the Create My Site button
  3. Under the Free section, click Continue
  4. Check your email for your token, enter it where it says Email Confirmation Token and click Confirm Email
  5. We already know HTML! Click Go to the dashboard >>.
    You should see a dashboard that looks like this:
  6. Rollover the index.html and click Edit. You should see your index.html file that looks like this:
    Screen Shot 2017-05-11 at 11.32.02 AM
  7. Click the View button to see your default HTML page! It should look something like this:
  8. We are going to replace this page with an AR app written in a language similar to HTML called A-Frame. So, go back to your site editing tab and delete all the HTML code to make it an empty file, and then click Save
  9. On the top left, click Dashboard
  10. We only need the index.html, so rollover the neocities.png, not_found.html, and style.css and click Delete
  11. Your dashboard should only contain the index.html file now and look like this:

 

Now that you are set up with your own blank webpage, you are ready to make your first AR app!

 

2. Simple AR Example

  1. Click Edit over your index.html file
  2. Paste this HTML code into your file:
    <html>
      <head>
        <title>My First AR App</title>
        <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>
      </head>
      <body>
     
        <a-scene embedded artoolkit="sourceType: webcam;">
     
          <a-marker preset="hiro">
            <a-box position="0 0 0" scale="2.5 2.5 2.5" color="blue"></a-box>
          </a-marker>
      
          <a-entity camera></a-entity>
        </a-scene>
    
      </body>
    </html>
  3. Click Save and then click View
  4. Click Allow camera
  5. Grab a printed HIRO marker (click here to print your own):
    Screen Shot 2017-05-11 at 1.13.47 PM
  6. Place your HIRO marker in front of your laptop’s camera, you should see a blue cube appear in front of the marker:
    simple
  7. Congrats! You now have some basic AR working! Now let’s try changing the code…
    Lines 11-17, define your graphic scene.
    Line 13 
    specifies that we are looking for the HIRO marker.
    Line 14 
    draws the box.
    On line 14
    , try changing the position, scale or color of the box. For color, you can use Hexidecimal color values too.
    For example, if you change the scale to 1.5 1.5 1.5 and color to #FA83F7, you should see a smaller, pink box:simple-modified
  8. Let’s try some other shapes!
    Replace the a-box line on line 14 with one of these:
    <a-cone radius-bottom="2" radius-top="0" height="3" color="tomato"></a-cone>

    or…
    <a-sphere color="yellow" radius="2"></a-sphere>
    Screen Shot 2017-05-11 at 2.58.52 PM

    …or replace the line with two (or more) lines to combine shapes:

    <a-cone position="0 2 0" radius-bottom="1" radius-top="0" height="2" color="tomato"></a-cone>
    <a-sphere position="0 -1 0" color="yellow" radius="2"></a-sphere>

    *Notice here that the position attribute has new values to place the shapes relative to other.

     


    …or if you’d like to try other shapes or attributes for them, check out the A-Frame primitive shapes documentation page.

  9. Try taping the HIRO marker to your forehead!

 

3. Adding 3D Models

Now that you have some basic AR shapes as an avatar face, let’s try some 3D models on for size!

  1. Go to your Neocities Dashboard
  2. Click Edit over your index.html file
  3. Paste this HTML code into your file:
    <html>
      <head>
        <title>My First AR App</title>
        <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>
      </head>
      <body>
        <a-scene embedded artoolkit="sourceType: webcam;">
     
          <a-assets>
            <a-asset-item id="obj1" src="rijks-buddha.obj"></a-asset-item>
            <a-asset-item id="mtl1" src="rijks-buddha.mtl"></a-asset-item>
          </a-assets>
     
          <a-marker preset="hiro">
            <a-obj-model src="#obj1" mtl="#mtl1" position="0 0 0" rotation="-90 0 0" scale="0.3 0.3 0.3">
            </a-obj-model>
          </a-marker>
     
          <a-entity camera></a-entity>
        </a-scene>
      </body>
    </html>

    Notice lines 10-13 and lines 16-17 are different this time.  They load .obj and .mtl assets, and then there is a new A-Frame type, an a-obj-model that applies the .obj and .mtl assets to a 3D model.

  4. Download these three files to your desktop:
    rijks-buddha.obj
    rijks-buddha.mtl
    rijks-buddha.jpg
  5. In your Dashboard, click the Upload button and upload the three files
  6. Your Dashboard should look like this:
    Screen Shot 2017-05-11 at 6.11.34 PM
  7. Click Edit on your index.html file and then click the View button
  8. You should now see a 3D model Buddha head!
    *Rijksmuseum Head of the Buddha model courtesy of Thomas Flynn
    buddha
  9. If you’d like to use your own 3D model, upload your own .obj and .mtl and corresponding texture files, and edit the filenames on line 11 and line 12.
    Need help finding or creating 3D models?  We suggest the following apps and repository websites:

    • Sketchfab to download freely available models
    • 3dc.io to create your own model
    • SculptGL to sculpt your own model
    • Scann3D to scan your own model with an Android phone
    • Trnio to scan your own model with an iOS phone
    • … or any 3D modeling method you choose!
  10. Important tips to keep in mind when using your own 3D model
    • Only .obj, .collada and .gltf models are currently supported
    • Make sure your files are 10MB or less
    • If you can’t see your model, wait a minute or two
    • If you still can’t see your model, double check your file spellings
    • If you still can’t see your model, try changing the rotation or scale
    • To help with orientation, make sure your models are originally centered on 0,0,0
      centered

A cake face:
*Cake model courtesy of index
cake

 

4. Adding More AvatAR Body Parts

If you’d like to have more than one AR object, you just need to use more markers like the HIRO marker, taped to different parts of your body.

  1. Print these extra markers (for better tracking: make sure to leave a white border around the black square)

    a
    c
    d
    f
    g 
  2. Copy this code and paste into your index.html file:
  3. <html>
      <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.js"></script>
        <script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
      </head>
      <body>
     
        <a-scene embedded artoolkit="sourceType: webcam;">
    
          <!-- HIRO marker -->
          <a-marker preset="hiro">
            <a-box position="0 0 0" scale="2.5 2.5 2.5" color="blue"></a-box>
          </a-marker>
    
          <!-- KANJI marker -->
          <a-marker preset="kanji">
            <a-box position="0 0 0" scale="1.5 1.5 1.5" color="red"></a-box>
          </a-marker>
    
          <!-- A marker -->
          <a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.a" size="1"> 
            <a-box position="0 0 0" scale="1.5 1.5 1.5" color="red"></a-box>
          </a-marker>
    
          <!-- B marker -->
          <a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.b" size="1"> 
            <!-- YOUR CODE HERE -->
          </a-marker>
    
          <!-- C marker -->
          <a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.c" size="1"> 
            <!-- YOUR CODE HERE -->
          </a-marker>
    
          <!-- D marker -->
          <a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.d" size="1"> 
            <!-- YOUR CODE HERE -->
          </a-marker>
     
          <!-- F marker -->
          <a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.f" size="1"> 
            <!-- YOUR CODE HERE -->
          </a-marker>
     
          <!-- G marker -->
          <a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.g" size="1"> 
            <!-- YOUR CODE HERE -->
          </a-marker>
    
          <a-entity camera></a-entity>
        </a-scene>
      </body>
    </html>
  4. If you print the HIRO, Kanji and A markers, tape them to your palms, and then click View, you should now have AvatAR hands!
    simple
  5. Fill in your own objects wherever it says <!-- YOUR CODE HERE -->

 

5. Try Viewing Your AvatAR On A Mobile Device! 📱

  1. Load your Neocities URL ([YOUR-NAME].neocities.org) on your smartphone’s web browser
  2. Point your smartphone at an AR marker and you should see your AvatAR:

 

🌟 Extra: Adding Animations

If you’d like to animate your objects or models, it only takes one extra line of code.

  1. Wherever you have an object, just add an a-animation tag within it:
    <a-box position="0 0 0" scale="2.5 2.5 2.5" color="blue">
      <a-animation attribute="rotation" dur="10000" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
    </a-box>

    Line 2 shows the animation code.  If you’d like to learn more about the a-animation attributes, check out the A-Frame animations documentation page.

  2. Click the View button to see your animation:
    animation

 

 

🤔 Troubleshooting Tips

    • If you aren’t seeing any geometry at all, make sure all your code is inside the <a-scene> tag
    • If you aren’t seeing a material on your 3D model, make sure you use the mtl attribute for .mtl files and the material attribute for plain color values
    • If you aren’t seeing your 3D model:
      • Make sure it is centered on 0,0,0 in the original 3D modeling software
      • Try different, larger scales, maybe it the original is very small?
      • Make sure your files are 10MB or less, to improve loading time
      • If you need help rotating your models, start all rotations at 0 and change them one at a time

 
That’s it!
Hope you enjoyed the tutorial, please share with us any AvatARs you make!
– Evelyn