Tutorial
3D Content Creation Tips & Tricks v1.0
developers@layar.com

Introduction
In 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 outline
3D Modeling Introduction
• Terminology, Available tools
3D Tips & Tricks
• Limitations, Transparency, Texturing, Optimization
Getting your models into Layar
• Exporting, 3D Model Converter, Placement

3D Modeling – Terminology
Coordinate 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 – Normals
Normal 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 – 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
• 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 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 is the process of mapping the faces to the
texture

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 (€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 – Resources
This 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 Limitations
Layar 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 Mapping
By 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 – Transparency
Layar 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 Transparency
By 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 – Exporting
Export 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 Converter
Layar 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 – Importing
Your 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 – Editing
Some 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 – Saving
After 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, This (incomplete) example
"relativeAlt": 0,
"object": {
shows all parameters that
"baseURL": "http://layar.example.com/", control the display of your 3D
"full": "full.l3d",
“reduced”:”reduced.l3d”,
model.
“icon”:”icon.png”,
"size": 2 We removed the standard
},
"transform": {
Layar API parameters for
"angle": 45, simplicity
"rel": false,
}
"scale": 5,
Refer to the API docs for the
} full documentation

Placement – Level of detail
"object": { You can specify two levels of
"baseURL": "http://example.com/", detail (full and reduced) and
"full": "full.l3d", an icon for your model.
“reduced”:”reduced.l3d”, The size parameter is an
“icon”:”icon.png”, indicator of the size in meters
"size": 2 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": { The angle parameter can be used to
rotate the model around the z axis
"angle": 45, (right hand rule)
By setting 'rel' to true, we use a relative
"rel": false, rotation, which means that the model is
always facing the user
"scale": 5,
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 – Scaling
The 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 – Location
The 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 Earth
For 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 information
For questions and/or suggestions: developers@layar.com