Xuan Wang from Layar's developer support team explains how Layar works and how to start making your own layers.

1. Creating Augmented Reality
Experience with Layar
Xuan Wang
Developer Support, Layar

2. Content
• General Intro: • 3D modeling in Layar:
• What is Layar ? • What’s possible now?
• What does it offer ? • What are the best practices ?
• How to create a layer ? • How to get 3d models in a layer ?
• Q&A, Discussion • Q&A, Discussion

4. Accelerometer
GPS
How is my phone
Where am I?
oriented in the world?
Compass Gyroscope (optional)
In which direction To provide a
am I looking? smoother experience
Camera Internet connectivity
What do I see To connect to the
in the real world? digital world

5. Information Service

6. Earthquake information

7. Experience - Berlin wall

8. WTC

9. Future - UAR

10. Brands/Agents: Audi A1, Moscow

11. Events

12. Social Service -Tweets Around

13. Foursquare

14. Games - ScavengAR Hunt

15. Uninvited Art Exhibition, MoMA

16. Layer Features Overview
• Support for icon/images/3D models
• Support for animated POIs
• Sharing to facebook, Twitter and Developer’s server
• Actions: call, email, share, web page, audio, video, etc
• Gaming elements: autotriggers, relative POIs, point to point

17. Open
Platform

18. The Layar ecosystem
Distribution
Brands, Content Layers
Developers Layar End user
publishers
Search &
Discovery

19. Layar Platform Components
Browser Player Publishing

20. Layar Connect - Layer Management System
• Publishing API for Third party layer
management system
• End-to-end and one-stop-shop

21. Layar Platform Architecture
s Layar
it ion
efi
n publishing
GPS data r d
ye environment
La
Layar server
Get layers
Get POIs
Create layer
La
Fixed yer
De
v
data Ge elop
tP e
OIs r AP
I
View
Layer service
POI in
forma
tion
provider Ge
View tP
POI i OI
nform s
ation
Layer
content
Legend
sources
Layar environment
Third-party environment

22. How to create layers ?
• Layers can be built using simple web technology
• You can use programming languages like PHP, MySQL, Java etc as long as the response is in
JSON format
• 2 step process:
1. Create a layer definition in the Layar publishing environment (or using layar connect calls)
2. Create a layer service for delivering the POI content to the Layar app (Based on Developer
API )

23. Step 1: Publishing environment
• http://layar.com/publishing
• Add all the static content and metadata of a
layer
• Listing details
• Look & feel
• Service provider URL (connect to your web
service)

24. Step 2: Layer service
• Create a layer service for delivering the POI content to the
Layar app
• The following elements are needed to set up a layer service:
• A public web server
• A database
• The response should be in JSON format

25. Third party tools
• Instead of creating your own layer service, you can use one of the third party tools developed
by the community, e.g.:
• Porpoise
Open source server software, requires programming skills, more control
• Hoppala Augmentation
Hosted solution, easy to use, limited funtionality
• LMS using Layar Connect, such as BuildAR, Poistr, Poiz, VISAR, etc.

26. Developer Support
• The following support resources provide a wealth of information for developers:
• Layar developer wiki
• Layar developer support environment
• Discussion forums
• Support tickets

27. About Layar
Launched in June 2009
Based in Amsterdam
VC funded
55 people

28. 3D modeling in Layar
• 3D capability in Layar
• Creating 3d models
• Converting 3D model (Layar3D Model Converter)
• Rendering 3d models

29. Layar Augmented Office

30. What’s possible now ?
• Multiple materials with coloring and shininess
• Static/Animated texture
• Texture transparency
• Build 3D model on the fly
• Animation API (apply animation programmatically)

31. General Flow
save as input output
wavefront file format
.L3D file format
(.obj/.mtl)
3D modeling Software, Layar3D Model
Blender, Google Converter
Sketchup, 3ds Max, etc

32. Creating 3D models - Terminology (1)
• Coordinate system:
X → West to East
Y → South to North
Z → Ground to Sky
• Vertex: point in 3D space
• Face/polygons: area connecting 3 or more vertices.

33. Creating 3D models - Terminology (2)
• Normals:
• Indicate the direction of a face.
• Only front facing faces are rendered.
• have effect on the light shading
• If not present in your model, the vertex order is important. (front face is counter clock wise)

34. Creating 3D models - Terminology (3)
• Materials:
• Diffuse color: The main color of the material that is used when light is reflected on it.
• Ambient color: The color of the material that is used for environment light.
• Specular color: The color of the highlight in the model (often white)
• Shininess: controls the size of the highlight. High shininess gives a small highlight, low shininess
makes the highlight area larger.

