Origam-i: Juego basado en Realidad Aumentada para iPhone (Santiago García Guillén)

Origam-i:
Juego basado en procesado de imagen para iPhone
Realizado por: Santiago Garc´ıa Guillén
Dirigido por: Cristina Urdiales Garc´ıa
Escuela Técnica Superior de Ingenier´ıa de Telecomunicación
Universidad de Málaga
19 Mayo 2014

Introducción Caracter´ısticas Procesado de imagen Aplicaciones Conclusiones
1 Introducción a los dispositivos móviles
2 Caracter´ısticas del problema: iOS y origami
3 Estudio de procesado de imagen aplicado a Origam-i
4 Aplicaciones desarrolladas
5 Conclusiones y trabajo futuro
Origam-i: Juego basado en procesado de imagen para iPhone Santiago Garc´ıa Guillén Mayo 2014

Explosión de los dispositivos móviles
Dispositivos móviles del ahora: Smartphones y tabletas
Desde ∼2009: explosión de ventas. Llegada al usuario medio
Reducción de precio
Aparición de la tecnolog´ıa 3G
Mejora de sus capacidades y periféricos
CPU
Pantalla táctil
Videocámara y GPU
Sistema de sonido
GPS
Acelerómetros

Explosión de los dispositivos móviles
Dispositivos móviles del ahora: Smartphones y tabletas
Desde ∼2009: explosión de ventas. Llegada al usuario medio
Reducción de precio
Aparición de la tecnolog´ıa 3G
Mejora de sus capacidades y periféricos
CPU
Pantalla táctil
Videocámara y GPU
Sistema de sonido
GPS
Acelerómetros
Mercado se compartimenta según plataforma
iOS de Apple: iPhone y iPad
Android de Google junto a diferentes compañ´ıas
Blackberry
Windows Phone (Microsoft + Nokia)

Aplicaciones para smartphones
Un teléfono ya no sirve solo para llamar: aplicaciones (apps)
Smartphone: ordenador en la palma de la mano
Movilidad, maniobrabilidad, ergonom´ıa,...
Tiendas virtuales: App Store, Google Play
Aplicaciones de todo tipo
Utilidades
Comunicaciones y redes sociales
Ofimática
Música
Juegos
Telemedicina
Educativas

Aplicaciones para smartphones
Aplicaciones educativas: Sistemas interactivos tutorizados
Simbiosis perfecta con sistemas móviles
Tutorización mediante realimentación usuario–móvil
Un smartphone es un ordenador en la palma de la mano
Siempre encima
Maniobrabilidad
Más ameno que leer un manual

Smartphones: evoluci´on
A lifetime of Apps. IEEE Spectrum Sep 2012 c James Provost

¿Qué vamos a hacer?
Sistema interactivo tutorizado
Aportar know-how académico
Desarrollar una aplicación que permita probar las ventajas que
ofrecen los smartphones
Crear un ejemplo de aplicación interactiva tutorizada
Tutor: tiene el conocimiento
Usuario: realiza el aprendizaje
Programador: a´ısla el conocimiento del tutor y lo ofrece al
usuario

¿Qué vamos a hacer?
Aportar know-how académico
Desarrollar una aplicación que permita probar las ventajas que
ofrecen los smartphones
Crear un ejemplo de aplicación interactiva tutorizada
Tutor: tiene el conocimiento
Usuario: realiza el aprendizaje
Programador: a´ısla el conocimiento del tutor y lo ofrece al
usuario
Origam-i: Juego basado en procesado de imagen para iPhone
Captura del entorno: videocámara
Realimentación hacia el usuario: Pantalla táctil
Alto consumo de CPU/GPU: procesado en directo

Realidad Aumentada
Versión mejorada de la realidad superponiendo información digital
Toma de datos del entorno, procesado y representación
No es imprescindible, pero se ajusta perfectamente
Forma más intuitiva de enseñar: mostrar en directo
Aplicaciones de altos requerimientos

Elección de plataforma: iPhone y iOS
iOS: iPhone OS, lanzado en 2007
Versión actual: iPhone 5S/5C y iOS 7.0
¿Por qué iPhone? Pocos dispositivos, pocas versiones SO
Programación en Objective-C
Extensión POO del lenguaje C. Sintaxis propia
SDK y entorno de desarrollo proporcionado por Apple

Arquitectura l´ogica iOS
Capas L´ogicas en iOS

