Geo-Located AR Scene

Hollywood_and_Vine_NE

By the end of this lesson you will be able to:

  • Create and manage an augmented reality asset database
  • Create simple but meaningful 2D and 3D virtual objects and place them at specific geographical locations
  • Understand how to use the Layar Mobile Augmented Reality Platform
  • Test, view and document your work on location

Participation Requirements:

  • Each student must bring a late model mobile device (iPhone, Android smartphone or iPad) equipped with a camera, GPS, compass, accelerometer, and mobile Internet or Wi–Fi connection
  • Each student must have access to a late model computer with an Internet connection
  • Each student must have access web servers space and a database. If no institutional support for databases is available, students must signup for a third–party web hosting provider. The host must allow unrestricted FTP (file transfer protocol) access to at least 40 MB of web servers space and a dedicated MySQL database (client version: 5.1.49 or later) running phpMyAdmin (version: 3.3.10.4 or later)

Getting Started

Please keep you phone charged at all times.

Download Augmented_Reality_Assets to your hard drive.

Document 1 (Rich Text .rtf)

Create and Configure Domain, Web Service and Database

  • Create an account at GoDaddy
  • Web Hosting > Buy Now
  • Create a domain name: your_name.com (or .net etc.)
  • Next
  • Web Hosting Economy, 12 months @ 4.99 = $59.88 is recommended
  • Choose an operating system > Linux with cPanel control panel (Deluxe Web Hosting Linux)

Configure Web Service

  • Web Hosting > Manage
  • Set Up
  • New cPanel username > firstname_lastname
  • New cPanel password > yourpassword

Document Username and Password

  • Open Augmented_Reality_Assets/AR_Admin.rtf
  • Enter Username and Password to AR_Admin.rtf

Sign-In


Set Up a Web Service

  • Web Hosting > Manage
  • Manage
  • File Manager
  • Navigate to Augmented_Reality_Assets/FTP_to_Your_Web_Server/Layar/
  • Rename Your_Project_Title.php to Your_Project_Title.php
  • Open FTP_to_Your_Web_Server/Layar/config.inc.php in a software development environment or a text editor
  • Edit the credentials and save the file
  • define(‘DBHOST’, ‘localhost’);
  • define(‘DBDATA’, ‘database_name‘);
  • define(‘DBUSER’, ‘database_username‘)
  • define(‘DBPASS’, ‘database_password‘)

Update Credentials in AR_Admin.rtf and save

Rename FTP_to_Your_Web_Server to Your_Project_Name

From Finder > Right-Click the Your_Project_Name directory > Compress “Your_Project_Name”

In File Manager Upload the Your_Project_Name.zip directory to your web server home/public.html

Right Your_Project_Name.zip in File Manager home/public.html and choose > Extract

Add Tables to Database

MySQL ® Datase

Create New Database = Your_Project_Name

cPannel > phpMyAdmin

Open Augmented_Reality_Assets/Layar_Tables_sqlQuery.sql in text editor (Right-Click > Open > Trust)

Select > All

Edit > Copy

In phpMyAdmin select your_database_name

Select SQL Tab

Edit > Paste

Go

Modify Table Fields

Icon:

In cPannel File Manager (or Fetch) Upload Workshop_Icon_128.png to Your_Domain.com/Your_Project/Assets/

In phpMyAdmin

  • Your_Database Icon Table > Sidebar > Icon > Edit (pencil)
  • id = 1
  • url = <a href="Your_Domain.com/Your_Project/Assets/Workshop_Icon_96.png
  • type = 1
  • Go

* Replace this image with your own PNG file, use Button.psd

Layer:

Layar Table > Browse Tab > Edit (pencil)

  • layer = yourprojectname
  • refreshInterval = 300
  • refreshDistance = 100
  • fullRefresh = 1
  • showMessage = √
  • id = 1
  • biwStyle = classic
  • Go

LayarAction:

LayarAction Table > Browse Tab > Edit (pencil)

  • No change

Prepare 2D Asset

In Photoshop

  • Modify Simple_Facing_Plane_512.png from Workshop_Assets
  • Save as Your_Project_512.png

In cPannel File Manager (or Fetch)

  • Upload Your_Project_512.png Your_Domain.com/Your_Project/Assets/

