Layar, the next mass medium

1,386 views
1,305 views

Published on

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,386
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
33
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Layar, the next mass medium

  1. 1. Creating Augmented RealityExperience with LayarXuan WangDeveloper Support, Layar
  2. 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
  3. 3. AccelerometerGPS How is my phoneWhere am I? oriented in the world?Compass Gyroscope (optional)In which direction To provide aam I looking? smoother experienceCamera Internet connectivityWhat do I see To connect to thein the real world? digital world
  4. 4. Information Service
  5. 5. Earthquake information
  6. 6. Experience - Berlin wall
  7. 7. WTC
  8. 8. Future - UAR
  9. 9. Brands/Agents: Audi A1, Moscow
  10. 10. Events
  11. 11. Social Service -Tweets Around
  12. 12. Foursquare
  13. 13. Games - ScavengAR Hunt
  14. 14. Uninvited Art Exhibition, MoMA
  15. 15. 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
  16. 16. OpenPlatform
  17. 17. The Layar ecosystem Distribution Brands, Content Layers Developers Layar End userpublishers Search & Discovery
  18. 18. Layar Platform ComponentsBrowser Player Publishing
  19. 19. Layar Connect - Layer Management System • Publishing API for Third party layer management system • End-to-end and one-stop-shop
  20. 20. Layar Platform Architecture s Layar it ion efi n publishingGPS 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
  21. 21. 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 )
  22. 22. 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)
  23. 23. 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
  24. 24. 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.
  25. 25. Developer Support• The following support resources provide a wealth of information for developers: • Layar developer wiki • Layar developer support environment • Discussion forums • Support tickets
  26. 26. About Layar Launched in June 2009 Based in Amsterdam VC funded 55 people
  27. 27. 3D modeling in Layar• 3D capability in Layar• Creating 3d models• Converting 3D model (Layar3D Model Converter)• Rendering 3d models
  28. 28. Layar Augmented Office
  29. 29. 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)
  30. 30. General Flow save as input output wavefront file format .L3D file format (.obj/.mtl)3D modeling Software, Layar3D Model Blender, Google ConverterSketchup, 3ds Max, etc
  31. 31. 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.
  32. 32. 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)
  33. 33. 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.
  34. 34. 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
  35. 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 Keep the balance between complexity and efficiency !
  36. 36. 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)
  37. 37. 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.
  38. 38. Texture UV Mapping
  39. 39. 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.
  40. 40. Texture Transparency (2)
  41. 41. 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
  42. 42. 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
  43. 43. 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.
  44. 44. 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.
  45. 45. 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.
  46. 46. 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
  47. 47. 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
  48. 48. Layar 3D Model Converter -Overview • Model details • Model dimensions (in meters) • File size (bytes)
  49. 49. Layar 3D Model Converter -Materials • Review materials and textures • Edit colors and shininess values • Replace texture
  50. 50. Layar 3D Model Converter - Animated Texture • Change texture type: • no texture • static • animated • Add animated frames
  51. 51. 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)
  52. 52. 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
  53. 53. 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
  54. 54. Layar 3D Model Converter - Saving • Save as .l3d model • .l3d file embeds all textures and materials
  55. 55. 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)
  56. 56. Rendering 3D models in Layar• OpenGL ES API• Simulated camera view in OpenGL • position • view • up• Object is rendered with perspective
  57. 57. 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 ?
  58. 58. 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}
  59. 59. 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}
  60. 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”: { 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}
  61. 61. 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}
  62. 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”: { 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}
  63. 63. 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}
  64. 64. 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
  65. 65. 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)
  66. 66. Discussion
  67. 67. Thank youxuan@layar.com

×