35. Limitations - Mobile devices
• Limited bandwidth (phone operator) - takes too long to load large files.
• Limited Memory/ processing power (low-end devices)
• The screen is small (usually 800X480), subtle details can not be seen.
• Limited GPU (Graphics processor) power

36. Limitations - Mobile devices
• Limited bandwidth (phone operator) - takes too long to load large files.
• Limited Memory/ processing power (low-end devices)
• The screen is small (usually 800X480), subtle details can not be seen.
• Limited GPU (Graphics processor) power
Keep the balance between complexity and efficiency !

37. 3D Model Requirements
• Polygon counts: recommended max. 10000 (after triangulation)
• File size: max 1mb
• Only support mesh based objects (polygonal modeling)
• The unit for the vertex coordinates is set to 1 meter.
• Keep the object centered on the grid (recommended)
• No transparency on the normal material colors (no alpha blending)

38. Texture Requirements
• Supported Texture formats: PNG, JPEG, GIF (static/animated)
• Resized to be nearest power of 2 (width & height), 16x16, 32x64, etc.
• Use UV mapping
• Texture transparency is supported (PNG only)
• No blending (partial transparency not supported)
• No multiple textures supported for one material, e.g. bump mapping.

39. Texture UV Mapping

40. Texture Transparency (1)
• Alpha values <0.1 are not rendered at all, causing the models behind the face to show. (cutout
effect)
• Semi transparent color values (0.1 <alpha<1.0) are blended with the camera image, the
models behind it are not shown.

41. Texture Transparency (2)

42. Animated Texture
• Add frames:
• Using animated GIF texture, or,
• Add frames in Layar3D model converter
• Use good compression in image files (PNG, reduce number of colors)
• Use small images (recommended smaller than 256x256)
• Recommend to limit the number of frames to 10

43. Animated Texture
• Add frames:
Keep the balance between
• Using animated GIF texture, or, texture size and file size!
• Add frames in Layar3D model converter
• Use good compression in image files (PNG, reduce number of colors)
• Use small images (recommended smaller than 256x256)
• Recommend to limit the number of frames to 10

44. Guidelines & Best Practices - Model
• Start with the basic model and add details later
• Keep the model complexity as low as possible
• use texture to add details, such as windows, doors, etc.
• prepare a simple version of the model ( 2 level of details supported in Layar )
• Keep the model as clean as possible
• no floating vertex points
• no overlapping faces/polygons
• remove invisible faces/polygons
• Check if the normals are facing out.

45. Guidelines & Best Practices - Textures
• Keep the texture images as small as possible
• Use good compression in image files
• Reduce the amount of images used and combine them
into a single texture file (UV-mapping).
• Create “see-through” parts using texture transparency.
• Optimize material group and organize faces based on
material.

46. Guidelines & Best Practices - Textures
• Keep the texture images as small as possible Make sure your model is ready
before export to .obj file!
• Use good compression in image files
• Reduce the amount of images used and combine them
into a single texture file (UV-mapping).
• Create “see-through” parts using texture transparency.
• Optimize material group and organize faces based on
material.

47. Layar 3D Model Converter
• Convert Wavefront format to
Layar3D (.l3d) format, which is
based on Wavefront (.obj) but
optimized for mobile phone
devices.
• written in Java, requires Java v6.0
• Command line version is available

48. Layar 3D Model Converter - Importing
• Imported files
• .obj - contains the vertex and
face data
• .mtl - contains the materials
and references to texture files
• .png/.jpg/.gif - texture
images
• Open existing .l3d model

49. Layar 3D Model Converter -Overview
• Model details
• Model dimensions (in meters)
• File size (bytes)

50. Layar 3D Model Converter -Materials
• Review materials and textures
• Edit colors and shininess values
• Replace texture

51. Layar 3D Model Converter - Animated Texture
• Change texture type:
• no texture
• static
• animated
• Add animated frames

52. Layar 3D Model Converter - Preview
• Imitating the Layar reality browser
behavior in terms of 3D rendering
• The same look and feel can be
expected in Layar reality Browser
(v5.0 and above)

53. Layar 3D Model Converter - Edit model
• Basic functions for quick fix
• Will take effect after saving the
model to .l3d format
• Still recommend to correct these
while preparing the model in the
modeling software

54. Layar 3D Model Converter - Placement
• Place the 3D model directly on the
map ( bird view )
• Help find the accurate position of
the model
• Save placement details in JSON
format

55. Layar 3D Model Converter - Saving
• Save as .l3d model
• .l3d file embeds all textures and
materials

56. Creating 3d model on the fly
• Approach 1:
• Create .obj file based on .obj file format
• Convert to .l3d model using command line version of
Layar3D model converter.
• Approach 2:
• Generate .l3d file directly (in binary format, file format
is available upon request)

