ENTORNOS GRÁFICOS EN INTERNET

Máster en Sistemas y Servicios en la Sociedad de la Información

PARTE II: GRÁFICOS 3D

(continuación)
Dpto. Informática. Universidad de Valencia
07/06/2010 Silvia Rueda Pascual (Silvia.Rueda@uv.es)
 Organización de contenidos
… Introducción a COLLADA … Introducción a Google Earth
† Modelo de Uso de COLLADA … Introducción a KML
† COLLADA Schema † Crear un documento KML
† Componentes de COLLADA † Editores KML
† COLLADA y G Google
l Earth
E th
† COLLADA y KML
† COLLADA y los usuarios
† KML desde una página web
† Trabajando con COLLADA
Introducción a
… COLLADA = COLLAborativeDesign Activity
… Se adoptó como estándar en Enero de 2006
… : COLLADA define un esquema XML para
facilitar el intercambio de recursos 3D entre diferentes
aplicaciones,
ap cac o es, pe permitiendo
e do la
a co
combinación
b ac ó de d diferentes
e e es
herramientas DDC y de procesado 3D durante el proceso de
desarrollo
… Algunos de los objetivos que persigue son:
† Convertirse en un formato estándar para diseño e intercambio de
modelos 3D
† Permitir la importación y exportación desde cualquier herramienta DDC
† Soportar características avanzadas como shaders, comportamiento
físico tiempo real, diferentes versiones o representaciones de un
mismo contenido, etc
† Multiplataforma
Introducción a
… Características soportadas:
† Mesh Geometry † Physics (rigid bodies,
† Transform hierarchy (rotation, constraints, rag dolls, collision
translation, shear, scale, matrix) volumes)
† Materials † Instancing
† Textures † T h i
Techniques
† Shader programs (Cg, GLSL, † Multi-representations
GLES) † Assets
† Shader effects (FX) † User data
† Lights
† Cameras
† Skinning / bones
† Animation
Ejemplos
… COLLADA en PLAYSTATION 3

© Sony Computer Entertainment. Lots Of Ducks demonstration.

Ejemplos
… Unreal Engine 3 importa COLLADA

Epic Games (www.unrealtechnology.com)

Ejemplos
… Collada en la Wii: ZbluCops

