Your SlideShare is downloading. ×

Layar, the next mass medium

1,182

Published on

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

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,182
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Creating Augmented RealityExperience with LayarXuan WangDeveloper 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
  • 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. Information Service
  • 5. Earthquake information
  • 6. Experience - Berlin wall
  • 7. WTC
  • 8. Future - UAR
  • 9. Brands/Agents: Audi A1, Moscow
  • 10. Events
  • 11. Social Service -Tweets Around
  • 12. Foursquare
  • 13. Games - ScavengAR Hunt
  • 14. Uninvited Art Exhibition, MoMA
  • 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. OpenPlatform
  • 17. The Layar ecosystem Distribution Brands, Content Layers Developers Layar End userpublishers Search & Discovery
  • 18. Layar Platform ComponentsBrowser Player Publishing
  • 19. Layar Connect - Layer Management System • Publishing API for Third party layer management system • End-to-end and one-stop-shop
  • 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. 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. 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. 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. 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. 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. About Layar Launched in June 2009 Based in Amsterdam VC funded 55 people
  • 27. 3D modeling in Layar• 3D capability in Layar• Creating 3d models• Converting 3D model (Layar3D Model Converter)• Rendering 3d models
  • 28. Layar Augmented Office
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Texture UV Mapping
  • 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. Texture Transparency (2)
  • 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. 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. 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. 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. 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. 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. 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. Layar 3D Model Converter -Overview • Model details • Model dimensions (in meters) • File size (bytes)
  • 49. Layar 3D Model Converter -Materials • Review materials and textures • Edit colors and shininess values • Replace texture
  • 50. Layar 3D Model Converter - Animated Texture • Change texture type: • no texture • static • animated • Add animated frames
  • 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. 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. 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. Layar 3D Model Converter - Saving • Save as .l3d model • .l3d file embeds all textures and materials
  • 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. Rendering 3D models in Layar• OpenGL ES API• Simulated camera view in OpenGL • position • view • up• Object is rendered with perspective
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Discussion
  • 67. Thank youxuan@layar.com

×