El objeto Matrix3D

Todos los objetos 3D en Papervision tienen una Matrix3D en la que se define su escala, inclinación, orientación, rotación, x, y, y z.

El valor por defecto de de las 4 columnas y las 4 filas es el siguiente:

PLAIN TEXT

Actionscript:

1. 1, 0, 0, 0
2. 0, 1, 0, 0
3. 0, 0, 1, 0
4. 0, 0, 0, 1

Estos valores se almacenan las propiedades de transformación del objeto 3D usando una “n”, un entero para el numero de fila y otro entero para el numero de columna, quedando de la siguiente manera:

PLAIN TEXT

Actionscript:

1. n11, n12, n13, n14
2. n21, n22, n23, n24
3. n31, n32, n33, n34
4. n41, n42, n43, n44

Escala, inclinación, orientación y rotación se manejan en las 3 primeras filas y columnas de la matriz, que podéis probar en el swf del link que dejo abajo.

PLAIN TEXT

Actionscript:

1. 1, 0, 0
2. 0, 1, 0
3. 0, 0, 1

x, y, y z son manejadas en las 3 primeras filas de la última columna.

PLAIN TEXT

Actionscript:

1. 0
2. 0
3. 0

La última fila se deja para poder hacer la multiplicación de la matriz.

Como funciona matrix3D

pruebas, RA+ video

Aquí una prueba con un plano formado por un video(secuencia de fotogramas),

FLARToolKit

Básicamente se trata de insertar elementos 3D en un vídeo, normalmente a tiempo real. Los materiales básicos son una webcam, un programa corriendo en tu PC/MAC y una plantilla proporcionada por los creadores del programa. Tu sólo debes imprimir la plantilla y ponerla dentro del campo de visión de la webcam y el programa se encarga de analizar las imágenes, localizar la plantilla y a partir de esta, añadir elementos 3D al vídeo.

Para poder usar la librería, nos la descargamos a través de subversión aquí.

La lógica básica de esta API es hacer un mapa de bits de intersección entre la imagen captada por cámara web y un detector de marcador que se puede personalizar.

Cuando FLARToolkit captura la imagen de la webcam, se calcula una matriz que representa la deformación 3D de la detección de marca. Con esta matriz, se genera un entorno 3D con la API de Papervision3D.

Son MUY importantes los archivos:
"camera_para.dat" que es la camara y el patrón “.pat”, que será la marca que detectará para cargar los elementos 3D.

La marca:
Para crear una marca propia podemos descargar ARToolKitMarkerGernerator: (Debes tener instalado el Adobe Air).
Iniciarlo, apuntar con la cámara la marca (previamente realizada con photoshop, por ejemplo) y hacer clic en "Guardar Patrón" y guardar el archivo .pat para añadirlo al proyecto.

Hay que tener en cuenta cosas como que la marca tiene que ser totalmente diferente en la rotación de 90º para que FLARToolKit detecte correctamente la posición.

Por ejemplo, el dibujo de la derecha no funcionaria correctamente, pero si lo haría el de la izquierda.

Papervision3D

Puesto que iba a necesitar elementos 3D me recomendaron investigar sobre Papervision3D.

PV3D en realidad no se instala. Se trata de una librería de clases de ActionScript de la que se servirá nuestra aplicación para implementar sus funciones.

Había que descargarse el subversión para actualizar y/o descargar el uso de código de terceras partes, ya fuera de Papervision o de FLARToolKit, por lo que instalé el plugin de eclipse para subversión (subeclipse) y descargué el código alojado en el repositorio de papervision.

Lo primero que hay que saber es en que consiste una aplicación de PV3D, su funcionamiento básico y cómo ponerlo en marcha, así como conceptos fundamentales:

Viewport: es la parte visible de todos nuestros elementos 3D y el encargado de coordinar el tipo de renderizado, la cámara y la escena. Es lo que añadimos directamente a nuestro stage de Flash.

Escena (Scene): es el contenedor de todos los elementos visibles y formas que tendrá nuestra aplicación. Digamos que es como un “display list” interno de papervision.

