David

La versión completa en PDF puede ser encontrada aqui.

Resumen

Hoy en día existen posibilidades para el desarrollo de interfaces gráficas de usuario tridimensionales en los navegadores de internet, capaces de llegar al 99% de los internautas sin ninguna instalación adicional, a través de la máquina virtual Adobe Flash Player, que posee un formato multimedia nativo.
Papervision3D es un motor de renderizado 3D en tiempo real, hecho en ActionScript 3, de código abierto, que posee las funcionalidades básicas de la computación gráfica tridimensional, creando una ilusión 3D en el motor de renderizado que posee el Flash Player.
Es posible realizar una solución tecnológica 3D basada totamente en herramientas de código libre, utilizando Linux como plataforma para Flex SDK, que compila el código ActionScript, basado en las bibliotecas de Papervision3D.

Palabras claves: 3D, Interfaces, Adobe Flash Player, PaperVision3D

Introducción

La experiencia de usuario es un factor que últimamente ha cobrado gran importancia en la red. Existe una clara tendencia a que las aplicaciones de escritorio se trasladen al navegador: procesadores de texto, planillas electrónicas, software de tratamiento fotográfico, clientes de correo electrónico, y un sinnúmero de aplicaciones han sido construidas para ejecutarse en los navegadores de internet. La pregunta es, ¿por qué no han aparecido muchas interfaces tridimensionales para ciertas aplicaciones o páginas web complejas con una mínima cantidad de tiempo de carga? La respuesta es simple: la falta de una plataforma de software adecuada para el desarrollo de las aplicaciones tridimensionales online. Este punto sera analizado con profundidad en este artículo.

Para simples demostraciones e interfaces, Papervision3D abre un mundo largamente descuidado en la red, ahora es potencialmente posible crear interfaces tridimensionales impactantes, e interactivas, con un mínimo tiempo de descarga. Esto es algo que los desarrolladores de internet han querido por un largo tiempo. Aún tiene grandes limitaciones, pues la aceleración no es realizada por hardware, pero está en desarrollo una nueva versión de Papervision3D, basado en la nueva API del Flash Player 10, que incorpora la posibilidad de ejecutar lineas de código C y C++ y PixelBender; con ello se espera aumentar dramáticamente la calidad de las páginas web tridimensionales de internet. Por este camino, se abre toda una vía de interfaces, esto hace a Papervision3D muy importante en el desarrollo web.

Uno de los objetivos será mostrar los principales elementos necesarios para el renderizado 3D usando las clases de Papervision3D.

Análisis de la tecnología existente para el desarrollo de interfaces 3D en los navegadores

Cuando el conjunto de tecnologías y recursos para el desarrollo de interfaces tridimensionales y el fácil acceso de usuarios (Kit de Desarrollo de Software, motor de renderizado 3D en tiempo real vía internet, utilización del GPU por un motor de renderizado, alta penetración la tecnología en los navegadores de internet y ancho de banda de alta velocidad) haya madurado, será inminente un cambio de paradigma en la navegación por internet.

Los ingenieros de software de numerosas organizaciones y numerosas comunidades de desarrollo de código abierto están trabajando hoy en día para hacer posible la renderización de 3D en tiempo real en los navegadores de internet. Es posible demostrar que el entorno de desarrollo basado en la máquina virtual Adobe Flash Player es actualmente la infraestructura líder para ejecución de interfaces 3D en los navegadores de internet.

Las ventajas de Flash sobre otras alternativas:

En este análisis simplemente se resaltan aspectos técnicos y la ubicuidad, que van excluyendo alternativas para desarrollo 3D para navegadores, con respecto a la plataforma Flash. (Parte de este análisis lo he extraido de un post de Tinic Uro)

HTML vs Flash para 3D

HTML es un formato de documento, Flash tiene en su núcleo un formato multimedia. Entonces, a diferencia de HTML, que tiene exactamente 1 fotograma, el contenido de FLASH puede tener una infinita cantidad de fotogramas con respecto al tiempo. HTML es estático, FLASH es dinámico. HTML no posee Drag and Drop, Flash si.
AJAX vs Flash para 3D

