He subido a un repositorio público todo el código JavaScript que he ido generando estos últimos días resultado de portar ArUco, una librería para la construcción de aplicaciones de realidad aumentada escrita en C++ utilizando OpenCV. He llamado js-aruco al proyecto, espero que el nombre no me cause problemas, pero me parecía el más adecuado.
En contra de mi costumbre, he creado una pequeña demo, que tiene la particularidad de que es capaz de obtener imágenes de una webcam a través de una pequeña librería que he escrito en Flash, y que es capaz de capturar vídeo y enviar las imágenes a JavaScript. La demo requiere un ordenador bastante rápido, un navegador moderno actualizado (Chrome o Firefox), Flash para la captura de vídeo, y una webcam.
Demo online:
http://inmensia.com/files/aruco/webcam/webcam.html
La demo detecta los marcadores y dibuja un borde rojo alrededor de los mismos, muestra en azul los números identificadores de cada uno de ellos, y destaca las esquinas superiores izquierda con un pequeño cuadro verde para poder hacer un seguimiento de su orientación real con respecto a la cámara.
Los marcadores deben ser matrices de 7x7, con un borde negro de 1 celda de ancho. La matriz más interna de 5x5 puede tener filas con cualquiera de las siguiente combinaciones válidas:
blanco - negro - negro - negro - negro
blanco - negro - blanco - blanco - blanco
negro - blanco - negro - negro - blanco
negro - blanco - blanco - blanco - negro
TODO
- Optimizar. Para capturar imágenes a un mínimo de 20 fps se requiere ser capaz de procesar cada imagen en tan sólo 50 (= 1000/20) milisegundos, algo bastante alejado del rendimiento actual de la librería, incluso para resoluciones pequeñas de 320x240. [Solucionado]
- Reducir el uso de memoria. Hay unas cuantas funciones que reservan memoria que luego no reutilizan ya que vuelven a hacer la misma reserva para cada imagen procesada. [Solucionado]
- Implementar interpolación bilineal en el warp. En ángulos en torno a los 45 grados, para imágenes pequeñas, no se están detectando a veces los marcadores debido a que se forman "dientes de sierra" en la imagen que provocan que falle la cuenta de pixels para diferenciar los cuadrados blancos de los negros. [Implementado]
- Después de varios minutos de funcionamiento la ventana del navegador da un error, aunque aún no sé si porque falla Flash o JavaScript. Posiblemente sea porque falla el mecanismo que he puesto para intercambiar datos entre Flash y JavaScript, o porque el proceso se queda sin memoria. [Solucionado]
- Sustituir Flash por la futura función JavaScript "getUserMedia", un estándar que aún se está definiendo y que espero que los navegadores implementen algún día. [Implementado]
Realidad Aumentada
1. Introducción
2. Escala de grises (Grayscale & Gaussian Blur)
3. Umbralización (Adaptive Thresholding)
4. Detección de contornos (Suzuki)
5. Aproximación a polígonos (Douglas-Peucker)
6. Transformación de perspectiva (Homography & Otsu)
7. Detección de marcadores
8. js-aruco: Realidad Aumentada en JavaScript
¿No encontró lo que buscaba?
Utilice el buscador para encontrar más páginas en esta web o en toda Internet.
Hola,
soy Rafael Muñoz, el desarrollador de Aruco. Me he encontrado tu página y me ha gustado mucho el trabajo que has realizado. Enhorabuena, es una explicación excelente.
Un saludo,
Rafa.
Tu proyecto era exactamente lo que estaba buscando para entender como funcionaba la detección de marcadores.
Lo mio es sólo un "port", no tiene mucho mérito en comparación.
Muchas gracias por tu comentario.
Le he echado un ojo al repositorio.
usando webCL ya lo bordas :D
Por ahora solo está disponible en Firefox 4 con el addon webCL
Lo he tenido que buscar, y eso del WebCL parece que está un poco verde todavía. A futuro ya veremos que apoyos tiene. Eso de poder acceder a la potencia de OpenCL desde JavaScript tiene su morbo.