AS3 – Realidad Aumentada y Rotación

Publicado por Iván Gajate el 8 de diciembre de 2010 en AS3, Flash, Lab

Si estamos haciendo un ejercicio de realidad aumentada y queremos obtener la rotación x, rotación y o rotación z, no es tan fácil conseguirlas como podría parecer en un principio.

Buscando mucho encontré un comentario en un blog donde explicaban cómo obtener los valores a partir de una matriz de transformación, pero era poco práctico de usar y difícil de entender, así que he hecho una clase Marker que simplifica enormemente el proceso de conseguir estos valores (el marker es la plantilla que imprimimos y que es detectada por la webcam).

Ahora es tan fácil como hacer esto, y nos devolverá la rotación en el eje Z (perpendicular al plano del marker) como un número entre 0 y 360 grados:

var angle:Number = Marker.getInstance().rotationZ;

Para aplicarlo a algún objeto, como por ejemplo esta brújula.

El ejemplo es muy chorra pero se entiende que la aguja gira cuando giramos el marker. Podría utilizarse para cualquier cosa, un juego, animaciones de objetos, para cambiar el volumen de algún sonido, o incluso para hacer que marker sea el volante en un juego de coches 😉

Para que el Marker calcule los valores, hay que setear la matriz de transformación primero. Esto se hace normalmente en el FLARToolkit en la clase PV3DARApp.as, casi al final:

Marker.getInstance().setTransformMatrix(_resultMat);

_detector.getTransformMatrix(_resultMat);
_markerNode.setTransformMatrix(_resultMat);
_markerNode.visible = true;

La única línea que hay que añadir es la primera. Al igual que hacemos un setTransformMatrix en el _markerNode, lo hacemos en mi clase Marker. Así se actualiza todo a la vez.

Ah!, la clase Marker también emite tres eventos para que sepamos en todo momento si el marcador está siendo detectado o no, y cuándo lo hace por primera vez. Los eventos son:

Marker.FIRST_TIME_DETECTED

Marker.DETECTED

Marker.NOT_DETECTED

y se pueden escuchar con un lístener:

Marker.getInstance().addEventListener(Marker.DETECTED, markerDetectado);

Todas las propiedades que se pueden conseguir del Marker son:

Marker.getInstance().x
Marker.getInstance().y
Marker.getInstance().z
Marker.getInstance().rotationX
Marker.getInstance().rotationY
Marker.getInstance().rotationZ
Marker.getInstance().detected
Marker.getInstance().getTransformMatrix()

Toda esta info la he conseguido en el blog de W.J. Warren, en uno de los comentarios que le hacen.

http://blog.ansuz.nl/index.php/2009/03/01/augmented-reality/comment-page-1/#comment-219

Él lo hace con la versión de FLARRotMatrix, pero lo he actualizado para que utilice las clases de NyARRotMatrix, que son las que utiliza ahora el FlarToolkit.

Espero que a alguien le sea útil 😉

Puedes descargar el ejemplo aquí:

Y si vamos a hacer algún trabajo de Realidad Aumentada y queremos que se identifique fácilmente por los usuarios podemos utilizar este logo. Es algo similar al logo de usb o del dvd, al final es mejor para el usuario porque lo identifica con claridad y mejor para nosotros porque cuesta menos introducir las aplicaciones en el mercado.

http://www.augmentedrealitylogo.com/

 

7 comentarios para “AS3 – Realidad Aumentada y Rotación”

  1. Ah, entonces también es probable eso…
    probé de hacerlo andar online, para mostrar a unos compañeros, pero online el swf no funciona… solo local.
    puede ser que el html deba tener algún seteo en especial? además de los que suele tener el swfobject.

    Muchisimas gracias

  2. @Marcos: Probablemente necesite compilar para Player 10 en adelante (CS5)

  3. Esta buenísimo el código, peor quería preguntar:
    en flash cs3 y cs4 no me lo reconoce, tira error. Está hecho en adobe cs5?

    medio complicado de funcionar

  4. @Miguel, Hay muchos ejemplos por la red, por ejemplo http://www.esedeerre.com/ejemplo/10/108/crear-modelos-3d-collada-para-papervision-en-google-sketchup

  5. Hola, me parece excelente tu post para manejar esta libreria de una forma un poco mas sencilla. Me pregunto si me puedes ayudar a insertar un objeto 3D formato collada en esta escena flash, como lo podria hacer?

    Saludos

  6. Todo lo que sea amenizar el trabajo con AR será bienvenido, buen post!