En la mayoría de los casos, AJAX es más promocionado para el desarrollo de RIA, los ejemplos incluyen: Gmail, Google Maps, entre otros. Pero una prueba de de AJAX está llegando a sus límites, es que Google Earth no se ha podido llevar al navegador con AJAX, quedando demostrado que el desarrollo de software 3D va más allá de lo que AJAX puede ofrecer.

SVG vs FLASH para 3D

Flash y SVG fueron concebidos inicialmente para gráficos bidimensionales, pero el Core Team de Papervision3D ha desafiado los rendimientos del Flash Player y lo ha convertido en un motor de renderizado 3D. Esto también podría ser posible con SVG, pero las etiquetas aplicadas nada mas que a un fotograma de contenido real (no a páginas de demostración) son demasiadas. La productividad es demasiado baja. En el navegador Internet Explorer, es necesario instalar un plug-in para la visualización (la mayoría de las PCs que tienen instalados Internet Explorer no poseen este plugin actualmente).

Máquina virtual Java vs Flash para 3D
La Máquina Virtual Java posee diversas versiones, incompatibles entre sí. Flash no posee incompatibilidades entre una versión y otra.

Silverlight vs Flash para 3D
Silverlight posee más potencia que Flash para el desarrollo de entornos tridimensionales, debido a que tiene acceso a DirectX, pero aún posee un índice de penetración demasiado bajo. Es necesario hacer un download del plugin para poder utilizarlo. Flash Player está presente en el 98% de los navegadores.

Shockwave vs Flash para 3D

Shockwave es un plugin para navegadores especializado en la creación de contenido 3D en tiempo real. Técnicamente es la mejor opción para desarrollo 3D, pero posee un índice de penetración bajo (50%).

Unity3D vs Flash para 3D
Unity3D  también es un plugin para navegadores especializado en la creación de contenido 3D en tiempo real. Técnicamente es la mejor opción para desarrollo 3D, pero también posee un índice de penetración muy bajo (1%).

Por lo tanto, Adobe Flash Player podría ser actualmente la mejor opción para la creación de interfaces tridimensionales en los navegadores de internet.
El punto más importante para el buen posicionamiento del Flash Player en este análisis, es por estar presente en tan alto porcentaje en los navegadores de internet. Esto tiene consecuencias realmente importantes. El ejemplo más claro es Second Life, un mundo virtual que no ha tenido tanto éxito como se esperaba, y gran parte de este fracaso se debe al download del software (21.2MB) que debe realizarse obligatoriamente para poder acceder a dicho mundo virtual. Bajar un plugin para visualizar un sitio web suele ser una gran limitación para que un sitio alcance gran popularidad, los internautas generalmente no desean instalar nuevos plugins. Flash es el plugin más extendido en todo el mundo.

El Flash player está diseñado y optimizado para renderización en 2D. No en 3D.

Este es un punto crítico por el cual Flash no es técnicamente la mejor opción. La cantidad de fotogramas de contenido 3D renderizados por segundo suele ser media o baja, en casos reales.  La comunidad de desarrolladores del Flash Player está desarrollando varios proyectos para poder renderizar 3D en el Flash Player, existen proyectos privados y de código abierto, entre los que se encuentran:

Alternativa3D

Away 3D

Five3D

ND3D

Papervision3D

Sandy3D

Wire Engine 3D

Para este artículo, he decidido hablar sobre Papervision3D, por ser el motor de renderización 3D en tiempo real más popular, entre los citados arriba.

Nociones Básicas de diseño 3D con Papervision3D

En términos de visualizaciones en ordenador, más específicamente en 3D, la renderización es un proceso de cálculo complejo desarrollado por un ordenador destinado a generar una imagen 2D a partir de una escena 3D.
La técnica más utilizada hoy en día para la producción de gráficos 3D en tiempo real es la rasterización. La rasterización es básicamente un proceso de transformación de datos de vectores (datos) se convierten en un conjunto de píxeles (imágenes). Papervision3D utiliza esta técnica, debido a que es la más rápida.
En pocas palabras, el motor de renderizado de Papervision3D utiliza bastante lógica para producir una ilusión 3D sobre 2D.  Dicha lógica posee básicamente lo siguiente:
Proyección (project)

