No Smoke

Continuamos con la serie de entradas que estamos dedicando al panorama de proyectos Flash para visualización en 3D fijándonos esta vez en Away3D.

Como Papervision3D, Away3D es software libre: se publica bajo una licencia Apache 2.0.

La referencia oficial de las clases en formato HTML se encuentra en http://away3d.com/livedocs/3.5.0_lib/ (versión 3.5.0 para Flash Player 10). De nuevo, el código fuente y otros documentos básicos están alojados en la página del proyecto en Google Code. El dominio oficial en cambio funciona como una bitácora colectiva en la que los programadores más implicados en el proyecto comparten reflexiones, noticias y ejemplos destacados de uso del software. Away3D se distribuye preferentemente en forma de archivos comprimidos con las fuentes completas. En caso de que se quiera mantener una copia local del código fuente en nuestros proyectos Flex, el repositorio Subversion es http://away3d.googlecode.com/svn.

Un holamundo en Away3D — Flash, fuente

El enfoque de nuestro holamundo en Flex 4 para Away3D será totalmente análogo al holamundo que explicamos para Papervision, así que no vamos a entrar en muchos detalles, salvo en aquellos puntos donde haya diferencias relevantes.

También en este caso tenemos una clase principal (spark.components.Application) que se limita a instanciar la clase Away3DWorld y a definir un refresco esperado para la aplicación de 60 cuadros por segundo. Cuánto es capaz Away3D de aproximarse a esta tasa de refresco, lo veremos más adelante en la prueba de rendimiento.

La vista más simple que podemos crear para nuestro ejemplo se llama View3D; la instanciamos sin parámetros y nos provee de los elementos necesarios que ya nos son familiares (en este caso, cámara, escena y motor; Away3D no espera cambios en el visor, así que ni siquiera existe esa categoría en la jerarquía de clases). En realidad, podemos encontrar en la documentación la vista SimpleView, que está pensada precisamente para casos sencillos. Esta vista contiene a su vez un objeto protected View3D, objeto que podríamos usar si escribiésemos una clase que heredase de ella. Como queremos limitar el número de clases al mínimo, en este caso no vamos a hacerlo.

Si definimos las mismas geometrías que teníamos en Papervision, veremos que la proyección del cilindro no coincide con la que vimos antes. El motivo puede estar en las propiedades del visor, sobre las que ahora no tenemos control, o bien en la interpretación diferente que una y otra biblioteca hacen del campo visual de la cámara. Para mejorar la apariencia del ejemplo, vamos a variar un poco la posición de la cámara y su campo visual:

_view = new View3D ();
_view.camera.moveTo (0, 0, -800);
_view.camera.fov = 45;
addChild (_view);

Otra diferencia que nos encontramos en seguida es que un mundo definido con Away3D está, por defecto, a oscuras. Es decir, necesitamos colocar y orientar correctamente al menos una fuente de luz para poder apreciar volúmenes. Si no lo hacemos así, el objeto aparecerá como una silueta negra:

var light:DirectionalLight3D = new DirectionalLight3D ();
light.direction = new Number3D (0, 1, 100);
_view.scene.addLight (light);

La manera de inicializar objetos también es un poco distinta en Papervision y en Away3D: mientras que en el primer caso los constructores en general admiten un gran número de parámetros, en Away3D se prefieren constructores con una signatura minimalista, a menudo con un único parámetro Object que contiene todas las propiedades del objeto:

// Papervision3D:
new Cylinder (new FlatShadeMaterial (null), 200, 800, 100, 1, 200, true, true);
 
// Away3D:
new Cylinder ({radius: 200, height: 800, segmentsH: 1, segmentsW: 100, material: mat});

Pruebas de rendimiento con Away3D — Flash, fuente

De nuevo vamos a modificar el ejemplo inicial para mostrar no uno, sino un conjunto de objetos rotando.

Como es lógico, para que las pruebas de rendimiento que hagamos sean representativas, y para que podamos comparar con otras bibliotecas, necesitamos asegurarnos de que la carga de trabajo es en principio similar en todos los casos. Al intentar reproducir con Away3D el mismo ejemplo que escribimos con Papervision (aquella matriz de 20×20 prismas de colores rotando) nos encontramos con otra diferencia: mientras que Papervision aproxima cada prisma con 4n-4 triángulos (donde n es igual al número de lados de la base, o sea 4), Away3D mantiene un número ligeramente mayor de polígonos para la misma figura. En concreto, 4n. (Para quien esté interesado, la diferencia está en la forma de aproximar los dos polígonos regulares de las bases: Papervision parte esas superficies trazando segmentos en forma de acordeón, mientras que Away3D las construye con n triángulos, todos ellos compartiendo como vértice el centro del polígono.)

Esto no supone mayor problema, pero para no dar «ventaja» a Papervision en las pruebas de rendimiento, vamos a ajustar ahora el número de prismas para que la cantidad total de triángulos a renderizar sea la misma. Omitiendo un cuadrado de 10×10 objetos en el centro de la estructura se consigue esto, y el número de triángulos en la escena sigue siendo 4800:

Para vaciar esa región, simplemente hemos añadido una condición especial al doble bucle que genera el array de prismas:

for (var i:int = -475; i <= 475; i += 50) {
    for (var j:int = -475; j <= 475; j += 50) {
        if (i < -250 || i > 250 || j < -250 || j > 250) {
            // Crear un prisma en esta posición
        }
    }
}

La clase que nos facilita estadísticas internas del motor gráfico de Away3D se llama AwayStats:

var a:AwayStats = new AwayStats (_view);
addChild (a);

El cuadro que aparece arriba a la izquierda (aquí ampliado) nos da información sobre la tasa real de cuadros por segundo frente a la deseada (6 sobre 60 en este instante). Haciendo clic en la parte inferior o superior de  la gráfica podemos reducir o incrementar, respectivamente, la frecuencia de refresco. Obviamente, cuando el motor gráfico no consigue alcanzar el refresco deseado, aumentar el valor de éste no tendrá ningún efecto práctico. También podemos ver aquí información acerca del consumo de memoria y el número de polígonos que son visibles en la escena en un momento determinado. En una futura entrega, cuando comparemos entre sí las distintas bibliotecas, explicaremos el porqué de estos números.

Próxima entrega: Sandy 3D Engine.

Tags: 3D, análisis, analysis, Away3D, benchmark, biblioteca, flash, flex, hello, helloworld, hola, holamundo, howto, introducción, introduction, library, mundo, prueba, rendimiento, tutorial, world