Patrones de diseño
Patrón de diseño (templates): Solución reutilizable a problemas comunes
Modelo–Vista–Controlador (MVC)
Paso de mensajes: NSNotificationCenter
Delegación

Caracter´ısticas del origami
La papiroflexia —u origami en japonés— es el arte de plegar un
papel para obtener figuras de formas variadas
Caracter´ısticas:
Cada figura se compone de diferentes pasos ordenados
Cada paso tiene una forma única
Entre paso y paso se realiza un doblez
El papel usado tiene dos colores: frente y dorso

Tipos de dobleces
Valle

Tipos de dobleces
Inside Reverse o Hueco

Tipos de dobleces
Apertura
¡No es plano!

Limitaciones
No se pueden tener pasos tridimensionales
Easy Origami: Solo 2D

Limitaciones
Es necesario aislar caracter´ısticas que identiﬁquen la forma
Existen zonas de sombra y el color no es constante
Procesado de imagen: detecci´on de esquinas, color

Limitaciones
Es necesario diferenciar Frente, Dorso y color de fondo
Imponer el uso de tres colores planos y diferentes

Limitaciones
El doblez se identifica mediante varios parámetros
Es una recta: al menos dos puntos
Es un tipo concreto de doblez: ¿qué parte se dobla?

Limitaciones
El doblez se identifica mediante varios parámetros
Es una recta: al menos dos puntos
Es un tipo concreto de doblez: ¿qué parte se dobla?
Los pasos deben ser almacenados correctamente
Base de datos

Estudiando el problema en conjunto...
Dispositivo m´ovil
Origami

Estudiando el problema en conjunto...
Dispositivo móvil
Origami
Plataforma que genera nuevas aplicaciones
Tutor–Programador: Aplicación del desarrollador
Programador–Usuario: Aplicación de usuario final

División del proyecto en dos aplicaciones
Diferentes usuarios, diferentes necesidades
El usuario final quiere feedback rápido: flujo de video
El tutor ya sabe los pasos: fotograf´ıas
Diferentes escenarios, diferentes procesados
Al crear la base de datos, el visto bueno lo da el tutor
Al usar la base de datos, la aplicación da el visto bueno

Aislar creaci´on y distribuci´on
Crear diferentes bases de datos para comercializar

Aislar creaci´on y distribuci´on
Crear diferentes bases de datos para comercializar
Dos aplicaciones sobre iOS

¿Qué procesado de imagen?
Procesado en color
Mejora de la calidad de imagen: Iluminación, sombras
Extracción de esquinas
Identificación de la forma de la figura: Esquinas

¿Qué sabemos de las sombras?
¿Qué provoca las sombras?
Elementos externos
La propia figura: bordes
Reducción de luz:
Oscurecimiento de una zona
de la imagen
¿Podemos aclarar un color?
Gracias a la representación
en espacio de color

Espacios de color
RGB: ¡No es f´acil moverse! HSV: Basta variar V

Procesado de color
Transformación RGB→HSV→RGB
Ecuaciones complejas: Lentas
Tabular los resultados (Look-Up Table) ()
Memoria: 256 × 256 × 256 × 3 × 4 ≈ 192Mbytes
iPhone 4: 512 Mbytes de RAM
Usar disco: Pérdida de velocidad
Diezmado: Pérdida de precisión
Agrupación de colores ()

Procesado de color
Ecuaciones complejas: Lentas
Tabular los resultados (Look-Up Table) ()
Memoria: 256 × 256 × 256 × 3 × 4 ≈ 192Mbytes
iPhone 4: 512 Mbytes de RAM
Usar disco: Pérdida de velocidad
Diezmado: Pérdida de precisión
Agrupación de colores ()
Acudir a transformaciones aproximadas y rápidas (!)

Procesado de color
Transformada r´apida RGB-HSV

Detección de esquinas
¿Qué caracter´ısticas debe tener un detector de esquinas?
Debe detectar todas las esquinas
No debe detectar esquinas donde no las hay
Tiene que ser robusto ante el ruido
Debe ser preciso en la localización de una esquina
¿Qué problemas podemos encontrar en la imagen?
Sombras
Desenfoque o imagen borrosa
Exceso o defecto de iluminación
Fallos hardware

Algoritmos de extracción de esquinas
FAST(-er)
Código liberado en C++
Usa escala de grises
fastn y fastn non max
non max suppression: Supresión de no máximos locales
Medida de Harris
Desarrollo matemático
Gran cantidad de cálculos: uso de GPU y flujo de video
Basado en intensidad lum´ınica de varios p´ıxeles