Object:

In phpMyAdmin

  • Browse Tab > id1 > Edit (pencil)
  • id = 1
  • contentType = image/vnd.layar.generic
  • url = Your_Domain.com/Your_Project/Assets/Your_Project_512.png
  • reducedURL = √
  • size = 100.00000
  • Go

In cPannel File Manager (or Fetch)

  • Upload Simple_Facing_Plane.l3d Your_Domain.com/Your_Project/Assets/

In phpMyAdmin

  • Browse Tab > id2 > Edit (pencil)
  • id = 2
  • contentType = model/vnd.layar.l3d
  • url = Your_Domain.com/Your_Project/Assets/Simple_Facing_Plane.l3d
  • reducedURL = √
  • size = 100.00000
  • Go

* We will replace this model with your modification of the Simple_Facing_Plane.l3d file

POI

In Photoshop

  • Modify Simple_Facing_Icon_128.png from Workshop_Assets
  • Save as Your_Project_Icon_128.png

In cPannel File Manager (or Fetch)

  • Upload Your_Project_Icon_128.png Your_Domain.com/Your_Project/Assets/

In Google Maps

  • Find Location (Boston Common 42.353730, -71.065074)
  • Click on location and choose ‘What’s here?’ to determine GPS coordinates

In phpMyAdmin
POI Table > Insert Tab

  • id = Your_Object
  • footnote = Your Name
  • title = Your Project Title
  • lat = Your Location lat
  • lon =Your Location lon
  • imageURL = http://your_domain.com/yourprojectname/
    Assets/Your_Project_Icon_128.png
  • description = Short description (3 or 4 words max)
  • biwStyle = classic
  • alt = √
  • doNotIndex = 0
  • showSmallBiw = 1
  • showBiwOnClick = 1
  • poiType = • geo
  • iconID = 1
  • objectID = 1
  • transformID = 1
  • layerID = 1
  • Go

POIAction:

  • POIAction Table > Browse Tab > Edit (pencil)
  • poiID = Your_Object
  • label Open Website
  • uri = http://VM420.wordpress.com
  • autoTriggerOnly = √
  • id = 1
  • contentType = application/vnd.layar.internal
  • method = • GET
  • activityType = 1
  • params = lat,lon,alt,lang,countrycode,
    localCountryCode,version
  • closeBiw = 0
  • showActivity = 1
  • activityMessage = √
  • autoTrigger = 0
  • Go
  • Change All poiIDs = Your_Object
  • POI Table > id geo_1 > delete

Transform:

  • Transform Table > Browse Tab > Edit (pencil)
  • id = 1
  • rel = 1 (always face user)
  • angle = 0
  • rotate_x = 0
  • rotate_y = 0
  • rotate_z = 1
  • translate_x = 0
  • translate_y = 0
  • translate_z = 1.5
  • scale = 0.1
  • Go
  • Transform Table > Browse Tab > Edit (pencil)
  • id = 2
  • rel = 1 (always face user)
  • angle = 0
  • rotate_x = 0
  • rotate_y = 0
  • rotate_z = 1
  • translate_x = 0
  • translate_y = 0
  • translate_z = .5
  • scale = 1
  • Go

Set Up a Layar Developer Account

Review Steps to create a layer

Follow the instructions to Sign up to become a developer

Login to Layar Developer Section

Create a Layar

In Layar Developer Section click ‘Create a new layer!’

For details see: Register a Layer

  • Layer name = yourprojectname (unique, lowercase only, no spaces or symbols, cannot be changed)
  • Title = Your Project Title
  • (plain language)

  • Short description (60 characters max)
  • API endpoint URL = http://Your_Domain/Layar/
    Your_Project_Title.php
  • Layar Type: 3D and 2D objects in 3D space

  • Create Layar

Edit Layar

For details see: Edit a Layar

General tab:

  • 3D and 2D objects in space (pulldown)

API endpoint tab:

  • No change

Listing & indexing tab:

  • Layer Icon = * Workshop_Icon_128.png, * Workshop_Icon_96.png
  • Layer Screenshot = * Workshop_Screenshot.png
  • Title = Your_Project_Title
  • Category = Art
  • Short description
  • Detail description
  • Tags =
  • Minimum API version = Version 7.1
  • Save

