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 Guillen

Dirigido por: Cristina Urdiales Garcıa

Escuela Tecnica Superior de Ingenierıa de Telecomunicacion

Universidad de Malaga

19 Mayo 2014

Introduccion Caracterısticas Procesado de imagen Aplicaciones Conclusiones

1 Introduccion a los dispositivos moviles

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 Guillen Mayo 2014


Explosion de los dispositivos moviles

� Dispositivos moviles del ahora: Smartphones y tabletas

� Desde ∼2009: explosion de ventas. Llegada al usuario medioI Reduccion de precioI Aparicion de la tecnologıa 3GI Mejora de sus capacidades y perifericos

I CPUI Pantalla tactilI Videocamara y GPUI Sistema de sonidoI GPSI Acelerometros

� Mercado se compartimenta segun plataforma

I iOS de Apple: iPhone y iPadI Android de Google junto a diferentes companıasI BlackberryI Windows Phone (Microsoft + Nokia)



Explosion de los dispositivos moviles

� Dispositivos moviles del ahora: Smartphones y tabletas

� Desde ∼2009: explosion de ventas. Llegada al usuario medioI Reduccion de precioI Aparicion de la tecnologıa 3GI Mejora de sus capacidades y perifericos

I CPUI Pantalla tactilI Videocamara y GPUI Sistema de sonidoI GPSI Acelerometros

� Mercado se compartimenta segun plataformaI iOS de Apple: iPhone y iPadI Android de Google junto a diferentes companıasI BlackberryI Windows Phone (Microsoft + Nokia)



Aplicaciones para smartphones

Un telefono ya no sirve solo para llamar: aplicaciones (apps)

� Smartphone: ordenador en la palma de la manoI Movilidad, maniobrabilidad, ergonomıa,...I Tiendas virtuales: App Store, Google Play

� Aplicaciones de todo tipoI UtilidadesI Comunicaciones y redes socialesI OfimaticaI MusicaI JuegosI TelemedicinaI Educativas



Aplicaciones para smartphones

Aplicaciones educativas: Sistemas interactivos tutorizados

X Simbiosis perfecta con sistemas moviles

X Tutorizacion mediante realimentacion usuario–movil

X Un smartphone es un ordenador en la palma de la manoI Siempre encimaI ManiobrabilidadI Mas ameno que leer un manual



Smartphones: evolucion

A lifetime of Apps. IEEE Spectrum Sep 2012 c©James Provost



¿Que vamos a hacer?

Sistema interactivo tutorizado

� Aportar know-how academico

� Desarrollar una aplicacion que permita probar las ventajas queofrecen los smartphones

� Crear un ejemplo de aplicacion interactiva tutorizadaI Tutor: tiene el conocimientoI Usuario: realiza el aprendizajeI Programador: aısla el conocimiento del tutor y lo ofrece al

usuario

X Origam-i: Juego basado en procesado de imagen para iPhoneI Captura del entorno: videocamaraI Realimentacion hacia el usuario: Pantalla tactilI Alto consumo de CPU/GPU: procesado en directo



Realidad Aumentada

� Version mejorada de la realidad superponiendo informacion digital

� Toma de datos del entorno, procesado y representacion

� No es imprescindible, pero se ajusta perfectamenteI Forma mas intuitiva de ensenar: mostrar en directoI Aplicaciones de altos requerimientos



Eleccion de plataforma: iPhone y iOS

� iOS: iPhone OS, lanzado en 2007

� Version actual: iPhone 5S/5C y iOS 7.0

� ¿Por que iPhone? Pocos dispositivos, pocas versiones SO

� Programacion en Objective-CI Extension POO del lenguaje C. Sintaxis propia

� SDK y entorno de desarrollo proporcionado por Apple



Arquitectura logica iOS

Capas Logicas en iOS



Patrones de diseno

Patron de diseno (templates): Solucion reutilizable a problemas comunes

� Modelo–Vista–Controlador (MVC)

� Paso de mensajes: NSNotificationCenter

� Delegacion



Caracterısticas del origami

