Faces (triángulos 3d) en Papervision3D

Etiquetas: geometry faces

Además de acceder a los vértices de un objeto en 3D, podemos acceder a los triángulos (caras) formados por estos vértices.

La matriz que contiene todos los triángulos de una figura se encuentra dentro de la propiedad geometry.faces del objeto.

Por ejemplo para recorrer todas las caras de un plano y poner a cada una un color aleatorio, podemos hacer:

 
for (var i:uint = 0; i < plane.geometry.faces.length; i++ ) {
    plane.geometry.faces[i].material = new ColorMaterial(Math.random() * 0xffffff);
}

Obteniendo algo parecido a esto:

Papervision faces

Un par de detalles útiles a la hora de trabajar con las caras en Papervision son:

-cada cara tiene un id (propiedad id)numérico único. Este id nos puede valer por ejemplo para asociar en una matriz cada cara a un material.

-Si añadimos un evento de ratón a un objeto, el evento InteractiveScene3DEvent que se propaga tiene una propiedad face3d, que hace referencia a la cara que ha recibido el evento (por ejemplo un click)

Cambiar la visualización utilizando Vertex

Etiquetas: vertex

Siguiendo con el tema de los Vertex en Papervision GreatWhite, dejo este ejemplo de como nos pueden valer para cambiar la visualización de manera sencilla.

Con un switch de este tipo:

 
switch(visualizacion) {
	case 1:
		vertex.z += (Math.abs(mouseX - n3d[count].x) - vertex.z) / 10;
	break;
	case 2:
		vertex.z += (Math.abs(mouseX - n3d[count].x) - vertex.z) / vs[count]; 
	break;
	case 3:
		vertex.z += (Math.min(5 * Math.abs(mouseX - (stage.stageWidth - 1000)/2 - n3d[count].x) +  5 * Math.abs(mouseY - (stage.stageHeight - 400)/2 - n3d[count].y),500) - vertex.z) / vs[count]; 
	break
}

podemos cambiar la reacción de los vértices a los movimientos del ratón.

Posicionar vértices en Papervision3D

Etiquetas: vertex WireFrameMaterial

Los elementos 3D (planos, esferas, modelos 3d, etc) están compuestos de triángulos.

Por ejemplo, si creamos un plano en Papervision3D con un WireframeMaterial con la siguiente sintaxis:

 
var plano:Plane = new Plane(material, 100, 100, 4, 3)

obtenemos un resultado parecido a este:

vertex papervision3d

Los vértices de un objeto están almacenados en un Array (vertex) dentro de la propiedad geometry del objeto. Por ejemplo, en el caso de nuestro plano podemos recorrer los vértices con este bucle:

 
for each (var vertex:Vertex3D in plano.geometry.vertices) {
}

Los números que he colocado sobre la imagen anterior, indican el orden en el que aparecen los vértices en esta matriz. Podemos observar que un plano por n x m segmentos, tiene (n+1) x (m+1) vértices.

En nuestro caso, el plano de 4x3 segmentos, tiene 5x4 vértices, ordenados de abajo arriba y de izquierda a derecha.

Estos vértices tienen unas coordenadas, que dan a la malla la apariencia de plano, y se pueden modificar. Por ejemplo imaginemos que queremos hacer un carrusel circular compuesto por 8 planos.

Podemos crear los 8 planos, y distribuirlos en el círculo mirando al centro, con lo que obtendríamos algo asi (click en la imagen para ver):

El efecto es resulton, pero si nos fijamos, los planos aparecen rígidos y no se adaptan a la forma del círculo. Para solucionarlo, podemos posicionar los vértices de los planos en el círculo, en lugar de los propios planos, con lo que obtendríamos algo asi (click en la imagen para ver):

Aunque en principio puede parecer muy complejo "posicionar vértices", en realidad haciendo un par de ejemplos se entiende perfectamente, y en algunos proyectos puede mejorar mucho los resultados. Dejo los fuentes comentados, para poder probar las dos opciones y ver las diferencias.

Bug en la función updateBitmap() de MovieMaterial en Papervision3D 2.0 GreatWhite

Etiquetas: updateBitmap() drawBipmap()