* Replace these images with your own .PNG files, maintain pixel dimentions and naming conventions, such as Your_Project_Title_Icon_128.png

Look & feel tab:

  • Upload a Banner Icon = Baner_Icon_120.png, Baner_Icon_90.png
  • Save

Countries tab

  • Countries = International
  • Save

Test Layar

For details see: Test a layer

Layar Developer Section – My layars > yourlayarname Test

  • Enter geolocation:
  • Save location = Your_Location
  • Load POIs

Install Layar to Mobile Device

Install the free Layar Augmented Reality Browser on your tablet or phone and login

  • Layar > Menu > Setting > Account
  • Username: Your_Layar_Account_Username
  • Password: Your_Layar_Password

Ignore Scan (See Layar Vision for more on Layar Vision)

Select GeoLayar > Test

If necessary, test from remote location using Fixed Location

  • Layar > Setting > Options
  • Use fixed location:
  • Latitude: Your_POI_Latitude –0.0001
  • Longitude: Your_POI_Longitude –0.0001

Request Approval for Publication

Layar Developer Section – My layars > yourlayarname Request Approval

For details see: Request for publication

Publish Layar

Publish your layar once it is approved

Layar Developer Section – My layars > yourlayarname Publish

Project Production

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

 
 
 
 
 
 
 

Modify OBJ

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

If the Layar3D Model Converter will not run: Apple > Systems Preferences > Java > Java Control Pannel > Security > Medium

Inspect OBJs

All three .obj, .mtl (UV map) and image file (.jpg or .png) are required

Layar3D Model Converter –

Menubar > File > Import Wavefront (.obj/.mtl) = OBJs/
Simple_Facing_Plane.obj

Overview:

  • Inspect stats, File size (bytes) not to exceed 1,000,000

Materials:

  • Select > Replace Image = Your_2D_Object_1024.png
  • Diffuse = White
  • Ambient = White

Preview:

Menubar > File > Save As Your_Simple_Facing_Plane.l3d

Update Database Tables

phpMyAdmin > your_database_name –

Object: > Browse Tab > Edit (pencil)

  • url = http://your_domain.com/yourprojectname/
    Assets/Your_Simple_Facing_Plane.l3d
  • Go

POI: > Browse Tab > Edit (pencil)

  • imageURL = http://your_domain.com/yourprojectname/
    Assets/Your_Icon_128.png
  • Go

Add Audio

POIAction: > Browse Tab > Edit (pencil)

  • labelPlay Audio
  • uri = –http://your_domain.com/yourprojectname/
    Assets/*Audio.wav
  • autoTriggerRange = 3
  • autoTriggerOnly = 1
  • contentType = audio/mpeg
  • activityType = 2
  • params = √ Null
  • activityMessage = Listen to this
  • autoTrigger = 1
  • Go

* Replace this audio file with your own .WAV file and ftp to
–http://your_domain.com/yourprojectname/Assets/

Animated Assets

Layar3D Model Converter –

Menubar > Open = Simple_Facing_Plane.l3d

Materials:

  • Diffuse = White
  • Ambient = White
  • static – animation > Replace image =
    Animation/Animation_512_01.png to
    Animation_512_10.png
  • Add
  • Delay (ms) = 200

Preview:

Menubar > Enable > Animation

Overview:

Inspect stats, File size (bytes) not to exceed 1,000,000

3D Assets

Adjust Normals:

Maya Menubar > File > Set Project = Simple_Cylinder

Menubar > File > Open = Simple_Cylinder.mb

Select geometry

Menubar > Display > Polygons > Face Normals

Menubar > Display > Polygons > Backface Culling

Menubar > Settings/Preferences > Plug-in Manager > objExport.bundle √

Menubar > File > Export > OBJs/Simple_Cylinder.obj

Layar3D Model Converter –

Menubar > File > Import Wavefront (.obj/.mtl) = Simple_Cylinder.obj

Overview:

  • Inspect stats, File size (bytes) not to exceed 1,000,000

Materials:

  • Diffuse = White
  • Ambient = White

Preview:

Placement:

  • √ Save placement details

Menubar > File > Save As Your_3D_Asset.l3d

Open and inspect Simple_Cylinder.psd in Photoshop

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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