Making Art with Augmented Reality

A Workshop with John Craig Freeman and Upgrade! San Francisco

When: Workshop Saturday, March 31 & Sunday, April 1, 2012, 11am–5pm. Plus a free public lecture March 29, 7pm.

Where: SOMArts Cultural Center, 934 Brannan St (btw 8th & 9th), San Francisco.


"Cuff," Carrie Katz, I Am Crime, SOMArts, 2012.

This 12-hour workshop provides a hands-on introduction to Augmented Reality (AR) – a technique where virtual 3D objects can be overlaid into physical space and viewed through the camera and screen of mobile devices. AR is an emerging tool in game design and offers many exciting possibilities for visual artists and activists to realize their ideas in any scale or location in the world.

By the end of the workshop you will be able to:

  • Map your personal experiences and memories across the city of San Francisco
  • Create simple but meaningful 2D and 3D augmented reality objects and place them at specific geographical locations
  • Know more about the Layar Mobile Augmented Reality Platform and the Hoppola Augmented Reality Asset Server
  • Test, view and document your work on location using iPhone or Android mobile devices
  • Exhibit your final augmented artwork, and a 17” x 22” color print of it, will be included in the SOMArts exhibition I Am Crime: Art on the Edge of Law
  • Take home the full color high-quality quality print after the exhibition closes on April 19, 2012

Participation Requirements: Each student must be 18 years or older, provide their own Wi-Fi enabled laptop, and bring a late model smartphone (iPhone or Android mobile device) equipped with a camera, GPS, compass, accelerometer, and mobile Internet or Wi-Fi connection.


By the end of the workshop, we will produce an augmented reality exhibition of work by all workshop participants.

We will print screenshots of everyones projects and hang the images in the SOMArts annex gallery as part of the “I Am Crime” exhibition and we will place virtual objects throughout the Gallery and the city of San Francisco.

Download Redlaser now, press the scan button and aim at the QR code in the exhibition. If you don’t have the free Layar Augmented Reality Browser installed, you will be prompted to do so.

Create and Publish a Basic AR Asset

Please keep you phone charged at all times.

Download the SOMArts Assets:

Steps to create a layer:

Sign up to become a developer:

Login to Layar Developer Section:

Register your layer on the Publishing Site: Layer name = yourprojectname (unique, lowercase only, no spaces or symbols), Title = Your Project Title, Short description (60 characters max) API endpoint URL (hold)

The next step would be set up web service. We will use Hoppala Augmentation as a web service and to host content for now. Open a new browser tab.

Create a Hoppala account:

Create an Overlay in Hoppala: Hoppala Augmentation Dashboard > Add Overlay, Title = Your Project Title (same as Title above), Name yourprojectname (same as Layer name above), copy Overlay URL

Edit the Layar: API endpoint URL = paste Overlay URL, 3D and 2D objects in space (pulldown), Create Layar

  • Listing & indexing: Layer Icon = SOMArts_Icon_128.png, SOMArts_Icon_96.png, Layer Screenshot = SOMArts_Screenshot.png, Title, Category = Art, Short description, Detail description, Tags, Minimum API version = Version 3.0
  • Look & feel: Upload a Banner Icon = Baner_Icon_120.png, Baner_Icon_90.png
  • Coverage: Countries = United States
  • Save

Create an Overlay POI (Point of Intrest) in Hoppala:

  • General: Title = object name, Description 1 = your name, Thumbnail = pulldown menu > SOMArts_Icon_128.png
  • Assets: Asset > Choose File = Simple_Facing_Plane_01.l3d > Add > pulldown menu, Scale = 200%, Angle √ Facing
  • Action: Website, Audio etc.
  • Location: Longitude = 37.771299, Latitude = -122.406857 (SOMArts GPS), Altitude √ Relative, The way to think about altitude is that the models center point will load at the users camera level. So, if a model is human scale, 6 feet or 2 meters, you would have to use a -1 meter elevation value or so for the feet to be on the ground.

Test your layer thoroughly:

Layar Developer Section > My layars > Test

Enter geolocation: 37.771299,-122.406857

Save location = SOMArts

Load POIs

Install and login to Layar on your phone

Enter in your phones URL field

Publish your layer once it is approved:

Production Concept

Write down short narrative descriptions of important formative memories from your family experience, from your community experience, from your entertainment experience and from your professional experience. Do not attempt to explain the meaning of the event nor why you remember it. Instead paint a mental image of the memory with your words.