Motor de renderizado (Renderer): como su nombre indica se encarga de renderizar la escena. En papervision, cada vez que modificamos algo en la escena 3D, debemos renderizar de nuevo. Lo que se suele hacer es un método que se encargue de ello y que se ejecuta en un intervalo fijo mediante el evento “ENTER_FRAME”.

Cámara: en papervision podemos controlar la posición, rotación y zoom de la cámara que visualiza el contenido.

IDE para programar AS3

Viendo que el tema se iba a complicar, en cuestión de código y librerías, y que el entorno de programación del IDE Flash me parecía infumable, empecé a investigar sobre cuáles eran los IDE’s más usados a la hora de programar AS3.

Y cual fue mi sorpresa al encontrar que para Eclipse, el IDE por excelencia de JAVA, existían diferentes soluciones para programar AS3 en él. Intenté probar con varios plugins, como el FDT de Flex, pero algo no acabé de hacer bien porque no me funcionó ni un “hola mundo” asi que lo que hice es descargarme el Flex Builder 4, que simplemente es herramienta para desarrollar Flash, propiedad de Adobe, con varias utilidades muy interesantes y que está basado en Eclipse, (un IDE de desarrollo), para que entienda la sintaxis ActionScript para poder compilar nuestros proyectos desde el Eclipse (lo que no significa que use el framework de Flex).

Me parecía excelente la idea de poder crear los gráficos y assets de la aplicación, y luego exportarlos a swf o swc, para posteriormente cargarlos desde código.

Creo que es una manera mucho más ordenada de hacer las cosas, y que facilita la relación entre programador-diseñador.

Digamos que en el caso que estas dos personas no fueran la misma, QUE NO ES MI CASO, el diseñador no tendría que preocuparse por la arquitectura de la aplicación, ya que su función se limitaría a la creación de “assets” gráficos independientes.

AS3 vs AS2

Durante las clases de Instalaciones interactivas, he aprendido lo básico sobre AS2.

Al plantearme este tipo de proyecto me replanteé si usar AS2 o AS3.

Al conocer tan poco sobre AS2, me pareció una buena oportunidad para aprender este nuevo lenguaje de programación, hay que estar a la vanguardia y explorar las posibilidades que AS3 nos ofrece y no quedarnos estancados en un, para mi gusto, arcaico AS2.

Creo que siendo programadora JAVA desde hace 4 años no me asustaba tanto este lenguaje, como le sucede a mucha gente,sobre todo gente acostumbrada al AS2, pero creo que AS3 es un buen ejemplo de estándar de programación y POO.

Aquí hay una explicación de cómo funciona AS3 de manera muy sencilla: introducción a los contenedores.

Cómo he empezado todo esto...

En este post voy a explicar de que manera estoy desarrollando este proyecto:

Desde que me puse a desarrollar en serio este proyecto, cuando la idea ya estaba definida y todo parecía tener forma, me enfrenté al duro momento de EMPEZAR sobre todo con una tecnología nueva, bueno una no, en mi caso han sido cuatro.

• La primera duda que me surgió fue usar Actionscript 2 o Actionscript 3. Aquí explico con mas detalle esto.
• La segunda cuestión era que me parecía horroroso programar en el IDE de Flash. Aquí explico mi experiencia.
• La tercera era enfrentarme al código de Papervision3D.
• La cuarta era la Realidad Aumentada en Flash (FLARToolKit).

Primera prueba Realidad aumentada

Voy avanzando, hoy he conseguido hacer algo en el mundo de la Realidad Aumentada, sobre un patrón que he creado con photoshop y convertido con ARToolKitMarkerGenerator, he creado 3 cubos que se proyectan sobre mi marca!!

Primeras pruebas

Después de una semana de configuraciones y de tutoriales con papervision3D esto es lo primero que he sacado!

un plano doble que gira con la imagen...no es mucho pero por algo se empieza!

Estilo general de la instalación

