layar - 3d content creation tips and tricks

3D Content Creation Tips & Tricks v3.0

Layar Developer support, Nov 2011

Thursday, November 24, 2011

Content

• 3D capability in Layar

• Creating 3d models

• Converting 3D model (Layar3D Model Converter)

• Rendering 3d models


3D Example - Layar Augmented Office


• 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)

What’s possible now ?


General Flow

3D modeling Software, Blender, Google

Sketchup, 3ds Max, etc

wavefront file format(.obj/.mtl)

Layar3D Model Converter

.L3D file format

save as input output


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


http://www.blender.org

http://www.blender.org

http://www.autodesk.com

http://www.autodesk.com

• 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.

Creating 3D models - Terminology (1) • Coordinate system:

Geographical POIs:

X → West to East

Y → South to North

Z → Ground to Sky

Vision POIs:

X → Left to Right

Y → Bottom to Top

Z → Up (away from image)


• 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.

Creating 3D models - Terminology (2)


• 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.



• 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.



• 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.



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


Limitations - Mobile devices

Keep the balance between complexity and efficiency !

• 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


• 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)

3D Model 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.

Texture Requirements


Texture UV Mapping


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)


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


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


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

Keep the balance between texture size and file size!


• 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.

Guidelines & Best Practices - Model


• 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.

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.

Guidelines & Best Practices - Textures

Make sure your model is ready before export to .obj file!


• 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

Layar 3D Model Converter


• 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

Layar 3D Model Converter - Importing


Layar 3D Model Converter -Overview

• Model details

• Model dimensions (in meters)

• File size (bytes)

• Minimum Layar version (API version)


Layar 3D Model Converter -Materials • Support multiple materials

• Each material specifies:

• Diffuse/Ambient/Specular color

• Shininess

• Opacity

• Blending

• Shader

• Replace texture


• Change texture type:

• no texture

• static

• animated

• Add animated frames

Layar 3D Model Converter - Animated Texture


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)


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


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


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.


• 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)

Creating 3d model on the fly


• OpenGL ES API

• Simulated camera view in OpenGL

• position

• view

• up

• Object is rendered with perspective

Rendering 3D models in Layar


Define 3d Parameters in JSON Response• 2 levels of detail for the 3d model : url, reducedURL

• “size” : determines which model to pick up to render. The length of the edge of the smallest cube in which the object can fit.

• “angle”: rotates the object around the any axis defined in “axis” object (right hand rule)

• “rel”: if true, the rotation is calculated relative to the position of the user.

• “translate”: translate the POI from its anchor point.

• “scale”: can be applied to alter the model size.

{ "object": {

"contentType": “model/vnd.layar.l3d”,

“url”: “http://example.com/full.l3d”,

“reducedURL”: “http://example.com/reduced.l3d”,

“size”: 50 } ,

“icon”: { “url”: “http://example.com/icon.png” } ,

“transform”: {

“rotate”: {

“angle”: 45,

“rel”: false,

“axis”: { “x”: 0, “y”: 0, “z”: 1 } } ,

“translate”: {“x”: 0, “y”: 0, “z”: 0 } } ,

“scale”: 2 }

}


• 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 ?

Rendering Geo 3D POIs


Which model to pick up ? (1)

• The rendered size in Layar is determined by:

• Distance: between the 3d model and the user, e.g. 500m

• “size”: the size parameter in “object”

• Scale factor: the “scale” parameter in “transform”.

{ "object": {




“size”: 50 } ,


“transform”: {

“rotate”: {

“angle”: 45,

“rel”: false,

“axis”: { “x”: 0, “y”: 0, “z”: 1 } } ,

“translate”: {“x”: 0, “y”: 0, “z”: 0 } } ,

“scale”: 2 }

}


Which model to pick up ? (1)

In Layar, in the distance of 500m, there is a 3d object which is 100m (50m x 2) in width, length and height.

• The rendered size in Layar is determined by:

• Distance: between the 3d model and the user, e.g. 500m

• “size”: the size parameter in “object”

• Scale factor: the “scale” parameter in “transform”.

{ "object": {




“size”: 50 } ,


“transform”: {

“rotate”: {

“angle”: 45,

“rel”: false,

“axis”: { “x”: 0, “y”: 0, “z”: 1 } } ,

“translate”: {“x”: 0, “y”: 0, “z”: 0 } } ,

“scale”: 2 }

}


• rendered size > 100 px, “url” model is picked up.

• 20 px < rendered size <100 px, “reducedURL” model is picked up.

• rendered size < 20 px, “icon.url” image is used and scaled down to 10 px threshold.

Which model to pick up ? (2){ "object": {




“size”: 50 } ,


“transform”: {

“rotate”: {

“angle”: 45,

“rel”: false,

“axis”: { “x”: 0, “y”: 0, “z”: 1 } } ,

“translate”: {“x”: 0, “y”: 0, “z”: 0 } } ,

“scale”: 2 }

}


Based on the rendered size, layar client will determine which model should be downloaded and rendered.

• rendered size > 100 px, “url” model is picked up.

• 20 px < rendered size <100 px, “reducedURL” model is picked up.

• rendered size < 20 px, “icon.url” image is used and scaled down to 10 px threshold.

Which model to pick up ? (2){ "object": {




“size”: 50 } ,


“transform”: {

“rotate”: {

“angle”: 45,

“rel”: false,

“axis”: { “x”: 0, “y”: 0, “z”: 1 } } ,

“translate”: {“x”: 0, “y”: 0, “z”: 0 } } ,

“scale”: 2 }

}


In Layar, in the distance of 500m, there is a 3d object which is 100m (50m x 2) in width, 80m in length and 60m height.

• The real size embedded in the 3d model will be used, instead of the “size” parameter.

• The “scale” factor will be applied to the real size of the model

The Actual Rendering{ "object": {




“size”: 50 } ,


“transform”: {

“rotate”: {

“angle”: 45,

“rel”: false,

“axis”: { “x”: 0, “y”: 0, “z”: 1 } } ,

“translate”: {“x”: 0, “y”: 0, “z”: 0 } } ,

“scale”: 2 }

}


• 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 ?

Rendering Vision 3D POIs


Which model to pick up ? • Layar client will always try to download both objects defined in “object.url” and “object.reducedURL”.

• “object.reducedURL” will be downloaded and rendered first

• “object.url” will be downloaded and replace “object.reducedURL”

• If neither of the two objects is downloaded, an error message will be returned.

• “icon” object will be ignored while rendering Vision POIs.

{ "object": {




“size”: 50 } ,


“transform”: {

“rotate”: {

“angle”: 45,

“rel”: false,

“axis”: { “x”: 0, “y”: 0, “z”: 1 } } ,

“translate”: {“x”: 0, “y”: 0, “z”: 0 } } ,

“scale”: 2 }

}

Better provide less detailed version in “object.reducedURL”, if a complex and heavy model is defined in “object.url”.


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


http://www.youtube.com/watch?v=NagyT6AIXyA

http://www.youtube.com/watch?v=NagyT6AIXyA

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)


http://public.layar.com/downloads/Layar3DModelConverter.jnlp




http://layar.pbworks.com/w/page/32586555/3D-Model-Converter




http://layar.pbworks.com/w/page/35910564/animation-for-API-5

http://layar.pbworks.com/w/page/35910564/animation-for-API-5

http://devsupport.layar.com

http://devsupport.layar.com

layar - 3d content creation tips and tricks

Technology