Layar Tutorial - 3D Content Creation Tips & Tricks


Published on

This tutorial shows some lessons learned by us and our layer developers during the creation of 3D content.

We hope this presentation will help you optimize your 3D experiences in Layar. If you have any subjects you like to know more on, please contact

Published in: Technology, Art & Photos
  • its like TV with HD..very impressive.
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice presentation! One remark:

    As a Con on Google Sketchup (slide 8) you state that export is only available in pro mode. There is a nice workaround as described at:
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Layar Tutorial - 3D Content Creation Tips & Tricks

  1. 1. Tutorial 3D Content Creation Tips & Tricks v1.0
  2. 2. Introduction In September 2009 Layar presented Layar3D to the world as a demonstration of the upcoming possibilities in our AR platform In December 2009 we opened up Layar3D to all our developers This tutorial shows some lessons learned by us and our developers, and will help you optimize your 3D experiences in Layar
  3. 3. Tutorial outline 3D Modeling Introduction • Terminology, Available tools 3D Tips & Tricks • Limitations, Transparency, Texturing, Optimization Getting your models into Layar • Exporting, 3D Model Converter, Placement
  4. 4. 3D Modeling – Terminology Coordinate system • In Layar, we use the following mapping to the real world: • X → West to East • Y → South to North • Z → Ground to Sky Vertex: point in 3D space • Each model contains points in the 3D coordinate system, e.g. in a cube there are 8 vertices, one for each of the corners of the cube. Face: area connecting 3 (or more vertices), also known as poly(gon) • Faces are the visible elements of the 3D model, e.g. a cube contains 6 faces.
  5. 5. 3D Modeling – Normals Normal vectors indicate the direction of a face. Only front facing faces are rendered Normals have effect on the light shading If you don't have normals in your model, the vertex order is important • front face is counter clock wise
  6. 6. 3D Modeling – 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 • The level of shininess controls the size of the highlight. High shininess gives a small highlight, low shininess makes the highlight area larger
  7. 7. 3D Modeling – Texture Mapping Adding textures to add details to your model by using images Layar only supports diffuse color textures • Bump maps and normal maps are currently ignored UV mapping is the process of mapping the faces to the texture
  8. 8. 3D Modeling – Tools Blender ( • Pros: open source (free), professional quality tool, native .obj/.mtl export • Cons: steep learning curve Google Sketchup ( • Pros: easy to use, free version available, 3D warehouse with lots of 3D models • Cons: less control over normals and modeling details, .obj/.mtl export only available in pro version (€345) Autodesk 3ds Max ( • Pros: professional tool, lots of tutorials available, many 3D modelers have experience with it • Cons: expensive ($3495) Any 3D modeling tool supporting .obj/.mtl export
  9. 9. 3D Modeling – Resources This tutorial will now go into details on how to use the modeling tools. For tutorials on modeling, there are various resources on the Internet • • For Google Sketchup, a large collections of 3D models is available • The examples in this tutorial are made with Blender
  10. 10. Tips – Device Limitations Layar runs on mobile phones which are limited in their 3D performance. Keep your models simple to make them run smoothly and load quickly: Polygon count: max~ 5000 faces (after triangulation) Textures: Always remember that your models will be shown on small screens (usually 480x320) • Keep your textures small and use proper JPEG/PNG compression
  11. 11. Tips – Device Limitations (2) File size: Mobile phones have limited bandwith. Keep the model files small to avoid long waiting times. Layar supports having 2 levels of detail for each model and an icon representation • When your object is large, make sure you also create a simpler model if possible, or at least create an icon with a rendering of your object
  12. 12. Tips – Texture Mapping By applying good textures, you can add a lot of detail to your models, without increasing the complexity Supported texture formats: • PNG, JPEG Note: all image files are resized to the nearest power of 2, e.g. 128x128, 256x256, 512x128,etc. • For optimal quality, make your textures in the correct format to have full control over the quality •
  13. 13. Tips – Texture Mapping (2) For performance reasons, it is best to reduce the amount of images used and combine them into a single texture file This technique is called UV-mapping • Most modeling tools offer functionality to unwrap your model, which creates a flat canvas that can be painted in •
  14. 14. Tips – Texture Mapping (3) •
  15. 15. Tips – Transparency Layar does not support true transparency in the OpenGL AR view due to performance issues with alpha blending. Transparency is supported in textures • Alpha values < 0.1 are not rendered at all, causing the objects behind the face to show. • Semi transparent color values (0,.1 < alpha < 1.0) are blended with the camera image, not with the models behind them
  16. 16. Tips – Transparency (2) Partial transparent textures show the camera, but not the 3D models behind it
  17. 17. Tips – Texture Transparency By creating textures with transparent parts, you can create “see-through” parts in your model This allows you to add detail, without adding model complexity •
  18. 18. Tips – Texture Transparency
  19. 19. Blender – Exporting Export to Wavefront (.obj) Suggested options: • Rotate X90 as the .obj format has a rotated coordinate system • (Optional) Normals if you want your normals included • Material Groups to optimize the use of multiple materials in the model • Copy Images to make sure that all texture files are in the same directory as the .obj/.mtl •
  20. 20. Model Converter Layar uses 3D models in the Layar3D (.l3d) file format • This format is based on Wavefront (.obj), but contains an optimized representation that is easier for the mobile phone to handle. The Layar3D Model Converter can be used to convert Wavefront (.obj) files. Latest version available at: • Requires Java 6
  21. 21. Model Converter – Importing Your model usually consist of multiple files • .obj – contains the vertex and face data of your model • .mtl – contains the materials en references to texture files • .png/.jpg – texture images If any of the referenced files are missing, the Model Converter will show an error message. •
  22. 22. Model Converter – Overview
  23. 23. Model Converter – Materials
  24. 24. Model Converter – Preview
  25. 25. Model Converter – Editing Some basic editing functionality is available • Drop normals - causes the client to calculate smooth vertex normals by using the average of the normals of all faces that the vertex is part of • Calculate face normals - causes the vertices to have the normals of the faces they are part of. This results in hard edges • Flip faces - changes the vertex order of each face, which turns the model 'inside out' • Optimize materials - reorders the faces to be sorted by material. This improves rendering speeds. • Rotate - rotate the model around the X axis by 90 or -90 degrees • Scale - resize the model by the specified factor •
  26. 26. Model Converter – Saving After you are happy with your model, you can save it to the .l3d format The .l3d file embeds all textures and materials and can be added to your layer •
  27. 27. Placement – Layar API { "dimension": 3, This (incomplete) example "relativeAlt": 0, "object": { shows all parameters that "baseURL": "", control the display of your 3D "full": "full.l3d", “reduced”:”reduced.l3d”, model. “icon”:”icon.png”, "size": 2 We removed the standard }, "transform": { Layar API parameters for "angle": 45, simplicity "rel": false, } "scale": 5, Refer to the API docs for the } full documentation
  28. 28. Placement – Level of detail "object": { You can specify two levels of "baseURL": "", detail (full and reduced) and "full": "full.l3d", an icon for your model. “reduced”:”reduced.l3d”, The size parameter is an “icon”:”icon.png”, indicator of the size in meters "size": 2 of the object used for deciding which level of detail to show },
  29. 29. Placement – Level of detail (2) If your 3D model is large, make a reduced version with lower polygon count and less detailed textures. Icon → Reduced → Full The icon is shown when the model would be shown in less pixels than the icon • The reduced model is shown when the model is less than 128 pixels on the screen • The full model is shown if the model is bigger than 128 pixels, or if there is no reduced model defined. The icon can be a rendered image of the 3D model so it is clear to the user what will be loaded
  30. 30. Placement – Transformation "transform": { The angle parameter can be used to rotate the model around the z axis "angle": 45, (right hand rule) By setting 'rel' to true, we use a relative "rel": false, rotation, which means that the model is always facing the user "scale": 5, The scale factor can be used to specify } the display size of the model. This scale factor is applied to the dimensions embedded in the 3D model.
  31. 31. Placement – Scaling The size parameter is NOT used for scaling the models • It is used as a hint about the size of the object. The Layar browser calculates the rendering size of the 3D model and determines if it has to download it or not. The scale parameter can be used to adjust the actual size of the 3D model
  32. 32. Placement – Location The best effect is achieved when your object is placed accurately in the real world The latitude and longitude of your object is used as the origin of the coordinate system used in your model Adjust the rotation and scale to fit the model perfectly
  33. 33. Placement – Google Earth For initial placement of objects, we recommend use of Google Earth • Create a marker at the location where you want to place the object to get the latitude and longitude • Use the ruler tool to measure desired dimensions • Measure the rotation angle from the image We are working on additional tools
  34. 34. More information For questions and/or suggestions: