Layar - 3D Content Creation Tips and Tricks

3D Content Creation Tips & Tricks v3.0 Layar Developer support, Nov 2011Thursday, November 24, 2011

Content • 3D capability in Layar • Creating 3d models • Converting 3D model (Layar3D Model Converter) • Rendering 3d modelsThursday, November 24, 2011

3D Example - Layar Augmented OfﬁceThursday, November 24, 2011

What’s possible now ? • Static 3D models • Multiple materials (coloring, shininess, transparency, blending) • Static/Animated texture • Texture transparency • Build 3D model on the ﬂy • Animation API (apply animation programmatically)Thursday, November 24, 2011

General Flow save as input output wavefront ﬁle format .L3D ﬁle format (.obj/.mtl) 3D modeling Software, Layar3D Model Blender, Google Converter Sketchup, 3ds Max, etcThursday, November 24, 2011

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 exportThursday, November 24, 2011

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

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

Creating 3D models - Terminology (3) • Materials: • Diffuse color: The main color of the material that is used when light is reﬂected 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

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

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

Limitations - Mobile devices • Limited bandwidth (phone operator) - takes too long to load large ﬁles. • Limited Memory/ processing power (low-end devices) • The screen is small (usually 800X480), subtle details can not be seen. • Limited GPU (Graphics processor) powerThursday, November 24, 2011

Limitations - Mobile devices • Limited bandwidth (phone operator) - takes too long to load large ﬁles. • 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 efﬁciency !Thursday, November 24, 2011

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

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

Texture UV MappingThursday, November 24, 2011

Material Transparency • Opacity value embedded in .mtl ﬁle will be preﬁlled 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

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 imagesThursday, November 24, 2011

Animated Texture • Add frames: • Using animated GIF texture, or, • Add frames in Layar3D model converter • Use good compression in image ﬁles (PNG, reduce number of colors) • Use small images (recommended smaller than 256x256) • Recommend to limit the number of frames to 10Thursday, November 24, 2011

Animated Texture • Add frames: Keep the balance between • Using animated GIF texture, or, texture size and ﬁle size! • Add frames in Layar3D model converter • Use good compression in image ﬁles (PNG, reduce number of colors) • Use small images (recommended smaller than 256x256) • Recommend to limit the number of frames to 10Thursday, November 24, 2011

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 ﬂoating vertex points • no overlapping faces/polygons • remove invisible faces/polygons • Check if the normals are facing out.Thursday, November 24, 2011

Guidelines & Best Practices - Textures • Keep the texture images as small as possible • Use good compression in image ﬁles • Reduce the amount of images used and combine them into a single texture ﬁle (UV-mapping). • Create “see-through” parts using material or texture transparency. • Optimize material group and organize faces based on material.Thursday, November 24, 2011

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

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 availableThursday, November 24, 2011

Layar 3D Model Converter - Importing • Imported ﬁles • .obj - contains the vertex and face data • .mtl - contains the materials and references to texture ﬁles • .png/.jpg/.gif - texture images • Open existing .l3d modelThursday, November 24, 2011

Layar 3D Model Converter -Overview • Model details • Model dimensions (in meters) • File size (bytes) • Minimum Layar version (API version)Thursday, November 24, 2011

Layar 3D Model Converter -Materials • Support multiple materials • Each material speciﬁes: • Diffuse/Ambient/Specular color • Shininess • Opacity • Blending • Shader • Replace textureThursday, November 24, 2011

Layar 3D Model Converter - Animated Texture • Change texture type: • no texture • static • animated • Add animated framesThursday, November 24, 2011

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

Layar 3D Model Converter - Edit model • Basic functions for quick ﬁx • Will take effect after saving the model to .l3d format • Still recommend to correct these while preparing the model in the modeling softwareThursday, November 24, 2011

Layar 3D Model Converter - Placement • Place the 3D model directly on the map ( bird view ) • Help ﬁnd the accurate position of the model • Save placement details in JSON format for inclusion in 3rd party CMSThursday, November 24, 2011

Layar 3D Model Converter - Saving • Save as .l3d model • .l3d ﬁle embeds all textures and materials • The same model can be saved to be used on different Layar version.Thursday, November 24, 2011

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

Rendering 3D models in Layar • OpenGL ES API • Simulated camera view in OpenGL • position • view • up • Object is rendered with perspectiveThursday, November 24, 2011

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

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

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

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

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

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

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

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

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

Animation API • A collection of pre-deﬁned animations on POIs. • Simple appearance animation (drop, grow, spin) Animation Video • Full customizable animation: onClick, onUpdate, onFocus, etc • Layer level/POI levelThursday, November 24, 2011

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

http://layar.pbworks.com	4671
http://www.layar.com	822
http://layar.com	501
url_unknown	56
http://development.blog.shinobi.jp	47
http://brodel.med.utoronto.ca	41
http://translate.googleusercontent.com	39
http://mijnlayer.nl	14
http://twitter.com	2
http://www.slideshare.net	2
http://webcache.googleusercontent.com	1
http://www.bmc.med.utoronto.ca	1
http://bmc.med.utoronto.ca	1

Layar - 3D Content Creation Tips and Tricks

by Layar on Jun 08, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

13 Embeds 6,198

Statistics

Layar - 3D Content Creation Tips and Tricks — Presentation Transcript