La papiroflexia —u origami en japones— es el arte de plegar unpapel para obtener figuras de formas variadas

Caracterısticas:

� Cada figura se compone de diferentes pasos ordenados

� Cada paso tiene una forma unica

� 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 tridimensionalesI Easy Origami: Solo 2D

� Es necesario aislar caracterısticas que identifiquen la forma

� Existen zonas de sombra y el color no es constante

I Procesado de imagen: deteccion de esquinas, color

� Es necesario diferenciar Frente, Dorso y color de fondo

I Imponer el uso de tres colores planos y diferentes

� El doblez se identifica mediante varios parametros

I Es una recta: al menos dos puntosI Es un tipo concreto de doblez: ¿que parte se dobla?

� Los pasos deben ser almacenados correctamente

I Base de datos



Limitaciones



� Existen zonas de sombra y el color no es constanteI Procesado de imagen: deteccion de esquinas, color

� Es necesario diferenciar Frente, Dorso y color de fondo

I Imponer el uso de tres colores planos y diferentes




I Base de datos



Limitaciones




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




I Base de datos



Limitaciones





� El doblez se identifica mediante varios parametrosI Es una recta: al menos dos puntosI Es un tipo concreto de doblez: ¿que parte se dobla?


I Base de datos



Limitaciones





� El doblez se identifica mediante varios parametrosI Es una recta: al menos dos puntosI Es un tipo concreto de doblez: ¿que parte se dobla?

� Los pasos deben ser almacenados correctamenteI Base de datos



Estudiando el problema en conjunto...

� Sistema interactivo tutorizado

� Dispositivo movil

� Origami

X Plataforma que genera nuevas aplicacionesI Tutor–Programador: Aplicacion del desarrolladorI Programador–Usuario: Aplicacion de usuario final



Division del proyecto en dos aplicaciones

� Diferentes usuarios, diferentes necesidadesI El usuario final quiere feedback rapido: flujo de videoI El tutor ya sabe los pasos: fotografıas

� Diferentes escenarios, diferentes procesadosI Al crear la base de datos, el visto bueno lo da el tutorI Al usar la base de datos, la aplicacion da el visto bueno

� Aislar creacion y distribucion

I Crear diferentes bases de datos para comercializar






� Aislar creacion y distribucionI Crear diferentes bases de datos para comercializar






� Aislar creacion y distribucionI Crear diferentes bases de datos para comercializar

Dos aplicaciones sobre iOS



¿Que procesado de imagen?

� Procesado en colorI Mejora de la calidad de imagen: Iluminacion, sombras

� Extraccion de esquinasI Identificacion de la forma de la figura: Esquinas



¿Que sabemos de las sombras?

� ¿Que provoca las sombras?I Elementos externosI La propia figura: bordes

� Reduccion de luz:I Oscurecimiento de una zona

de la imagen

� ¿Podemos aclarar un color?I Gracias a la representacion

en espacio de color



Espacios de color

RGB: ¡No es facil moverse! HSV: Basta variar V



Procesado de color

Transformacion RGB→HSV→RGB

� Ecuaciones complejas: LentasI Tabular los resultados (Look-Up Table) (7)

I Memoria: 256× 256× 256× 3× 4 ≈ 192MbytesI iPhone 4: 512 Mbytes de RAMI Usar disco: Perdida de velocidadI Diezmado: Perdida de precision

I Agrupacion de colores (7)

I Acudir a transformaciones aproximadas y rapidas (!)



Procesado de color


� Ecuaciones complejas: LentasI Tabular los resultados (Look-Up Table) (7)

I Memoria: 256× 256× 256× 3× 4 ≈ 192MbytesI iPhone 4: 512 Mbytes de RAMI Usar disco: Perdida de velocidadI Diezmado: Perdida de precision

I Agrupacion de colores (7)I Acudir a transformaciones aproximadas y rapidas (!)



Procesado de color


Transformada rapida RGB-HSV



Deteccion de esquinas

¿Que 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 localizacion de una esquina

¿Que problemas podemos encontrar en la imagen?

� Sombras