Esta semana me he vuelto a topar con este bug de la clase MovieMaterial en Papervision 2.0 GreatWhite.

Si utilizamos un MovieClip como material, utilizando MovieMaterial, y este vá a cambiar en algún momento, pero no queremos utilizar el atribute animated para conservar recursos, podemos llamar a la funcion updateBitmap() para actualizar el material solo cuando sea necesario. El problema es que en esta versión de Papervision, la función updateBitmap() definida en MaterialObject3D, está vacía (literalmente).

Para solucionar este inconveniente, podemos llamar a la función drawBitmap de la clase MovieMaterial. Por ejemplo:

`MovieMaterial(plano.material).drawBitmap()`

Publicado el primer libro de Papervision

La editorial Packt acaba de publicar el primer libro de Papervision3D.

Está escrito por Jeff Winder y Paul Tondeur, y según palabras textuales de Carlos Ulloa, está "de puta madre".

Los contenidos son:

Preface Chapter 1: Setting Up
Chapter 2: Building Your First Application
Chapter 3: Primitives
Chapter 4: Materials
Chapter 5: Cameras
Chapter 6: Moving Things Around
Chapter 7: Shading
Chapter 8: External Models
Chapter 9: Z-Sorting
Chapter 10: Particles
Chapter 11: Filters and Effects
Chapter 12: 3D Vector Drawing and Text
Chapter 13: Optimizing Performance
Index

Se puede comprar aquí.

Rotaciones en Papervision Greatwhite

Como a veces es un poco difícil imaginar como van a afectar a su aspecto las transformaciones en las propiedades de los elementos en 3d, me he hecho esta mini-aplicación con Sliders para ver como se muestra un plano al rotarlo sobre sus tres ejes.

Espero que a alguien más le sea útil, dejo los fuentes (está hecho con Papervision GreatWhite) por si queréis modificar otras propiedades.

Papervision GreatWhite: crear un plano con dos caras

Etiquetas: Plane DisplayObject3D Viewport3D BasicRenderEngine

Existen dos maneras de crear una plano con dos caras en Papervision3D:

-Crear un cubo con una profundidad de 1pixel, y utilizar las caras delantera y trasera como caras del plano.

-Crear un contenedor DisplayObject3D, y meter dentro dos planos. El plano "b" debe tener una profundidad de 1 y una rotatión de -180º.

El segundo método es el que me parece más cómodo, ya que gestionar los materiales con un cubo es más engorroso que con un plano. Un ejemplo de plano con dos caras podrías ser:

 
contenedor = new DisplayObject3D();
var planoA = new Plane(new MovieAssetMaterial("CaraA"), 400, 400, 4, 4);
var planoB = new Plane(new MovieAssetMaterial("CaraB"), 400, 400, 4, 4);
planoB.z = 1;
planoB.rotationY = -180;
contenedor.addChild(planoA);
contenedor.addChild(planoB);
escena.addChild(contenedor);

Materiales interactivos en Papervision GreatWhite, parte II

Etiquetas: Viewport3D BasicRenderEngine interactive animated MovieAssetMaterial

En Papervision greatWhite podemos añadir eventos a los elementos 3D .

Otra opción es crear los elementos 3D a partir de MovieClips interactivos que tienen asociados eventos. Por ejemplo, tenemos un MovieClip con tres botones dentro, y creamos una esfera con ese MovieClip como material. Para que se respeten los eventos de ese clip al convertirlo en material3D, debemos configurar los siguientes parámetros:

-al crear la instancia de Viewport3D debemos especificar que es interactivo:

 
//los parametros son: (ancho,alto,autoEscalar,interactivo) 
viewport = new Viewport3D(400,400,false,true);

-al crear el material debemos especificar que es interactivo y animado:

//los parametros son: (ID de linkage,transparente,animado)
var material:MovieAssetMaterial = new MovieAssetMaterial("MenuPPV",true,true);
material.interactive = true;

Tras el salto, el código completo y la demo.

Crear modelos 3D Collada para Papervision en Google Sketchup

Etiquetas: DAE load Viewport3D BasicRenderEngine Camera3D

