Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Layar - 3D Content Creation Tips and Tricks
1. 3D Content Creation Tips &
Tricks v3.0
Layar Developer support, Nov 2011
Thursday, November 24, 2011
2. Content
• 3D capability in Layar
• Creating 3d models
• Converting 3D model (Layar3D Model Converter)
• Rendering 3d models
Thursday, November 24, 2011
3. 3D Example - Layar Augmented Office
Thursday, November 24, 2011
4. What’s possible now ?
• Static 3D models
• Multiple materials (coloring, shininess, transparency, blending)
• Static/Animated texture
• Texture transparency
• Build 3D model on the fly
• Animation API (apply animation programmatically)
Thursday, November 24, 2011
5. 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
Thursday, November 24, 2011
6. 3D Modeling - Tools
• Blender (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.
• Antodesk 3ds Max (www.autodesk.com)
• Professional too, lots of tutorials available; but expensive.
• Any other 3D modeling tool which supports .obj/.mtl export
Thursday, November 24, 2011
7. Creating 3D models - Terminology (1)
• Coordinate system:
Geographical POIs:
Vision POIs:
X → West to East
X → Left to Right
Y → South to North Y → Bottom to Top
Z → Ground to Sky Z → Up (away from image)
• Vertex: point in 3D space, e.g. in a cube there are 8 vertices, one for each corner of the cube.
• Face/polygons: area connecting 3 or more vertices. Faces are the visible elements of the 3d
model. e.g. a cube contains 6 faces.
Thursday, November 24, 2011
8. 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)
• NOTE: some 3D tools (e.g. Sketchup) export bad normals.
Thursday, November 24, 2011
9. 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.
Thursday, November 24, 2011
10. Creating 3D models - Terminology (3)
• Materials:
• Opacity: controls the transparency of the material.
• Blending: determines whether the color value of a material is blended with the colr of any other
objects that are rendered behind it.
• Shader: provided for people who want to have full control over the lighting effects.
Thursday, November 24, 2011
11. Creating 3D models - Terminology (4)
• 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 projects a texture map onto a 3D object. It permits polygons that make up a 3D
object to be painted with color of an image.
• By applying good textures, you can add a lot of detail to your models, without increasing the
complexity.
Thursday, November 24, 2011
12. 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
Thursday, November 24, 2011
13. 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 !
Thursday, November 24, 2011
14. 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)
Thursday, November 24, 2011
15. 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 multiple textures supported for one material, e.g. bump mapping.
Thursday, November 24, 2011
17. Material Transparency
• Opacity value embedded in .mtl
file will be prefilled if available.
• Value range is between 0 and 1.
By default, the value is 1 which
means no transparency.
• Helps to reduce 3D model size
using material transparency
( better than using texture
transparency)
Thursday, November 24, 2011
18. Blending options
• Shows 3D geometry behind
(semi-)transparent parts
• Blending can be disabled per
material
• Hides 3D geometry behind
• But shows the camera
• Can be used to “cut-out” parts
of images
Thursday, November 24, 2011
19. 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
Thursday, November 24, 2011
20. 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
Thursday, November 24, 2011
21. 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.
Thursday, November 24, 2011
22. 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 material or texture
transparency.
• Optimize material group and organize faces based on
material.
Thursday, November 24, 2011
23. 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 material or texture
transparency.
• Optimize material group and organize faces based on
material.
Thursday, November 24, 2011
24. Layar 3D Model Converter
• Convert Wavefront format to
Layar3D (.l3d) format, which is
based on Wavefront (.obj) but
optimized for mobile phone
devices.
• Multiplatform support
• windows/Linux/Mac
• written in Java, requires Java
v6.0+
• Command line version is available
Thursday, November 24, 2011
25. 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
Thursday, November 24, 2011
26. Layar 3D Model Converter -Overview
• Model details
• Model dimensions (in meters)
• File size (bytes)
• Minimum Layar version (API
version)
Thursday, November 24, 2011
27. Layar 3D Model Converter -Materials
• Support multiple materials
• Each material specifies:
• Diffuse/Ambient/Specular color
• Shininess
• Opacity
• Blending
• Shader
• Replace texture
Thursday, November 24, 2011
28. Layar 3D Model Converter - Animated Texture
• Change texture type:
• no texture
• static
• animated
• Add animated frames
Thursday, November 24, 2011
29. 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)
Thursday, November 24, 2011
30. 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
Thursday, November 24, 2011
31. 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 for inclusion in 3rd party
CMS
Thursday, November 24, 2011
32. Layar 3D Model Converter - Saving
• Save as .l3d model
• .l3d file embeds all textures and
materials
• The same model can be saved to
be used on different Layar
version.
Thursday, November 24, 2011
33. 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)
Thursday, November 24, 2011
34. Rendering 3D models in Layar
• OpenGL ES API
• Simulated camera view in OpenGL
• position
• view
• up
• Object is rendered with perspective
Thursday, November 24, 2011
35. Define 3d Parameters in JSON Response
{ "object": {
"contentType": “model/vnd.layar.l3d”, • 2 levels of detail for the 3d model : url, reducedURL
“url”: “http://example.com/full.l3d”,
“reducedURL”: “http://example.com/reduced.l3d”,
• “size” : determines which model to pick up to render. The
length of the edge of the smallest cube in which the object can
“size”: 50 } , fit.
“icon”: { “url”: “http://example.com/icon.png” } ,
“transform”: {
• “angle”: rotates the object around the any axis defined in
“axis” object (right hand rule)
“rotate”: {
“angle”: 45,
• “rel”: if true, the rotation is calculated relative to the position of
“rel”: false, the user.
“axis”: { “x”: 0, “y”: 0, “z”: 1 } } ,
“translate”: {“x”: 0, “y”: 0, “z”: 0 } } ,
• “translate”: translate the POI from its anchor point.
“scale”: 2 }
• “scale”: can be applied to alter the model size.
}
Thursday, November 24, 2011
36. Rendering Geo 3D POIs
• Geo-location layer
• 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 ?
Thursday, November 24, 2011
37. Which model to pick up ? (1)
{ "object": {
"contentType": “model/vnd.layar.l3d”,
• The rendered size in Layar is determined by:
“url”: “http://example.com/full.l3d”,
“reducedURL”: “http://example.com/reduced.l3d”, • Distance: between the 3d model and the user, e.g. 500m
•
“size”: 50 } ,
“size”: the size parameter in “object”
“icon”: { “url”: “http://example.com/icon.png” } ,
“transform”: {
• Scale factor: the “scale” parameter in “transform”.
“rotate”: {
“angle”: 45,
“rel”: false,
“axis”: { “x”: 0, “y”: 0, “z”: 1 } } ,
“translate”: {“x”: 0, “y”: 0, “z”: 0 } } ,
“scale”: 2 }
}
Thursday, November 24, 2011
38. Which model to pick up ? (1)
{ "object": {
"contentType": “model/vnd.layar.l3d”,
• The rendered size in Layar is determined by:
“url”: “http://example.com/full.l3d”,
“reducedURL”: “http://example.com/reduced.l3d”, • Distance: between the 3d model and the user, e.g. 500m
•
“size”: 50 } ,
“size”: the size parameter in “object”
“icon”: { “url”: “http://example.com/icon.png” } ,
“transform”: {
• Scale factor: the “scale” parameter in “transform”.
“rotate”: {
“angle”: 45,
“rel”: false,
In Layar, in the distance of 500m, there is a
“axis”: { “x”: 0, “y”: 0, “z”: 1 } } ,
3d object which is 100m (50m x 2) in width,
“translate”: {“x”: 0, “y”: 0, “z”: 0 } } ,
length and height.
“scale”: 2 }
}
Thursday, November 24, 2011
39. Which model to pick up ? (2)
{ "object": {
"contentType": “model/vnd.layar.l3d”,
“url”: “http://example.com/full.l3d”,
• rendered size > 100 px, “url” model is picked up.
“reducedURL”: “http://example.com/reduced.l3d”,
• 20 px < rendered size <100 px, “reducedURL” model is picked
“size”: 50 } ,
up.
“icon”: { “url”: “http://example.com/icon.png” } ,
“transform”: {
• rendered size < 20 px, “icon.url” image is used and scaled down
to 10 px threshold.
“rotate”: {
“angle”: 45,
“rel”: false,
“axis”: { “x”: 0, “y”: 0, “z”: 1 } } ,
“translate”: {“x”: 0, “y”: 0, “z”: 0 } } ,
“scale”: 2 }
}
Thursday, November 24, 2011
40. Which model to pick up ? (2)
{ "object": {
"contentType": “model/vnd.layar.l3d”,
“url”: “http://example.com/full.l3d”,
• rendered size > 100 px, “url” model is picked up.
“reducedURL”: “http://example.com/reduced.l3d”,
• 20 px < rendered size <100 px, “reducedURL” model is picked
“size”: 50 } ,
up.
“icon”: { “url”: “http://example.com/icon.png” } ,
“transform”: {
• rendered size < 20 px, “icon.url” image is used and scaled down
to 10 px threshold.
“rotate”: {
“angle”: 45,
“rel”: false,
Based on the rendered size, layar client will
“axis”: { “x”: 0, “y”: 0, “z”: 1 } } ,
determine which model should be downloaded
“translate”: {“x”: 0, “y”: 0, “z”: 0 } } ,
and rendered.
“scale”: 2 }
}
Thursday, November 24, 2011
41. The Actual Rendering
{ "object": {
"contentType": “model/vnd.layar.l3d”, • The real size embedded in the 3d model will be used, instead of
the “size” parameter.
“url”: “http://example.com/full.l3d”,
“reducedURL”: “http://example.com/reduced.l3d”,
“size”: 50 } ,
• The “scale” factor will be applied to the real size of the model
“icon”: { “url”: “http://example.com/icon.png” } ,
“transform”: {
“rotate”: {
“angle”: 45,
“rel”: false, In Layar, in the distance of 500m, there is a 3d
“axis”: { “x”: 0, “y”: 0, “z”: 1 } } , object which is 100m (50m x 2) in width, 80m in
“translate”: {“x”: 0, “y”: 0, “z”: 0 } } , length and 60m height.
“scale”: 2 }
}
Thursday, November 24, 2011
42. Rendering Vision 3D POIs
• Vision layer
• Given: a 3d cube augment and it is 50m in width, 40m in length and 30m in height.
• Question: How is it rendered in Layar ?
Thursday, November 24, 2011
43. Which model to pick up ?
{ "object": {
"contentType": “model/vnd.layar.l3d”, • Layar client will always try to download both objects defined in
“object.url” and “object.reducedURL”.
“url”: “http://example.com/full.l3d”,
“reducedURL”: “http://example.com/reduced.l3d”,
• “object.reducedURL” will be downloaded and rendered first
“size”: 50 } ,
“icon”: { “url”: “http://example.com/icon.png” } , • “object.url” will be downloaded and replace “object.reducedURL”
“transform”: {
“rotate”: {
• If neither of the two objects is downloaded, an error message will be
returned.
“angle”: 45,
“rel”: false,
• “icon” object will be ignored while rendering Vision POIs.
“axis”: { “x”: 0, “y”: 0, “z”: 1 } } ,
“translate”: {“x”: 0, “y”: 0, “z”: 0 } } , Better provide less detailed version in “object.reducedURL”, if a
“scale”: 2 }
complex and heavy model is defined in “object.url”.
}
Thursday, November 24, 2011
44. Animation API
• A collection of pre-defined animations on POIs.
• Simple appearance animation (drop, grow, spin)
Animation Video
• Full customizable animation: onClick, onUpdate, onFocus, etc
• Layer level/POI level
Thursday, November 24, 2011
45. 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%20API)
• Need Help ? Devsupport environment (http://devsupport.layar.com)
Thursday, November 24, 2011