45

Creación de Aplicativos Web 3D Educativos con Papervision3D David Daniel Pérez Sosa1, José Eduardo Rojas Coppari2 Facultad Politécnica, Universidad Nacional del Este Ciudad del Este, Paraguay 1 [email protected], [email protected]

Resumen. El motor de renderización 3D en tiempo real llamado Papervision3D utiliza un estilo de programación 3D tradicional, y actualmente es la mejor alternativa para desarrollar aplicaciones de este tipo para Internet, debido a la ubicuidad del Flash Player y la potencia gráfica necesaria para el desarrollo de cierto tipo de aplicaciones. Con esta herramienta es posible desarrollar aplicaciones gráficas 3D realísticas e interactivas, así como la integración de Papervision3D con motores de simulación física con el fin de crear innovadores aplicativos web orientados a la enseñanza en un ambiente educativo, como así también al entretenimiento. En este trabajo se evalúa e implementa Papervision3D en casos reales, empleando sus características más importantes, e identificando sus ventajas y desventajas para el desarrollo de aplicativos web gráficos en 3D. Palabras Claves: Papervision3D, Adobe Flash Player, Aplicativos Web 3D

Abstract. The real time 3D render engine called Papervision3D uses a traditional 3D programming style, and nowadays it is the best alternative for developing this kind of applications for the Internet, because of the Flash Player ubiquity and the graphic power needed to develop certain kind of applications. Papervision3D makes it possible to build realistic interactive 3D graphic applications, it can also be combined with physical simulation engines, aiming at creating education or entertainment oriented web applications. This work implements Papervision3D in real life cases, it takes advantage of its most important features and identifies the advantages and disadvantages when developing 3D web applications. Key words: rendering engine, 3D programming, Papervision3D

1. Introducción Los usuarios de internet interactúan día a día con páginas web dinámicas, en formatos de documento, gráficos 2D y la combinación de éstos. La experiencia de usuario ha cobrado gran importancia en los últimos tiempos; por ello, la industria se ha preocupado por satisfacer las necesidades de los internautas, comenzando a crear y compartir tecnologías y diseñando estándares que lleven Internet a la tercera dimensión. Las pocas páginas web construidas en 3D han sido muy bien valoradas por los internautas de todo el mundo. El buzz1 que producen es considerable. Allí surge la pregunta, ¿Si los internautas valoran los sitios web 3D, por qué no existen muchas páginas web con estas características? La respuesta es simple: por la falta de tecnologías maduras y estándares establecidos para el desarrollo de sitios Web 3D.

Después de evaluar las pocas plataformas que en la actualidad poseen ubicuidad y requisitos técnicos mínimos para estos propósitos, se ha optado por la utilización de Papervision3D [1], el motor de renderización2 3D en tiempo real para el Flash Player. Papervision3D abre un mundo largamente descuidado en la red; actualmente es posible crear aplicaciones 3D interactivas con un mínimo tiempo de carga utilizando correctamente las herramientas de programación para este entorno. En este artículo se analiza la posibilidad de crear aplicaciones Web 3D con las herramientas mencionadas, y sus múltiples aplicaciones, entre ellas, aquellas de carácter educativo.

1

Buzz Marketing, o simplemente Buzz, es un término anglosajón. Es la interacción de consumidores y usuarios de un servicio y gracias a ella se amplifica el mensaje.

2

La renderización es el proceso de generar una imagen desde un modelo.

INFORMÁTICA - Nº 5 – AÑO 2009

46

2. Objetivos

muy utilizado por los motores en tiempo real debido a la rapidez en que se efectúan las operaciones.

2.1. General

4.3. Espacio Ortogonal 3D

Búsqueda de una experiencia de usuario de Internet más real, interactiva e impactante a través de aplicaciones gráficas 3D interactivas que puedan ser utilizadas en un ambiente educativo. 2.2. Específicos

Como en cualquier otro software para programación en 3D, utiliza la terna izquierda (a excepción del mapeo UV, donde la normal a la superficie es determinada con la terna derecha con relación a los vértices que la componen).

•

4.4. Proyección

•

•

• •

Analizar el método de programación 3D tradicional utilizado en Papervision3D. Analizar las características que deben cumplir los algoritmos matemáticos aplicados a páginas web en 3D. Implementar optimizaciones en la programación gráfica y matemática a través de métodos numéricos. Implementar simulaciones físicas en espacios virtuales 3D. Estudiar el impacto de las aplicaciones gráficas 3D en la experiencia del usuario de internet en un ambiente educativo.

3. Materiales y Métodos Las aplicaciones 3D son compiladas con Flex SDK3 y se ejecutan en la máquina virtual Flash Player, distribuidas por Adobe Systems, en sus versiones para Windows, Mac OS, Linux, openSUSE, Ubuntu y Solaris [3]. El lenguaje de programación utilizado es ActionScript 3 (AS3), y el motor de renderización 3D en tiempo real utilizado es la última versión estable4 de Papervision3D, Great White, que está escrita en AS3 utilizando la API5 del Flash Player 9. También se utilizó el motor de simulación física de cuerpos rígidos en 3D llamado JiglibFlash.