La proyección ortogonal se realiza a través de transformaciones matemáticas. Dicha técnica no es del todo satisfactoria, por ello, en realidad se utiliza la proyección en perspectiva. En Papervision3D una matriz 4×4 (Matrix3D) representa la translación, rotación y escala para todos los ejes. También existen otras tres matrices para representar escenas 3D: La matriz global, la matriz de cámaras, y la matriz de transformación de objetos.
Más explícitamente, cada vértice 3D que exista en cada objeto 3D tendrá que ser transformada por todas estas matrices para terminar como un punto 2D en el Flash Player.

Geometría
Básicamente, todo punto ubicado en el espacio es almacenado en forma de vértices de datos (Vertex3D). El conjunto de tres vértices puede formar una face (Triangle3D).  Matrices de vértices y faces se almacenan en instancias de GeometryObject3D. Cada clase DisplayObject3D contiene información del objeto (ubicación, transformación, orientación, ejes, etc) y una referencia a la instancia de GeometryObject3D. Los datos de DisplayObject3D son utilizados por el motor de renderizado BasicRenderEngine y los materiales de los objetos, que son utilizados para dibujar el objeto dentro de un objeto Viewport3D.

Mapeado de texturas

Es el proceso más utilizado, y el que consume mayor cantidad de ciclos del CPU.  El mapeo UV es utilizado en este proceso.

El mapeado, de un triangulo, en el caso más básico, se realiza de la siguiente forma:

Se crea una matriz de vertices, en cada posición de la matriz almacenamos una instancia de Vertex3D que será la coordenada x, y, z del véctice del triángulo. En este ejemplo llamémosle v0, v1, y v2 a los vértices del triángulo.

Una face (cara) está compuesto por tres vértices (v0, v1, v2). Se crea una instancia de Triangle3D, donde se introducen como parámetros al material a ser mapeado,  los vértices,  y las coordenadas UV de cada vértice. El array de 3 vértices introducidos en la instancia de Triangle3D debe poseer la misma secuencia de ubicación que el array de las 3 coordenadas UV. La coordenada UV de cada punto corresponde a la coordenada del versor bidimensional de la proyección del punto sobre el objeto Viewport3D.  La secuencia elegida puede ser arbitraria, pero debe recordarse que la orientación de la cara estará regida por la regla de la mano derecha.


v0 = new Vertex3D(x0,y0,z0); vertices.push(v0);

v1 = new Vertex3D(x0,y0,z0); vertices.push(v1);

v2 = new Vertex3D(x0,y0,z0); vertices.push(v2);