La idea es dar a toda la instalación una sensación de ser “de juguete”. Se intentará grabar a los componentes con instrumentos de cartón, en un principio más básicos y posteriormente más profesionales.

He encontrado "googleando" instrumentos de cartón muy elaborados!! Si tengo tiempo me gustaría hacer algo parecido, aunque tambien he pensado que al darle ese toque de juguete, de marioneta, podría hacerlo mucho mas sencillo...

Flash, FLARToolKit y Papervision3D

La programación se está realizando con Flash, en el lenguaje de programación AS3 y con la ayuda de diferentes librerías, una de ellas y de la que estoy investigando es FLARToolKit: librería de flash para insertar elementos 3D en un video, a tiempo real, que se encarga de calcular la posición 3D del código, (marca fiducial) dentro del video.

La interfaz de RA se tiene que integrar con otra librería para Flash, Papervision3D, que es un motor de gráficos 3D para Flash Open source, para desarrollar escenas 3D.

En realidad los vídeos de los componentes serán planos en 2 dimensiones que darán la sensación de ser “cartón”, sobre el escenario virtual, que será una imagen del teatrito real. Al mover la marioneta física, los planos 2D se moverán según los movimientos que se realicen con la cruceta.

Qué es la Realidad Aumentada??

AR (Augmented Reality) es una mezcla de realidad virtual y mundo real.

Un entorno generado por un ordenador con el que interactuamos desde el mundo real a través de una cámara y unos marcadores impresos.

Todo esto sucede en tiempo real, con interacción por parte del usuario, aprovechando las múltiples posibilidades de comunicación que facilita un ordenador: webcam por ejemplo.


Para ello hay que definir un marcador (que estará en la cruceta) y calibrarlo con la webcam para almacenarlo como un patrón de imagen reconocible.

Este reconocimiento de los límites del marcador es tridimensional, es decir, la cámara detectará los límites del marcador mediante dos niveles binarios, blanco y negro, para trazar un plano y que cuando el usuario incline la marca, el plano 3D (vídeos de los componentes del grupo tocando la canción) se inclinará de la misma forma generando de esa manera una sensación espacial en el escenario de la pantalla.

Las marionetas: prototipos y esquemas

En esta primera fase utilizaré en principio marionetas de cartón y crucetas de cartón.

Posteriormente, adaptaré alguno de los fotogramas del videoclip a las marionetas, para hacer una marioneta con imágenes de los propios componentes del grupo.

En las crucetas estará la marca de Realidad Aumentada, para comunicar la instalación.

El teatrito de juguete

• En esta primera fase, usaré un teatro de juguete instalado en la propia sala. En principio será uno de cartón, aunque la idea para el proyecto final es que sea uno fabricado personalmente.
  
  
  
  

Funcionamiento de la instalación

A través de las posiciones que tome la cruceta, la marca de realidad aumentada pegada en ella, enviará las coordenadas a través de la web cam situada arriba del teatrito al pc y este se comunicará a través de FLARToolkit y Papervision3D con Actionscript3 para mover los vídeos en stopmotion de los componentes del grupo, sobre un escenario 3D.

PREPROYECTO...algunos cambios...

Idea Marionetas
Como ya comenté voy ha realizar una METÁFORA de esta canción y de su temática. La idea de las marionetas ha evolucionado de esta manera:
La instalación interactiva se realizará básicamente con los siguientes elementos:
- teatrito de juguete de marionetas (Cartón) y marionetas

- Web cam - proyector.

- pc

- programa para la interacción:

ActionSript3 (lenguaje de programación para flash)

+ Papervision3D (3D para flash)

+ FLARToolkit (Realidad aumentada para flash)

1ª Presentación del preproyecto

Hola, en marzo tuvimos que presentar en clase la idea del proyecto que teníamos, aqui os

dejo la presentación que preparé donde describía un poco la idea que tenía de proyecto.

Aunque ahora ha cambiado un poco, no quiero perder la idea principal que tenía que era

hacer una metafora de la canción y

usar las tecnologias y las técnicas que me gustan.

Videoclip interactivo

View more presentations from Miriam Alegría.