4. Resultados 4.1. Papervision3D Papervision3D es un motor de renderización 3D que posee un API de fácil utilización y aprendizaje, y es ideal para proyectos escalables. A continuación se describen las características peculiares de Papervision3D: 4.2. Renderización La generación de la ilusión 3D en los contenedores de visualización 2D del Flash Player se realiza por el método de la rasterización. La rasterización es un algoritmo de transformación vectorial a mapas de bits 3

Software Development Kit (Kit de desarrollo de software) Versión 2.0.883 5 Interfaz de Programación de Aplicaciones 4

El primer paso utilizado por Papervision3D para representar objetos 3D en un objeto de visualización 2D es la proyección en perspectiva. 4.5. Geometría Los puntos espaciales (x, y, z) son almacenados en forma de vértices de datos (Vertex3D). La figura geométrica básica para cualquier objeto es el triángulo. Uniendo 3 objetos Vertex3D en la secuencia correcta se obtiene un objeto Triangle3D, donde el vector normal a la superficie triangular que se desea formar es determinado por la ley de la mano derecha. El conjunto de vértices (arrays de Vertex3D) y el conjunto de elementos que determinan la disposición de vértices para formar superficies triangulares (arrays de Triangle3D) son utilizados para construir el objeto 3D que se desea visualizar (TriangleMesh3D). 4.6. Visualización Cualquier objeto 3D que posea atributos de rotación, posición y escalado heredan la clase DisplayObject3D. 4.7. Mapeo de Texturas Se utiliza el mapeo UV. Cada objeto NumberUV representa al vector unitario correspondiente al vector bidimensional obtenido por la proyección de los vectores de posición de los vértices 3D a los planos cartesianos yx, xz, o zy, según corresponda. El conjunto de NumberUVs determina la posición de cada porción del material a ser utilizado sobre el objeto. El mapeo de texturas es el proceso más utilizado y el que requiere mayor esfuerzo computacional. 4.8. Materiales Los materiales son una colección de propiedades que determinan cómo será renderizada una superficie 3D. Entre esas propiedades citamos: el nombre, la habilitación de listeners6 para la interactividad, el color o imagen a ser mapeada, la aplicación de un algoritmo de suavización del material, el mapeo en una cara o 6

En programación orientada a objetos, los listeners son básicamente un modo de “suscripción” de una función a un evento especificado.

INFORMÁTICA - Nº 5 – AÑO 2009

47 doble cara. Todos los materiales heredan la clase MaterialObject3D. 4.9. Iluminación y Sombreado La simulación de sombras producidas por un punto de luz es uno de los aspectos más complicados en el proceso de pasterización, debido al alto coste computacional requerido.

4.13. RigidBody Es la clase principal para la creación de cuerpos rígidos 3D. Las clases que heredan RigidBody son JBox (cubo), JCapsule (cilindro), Jplane (plano), Jsphere (esfera). Los RigidBody poseen atributos de masa, fricción, coeficiente de restitución, inercia, se pueden aplicar fuerzas, torques, o velocidades vectoriales, como así también, transformaciones matriciales de posición, rotación y escalado.

4.10. Collada 4.14. Otras Simulaciones Físicas Collada (COLLAborative Design Activity) establece un estándar abierto intercambio de archivos 3D entre diversas aplicaciones de diseño 3D. Papervision3D soporta este formato de archivos gracias al proyecto ASCollada [4]. 4.11. JiglibFlash JiglibFlash es un motor de simulación física 3D en tiempo real para cuerpos rígidos [5]. Este motor está escrito en AS3 utilizando la API del Flash Player 9. Entre sus características más importantes resaltamos: 4.12. PhysicsSystem Esta clase posee todas las propiedades pertenecientes a la física newtoniana aplicada a cuerpos rígidos. Algunos atributos importantes de esta clase son la colección de cuerpos rígidos, los vínculos elásticos existentes entre ellos, la gravedad, la velocidad de los cuerpos. Posee métodos de integración del sistema y de detección de colisiones.

Aplicando métodos matemáticos adecuados, es posible simular un sinnúmero de situaciones físicas multidimensionales sobre Papervision3D. Los desafíos se encuentran en la optimización de los métodos matemáticos, de utilización de memoria y procesador, y el graficado de los píxeles. Las simulaciones físicas más comunes muchas veces envuelven el uso de ecuaciones algebraicas o derivadas parciales que suponen un alto costo computacional; sin embargo, a diferencia de las simulaciones físicas para fines científicos, en este caso se buscan métodos matemáticos y de programación ágiles y directos, de modo a conseguir visualizar la simulación en tiempo real, a costa de un error de propagación relativamente alto, pero que no hace mucha diferencia debido a que un error del 5 o 10% es visualmente aceptable. 4.15. Ejemplos de Implementación

Figura Nº 1 - Menú vertical construido con RigidBodys cúbicos y Contraints (vínculos elásticos)

INFORMÁTICA - Nº 5 – AÑO 2009

48

Figura Nº 2 - Graficado de funciones algebraicas tridimensionales con posibilidad de variar y los coeficientes de las ecuaciones de forma interactiva y visualizar los cambios en tiempo real.