57. Rendering 3D models in Layar
• OpenGL ES API
• Simulated camera view in OpenGL
• position
• view
• up
• Object is rendered with perspective

58. Rendering 3D models in Layar
• Given: a 3d cube which is 500m away from user’s position and it is 50m in width, 40m in
length and 30m in height.
• Question: How is it rendered in Layar ?

59. Define 3d Parameters in JSON Response
{
"dimension": 3,
"object": {
• 2 levels of detail for the 3d model : full, reduced
"baseURL": “http://layar.example.com/”,
• “size” : determines which model to pick up to render. The
“full”: “full.l3d”, length of the edge of the smallest cube in which the object
“reduced”: “reduced.l3d”, can fit.
“icon”: “icon.png”,
“size”: 50
• “angle”: rotates the object around the z-axis (right hand
rule)
}
“transform”: { • “rel”: if true, the rotation is calculated relative to the
“angle”: 45,
position of the user.
•
“rel”: false,
“scale”: can be applied to alter the model size.
“scale”: 2
}

60. Which model to pick up ? (1)
{
"dimension": 3,
• The rendered size in Layar is determined by:
"object": {
"baseURL": “http://layar.example.com/”, • Distance: between the 3d model and the user, e.g. 500m
•
“full”: “full.l3d”,
“size”: the size parameter in “object”
“reduced”: “reduced.l3d”,
“icon”: “icon.png”,
• Scale factor: the “scale” parameter in “transform”.
“size”: 50
}
“transform”: {
“angle”: 45,
“rel”: false,
“scale”: 2
}

61. Which model to pick up ? (1)
{
"dimension": 3,
• The rendered size in Layar is determined by:
"object": {
"baseURL": “http://layar.example.com/”, • Distance: between the 3d model and the user, e.g. 500m
•
“full”: “full.l3d”,
“size”: the size parameter in “object”
“reduced”: “reduced.l3d”,
“icon”: “icon.png”,
• Scale factor: the “scale” parameter in “transform”.
“size”: 50
}
“transform”: {
In Layar, in the distance of 500m, there is a
“angle”: 45,
3d object which is 100m (50m x 2) in width,
“rel”: false,
length and height.
“scale”: 2
}

62. Which model to pick up ? (2)
{
"dimension": 3,
• rendered size > 100 px, “full” model is picked up.
"object": {
"baseURL": “http://layar.example.com/”, • 20 px < rendered size <100 px, “reduced” model is picked up.
“full”: “full.l3d”,
“reduced”: “reduced.l3d”,
• rendered size < 20 px, “icon” image is used and scaled down to
10 px threshold.
“icon”: “icon.png”,
“size”: 50
}
“transform”: {
“angle”: 45,
“rel”: false,
“scale”: 2
}

63. Which model to pick up ? (2)
{
"dimension": 3,
• rendered size > 100 px, “full” model is picked up.
"object": {
"baseURL": “http://layar.example.com/”, • 20 px < rendered size <100 px, “reduced” model is picked up.
“full”: “full.l3d”,
“reduced”: “reduced.l3d”,
• rendered size < 20 px, “icon” image is used and scaled down to
10 px threshold.
“icon”: “icon.png”,
“size”: 50
}
“transform”: {
Based on the rendered size, layar client will
“angle”: 45,
determine which model (full/reduced/icon)
“rel”: false,
should be downloaded and rendered.
“scale”: 2
}

64. The Actual Rendering
{
"dimension": 3,
• The real size embedded in the 3d model will be used, instead of
"object": { the “size” parameter.
"baseURL": “http://layar.example.com/”,
“full”: “full.l3d”,
• The “scale” factor will be applied to the real size of the model
“reduced”: “reduced.l3d”,
“icon”: “icon.png”,
“size”: 50
}
“transform”: {
In Layar, in the distance of 500m, there is a 3d
“angle”: 45,
object which is 100m (50m x 2) in width, 80m in
“rel”: false,
length and 60m height.
“scale”: 2
}

65. Animation API
• A collection of pre-defined animations on POIs.
• Simple appearance animation (drop, grow, spin)
• Full customizable animation: onClick, onUpdate, onFocus, etc
• Layer level/POI level
Animation Video

66. Useful links
• Creating 3D models (http://layar.pbworks.com/w/page/7783224/Creating-the-3D-objects)
• Download Layar3D model converter (http://public.layar.com/downloads/
Layar3DModelConverter.jnlp)
• Using Layar3D model converter (http://layar.pbworks.com/w/page/32586555/3D-Model-
Converter)
• Animation API (http://layar.pbworks.com/w/page/35910564/animation-for-API-5)
• Need Help ? Devsupport environment (http://devsupport.layar.com)

67. Discussion

68. Thank you
xuan@layar.com