SlideShare a Scribd company logo
1 of 34
Download to read offline
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

More Related Content

What's hot

Scct2013 topic 3_graphics
Scct2013 topic 3_graphicsScct2013 topic 3_graphics
Scct2013 topic 3_graphics
Anies Syahieda
 
Modeling and texturing in 3 ds max
Modeling and texturing in 3 ds maxModeling and texturing in 3 ds max
Modeling and texturing in 3 ds max
sribalaji0007
 
Angel cunado_The Terrain Of KUF2
Angel cunado_The Terrain Of KUF2Angel cunado_The Terrain Of KUF2
Angel cunado_The Terrain Of KUF2
drandom
 
3d cubes 3x3x3 powerpoint presentation slides ppt templates
3d cubes 3x3x3 powerpoint presentation slides ppt templates3d cubes 3x3x3 powerpoint presentation slides ppt templates
3d cubes 3x3x3 powerpoint presentation slides ppt templates
SlideTeam.net
 

What's hot (20)

Scct2013 topic 3_graphics
Scct2013 topic 3_graphicsScct2013 topic 3_graphics
Scct2013 topic 3_graphics
 
Datt 2501 week 10
Datt 2501 week 10Datt 2501 week 10
Datt 2501 week 10
 
Ch2
Ch2Ch2
Ch2
 
1536 graphics &amp; graphical programming
1536 graphics &amp; graphical  programming1536 graphics &amp; graphical  programming
1536 graphics &amp; graphical programming
 
Advanced Game Development with the Mobile 3D Graphics API
Advanced Game Development with the Mobile 3D Graphics APIAdvanced Game Development with the Mobile 3D Graphics API
Advanced Game Development with the Mobile 3D Graphics API
 
Modeling and texturing in 3 ds max
Modeling and texturing in 3 ds maxModeling and texturing in 3 ds max
Modeling and texturing in 3 ds max
 
Datt 2501 week 11
Datt 2501 week 11Datt 2501 week 11
Datt 2501 week 11
 
Datt 2500 week 10
Datt 2500 week 10Datt 2500 week 10
Datt 2500 week 10
 
Angel cunado_The Terrain Of KUF2
Angel cunado_The Terrain Of KUF2Angel cunado_The Terrain Of KUF2
Angel cunado_The Terrain Of KUF2
 
Motion graphics Terminology
Motion graphics TerminologyMotion graphics Terminology
Motion graphics Terminology
 
Clean architecture for shaders unite2019
Clean architecture for shaders unite2019Clean architecture for shaders unite2019
Clean architecture for shaders unite2019
 
Graphical Programming
Graphical ProgrammingGraphical Programming
Graphical Programming
 
Masking
MaskingMasking
Masking
 
Seminar5.1
Seminar5.1Seminar5.1
Seminar5.1
 
3d cubes 3x3x3 powerpoint presentation slides ppt templates
3d cubes 3x3x3 powerpoint presentation slides ppt templates3d cubes 3x3x3 powerpoint presentation slides ppt templates
3d cubes 3x3x3 powerpoint presentation slides ppt templates
 
Glossary dip
Glossary dipGlossary dip
Glossary dip
 
3 D texturing
 3 D texturing 3 D texturing
3 D texturing
 
Datt 2500 week 11
Datt 2500 week 11Datt 2500 week 11
Datt 2500 week 11
 
Deepak
DeepakDeepak
Deepak
 
Vray lighting
Vray lightingVray lighting
Vray lighting
 

Viewers also liked

Bab 03 berpikir kreatif
Bab 03 berpikir kreatifBab 03 berpikir kreatif
Bab 03 berpikir kreatif
Ahmad Rudi
 
Learning.3ds.max
Learning.3ds.maxLearning.3ds.max
Learning.3ds.max
orgil
 
Optimalisasi pemanfaatan lahan pekarangan
Optimalisasi pemanfaatan lahan pekaranganOptimalisasi pemanfaatan lahan pekarangan
Optimalisasi pemanfaatan lahan pekarangan
Alfina Nugraheni
 