Extracci´on de esquinas: escala de grises
Mapear un universo tridimensional en uno unidimensional
PAL/Apple (FAST): Y = 0,299 × R + 0,587 × G + 0,114 × B
ITU-R BT.709 (Harris): Y = 0,2125 × R + 0,7154 × G + 0,0721 × B

Extracci´on de esquinas: escala de grises
Mapear un universo tridimensional en uno unidimensional
PAL/Apple (FAST): Y = 0,299 × R + 0,587 × G + 0,114 × B
ITU-R BT.709 (Harris): Y = 0,2125 × R + 0,7154 × G + 0,0721 × B
Colisiones en colores complejos

Extracción de esquinas en app del tutor: FAST
FAST
Parámetro clave: Contigüidad de n p´ıxeles

fast10 fast10 non max

fast10 fast11

Modelo h´ıbrido
fast10
Contigüidad 10px sobre circunferencia 16px
Algoritmo de supresión de duplicados propio
fastn non max elimina esquinas que no debe
Rcluster = 0,03 ·
√
W · H
Ajuste fino manual aprovechando la pantalla táctil
Borrar es más fácil que añadir

FAST: Rendimiento
Módulo/función Tiempo de proceso ¯t (ms)
Obtención del mapa de bits (CG) ≈ 690
RGB2HSVRapido (C++) ≈ 270
Giro de la imagen (CG) ≈ 670
Image2Grayscale (CG) ≈ 100
fast10 (C++) ≈ 17
Simplificar clúster /10u (C++) ≈ 6
Superposición RA /1u (UIKit) ≈ 5

FAST: Rendimiento
Módulo/función Tiempo de proceso ¯t (ms)
Obtención del mapa de bits (CG) ≈ 690
RGB2HSVRapido (C++) ≈ 270
Giro de la imagen (CG) ≈ 670
Image2Grayscale (CG) ≈ 100
fast10 (C++) ≈ 17
Simplificar clúster /10u (C++) ≈ 6
Superposición RA /1u (UIKit) ≈ 5
Tiempo total ≈ 2s

Extracción de esquinas en app de usuario: Medida Harris
Medida Harris
Parámetro clave: variación de la intensidad en ambas dimensiones
Robert Collins. Harris Corner Detector, 2007

Trabajo con flujo de video: Procesado Harris
OpenGL ES
Fragment Shaders
Vertex Shaders
Librer´ıa GPUImage
Cadena de procesado (filtros)
Escala de grises (ITU-R BT.709): dot
Derivada discreta: 2×convolución 2D con operador Prewitt
Gx =
−1 0 1
−1 0 1
−1 0 1
∗ I , Gy =
1 1 1
0 0 0
−1 −1 −1
∗ I
Limpieza: Desenfoque gaussiano
Medida Harris: R = R(Ix , Iy , Ixy , k)
Supresión de puntos no máximos locales (non max suppression)

Proceso en GPU: destructivo
El resultado del procesado
Harris no está en la CPU
La información está dispersa
por el mapa de bits
Pérdida de rendimiento
(iPhone 4, iOS 6):
Leer con glReadPixels()
≈ 90ms
Leer imagen p´ıxel a p´ıxel
≈ 30ms

Detección de figura correcta: Emparejado
Hay un flujo de video: movimientos
No puede ser emparejado perfecto
Esquinas de más o menos
Ligeras rotaciones y variaciones de perspectiva

Algoritmo propio
Fijar dos puntos extremos de la escena
Escalar distancias y calcular ´angulos respecto de ´estos
Buscar parejas punto a punto

Algoritmo propio
Fijar dos puntos extremos de la escena
Escalar distancias y calcular ángulos respecto de éstos
Buscar parejas punto a punto
El paso ha sido realizado correctamente si durante 4
fotogramas de los últimos 5 al menos un ratio mayor del 80 %
de los n elementos de la base de datos son emparejados sobre
los k elementos obtenidos del procesado en directo con no
más de un elemento del procesado no emparejado

Base de datos

Base de datos
nombreFigura: Demo
numeroFigura: 1
numeroPaso: 1
P1: x=85, y=162
P2: x=85, y=339
P3: x=263, y=331
P4: x=262, y=163

Base de datos
nombreFigura: Demo
numeroFigura: 1
numeroPaso: 1
P1: x=85, y=162
P2: x=85, y=339
P3: x=263, y=331
P4: x=262, y=163
+Doblez:
x1=26
x2=418
xe=298
y1=133
y2=537
ye=2581