� Desenfoque o imagen borrosa

� Exceso o defecto de iluminacion

� Fallos hardware



Extraccion de esquinas

Algoritmos de extraccion de esquinas

� FAST(-er)I Codigo liberado en C++I Usa escala de grisesI fastn y fastn non max

I non max suppression: Supresion de no maximos locales

� Medida de HarrisI Desarrollo matematicoI Gran cantidad de calculos: uso de GPU y flujo de videoI Basado en intensidad lumınica de varios pıxeles




Extraccion 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




Extraccion 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



Extraccion de esquinas en app del tutor: FAST

FAST

Parametro clave: Contiguidad de n pıxeles




fast10 fast10 non max




fast10 fast11




X Modelo hıbridoI fast10

I Contiguidad 10px sobre circunferencia 16px

I Algoritmo de supresion de duplicados propioI fastn non max elimina esquinas que no debeI Rcluster = 0,03 ·

√W · H

I Ajuste fino manual aprovechando la pantalla tactilI Borrar es mas facil que anadir



FAST: Rendimiento

Modulo/funcion Tiempo de proceso t (ms)

Obtencion del mapa de bits (CG) ≈ 690

RGB2HSVRapido (C++) ≈ 270

Giro de la imagen (CG) ≈ 670

Image2Grayscale (CG) ≈ 100

fast10 (C++) ≈ 17

Simplificar cluster /10u (C++) ≈ 6

Superposicion RA /1u (UIKit) ≈ 5



FAST: Rendimiento

Modulo/funcion Tiempo de proceso t (ms)

Obtencion del mapa de bits (CG) ≈ 690

RGB2HSVRapido (C++) ≈ 270

Giro de la imagen (CG) ≈ 670

Image2Grayscale (CG) ≈ 100

fast10 (C++) ≈ 17

Simplificar cluster /10u (C++) ≈ 6

Superposicion RA /1u (UIKit) ≈ 5

Tiempo total ≈ 2s



Extraccion de esquinas en app de usuario: Medida Harris

Medida Harris

Parametro clave: variacion de la intensidad en ambas dimensiones

Robert Collins. Harris Corner Detector, 2007




� Trabajo con flujo de video: Procesado HarrisI OpenGL ES

I Fragment ShadersI Vertex Shaders

I Librerıa GPUImage

� Cadena de procesado (filtros)I Escala de grises (ITU-R BT.709): dotI Derivada discreta: 2×convolucion 2D con operador Prewitt

I Gx =(−1 0 1

−1 0 1−1 0 1

)∗ I , Gy =

(1 1 10 0 0−1 −1 −1

)∗ I

I Limpieza: Desenfoque gaussianoI Medida Harris: R = R(Ix , Iy , Ixy , k)I Supresion de puntos no maximos locales (non max suppression)




� Proceso en GPU: destructivo

� El resultado del procesadoHarris no esta en la CPU

� La informacion esta dispersapor el mapa de bits

� Perdida de rendimiento(iPhone 4, iOS 6):

I Leer con glReadPixels()≈ 90ms

I Leer imagen pıxel a pıxel≈ 30ms



Deteccion de figura correcta: Emparejado

� Hay un flujo de video: movimientos

� No puede ser emparejado perfectoI Esquinas de mas o menosI Ligeras rotaciones y variaciones de perspectiva

X Algoritmo propioI Fijar dos puntos extremos de la escenaI Escalar distancias y calcular angulos respecto de estosI Buscar parejas punto a punto

X El paso ha sido realizado correctamente si durante 4fotogramas de los ultimos 5 al menos un ratio mayor del 80 %de los n elementos de la base de datos son emparejados sobrelos k elementos obtenidos del procesado en directo con nomas de un elemento del procesado no emparejado



Base de datos



Base de datos

nombreFigura: DemonumeroFigura: 1numeroPaso: 1

P1: x=85, y=162P2: x=85, y=339P3: x=263, y=331P4: x=262, y=163



Base de datos


P1: x=85, y=162P2: x=85, y=339P3: x=263, y=331P4: x=262, y=163