Analisis pemanfaatan lahan kosong untuk ruang terbuka dan taman
Analisis pemanfaatan lahan kosong untuk ruang terbuka dan tamanAnalisis pemanfaatan lahan kosong untuk ruang terbuka dan taman
Analisis pemanfaatan lahan kosong untuk ruang terbuka dan taman
Dewi Nurani
 

Viewers also liked (20)

Layar code examples for developers
Layar code examples for developersLayar code examples for developers
Layar code examples for developers
 
Sicupak Lada Membangun Serambi Mekkah
Sicupak Lada Membangun Serambi MekkahSicupak Lada Membangun Serambi Mekkah
Sicupak Lada Membangun Serambi Mekkah
 
Session0 a mengenal coreldraw
Session0 a  mengenal coreldrawSession0 a  mengenal coreldraw
Session0 a mengenal coreldraw
 
Gaya belajar
Gaya belajarGaya belajar
Gaya belajar
 
Pengelolaan persediaan
Pengelolaan persediaanPengelolaan persediaan
Pengelolaan persediaan
 
Teknik mengenal gaya belajar anak
Teknik mengenal gaya belajar anakTeknik mengenal gaya belajar anak
Teknik mengenal gaya belajar anak
 
Manfaat Pekarangan Produktif
Manfaat Pekarangan ProduktifManfaat Pekarangan Produktif
Manfaat Pekarangan Produktif
 
Power point materri tik
Power point materri tikPower point materri tik
Power point materri tik
 
Gaya belajar
Gaya belajarGaya belajar
Gaya belajar
 
3 manajemen-kas-1
3 manajemen-kas-13 manajemen-kas-1
3 manajemen-kas-1
 
Bab 03 berpikir kreatif
Bab 03 berpikir kreatifBab 03 berpikir kreatif
Bab 03 berpikir kreatif
 
Learning.3ds.max
Learning.3ds.maxLearning.3ds.max
Learning.3ds.max
 
Optimalisasi pemanfaatan lahan pekarangan
Optimalisasi pemanfaatan lahan pekaranganOptimalisasi pemanfaatan lahan pekarangan
Optimalisasi pemanfaatan lahan pekarangan
 
Analisis pemanfaatan lahan kosong untuk ruang terbuka dan taman
Analisis pemanfaatan lahan kosong untuk ruang terbuka dan tamanAnalisis pemanfaatan lahan kosong untuk ruang terbuka dan taman
Analisis pemanfaatan lahan kosong untuk ruang terbuka dan taman
 
Model Pemberdayaan Masyarakat dalam Pengembangan Ekonomi Lokal
Model Pemberdayaan Masyarakat dalam Pengembangan Ekonomi LokalModel Pemberdayaan Masyarakat dalam Pengembangan Ekonomi Lokal
Model Pemberdayaan Masyarakat dalam Pengembangan Ekonomi Lokal
 
Presentasi ppdb
Presentasi ppdbPresentasi ppdb
Presentasi ppdb
 
Buku Seri Rancang Bangun Bisnis BUM Desa
Buku Seri Rancang Bangun Bisnis BUM DesaBuku Seri Rancang Bangun Bisnis BUM Desa
Buku Seri Rancang Bangun Bisnis BUM Desa
 
Strategi Pemberdayaan Masyarakat dalam Pembangunan Ekonomi Lokal
Strategi Pemberdayaan Masyarakat dalam Pembangunan Ekonomi LokalStrategi Pemberdayaan Masyarakat dalam Pembangunan Ekonomi Lokal
Strategi Pemberdayaan Masyarakat dalam Pembangunan Ekonomi Lokal
 
Makhorijul Huruf dan Sifatul Huruf
Makhorijul Huruf dan Sifatul HurufMakhorijul Huruf dan Sifatul Huruf
Makhorijul Huruf dan Sifatul Huruf
 
Tajwid
TajwidTajwid
Tajwid
 

Similar to Layar Tutorial - 3D Content Creation Tips & Tricks

Lecture 1.1 - Terms & Concepts
Lecture 1.1 - Terms & ConceptsLecture 1.1 - Terms & Concepts
Lecture 1.1 - Terms & Concepts
mgordon320
 