faces.push( new Triangle3D(triangleMesh, [v0,v1,v2], material, [UV0, UV1, UV2]).

Se obtiene los mismos resultados siguiendo las secuencias:  [v0,v1,v2] o también [v1,v2,v0] e incluso [v2,v0,v1]

Si la face se ubica en sentido contrario, la cara tendrá sentido contrario. Se mapeará la otra cara del triángulo siguiendo las secuencias contrarias: [v0,v2,v1], o también [v1,v0,v2], e incluso [v2,v1,v0]

El array “vertices” y el array “faces” se almacenan en una instancia de GeometryObject3D.

Los objetos geométricos complejos se crean a partir de la combinación de triángulos, que son el ente geométrico básico en el proceso de renderizado. Aqui posteé unos ejemplos de construcción de un triángulo, y de instancias de TriangleMesh3D más complejas.

Materiales
Los materiales son una colección de propiedades que determinan como será renderizada una superificie 3D. Podríamos llamar a los vértices esqueletos, y los materiales serían la piel del esqueleto. Los distintos tipos de materiales heredan la clase MaterialObject3D, esto implica que se encontraran las siguientes propiedades en cada material:

name (string): el nombre del material

interactive(Boolean): habilita la asignación de listeners, eventos de click por ejemplo.

oneSide o doubleSided(Boolean): Mapea el material en una, o en ambas caras, repectivamente.

smooth(Boolean): aplica un algoritmo de suavización al material.

Los tipos básicos de materiales son:

WireframeMaterial
Como dijimos anteriormente, un objeto 3D está compuesto por varios triángulos. Los lados de cáda triángulo, de todo el objeto, son visualizados con WireframeMaterial.

ColorMaterial

Los materiales de color proyectan un color sólido sobre los objetos 3D.

BitmapMaterial, y BitmapFileMaterial

Es posible usar una imagen jpg, gif o png, o cualquier bitmapData sobre el objeto

BitmapColorMaterial

Es parecido a ColorMaterial, la diferencia es que se puede acceder a los pixeles del material.

VideoStreamMaterial

Se puede hacer streaming de video como materiales de objetos 3D.

Iluminación y sombreado
La simulación de luz es uno de los aspectos más complicados en el proceso de rasterización 3D debido la alta cantidad de ciclos del CPU que ocupa. Por ello, la iluminación el Papervision3D es muy básica. Se puede crear una sola luz instanciando la clase PointLight3D. Las luces afectan a los siguientes materiales: CellMaterial, EnvMapMaterial, FlatShadeMaterial, GouraundMaterial, y PhongMaterial.
La sintaxis de uso es la siguiente:
PointLight3D

luz = new PointLight3D(true);
luz.x = 50;
luz.y = 50;
luz.z = -600;
scene.addChild(luz)

CellMaterial

var cellMaterial:CellMaterial = new CellMaterial(luz, 0x111111, 0xFFFFFF, 5);
var plane:Plane = new Plane(cellMaterial, 400,400,10,10)
scene.addChild(do3d)

EnvMapMaterial

var material:EnvMapMaterial = new EnvMapMaterial(luz, bitmapData, bitmapData, 0x555555);
var plane:Plane = new Plane( material, 500,500 );
scene.addChild( plane );


FlatShadeMaterial
var flatShadedMaterial:FlatShadeMaterial = new FlatShadeMaterial(luz, 0x0000FF, 0x00ff00);
var plane:Plane = new Plane(flatShadedMaterial, 400,400, 10,10);
scene.addChild(plane);

GouraundMaterial

var gouraundMaterial:GouraudMaterial = new GouraudMaterial(luz, 0x0000FF, 0x00ff00);
var plane:Plane = new Plane(gouraundMaterial,400,400,10,10);
scene.addChild(plane);


PhongMaterial

var phongMaterial:MaterialObject3D = new PhongMaterial(luz,0x0000FF, 0x00ff00,1);
plane:Plane = new Plane(phongMaterial, 400,400,10,10);
scene.addChild(plane)

Un resumen de materiales puede ser encontrado en el blog de Mad Vertices:

Collada

En Papervision3D es posible importar objetos tridimensionales desde cualquier software de modelado 3D que soporte la exportación a COLLADA. COLLADA es un formato XML  para establecer un intercambio de archivos para aplicaciones 3D interactivas.

Cámaras
En Papervision3D hay cuatro tipos de cámaras: free, target, spring y debug.
La cámara posee tres propiedades específicas que pueden ser manipuladas: zoom, enfoque y FOV

Creación del proyecto en ActionScript 3 usando Papervision3D
Flex 3 SDK es multiplataforma, y para estos ejemplos, han sido compilados utilizando el modo consola de Linux. Existe un gran potencial para el desarrollo de RIAs al compilar de esta manera, ya que son incluidas las bibliotecas del Flex. Éstas pueden ser aprovechadas convenientemente, fusionándolas con la interfaz tridimensional que puede crearse con Papervision3D. Esto abre la posibilidad de contruir interfaces innovadoras.
La versión de Papervision3D más utilizada es Papervision3D v2.0 Great White, que actualmente se encuentra en fase beta. Posee varias novedades con respecto a las versiones anteriores, entre ellas, la implementación de iluminación. También posee mayor optimización de código.

Papervision3D + Tweener + Flex SDK +  Linux: Una solución Open Source
Carlos Ulloa ha liberado Papervision3D a la comundad a finales del 2006 y ha tenido un gran avance desde entonces. Para la transición de los valores de las propiedades numéricas utilizo las clases Tweener de Fernando Zeh.
Adobe Flex 3 SDK se ha convertido a Open Source, existe un IDE llamado Adobe Flex Builder, que es propietario, pero es de uso opcional.
Es importante aclarar que Adobe Flash Player sigue siendo propietario, pero es totalmente lícito utilizarlo gratuitamente a partir de las herramientas mencionadas arriba.

Conclusión
Con la utilización de todas las nuevas características de la API del Flash Player 10, se obtendrá mayor capacidad para el renderizado 3D en tiempo real. Esto optimizará notablemente las prestaciones de Papervision3D, de hecho, los otros motores de renderizado 3D ya están implementando parcialmente la nueva API;  se mejorará notablemente la experiencia de los usuarios de Internet gracias a estas tecnologías.