Biodroid (http://www.biodroid-entertainment.com)
Novedades Collada 1.5
… B-rep (boundary representation): Soporte para CAD
Novedades Collada 1.5
… Kinematics
Novedades Collada 1.5
… Soporte para GIS
Ejemplo de Documento
<?xml version="1.0" encoding="utf-8"?>
<COLLADA xmlns="http://www.collada.org/2005/11/COLLADASchema" version="1.4.0">
<asset>
<contributor>
<authoring_tool>SketchUp 5.0 Collada exporter v1.0</authoring_tool>
</contributor>
<unit name="inches" meter="0.0254"/>
<up_axis>Z_UP</up_axis>
<Location>
<longitude>-0.114086084916</longitude>
<latitude>51.515803220526</latitude>
<altitude>20.039941014546</altitude>
</Location>
<Orientation>
[extension of COLLADA <up_axis>]
<heading>0</heading>
<tilt>0</tilt>
<roll>0</roll>
</Orientation>
<Scale>
[extension of COLLADA <unit>]
<x>1</x>
<y>1</y>
<z>1</z>
</Scale>
</asset>
</COLLADA>
Modelo de Uso de Collada
COLLADA Schema
… COLLADA Element
† Raíz del documento
† Debe contener un asset y la
versión
† El resto de elementos son
opcionales
… COLLADA Libraries
† Puede contener elementos de
diferentes librerías
† Cada librería puede contener sólo
un tipo de nodos hijos
† Los elementos también pueden
contener un asset.
 COLLADA Schema
… COLLADA Assets
† Permiten definir diferentes
versiones de un mismo
elemento.
† La información
almacenada en esta
etiqueta permite decidir
que versión se debe
utilizar.
† Cada asset pertenece a
una única herramienta
† Un documento puede
incluir assets de diversas
herramientas
 COLLADA Schema
… Elemento Geometry
† Geometría basada en
flujo de datos

† Describe la forma, la
topología

† Los atributos varían

en función del tipo de
geometría empleada

† Se instancia dentro
del elemento <scene>
Collada Schema
… Elemento source

† Son fuentes de datos

† Se emplea para trabajar

con gran cantidad de
datos
 Collada Schema
… Elemento accessor

† Describe cómo
acceder a los datos

† Los datos pueden

estar almacenados
externamente
Componentes de
… COLLADA FX
† Permite introducir efectos de visualización avanzada a las escenas de
forma independiente a la plataforma en la que luego se visualice la
escena
… COLLADA Physics
† Para detección
P d ió d
de colisiones
li i u manejo
j dde otras
características/comportamientos físicas en tiempo real
… COLLADA DOM
† API C`++ que permite la carga del documento
… COLLADA Refinery
† Interfaz de usuario que permite definir el contenido del pipeline
empleando componentes modulares denominados “conditioners”
COLLADA Content Pipeline
 COLLADA Content Pipeline
… DOM
 COLLADA Content Pipeline
… Refinery
† Es un software lbre que
permite definir el
pipilen para COLLADA
† El GUI permite crear y
testear el pipeline
creado
† El pipeline se define
como una serie
interconectada de
“conditioners”
 COLLADA FX
… Permite definir
shaders y otros
efectos

… FXComposer 2.0 es
un ejemplo de
herramienta que
permite añadir efextos
a una escena en
COLLADA
COLLADA Physics
… Bullet engine
… AGEIA - PhysX Rocket tool
COLLADA y GoogleEarth
… Google Earth ha adoptado COLLADA para sus modelos 3D
† Es posible arrastrar un fichero .dae sobre GE
† Las animaciones, shaders, etc aún no se han
incorporado
† Las aplicaciones que soportan GE ahora
también soportan COLLADA (SketchUp,
RealViz, Autocad, Photomodeler, …)
† Todos los modelos 3D de GE están ahora en
COLLADA
http://earth.google.com/intl/es/gallery/index.html
http://sketchup.google.com/3dwarehouse/
COLLADA y los usuarios
… Una característica muy
importante de
COLLADA es que al
haberse adoptado
ampliamente los
usuarios
s arios podrán añadir
sus propias creaciones
a las aplicaciones
… Por ejemplo a los
MODs de los
videojuegos
comerciales
Ejemplo COLLADA MOD: Penumbra
Frictional Games (www.frictionalgames.com)
Referencias útiles
… COLLADA http://www.collada.org
… Khronos Group http://www.khronos.or/collada
… Wiki http://www.collada.org/mediawiki
… Test Model Bank http://www.collada.org/owl/
… DCC tools
t l que soportan
t Collada
C ll d
† 3dsMax – Free, Open Source Import/export
† Maya – Free, Open Source Import/export
† XSI – Included, Source included in SDK, import/export
† Blender – OSS DCC tool, Free, Open Source, Import/export
† Houdini – Import only for now
† SketchUp – Free DCC tool, included, export only for now
† Vivaty Studio – Free DCC tool, included, import only for now
† …
Referencias útiles
… Game Engines
† Unreal 3D (Epic games engine): usada para PS3, XBOX 360, Midway,
EA, Ubisoft …
† Ogre (Open source)
† C4 Engine
† I li ht Engine
Irrlicht E i (Open
(O source))
† PS3 SDK (incluye COLLADA DOM & RT)
† … la mayoría de juegos actuales permiten cargar modelos COLLADA
… Modelos Collada en la web
† 3D Warehouse
† 3dVia
† Daz
Trabajando con Collada
… Vivaty Studio: Importar documento .dae
Trabajando con Collada
… Vivaty Studio: Exportar documento .x3d
Trabajando con Collada
… Revisar antes de exportar, materiales y animaciones
 Google Earth
… Programa informático similar a un Sistema de Información
Geográfica (SIG), creado por la empresa Keyhole Inc., que
permite visualizar imágenes en 3D del planeta, combinando
imágenes de satélite, mapas y el motor de búsqueda de
Google.
… Página oficial
… Foro
 KML
… El formato KML (Keyhole Markup Language) fue creado por la empresa
Keyhole, la cual fue adquirida por Google en octubre de 2004 para crear
sobre su software Google Eart
… La especificación del formato KML ha ido evolucionando, controlado en
todo momento por Google y se ha comenzado a utilizar en otras
herramientas, como dentro de Google Maps y dentro de aplicaciones no
creadas por Google, como algunos dispositivos GPS
… Ahora, KML ha dado el salto y se ha convertido en estándar internacional
del OGC ('Open Geospatial Consortium')
… El formato KML pasará a denominarse OGC KML, y ya no será Google el
encargado de desarrollarlo, sino el propio OGC

http://www.opengeospatial.org/standards/kml/
 KML
… Formato de archivo que se utiliza para mostrar información
geográfica en navegadores terrestres como Google Earth,
Google Maps y Google Maps para móviles.
… Los archivos KML permiten añadir información a nuestro
Google Earth:
† Identificar ubicaciones y compartirlas
† Añadir superposiciones de imágenes
† Presentar datos detallados de formas diferentes
† Subirlos a una web
… La creación de un archivo .kml básico es muy sencilla gracias
a la interfaz del Google Earth. Pero podemos exprimir mucho
más este lenguaje y lograr cosas realmente interesantes.
 KML
… ¿Qué es KML?
† Lenguaje basado en los estándares del XML y que puede ser
interpretado por Google Earth.
† Del mismo modo que un navegador lee un archivo HTML y nos
muestra su contenido, Google Earth lee un archivo KML y muestra
en las imágenes de satélite los contenidos que contenga
contenga. Éstos
pueden ser marcas de posición, descripciones, líneas, polígonos…
… ¿En qué consiste?
† El lenguaje KML tiene una estructura de tags con elementos anidados y
atributos y está basado en los estándares XML.
† Un archivo .kml puede contener desde un objeto con sus atributos (por
ejemplo una chincheta marcando la situación de la Torre inclinada de
Pisa) hasta tantos objetos como queramos (por ejemplo la situación de
todos los estadios de los equipos de la 1ª División española).
 KML
… Codificación
† Texto plano .kml
† Comprimido .kmz
… Un ejemplo: la Torre inclinada de Pisa
<?xml version="1.0" encoding="UTF-8"?>
<kml
k l xmlns="http://earth.google.com/kml/2.1">
l "htt // th l /k l/2 1"
<Placemark>
<name>Torre inclinada de Pisa</name>
<LookAt>
<longitude>10.39642600139204</longitude>
<latitude>43.72312836023052</latitude>
<altitude>0</altitude>
<range>128.8673659574857</range>
<tilt>-4.664371010043016e-010</tilt>
<heading>-1.931622722388075e-015</heading>
</LookAt>
<styleUrl>#msn_ylw-pushpin</styleUrl>
<Point>
<coordinates>10.39642600139203,43.72312836023051,0</coordinates>
</Point>
</Placemark>
</kml>
 ¿Cómo crear un archivo KML?
… Abrir Google Earth y viajar a algún lugar
… Añadir una marca de posición:
† Pulsando en el menú “Añadir” y luego en “Marca de posición”
† Pulsando en la chincheta amarilla de la barra de herramientas
† Tecleando Ctrl+Shift+P
… Aparece una chincheta amarilla en el mapa (se puede arrastrar
con el ratón para situarla en la posición deseada) y se abrirá una
ventana que nos permitirá definir los atributos:
† Nombre: el nombre del lugar. (Ej: Torre inclinada de Pisa, “mi casa”)
† Latitud y Longitud: lugar en el que se encuentre la chincheta (si
movemos la chincheta van cambiando las coordenadas)
† Descripción: comentario sobre el lugar marcado que aparecerá al pulsar
sobre la chincheta. Puede ser desde texto sencillo hasta contener
imágenes, enlaces, tablas, diferentes tipos de fuente, de color, …
¿Cómo crear un archivo KML?
† Estilo, color:
„ Color de la etiqueta: color del texto que acompaña a la chincheta
„ Escala: para aumentar o disminuir el tamaño del nombre de la chincheta.
„ Opacidad: opacidad de la etiqueta (a menos opacidad, más “transparente” es el texto) .
„ Color del Icono: color de la chincheta.
„ Escala y opacidad: referente a la chincheta.
† Ver: (sobre la ubicación de nuestra chincheta)
„ Latitud y Longitud: cogerá los valores que hemos comentado antes.
„ Alcance: altura a la que situaremos la “vista”.
„ Encabezado: permite rotar la imagen. Está relacionado con la rotación que podemos
controlar con la brújula que tenemos en la esquina derecha superior del mapa.
„ Inclinación: inclinación de la vista.
† Altitud: altura queremos que aparezca la chincheta. Por defecto es 0
metros (pegada al suelo).
 ¿Cómo crear un archivo KML?
… Finalmente, pulsamos en “Aceptar” y ¡ya tenemos nuestra
chincheta donde queríamos y personalizada a nuestro gusto!
… La mayoría de atributos que hemos comentado no son
imprescindibles: podemos marcar una posición con una
chincheta, darle un nombre y dejar todo lo demás tal y como
está.
… Muy bien. Y ahora, ¿cómo guardo esta posición y la comparto
con mis amigos o con una web?
† Ahora es cuando toma gran importancia el menú que podemos
desplegar con el botón derecho, haciendo click en la chincheta.
† “Guardar como”: ésta es la opción que nos interesa ahora. Aquí
podremos guardar nuestra marca de posición como archivo .kml
(podremos ver su código con un editor de textos) o en .kmz (versión
comprimida del .kml).
Editores KML
… KML Editor http://www.northgates.ca/kmleditor
 Collada y KML
… Los modelos que se cargan en un documento kml son collada
<?xml version="1.0" encoding="UTF-8"?> <Orientation>
<kml xmlns="http://earth.google.com/kml/2.1"> <heading>115</heading>
<Folder> <tilt>-15</tilt>
<open>1</open> <roll>0</roll>
<name>seymourplane</name> </Orientation>
<description>Ejemplo seymourplane</description> <Scale>
<visibility>1</visibility> <x>200.0</x>
<y>200.0</y>
<LookAt>
< >200 0</ >
<z>200.0</z>
<longitude>-0.475759073153997</longitude>
<latitude>39.4901117818682</latitude> </Scale>
<Link>
<range>365.815475023847</range>
<tilt>52.4366489124468</tilt> <href>seymourplane_triangulate.dae</href>
<heading>52.8900360405898</heading> </Link>
<altitudeMode>relativeToGround</altitudeMode> <ResourceMap>
<Alias>
<altitude>4</altitude>
<targetHref>./planeDiffuse.tga</targetHref>
</LookAt>
<sourceHref>./planeDiffuse.tga</sourceHref>
<Placemark> </Alias>
<visibility>1</visibility> </ResourceMap>
<name>Model</name> </Model>
<Style id="default"></Style> </Placemark>
<Model id="plane"> </Folder>
<altitudeMode>relativeToGround</altitudeMode> </kml>
<Location>
<longitude>-0.475759073153997</longitude>
<latitude>39.4901117818682</latitude>
<altitude>5.000000000000001</altitude>
</Location>
KML desde una página web
… Para añadir un enlace a un documento kml y que se abra en
Google Earth

<a href="seymourplane.kml">
<img border="0" src="kml_feed_small.png"/>&nbsp;Abrir en Google Earth
</a>
Incrustación de Google Earth en tu
página web
… Para instalar el complemento de Google Earth:
† Inscríbete para conseguir una clave del API de Google Maps.
† Descarga y ejecuta el programa de instalación del complemento de
Google Earth.
… Documentación y ejemplos
htt // d
http://code.google.com/intl/en/apis/earth/documentation/introduction.html
l /i tl/ / i / th/d t ti /i t d ti ht l
Incrustación de Google Earth
en tu página web
http://www.uv.es/srueda/EGI/HolaGoogleEarth.html

http://code.google.com/apis/maps/signup.html
Enlaces de interés
† Página oficial de GE
† Tutorial de KML
† API de Google Earth
† Tutorial de KML en español
† Google Earth API Demo Gallery
† Ejemplos KML
† Foro de GE

† Galería 3D de Google

† Galería Picassa 3D

† Earth Contest

† Google SketchUp

†
Ejemplos de aplicación con el
API Google Earth
Ejemplos de aplicación con el
API Google Earth