Utilizing Layers in AutoCAD Prototype Package
Utilizing Layers in AutoCAD Prototype PackageUtilizing Layers in AutoCAD Prototype Package
Utilizing Layers in AutoCAD Prototype Package
Brian Mitchell
 
Publishing geoprocessing-services-tutorial
Publishing geoprocessing-services-tutorialPublishing geoprocessing-services-tutorial
Publishing geoprocessing-services-tutorial
Sebastian Correa Gimenez
 
Android open gl2_droidcon_2014
Android open gl2_droidcon_2014Android open gl2_droidcon_2014
Android open gl2_droidcon_2014
Droidcon Berlin
 

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

CSS 3
CSS 3CSS 3
CSS 3
 
Lecture 1.1 - Terms & Concepts
Lecture 1.1 - Terms & ConceptsLecture 1.1 - Terms & Concepts
Lecture 1.1 - Terms & Concepts
 
SDN Mentor Hands On - Exercise 2
SDN Mentor Hands On - Exercise 2SDN Mentor Hands On - Exercise 2
SDN Mentor Hands On - Exercise 2
 
Graphics on the Go
Graphics on the GoGraphics on the Go
Graphics on the Go
 
GJU MM Unit 3.pdf
GJU MM Unit 3.pdfGJU MM Unit 3.pdf
GJU MM Unit 3.pdf
 
Chapter 3 : IMAGE
Chapter 3 : IMAGEChapter 3 : IMAGE
Chapter 3 : IMAGE
 
Chapter 3
Chapter 3Chapter 3
Chapter 3
 
CSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - ImrokraftCSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - Imrokraft
 
OpenGL_Programming_Guide.pdf
OpenGL_Programming_Guide.pdfOpenGL_Programming_Guide.pdf
OpenGL_Programming_Guide.pdf
 
Utilizing Layers in AutoCAD Prototype Package
Utilizing Layers in AutoCAD Prototype PackageUtilizing Layers in AutoCAD Prototype Package
Utilizing Layers in AutoCAD Prototype Package
 
Project report
Project reportProject report
Project report
 
the Modeling is a way of thinking about the
the Modeling is a way of thinking about thethe Modeling is a way of thinking about the
the Modeling is a way of thinking about the
 
Publishing geoprocessing-services-tutorial
Publishing geoprocessing-services-tutorialPublishing geoprocessing-services-tutorial
Publishing geoprocessing-services-tutorial
 
autocad.pptx
autocad.pptxautocad.pptx
autocad.pptx
 
Android open gl2_droidcon_2014
Android open gl2_droidcon_2014Android open gl2_droidcon_2014
Android open gl2_droidcon_2014
 
Cutting Edge Computer Vision for Everyone
Cutting Edge Computer Vision for EveryoneCutting Edge Computer Vision for Everyone
Cutting Edge Computer Vision for Everyone
 
Ghosted Illustration from 3D CAD
Ghosted Illustration from 3D CADGhosted Illustration from 3D CAD
Ghosted Illustration from 3D CAD
 
EFL: Scaling From the Embedded World to the Desktop
EFL: Scaling From the Embedded World to the DesktopEFL: Scaling From the Embedded World to the Desktop
EFL: Scaling From the Embedded World to the Desktop
 
Advanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpoAdvanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpo
 
(2) gui drawing
(2) gui drawing(2) gui drawing
(2) gui drawing
 

Recently uploaded

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 

Recently uploaded (20)

Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهله
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 

Layar Tutorial - 3D Content Creation Tips & Tricks

  • 1. Tutorial 3D Content Creation Tips & Tricks v1.0 developers@layar.com
  • 2. 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
  • 3. 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
  • 4. 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.
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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 •
  • 13. 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 •
  • 14. Tips – Texture Mapping (3) •
  • 15. 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
  • 16. Tips – Transparency (2) Partial transparent textures show the camera, but not the 3D models behind it
  • 17. 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 •
  • 18. Tips – Texture Transparency
  • 19. 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 •
  • 20. 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
  • 21. 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. •
  • 23. Model Converter – Materials
  • 25. 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 •
  • 26. 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 •
  • 27. 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
  • 28. 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 },
  • 29. 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
  • 30. 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.
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. More information For questions and/or suggestions: developers@layar.com