Based on objects which appear in your writing, particularly those which repeat across memories, create a set of digital images. You can photograph, paint, draw, scan, download, or create simple 3D models if you have the skills. Save the images as 1024 x 1024 pixel files with transparency in the .png file format. The objects in the images should be completely contained within the frame with no cropping. Animated sequences of up to 12 frames are acceptable as well.

We will place these objects in significant locations around the city and beyond. Finally, you will be asked to connect the these experience and memories to some current public policy issue that they feel strongly about.

Recommended Viewing: Ulmer Tapes

Project Production

If possible, direct the students towards creating augments that embody that concept of impossibility; politically, spatially, etc. That way they push further our show concept and potentially adopt your use of augments as politically potent symbols.

Best regards,


Prepare your your own PNG file with transparency:

  • Save it at 1024×1024 pixel your_2D_object_1024.png

  • Save it at 128×128 pixel your_2D_object_Icon_128.png


  • Save it at 96×96 pixel your_2D_object_Icon_96.png


Develop a Proxy Layar

Login to your SOMArts Group Layar Account

My layars > Open and configure your proxy layar

  • user01: John
  • user02: Allison
  • user03: Anne
  • user04: Carrie
  • user05: Carla
  • user06: Christine
  • user07: Ulises
  • user08: Isabel
  • user09: Dorothy
  • user10: DC
  • user11: Casodra
  • user12: Lian
  • user13: Nanette
  • user14: Victoria
  • user15: Scott

Login and copy your Overlay URL from your Hoppala Account

Paste your Overlay URL in API endpoint URL field of the API endpoint tab of your proxy Layar

Convert an .obj file to the Layar proprietary .l3d file format using the Layar3D Model Converter:

  • Layar3D Model Converter – Menu Bar > File > Import Wavefront (.obj/.mtl) = Simple_Facing_Plane.obj
  • Overview: Inspect stats, File size (bytes) not to exceed 1000000
  • Materials: Diffuse = White, Ambient = White
  • Preview:
  • Menu Bar > File > Save As your_asset_01.l3d

Modify your Overlay POI in Hoppala:

  • General: Title = object name, Description 1 = your name, Thumbnail > Choose File = your_image_Icon_128.png > Add > pulldown menu
  • Assets: Asset > Choose File = your_asset_01.l3d > Add > pulldown menu, Scale = 200%, Angle √ Facing
  • Action: Website, Audio etc.

Test Your Work on the Group Project List


  • Book mark the project list for easy access
  • Choose a project from the list
  • Aim the device’s cameras towards the object
  • Choose Options > Layar actions > Screenshot
  • Send images and video to Your contribution will be printed and posted

Animated Assets

Modify .l3d file using the Layar3D Model Converter:

  • Layar3D Model Converter – Menu Bar > Open = Simple_Facing_Plane_01.l3d
  • Materials: Diffuse = White, Ambient = White, static – animation > Replace image Animation/Animation_512_01.png > Add, Delay (ms) = 200
  • Preview: Menu Bar Enable > Animation
  • Overview: Inspect stats, File size (bytes) not to exceed 1000000
  • Menu Bar > File > Save As Animated_Asset.l3d

3D Assets

Adjust Normals:

Maya Menu Bar > File > Set Project = Simple_Cylinder

Menu Bar > File > Open = Simple_Cylinder.mb

Select geometry

Menu Bar > Display > Polygons > Face Normals

Menu Bar > Display > Polygons > Backface Culling

Menu Bar > File > Export > Simple_Cylinder.obj

Convert an .obj file to .l3d file format using the Layar3D Model Converter:

  • Layar3D Model Converter – Menu Bar > File > Import Wavefront (.obj/.mtl) = Simple_Cylinder.obj
  • Overview: Inspect stats, File size (bytes) not to exceed 1000000
  • Materials: Diffuse = White, Ambient = White
  • Preview:
  • Placement: √ Save placement details = Longitude = 37.771299, Latitude = -122.406857
  • Menu Bar > File > Save As .l3d

Open and inspect Simple_Cylinder.psd in Photoshop

Building Your Own Web Service

Download the ‘Sample Code: Add objects to a layer’ from the Browser & Platform – Layar Developer Documentation, Tutorials & Tools, Layer with 1d icons, 2d images and 3d objects.

Manage a MySQL Database Using phpMyAdmin

Use SQL statements to build database tables.

Configure a .PHP Endpoint URL.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s