+Doblez:x1=26

x2=418xe=298

y1=133y2=537ye=2581



Base de datos


P1: x=85, y=162P2: x=85, y=339P3: x=263, y=331P4: x=262, y=163

+Doblez:x1=26

x2=418xe=298

y1=133y2=537ye=2581


P1: x=58, y=76P2: x=354, y=377P3: x=43, y=373



Base de datos

nombreFigura: DemonumeroFigura: 1numeroPaso: 1siguientePaso: Paso2

P1: x=85, y=162P2: x=85, y=339P3: x=263, y=331P4: x=262, y=163

+Doblez:x1=26

x2=418xe=298

y1=133y2=537ye=2581

nombreFigura: DemonumeroFigura: 1numeroPaso: 2anteriorPaso: Paso1

P1: x=58, y=76P2: x=354, y=377P3: x=43, y=373




Tutor — Programador — Usuario

� Origam-i dev.appI Aplicacion del desarrolladorI Reconocimiento de esquinasI Adicion de informacion a ddbbI Interaccion manual (edicion)I Uso de fotografıasI Realidad aumentada

� Origam-i.appI Aplicacion del usuarioI Decision sobre la formaI Lectura de la base de datosI Feedback visualI Uso del flujo de videoI Realidad aumentada



Origam-i dev.app resumen

Origam-i dev.app

Amplio espacio de visualizacion

Esquinas y doblez: Realidad Aumentada

Pantalla tactil: botones y edicion manual

Botones para el uso de funciones

Tocar para anadir

Ajuste fino con deslizamiento

Base de datos: CoreData



Origam-i dev.app resumen

Origam-i dev.app

1 Indicacion de comienzo

2 Toma de fotografıa / Carga desde carrete

3 Eliminacion de sombras:RGB→HSV→V=1→RGB

4 Deteccion de esquinas (FAST)

5 Visualizacion

6 Seleccionar doblez e introducir texto

7 Almacenamiento



Origam-i dev.app: Integracion del procesado

Imagen Original Value=1Deteccion esquinas



La aplicacion del usuario final: Origam-i.app

Inicio Seleccion de figuras Principal



Origam-i.app: Flujo de uso

1 Seleccion de figuraI Carga desde la ddbb

2 Procesado continuo del flujo de vıdeoI Calculo Harris en GPUI Deteccion forma correcta/incorrecta: MatchingI Calculo RA

3 Visualizacion: fotograma + RA

4 Interaccion del usuario (interrupcion)



Origam-i.app: Realidad Aumentada

� Mostrar texto de ayuda

� Mostrar esquinas detectadas

� Botones OK/Atras

� Mostrar doblez

� Mostrar imagenessuperpuestas




El problema del doblez

� La escena tiene perspectivadiferente al original

� Nuevo sistema de coordenadas

I Transformacion lineal apartir de dos puntosemparejados




� Mostrar texto de ayuda

� Mostrar esquinas detectadas

� Botones OK/Atras

� Mostrar doblez

� Mostrar imagenessuperpuestas



Control de estado de red

Sin conexion Conexion WiFi Conexion red movil



Conclusiones

X Juego educativo de origami con Realidad Aumentada para iOS

X Estudiar caracterısticas de smartphone. Test ante apps exigentes

X Division en dos aplicaciones: desarrollador y usuario

I Crear diferentes aplicaciones cambiando la base de datos

X Uso de lo ofrecido por Apple: frameworks, librerıas,...

X FAST obtienen buenos resultados y es rapido

X Medida Harris permite usar OpenGL ES (GPU)

I GPU–RAM es cuello de botella

X Realidad Aumentada mediante CoreGraphics

X Uso de redes sociales permite autopromocion

X Internacionalizacion y Localizacion de manera simple



Trabajos futuros

� Paso a la tercera dimension: mas figuras

� Comercializacion de la aplicacion

� Mejoras de rendimiento: emparejado, doblez

� Portar la app a otros sistema movil: Windows Phone/Android

� Aumentar la virtualidad de la escena


¿Preguntas?

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

Engineering

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