Embed Size (px)
DESCRIPTION
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 [email protected].
Citation preview
IntroductionIn 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
Tutorial outline3D Modeling Introduction
• Terminology, Available tools
3D Tips & Tricks
• Limitations, Transparency, Texturing, Optimization
Getting your models into Layar
• Exporting, 3D Model Converter, Placement
3D Modeling – TerminologyCoordinate 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.
3D Modeling – NormalsNormal 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
3D Modeling – MaterialsDiffuse 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
3D Modeling – Texture MappingAdding 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
3D Modeling – ToolsBlender (www.blender.org)
• Pros: open source (free), professional quality tool, native .obj/.mtl export
• Cons: steep learning curve
Google Sketchup (sketchup.google.com):
• 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 (www.autodesk.com):
• 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
3D Modeling – ResourcesThis tutorial will now go into details on how to use the modeling tools.
For tutorials on modeling, there are various resources on the Internet
• http://www.3d-tutorial.com
• http://www.tutorialized.com
For Google Sketchup, a large collections of 3D models is available
• http://sketchup.google.com/3dwarehouse
The examples in this tutorial are made with Blender
Tips – Device LimitationsLayar 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
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
Tips – Texture MappingBy 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
•
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
•
Tips – Texture Mapping (3)
•
Tips – TransparencyLayar 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
Tips – Transparency (2)
Partial transparent textures show the camera, but not the 3D models behind it
Tips – Texture TransparencyBy creating textures with transparent parts, you can create “see-through” parts in your model
This allows you to add detail, without adding model complexity
•
Tips – Texture Transparency
Blender – ExportingExport 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
•
Model ConverterLayar 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:
• http://layar.pbworks.com/Creating-the-3D-objects
Requires Java 6
Model Converter – ImportingYour 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.
•
Model Converter – Overview
Model Converter – Materials
Model Converter – Preview
Model Converter – EditingSome 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
•
Model Converter – SavingAfter 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
•
Placement – Layar API{
"dimension": 3,
"relativeAlt": 0,
"object": {
"baseURL": "http://layar.example.com/",
"full": "full.l3d",
“reduced”:”reduced.l3d”,
“icon”:”icon.png”,
"size": 2
,}
"transform": {
"angle": 45,
"rel": false,
"scale": 5,
}
}
This (incomplete) example shows all parameters that control the display of your 3D model.
We removed the standard Layar API parameters for simplicity
Refer to the API docs for the full documentation
Placement – Level of detail"object": {
"baseURL": "http://example.com/",
"full": "full.l3d",
“reduced”:”reduced.l3d”,
“icon”:”icon.png”,
"size": 2
,}
You can specify two levels of detail (full and reduced) and an icon for your model.
The size parameter is an indicator of the size in meters of the object used for deciding which level of detail to show
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
Placement – Transformation"transform": {
"angle": 45,
"rel": false,
"scale": 5,
}
The angle parameter can be used to rotate the model around the z axis (right hand rule)
By setting 'rel' to true, we use a relative rotation, which means that the model is always facing the user
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.
Placement – ScalingThe 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
Placement – LocationThe 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
Placement – Google EarthFor 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
More informationFor questions and/or suggestions: [email protected]