Figura Nº 3 - Graficado de espectros de sonido con efectos de visualización en un plano, y letras tridimensionales en formato COLLADA, con un sistema de cámaras ubicadas en distintos puntos.

Figura Nº 4 - Visualización 3D del estado de aparatos eléctricos controlados por computadora gracias a la recolección de datos del servidor a través de WebService.

5. Discusión El uso de estas herramientas para desarrollar aplicaciones gráficas en 3D, que se ejecuten a través de Internet sobre cualquier plataforma, sin instalación alguna, supone una gran ventaja debido al realismo e interactividad que se puede representar. Esto podría ser útil en un sinnúmero de situaciones, tales como: la enseñanza, pues un profesor puede crear situaciones físicas multidimensionales interactivas en entornos

colaborativos donde los alumnos tendrían la posibilidad de variar ciertos parámetros de interés y obtener resultados visuales en tiempo real; el entretenimiento, debido a la posibilidad de implementar videojuegos 3D multijugador en el navegador. El formato 3D permite varios métodos de visualización de datos que pueden facilitar la comprensión de los mismos y por ende, facilitar la toma de decisiones.

INFORMÁTICA - Nº 5 – AÑO 2009

49 Las barreras que dificultan la expansión de Internet a la tercera dimensión son varias. Cada tecnología Web existente en la actualidad para estos fines posee limitaciones importantes. Los plugins diseñados específicamente para este fin (UNITY3D, Showkwave, entre otros) no poseen la ubicuidad necesaria; por lo tanto, no todos los internautas tendrán acceso a las aplicaciones 3D desarrolladas con estas herramientas. Otras tecnologías Web, tales como AJAX, SVG, y la máquina virtual Java, no poseen una potencia gráfica suficientemente rápida para los cálculos requeridos en programación de 3D. Actualmente el entorno de desarrollo de Flash Player es la mejor opción pues posee ubicuidad y una potencia gráfica en muchos casos aceptable. Entre los problemas del Flash Player se encuentran la baja velocidad para el dibujo intensivo de píxeles de mapas de bits a través del método SetPixel32 o sus derivados; la baja velocidad de cálculo del AS3, pues el lenguaje no dispone de arreglos pensados para los cálculos matemáticos y gráficos intensivos que requieren las aplicaciones 3D. Debido a lo expuesto en el párrafo anterior, Papervision3D posee cuellos de botella que reducen notablemente la cantidad de fotogramas visualizados por segundos. Papervision3D posee las mismas características básicas de un entorno de desarrollo 3D, pero en la práctica, ciertas bondades de este tipo de programación en su forma tradicional no son utilizables; por ejemplo, el uso intensivo de las sombras y el uso de objetos 3D compuestos por decenas de miles de triángulos es prácticamente imposible con la versión Great White. Los problemas expuestos simplemente están retardando la aparición de aplicaciones Web 3D, pero actualmente la industria está trabajando para subsanar estas limitaciones técnicas elaborando estándares abiertos y nuevas tecnologías que posibilitarán un mejor manejo, interpretación, accesibilidad y presentación de la información para los usuarios de internet. Con un sabio manejo de las clases que posee Papervision3D, hoy en día ya es posible crear aplicaciones 3D interactivas capaces de llegar a todos los usuarios de Internet de manera rápida y efectiva.

En la actualidad, Papervision3D es una de las mejores herramientas para desarrollo 3D para Internet. Utilizando este motor de renderización se puede desarrollar aplicaciones tridimensionales. Una aplicación Web con gráficos 3D en las cuales se implementan situaciones físicas reales e interactivas nos conduce hacia un nuevo paradigma en la navegación a través de Internet. Esta nueva tecnología de creación de páginas y aplicativos Web tiene una favorable perspectiva de futuro para su uso con fines educativos y de entretenimiento, ya que el estudiante puede vivir más intensamente la experiencia.

Referencias [1]

Ulloa, C., Lindquist, J, etat., Papervision3D Project Home, [En línea] [07/2008]

[2]

Adobe Systems Incorporated, Adobe Flash Player, [En línea] [09/2008] Adobe Systems Incorporated, Requerimientos de sistema para Adobe Flash Player [En línea] [02/2009]

[3]

[4]

Lindquist, J., Papervision3D: Part 1Foundation and 3D Object Basics, [En línea] [06/2008]

[5]

Pérez, D., 3D user interfaces in internet browsers - Papervision3D, [En línea] [01/2009]

[6]

Pérez, D., How work a TriangleMesh3D, [En línea] [05/2009]

[7]

Knip, T., ASCollada, [En línea] [03/2009]

[8]

JiglibFlash, [En línea] [03/2009]

[9]

Pérez, D., Elastic Menu 3D Demo, [En línea] [02/2009]

6. Conclusión El desarrollo de aplicaciones gráficas dinámicas, e interactivas 3D avanzadas conlleva una intensa aplicación de la matemática y la física aplicadas en la programación orientada a objetos.

INFORMÁTICA - Nº 5 – AÑO 2009