Google Sketchup es uno de los programas mas sencillos de modelado 3D. Además la versión gratuita es bastante completa, y más que suficiente para hacer modelos sencillos.

Una vez hemos descargado Google Sketchup y hecho el primer modelo, tenemos que seguir los siguientes pasos:

-Exportar el modelo como Google Earth 4. Esto creará un archivo .kmz

-Renombrar el archivo .kmz a .zip.

-Descomprimir el archivo y buscar dentro el .dae y las texturas (si las hay).

Tras el salto, el 3D en movimiento y el código para cargar el modelo.

Utilizar materiales interactivos en Papervision GreatWhite

Etiquetas: InteractiveScene3DEvent BasicRenderEngine Viewport3D displayObject3D

Para utilizar eventos de ratón sobre objetos en Papervision GreatWhite, tenemos que hacer tres cosas:

-Crear un objeto Viewport3D con el atributo interactive = true

-Crear un objeto y poner el atributo interactive de su material = true

-Añadir los eventos al objeto

El código comentado, tras el salto.

Prueba de Line3d en Papervision GreatWhite

Etiquetas: Lines3D addNewLine Line3D BasicRenderEngine Viewport3D

Hace tiempo que le tenia echado el ojo, asi que hace un rato me he puesto y me ha sorprendido lo fácil que es utilizar esta clase. Veo mucho potencial, a ver si me instalo la CS4 y hago un ejemplo de CS4 + la nueva función extract de FP10. Aquí dejo el fuente por si le ayuda a alguien:

Papervision GreatWhite: Tipos de Shader

Etiquetas: PointLight3D GouraudShader FlatShader CellShader PhongShader ShadedMaterial

Una de las novedades de Papervision GreatWhite son los ShadedMaterial.

Para utilizarlos basta con seguir los siguientes pasos:

Galeria de Flickr con Papervision GreatWhite, V2

Etiquetas: API Flickr Papervision GreatWhite

He "mejorado" la galeria de imágenes en 3D, añadiendo un menú lateral con todos los albums de usuario (en este caso Lola) y permitiendo la carga de las imágenes originales haciendo click en cada cubo.

Ver Galeria

Demo de navegación con cubos en Papervision GreatWhite

Etiquetas: API Flickr GreatWhite

Esta es una demo de navegación en 3D, y utiliza Papervision GreatWhite y la API de Flickr.
La demo, que carga las fotos de Lola, se puede ver aquí.

Papervision 2.0a Greatwhite: Sombras

Etiquetas: Viewport3D BasicRenderEngine PointLight3D ViewPort3D GouraudMaterial

Una de las novedades de la versión alpha de Papervision son las sombras. Para poder crear efectos de luz, debemos crear un objeto de tipo PointLight3D, y utilizar materiales especiales en los objetos (en este caso u material de tipo GouraudMaterial). El resto es igual que en una plantilla normal de PPV3D.

Puedes verlo a pantalla completa aquí

Demo Papervision GreatWhite + SoundMixer.computeSpectrum

Una de las novedades de Actionscript 3.0 es la clase SoundMixer, que permite de manera fácil obtener un ByteArray que contenga una instantánea del sonido reproducido. Hay un montón de demos de SoundMixer, muchas de ellas con Papervision. Esta es una más.

La canción es "Atlas", del grupo Battles (para mí uno de los mejores de 2007).

Papervision 2.0: GreatWhite.Plantilla básica

Etiquetas: Viewport3D BasicRenderEngine Scene3D Camera3D MovieMaterial MaterialList DisplayObject Viewport3D Vertex3D

Hace tiempo que está disponible la versión 2.0a de Papervision, bajo el nombre de Greatwhite. Hay algunos cambios respecto a la versión anterior, y ya han empezado a surgir tutoriales donde se explica como utilizar las nuevas clases y como se recomienda dividir los bloques de código. Esta es una plantilla básica de Papervision 2.0. En este caso creo un cubo y creo sobre él un efecto de "fluidez". Para que funcione hay que tener descargadas las clases de Papervision 2.0a, y haber indicado a Flash donde están guardadas.

Puedes verlo a pantalla completa aquí