Base de datos
nombreFigura: Demo
numeroFigura: 1
numeroPaso: 1
P1: x=85, y=162
P2: x=85, y=339
P3: x=263, y=331
P4: x=262, y=163
+Doblez:
x1=26
x2=418
xe=298
y1=133
y2=537
ye=2581
nombreFigura: Demo
numeroFigura: 1
numeroPaso: 2
P1: x=58, y=76
P2: x=354, y=377
P3: x=43, y=373

Base de datos
nombreFigura: Demo
numeroFigura: 1
numeroPaso: 1
siguientePaso: Paso2
P1: x=85, y=162
P2: x=85, y=339
P3: x=263, y=331
P4: x=262, y=163
+Doblez:
x1=26
x2=418
xe=298
y1=133
y2=537
ye=2581
nombreFigura: Demo
numeroFigura: 1
numeroPaso: 2
anteriorPaso: Paso1
P1: x=58, y=76
P2: x=354, y=377
P3: x=43, y=373

Tutor — Programador — Usuario
Origam-i dev.app
Aplicación del desarrollador
Reconocimiento de esquinas
Adición de información a ddbb
Interacción manual (edición)
Uso de fotograf´ıas
Realidad aumentada
Origam-i.app
Aplicación del usuario
Decisión sobre la forma
Lectura de la base de datos
Feedback visual
Uso del flujo de video
Realidad aumentada

Origam-i dev.app resumen
Origam-i dev.app
Amplio espacio de visualización
Esquinas y doblez: Realidad Aumentada
Pantalla táctil: botones y edición manual
Botones para el uso de funciones
Tocar para añadir
Ajuste fino con deslizamiento
Base de datos: CoreData

Origam-i dev.app resumen
Origam-i dev.app
1 Indicación de comienzo
2 Toma de fotograf´ıa / Carga desde carrete
3 Eliminación de sombras:
RGB→HSV→V=1→RGB
4 Detección de esquinas (FAST)
5 Visualización
6 Seleccionar doblez e introducir texto
7 Almacenamiento

Origam-i dev.app: Integraci´on del procesado
Imagen Original Value=1
Detecci´on esquinas

La aplicación del usuario final: Origam-i.app
Inicio Selección de figuras Principal

Origam-i.app: Flujo de uso
1 Selección de figura
Carga desde la ddbb
2 Procesado continuo del flujo de v´ıdeo
Cálculo Harris en GPU
Detección forma correcta/incorrecta: Matching
Cálculo RA
3 Visualización: fotograma + RA
4 Interacción del usuario (interrupción)

Origam-i.app: Realidad Aumentada
Mostrar texto de ayuda
Mostrar esquinas detectadas
Botones OK/Atr´as

Botones OK/Atr´as
Mostrar doblez

El problema del doblez
La escena tiene perspectiva
diferente al original
Nuevo sistema de coordenadas
Transformaci´on lineal a
partir de dos puntos
emparejados

Mostrar im´agenes
superpuestas

Control de estado de red
Sin conexión Conexión WiFi Conexión red móvil

Conclusiones
Juego educativo de origami con Realidad Aumentada para iOS
Estudiar caracter´ısticas de smartphone. Test ante apps exigentes
División en dos aplicaciones: desarrollador y usuario
Crear diferentes aplicaciones cambiando la base de datos
Uso de lo ofrecido por Apple: frameworks, librer´ıas,...
FAST obtienen buenos resultados y es rápido
Medida Harris permite usar OpenGL ES (GPU)
GPU–RAM es cuello de botella
Realidad Aumentada mediante CoreGraphics
Uso de redes sociales permite autopromoción
Internacionalización y Localización de manera simple

Trabajos futuros
Paso a la tercera dimensión: más figuras
Comercialización de la aplicación
Mejoras de rendimiento: emparejado, doblez
Portar la app a otros sistema móvil: Windows Phone/Android
Aumentar la virtualidad de la escena

Origam-i: Juego basado en Realidad Aumentada para iPhone (Santiago García Guillén)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Origam-i: Juego basado en Realidad Aumentada para iPhone (Santiago García Guillén)

Ähnlich wie Origam-i: Juego basado en Realidad Aumentada para iPhone (Santiago García Guillén) (20)

Mehr von Cristina Urdiales

Mehr von Cristina Urdiales (19)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Origam-i: Juego basado en Realidad Aumentada para iPhone (Santiago García Guillén)