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 Ofﬁce


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)


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, etc


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


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.



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



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



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


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 !


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)


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.


Texture UV Mapping


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)


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 ﬁles (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:
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 10


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.


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.


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.


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


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 model


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 speciﬁes:

• Diffuse/Ambient/Specular color

• Shininess

• Opacity

• Blending

• Shader

• Replace texture


Layar 3D Model Converter - Animated Texture

• Change texture type:

• no texture

• static

• animated

• Add animated frames


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 ﬁx

• 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 ﬁnd 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 ﬁle embeds all textures and
materials

• The same model can be saved to
be used on different Layar
version.


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)


Rendering 3D models in Layar

• OpenGL ES API

• Simulated camera view in OpenGL

• position

• view

• up

• Object is rendered with perspective


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


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 ?


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

"contentType": “model/vnd.layar.l3d”,
• The rendered size in Layar is determined by:

“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”

“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 }

}


{ "object": {

• The rendered size in Layar is determined by:

“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”

“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 }

}


{ "object": {


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

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

“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 }

}


{ "object": {


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

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

“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 }

}


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.


“size”: 50 } ,
• The “scale” factor will be applied to the real size of the model


“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 }

}


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 ?


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

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

}


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 level


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)


Layar - 3D Content Creation Tips and Tricks

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to Layar - 3D Content Creation Tips and Tricks

Similar to Layar - 3D Content Creation Tips and Tricks (20)

More from Layar

More from Layar (20)

Recently uploaded

Recently uploaded (20)

Layar - 3D Content Creation Tips and Tricks