Trabajo de Fin de Grado

Tecnologas de realidad virtual

para el tratamiento de ambliopa
en adultos
Virtual reality technologies the treatment of amblyopia for
adults
Nstor Via Len

La Laguna, 8 de septiembre de 2015

D. Isabel Snchez Berriel, con N.I.F. 12.345.678-X profesora

Colaboradora adscrita al Departamento de Ingeniera Informtica y Sistemas
de la Universidad de La Laguna, como tutora

D. Rafael Melin Villalobos, con N.I.F. 12.345.678-X como cotutor.

C E R T I F I C A (N)

Que la presente memoria titulada:

Tecnologas de realidad virtual para el tratamiento de ambliopa en adultos

ha sido realizada bajo su direccin por D. Nstor Via Len,

con N.I.F. 54.114.111-X.

Y para que as conste, en cumplimiento de la legislacin vigente y a los

efectos oportunos firman la presente en La Laguna a 6 de septiembre de 2015

Para mi abuela Matilde, porque nosotros siempre

fuimos su proyecto.

Licencia

Esta obra est bajo una licencia de Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 4.0
Internacional.

Resumen
Con este trabajo se ha tratado de explorar las posibilidades de la realidad
virtual como tratamiento para la ambliopa en adultos, algo comnmente
imposible hasta ahora.
Hasta hace poco tiempo se crea que la ambliopa (tambin llamada ojo vago)
era incurable para las personas adultas que la padecan. Algunos estudios
tratan de exponer lo contrario, han obtenido resultados usando ejercicios
parecidos a videojuegos. Pero an todos estos estudios no han desembocado en
un tratamiento. Elegimos como hardware para el tratamiento cascos de
realidad virtual porque creemos firmemente que esto supone una ventaja para
el propsito planteado.
De ah nace este trabajo, de la necesidad de explorar nuevas maneras de crear
tratamientos para la ambliopa y que sirva como referencia para la creacin
de futuros tratamientos.
Palabras clave: Realidad virtual, ambliopa, tratamiento

Abstract
This work has tried to explore the possibilities of virtual reality as a
treatment for amblyopia in adults, something usually impossible until now.
Until recently it was believed that amblyopia (also called lazy eye) was
incurable for adults that suffered. Some studies try to explain otherwise have
obtained similar results using video games exercises. But even these studies
have not led to a treatment. We choose as hardware for the treatment virtual
reality helmets because we firmly believe that this is an advantage for
treatment.
Thus it was born this work, the need to explore new ways to create treatments
for amblyopia and serve as a reference for the creation of future treatments.

Keywords: Virtual Reality, Amblyopia, Treatment

36

ndice general
Captulo 1 Introduccin..................................................................11
1.1 Antecedentes.........................................................................................11
Captulo 2 Eleccin de herramientas .............................................20
2.2 Mono Develop.......................................................................................21
2.3 Cardboard SDK for Unity.....................................................................21
2.4 Plugin para reproducir video en Android..............................................22
2.5 Lenguaje de programacin C#..............................................................22
2.6 Shaders GLSL.......................................................................................22
Captulo 3 Desarrollo Tcnico.........................................................25
3.1.1 Desarrollo del visor de memes.........................................................26
3.1.2 Desarrollo del efecto para la ambliopa...........................................30
3.1.3 Desarrollo del visor de vdeos..........................................................32
3.1.4 Desarrollo del Breakout..................................................................33
3.1.5 Desarrollo del Men........................................................................35
Captulo 4 Conclusiones y lneas futuras........................................37
Captulo 6 Presupuesto ..................................................................39

ndice de Figuras
Figura 1.1: EjemploCaptura de pantalla de una de las aplicaciones que
tratan de mejorar la ambliopa con el sistema anaglfico...........................12
Figura 1.2: Google Cardboard, con un Nexus 5 abierto.........................14
Figura 1.3: Ejemplo Gear VR, el producto de Samsung para la realidad
virtual........................................................................................................15
Figura 1.4: Ejemplo Estimaciones de Business Insider acerca del futuro
crecimiento de la realidad virtual..............................................................16
Figura 1.5: Ejemplo Imagen en side-by-side estereoscpica.....................17
Figura 2.1: EjemploEntorno del editor de Unity3D.................................20
Figura 2.2: Ejemplo Logo de Mono Develop............................................21
Figura 2.3: EjemploShaders funcionando en tiempo real con Directx......23
Figura 2.4: Ejemplo Demo de Opengl ES usando shaders en dispositivos
mviles.......................................................................................................24
Figura 2.5: Ejemplo Shader de terciopelo funcionando con Directx 11....24
Figura 3.1: Ejemplo Ejemplo de un meme cualquiera de internet...........26
Figura 3.2: Ejemplo Esquema de la relacin y funcionamiento entre las
webs de memes y el mdulo de gestin de memes de la aplicacin...........29
Figura 3.3: Ejemplo Primera propuesta del prototipo.............................30
Figura 3.4: Ejemplo Segunda propuesta..................................................31
Figura 3.5: Ejemplo Reproductor de memes funcionando con el efecto
visual aplicado...........................................................................................32
Figura 3.6: Ejemplo Reproductor de vdeo funcionando con el efecto visual
aplicado.....................................................................................................33
Figura 3.7: Ejemplo Captura de pantalla en el nivel 1 del Breakout.......34
Figura 3.8: Ejemplo Captura de pantalla en el nivel 3 del Breakout.......35
Figura 3.9: Ejemplo Panel de configuracin que permite seleccionar el ojo

afectado.....................................................................................................36
Figura 3.10: Ejemplo Panel para reproducir un vdeo.............................36

ndice de tablas
Tabla 6.1: Presupuesto................................................................................39

Captulo 1
Introduccin
Es apropiado comenzar describiendo a qu est orientado el tratamiento,
qu es la ambliopa: Hasta hace poco tiempo se crea que la ambliopa
(tambin llamada ojo vago) era incurable para las personas adultas que la
padecan.
La ambliopa (del griego [ambls], dbil, y [ops], ojo) es una
disminucin de la agudeza visual sin que exista ninguna lesin orgnica que la
justifique.1 Puede existir algn defecto en el ojo (por ejemplo, una miopa),
pero ste no justifica la prdida de visin. Generalmente la afectacin es
unilateral y se produce como consecuencia de falta de estimulacin visual
adecuada durante el perodo crtico de desarrollo visual, lo que afecta a los
mecanismos neuronales encargados de la visin. Est presente en un 4 por
ciento de la poblacin. - Wikipedia [consulta 19 de septiembre de 2014]
A partir de los 8 aos de edad se consideraba que era irreversible pero
algunos experimentos han demostrado que con estmulos visuales se pueden
conseguir resultados con mejora. A pesar de que estos experimentos han sido
bastante exitosos, esta idea an no se ha concebido ms all del experimento.
Este proyecto trata de crear una aplicacin que acte como tratamiento del
ojo amblope y que no solo funcione en nios sino tambin en adultos. Para
ello se usarn cascos de realidad virtual y smartphones.

1.1

Antecedentes

Existen varios experimentos que afirman que hay una mejora en el ojo vago
al someterlo bajo un entrenamiento con ejercicios visuales [1]. En los
ejercicios se usaban videojuegos convencionales durante un nmero
determinado de horas semanales y ocluyendo con un parche uno de los ojos de
los sujetos de prueba. Despus de varios meses presentaban sntomas de
mejora.
Tambien se pueden encontrar referentes de aplicacin que han sido un

intento de conseguir lo que persigue este proyecto pero de una forma menos
efectiva. Se trata de aplicaciones que manipulan la informacin que percibe
cada ojo para as desarrollar un ejercicio concreto. De esta forma puede
eliminar informacin del ojo sano y mostrarla en el ojo afectado y as forzarlo
a tratar de percibir la imagen binocular. El problema de esta aplicacin es
que para enviar la informacin a cada ojo utiliza el sistema anaglifo con las
gafas rojo/cyan y extrae de una imagen la informacin para los dos ojos. sto
es una barrera que impide realizar todos los ejercicios, solo se puede eliminar
informacin de uno de los dos ojos. Con un casco de realidad virtual podemos
controlar totalmente que imagen se visualiza con cada ojo y realizar
actividades ms complejas.

Figura 1.1: EjemploCaptura de pantalla de una de las aplicaciones que tratan de mejorar la
ambliopa con el sistema anaglfico

En la imagen superior se muestra una captura de pantalla de una de las

aplicaciones mencionadas previamente. Hay dos objetivos azules y la serpiente
en rojo. A travs de la lente roja solo veremos los objetivos y a travs de la
lente cyan solo veremos la serpiente, lo que obliga al usuario a usar los dos
ojos para poder continuar jugando. Cuando lo pruebas percibes anomalas en
los colores y puede resultar incmodo. Se producen efectos como el ghosting,
que sucede porque al percibir la informacin de una misma imagen a veces se
percibe un color que est destinado a un ojo en el otro. Tampoco se
percibirn
nunca
los
colores
como
exactamente
deberan
ser

(http://nzphoto.tripod.com/sterea/anaglyphs.htm).

1.2

Definicin de de objetivos

Los objetivos planteados son:

Desarrollar una aplicacin con las siguientes caractersticas:
Compatible con cascos de realidad virtual
Eficiente para que pueda funcionar en la mxima cantidad de
smartphones
Eficaz como tratamiento de la ambliopa
Que no aburra al usarla, y permita as su uso prolongado
Investigar en colaboracin con el co-tutor oftalmlogo:
Los ejercicios visuales que permiten la mejora de la ambliopa
Cmo medir la efectividad del tratamiento
Cmo crear el tratamiento evitando agravar otros defectos de la
vista
Aprender
Cmo desarrollar shaders GLSL
El uso del software Unity3D
Trabajar con otras materias como la oftalmologa
C#
Ayudar a mucha gente

1.3

Introduccin: VR para smartphones

Para entender cul es el alcance se debe entender como funciona la realidad

virtual y que dificultades tcnicas nos presenta.
La realidad virtual para smartphone es una tecnologa de reciente creacin
que permite al usuario tener la sensacin de estar en un lugar ficticio o vivir
experiencias ficticias.
El funcionamiento de la mayora de cascos que utilizan esta tecnologa es
muy sencillo. Existen una carcasa o casco con dos lentes y una estructura
para sujetar el smartphone. En el smartphone se proyecta una imagen que las

lentes enfocan a esa distancia respecto al ojo. Cada lente enfoca la mitad de
la pantalla del smartphone, que est procesando la imagen a mostrar. A
travs del acelermetro, giroscopio y brjula se puede determinar la direccin
a la que est orientado el smartphone y as replicar los movimientos de la
cabeza en la cmara virtual que est renderizando lo que se ve en la pantalla.
Con esto conseguimos que movimientos de nuestra cabeza tengan efecto en el
entorno virtual como si fuera real.

Figura 1.2: Google Cardboard, con un Nexus 5 abierto

En versiones ms avanzadas nos podemos encontrar con nuevas

caractersticas que aumentan la calidad de la experiencia. En cuanto a la
ptica algunos cascos vienen con unas lentes que permiten un campo de visin
superior y por lo tanto aumentan la capacidad inmersiva. Tambin vienen con
mecanismos para regular el enfoque y la distancia interpupilar. En algunos se
han desarrollado botones e incluso paneles tctiles para mejorar el input como
en el caso del Samsung Gear VR.

Figura 1.3: Ejemplo Gear VR, el producto de Samsung para la realidad virtual

Entre una de las caractersticas que ms interesan al proyecto est la

capacidad de controlar la informacin que se enva a cada ojo.
Tambin es interesante su reducido coste y amplia gama de calidades, lo
que permite que las aplicaciones desarrolladas para VR sean ms accesibles.
Aunque esto es una situacin pasajera, todo apunta a que la realidad virtual
se va a generalizar tanto como lo han hecho los smartphones, y ahora solo
estamos en el comienzo. Business Insider apunta que el crecimiento de venta
de cascos ser muy elevado en los prximos aos lo que har ms accesible a
la aplicacin.

Figura 1.4: Ejemplo Estimaciones de Business Insider acerca del futuro crecimiento de la realidad virtual

1.4

Planteamiento de requisitos

El tratamiento ser una aplicacin que funcionar en smartphones Android,

y deber ser compatible con los cascos de realidad virtual orientados a
smartphone. El reducido precio de los cascos para realidad virtual permite
que la aplicacin pueda ser usada por ms usuarios.
Los ejercicios son visuales, se hace necesario el desarrollo de grficos 2D y
3D en tiempo real para recrear las distintas actividades. El uso del casco
tambin requiere que estas actividades estn en formato side-by-side (SBS).
El formato side-by-side es una tcnica estndar de visualizacin de grficos
que permite visualizar contenido en cascos de realidad virtual y almacenar
informacin estereoscpica (ms conocido como visin 3D). Para ello se coloca
la informacin de cada ojo a cada lado de una imagen, video o render. Al
visualizar sto con un casco de realidad virtual se percibe en estreo con
profundidad.

Figura 1.5: Ejemplo Imagen en side-by-side estereoscpica

Como dispositivos de entrada disponemos de los propios sensores del

smartphone y los gamepads externos. Con ellos debemos de crear mens y
eventos que nos permitan controlar las actividades.
Para el funcionamiento correcto de la aplicacin-tratamiento el usuariopaciente tiene que cumplir con su uso. Por ello se acordaron varios ejercicios
que simplemente fueran actividades comunes realizadas de forma que fueran el
propio ejercicio:
Breakout adaptado para la ambliopa: el Breakout es un juego que
todo el mundo conoce. Adems los elementos en movimiento en el juego
son propicios para el ejercicio. Se tendr que adaptar para su uso en
SBS y tambin para que no sea aburrido y se pueda jugar durante el
periodo del tratamiento.
Visor de memes: actualmente los memes tienen muchos seguidores
jvenes en espaa que pueden pasarse horas viendo imgenes. Se
aprovecharn estas imgenes y la informacin de internet para conseguir
un flujo continuo de informacin que el paciente quiera ver, y as
adaptarla al tratamiento.
Visor de vdeo para ambliopa: prcticamente todo el mundo disfruta
de algn tipo de contenido audiovisual: series, pelculas, etc.. el visor

permitir disfrutarlos mientras se lleva a cabo el tratamiento.

1.5

Alcance

El alcance del proyecto comprende los siguientes puntos:

Menu en VR que permite:
Indicar el ojo afectado por la ambliopa
Seleccionar el video que queremos visualizar con el reproductor
de vdeos
Seleccionar cada actividad
Visin en SBS
Breakout
Mecnicas bsicas del breakout
Fsica irreal de la bola del breakout
Dificultad incremental aumentando el nmero de ladrillos
Interfaz sealando nmero de vidas y nivel actual
Compatibilidad con gamepads android
Visin en SBS
Escalado de todos los elementos visuales del juego en funcin
del tamao de pantalla.
Modificaciones para ejercitar el ojo vago
Visor de memes
Compatibilidad con gamepads android
Obtencin de imgenes a partir de webs usando expresiones
regulares
Sistema de carga y descarga de imgenes activo que se ocupa de
minimizar los tiempos de carga que pueda provocar su uso as
como regular el uso de memoria.
Capacidad de navegacin por el meme.
Modificaciones para ejercitar el ojo vago
Escalado de las imgenes en funcin de su tamao y el tamao
de pantalla

 Visin en SBS
Reproductor de videos
Capacidad de reproducir todos los vdeos mp4 y 3gp situados en
/sdcard/Movies/
Escalado del vdeo en funcin del tamao de pantalla.
Visin en SBS
Uso de shader GLSL para crear el efecto necesario para ejercitar
el ojo vago en el vdeo.
Reproduccin en mltiples geometras para cada ojo.

1.6 Destinatarios
Como destinatario tenemos a las personas afectadas por el ojo amblope.
Con seguridad ser efectiva hasta los 10 aos y a partir de esa edad hay que
probar con los pacientes y determinar si lo ha sido.

Captulo 2
Eleccin de herramientas
Las herramientas han sido seleccionadas para cumplir con los requisitos.

2.1

Unity3D

Unity3D es un software con licencia gratuita que permite el desarrollo de

aplicaciones de grficos interactivos 2D o 3D en tiempo real (videojuegos,
simulacin, etc) en mltiples plataformas (windows, linux, Mac, Android,
iOS). Permitir desarrollar para Android la aplicacin y tenerla preparada
para otras futuras plataformas con mucho trabajo ya realizado. Adems est
tan extendido que la mayora de plugins o SDK tienen compatibilidad con l.
Tambin est muy estandarizado su uso para realidad virtual.
Tiene herramientas para: disear mapas, crear/aplicar materiales, importar
modelos 3D, debuggear la aplicacin, profiler para medir el rendimiento, crear
iluminacin, fsicas 2D/3D, etc
El uso de Unity3D, sus herramientas y su API acelerarn el desarrollo del
proyecto y cumplir con las necesidades bsicas.

Figura 2.1: EjemploEntorno del editor de Unity3D

2.2

Mono Develop

Mono es un IDE multiplataforma que usaremos para el desarrollo del

cdigo de la aplicacin y la gestin del mismo.
Soporta completado de cdigo automtico, plantillas, plegado de cdigo,
refactorizacin. Tiene herramientas para diversas tareas tiles: un debugger
de cdigo, makefiles, unit testing, etc.

Figura 2.2: Ejemplo Logo de Mono Develop

2.3

Cardboard SDK for Unity

Es un SDK para la creacin de aplicaciones de realidad virtual para

smartphones. Permite crear aplicaciones, adaptar las existentes o hacer una
aplicacin que funcione en el smartphone con o sin la compatibilidad con la
realidad virtual. Su principal objetivo es la compatibilidad con la gama
Google Cardboard.
Provee de caractersticas tiles para el proyecto:
Head tracking: a travs de los sensores del smartphone es capaz de
saber la rotacin de la cabeza del usuario para as mostrarle lo que hay
en esa direccin en la escena virtual.
Side-by-side stereo rendering: permite visualizar la escena 3D en

estreo y con cascos de realidad virtual.

Correccin de distorsiones de las lentes
Correccin de giro de los sensores.

2.4
Plugin para reproducir video en
Android
Permite la reproduccin de video en texturas de Unity, algo necesario para
el desarrollo de la actividad que funciona con video. Permite aplicar distintos
materiales al video y aplicarlos a cualquier geometra 3D, fundamental para
manipular la imagen. Tambin nos permite las acciones tpicas de un vdeo a
travs de cdigo como pausar, reproducir, ir al minuto y segundo X.

2.5

Lenguaje de programacin C#

C# es un lenguaje de programacin moderno, flexible, con un alto nivel de

abstraccin y con un buen rendimiento. Es la evolucin de C y C++. Sus
caractersticas principales como lenguaje:es de tipado fuerte, declarativo,
imperativo, funcional, genrico y orientado a objetos. Dispone de un Garbage
Collector que se encarga de seleccionar toda la memoria que ya no est
siendo usada por el software y la libera, sto es ms cmodo desde el punto de
vista del desarrollador pero afecta al rendimiento si lo comparamos con c++
o una gestin propia de la memoria. En comparacin a c++ que permite
herencia mltiple, C# est limitado a herencia simple aunque dispone de
interfaces.
En este proyecto se usa C# como lenguaje de programacin y la API de
Unity3D principalmente. El compilador de Mono genera un bytecode
multiplataforma.

2.6

Shaders GLSL

Los shaders son un tipo de programa muy especfico que nace en el mbito
de la computacin de grficos para crear sombreados realistas en aplicaciones
grficas en tiempo real, de ah su nombre. Una vez superado el problema de
los sombreados se empez a usar para efectos visuales diferentes dado que
eran muy eficientes y flexibles. Los shaders fueron creados para su ejecucin
dentro de la unidad de procesamiento grfico(GPU) principalmente y a la
hora de desarrollarlos hay que seguir una serie de consideraciones respecto al

hardware que se usa. Son ampliamente usados en la industria del cine, de la

infografa y los videojuegos.
Con ellos se pueden conseguir acabados hiperrealistas de materiales como
piedra, madera, porcelana, cristal. Tambin podemos conseguir efectos ms
irreales

Figura 2.3: EjemploShaders funcionando en tiempo real con Directx

Hay distintos lenguajes con los que podemos desarrollar un shader como
GLSL, HLSL, CG y FX. Dependiendo de la plataforma usaremos uno u otro.
En en el caso de este proyecto, est orientado a Android y ste usa Opengl ES
que tiene como lenguaje de shaders GLSL.

Figura 2.4: Ejemplo Demo de Opengl ES usando shaders en dispositivos mviles

Figura 2.5: Ejemplo Shader de terciopelo funcionando con Directx 11

Captulo 3
Desarrollo Tcnico
En base a los requisitos, objetivos y alcance, este captulo describe el
proceso y los detalles de la ejecucin tcnica del desarrollo del proyecto. En l
figuran las fases de desarrollo, los problemas que han aparecido y cmo se han
solventado.
Comenzaremos con el anlisis y la visin general inicial que se hizo del
proyecto antes de la creacin de la primera lnea de cdigo.

3.1 Anlisis inicial

Lo primero que se aprecia es que el proyecto a un alto nivel est dividido en
cuatro partes de las cuales tres son las actividades independientes y la
restante (el men) actuar como va de acceso a las tres actividades. Estas
actividades son el el visor de memes, Breakout y el reproductor de vdeo, que
junto con el men suponen 4 grandes bloques de desarrollo.
Tienen funcionalidades con conexin entre s, lo que nos permite reutilizar
cdigo y pone en valor identificar bien con que cdigo podemos hacerlo dado
que facilita el desarrollo si lo tenemos en cuenta desde el principio:
La necesidad de que el contenido a visualizar sea redimensionado en
funcin del tamao de pantalla es parecida en el visor de memes y en el
reproductor de vdeo. La diferencia es que el visor de memes permite
que sobresalgan verticalmente las imgenes para navegar a travs de
ellas posteriormente y el visor de vdeos no. Aunque no se pudo adaptar
un cdigo comn debido a las necesidades particulares de cada
redimensin, s que se pudo reutilizar parte de el cdigo del visor de
vdeos modificado en el visor de memes.
Reconocimiento de comandos comunes. Todas las aplicaciones tienen
un botn de accin y un botn de regreso al men comn.

 Shader GLSL: usar un shader nos permite cambiar cualquier textura

y modificar cmo se visualiza para que se realice el ejercicio visual, de
esta manera todo lo que podamos representar en una imagen podramos
convertirlo en un ejercicio con un mismo cdigo. Los shaders son una
tecnologa muy eficiente que permite hacer efectos imposibles de hacer
eficientemente de otra forma en mviles. El visor de memes es al fin y al
cabo un visualizador de imgenes y el reproductor de vdeo es un
reproductor de una secuencia de imgenes y audio. Si les aplicamos este
shader a esas imgenes podremos adaptarlo fcilmente para que sean un
ejercicio. Tambin sirve de base para futuras aplicaciones o un SDK
para la ambliopa.

3.1
3.1.1

Fases del desarrollo

Desarrollo del visor de memes

Decid empezar con uno de los ejercicios, el visor de memes, y terminarlo.

De esta forma me permitira encontrarme con muchas dificultades tcnicas
que una vez aprendidas sera ms fcil superar en el resto de actividades, y en
el mejor de los casos podra reutilizar cdigo como comentaba anteriormente.

Figura 3.1: Ejemplo Ejemplo de un meme cualquiera de internet

Qu es un meme?
Un meme es un fenmeno de internet, es una imagen, video, concepto,
producto o suceso que se populariza en internet. Dentro de los memes, hay
una gran parte que son imgenes que tratan de producir humor, crtica o
reflexin. Hay pginas en las que diariamente son publicados por los usuarios
decenas de memes que miles de jvenes siguen, invirtiendo incluso horas
diarias. Este tipo de memes, las pginas webs y su pblico me hicieron
considerarlo como una gran opcin para que los usuarios de la aplicacin la
usaran diariamente. De hecho conozco un caso muy cercano de ambliopa que
diariamente invierte una hora en ver memes y como ese caso hay muchos ms.
Esa persona y todas las de su mismo perfil (que son bastantes entre los 14-30
aos) con esta actividad podrn seguir haciendo lo mismo que hacen siempre
pero de una manera que les ayude a mejorar el problema de su visin.
En qu consiste el visor de memes exactamente?
En l podrs acceder a los memes de las dos mejores pginas de memes de
Espaa con un visor de realidad virtual para smartphones. Al mismo tiempo
la forma en que se visualiza la imagen est modificada para que al mirarla
realices un ejercicio visual beneficioso para la ambliopa. Con el gamepad para
android externo puedes pasar al siguiente meme, al anterior y navegar en
vertical por el meme dado que la mayora estn en un formato portaretrato
en el que la altura de la imagen es superior al ancho.
Desarrollo
El desarrollo comenz con el mdulo que se encargaba de la gestin de los
memes desde esas pginas. Consiste en un sistema para la descarga, el
almacenamiento, asignacin de identificadores a cada meme y descarga de los
memes ms lejanos en la lista de memes.
Para obtener los memes, se accede a los enlaces de las imgenes a partir del
cdigo HTML de la pgina. Para ello se usaron expresiones regulares. El
cdigo HTML de las dos pginas de memes que tena previsto integrar
seguan una estructura muy similar. Los memes venan de cinco en cinco
divididos en pginas a las cuales se poda acceder insertando a continuacin
del nombre del dominio la terminacin /p/<nmero de pgina web>. En
base a esto podemos concluir que para acceder a la imagen de meme n 17
tendramos que realizar estas operaciones:

n de pgina web

(int)(17/5)

posicin del meme dentro de la

pgina

17 - (n de pgina web * 5)

Hay una estructura comn de etiquetas div que contenan una etiqueta img
que acceda a un subdominio de cada pgina dedicado a alojar las imgenes.
En base a estas consideraciones se crea la expresin regular que extrae el
src de la etiqueta div.
Fue necesario el estudio de la librera expresiones regulares de C#. Una vez
terminada y depurada la parte de expresin regular, usando la caracterstica
de ejecucin dentro del editor de Unity3D lo compil y export para Android
y no funcionaba la extraccin de imgenes. Se estaba descargando
correctamente el cdigo HTML pero la expresin regular no estaba
detectando nada. El problema estaba en que el cdigo HTML que se
descargaba en el mvil y en el PC de la misma pgina eran diferentes. Esto se
debi a que desde el mvil la llamada http estaba indicando que estaba siendo
realizada a travs de un smartphone Android y automticamente la web
devolva una versin responsive adaptada para mviles. Se realiz la
adaptacin de la expresin regular para la versin mobile de la web, lo que
corrigi los problemas en la obtencin de imgenes de la web.

La gestin del almacenamiento de los memes en la memoria pretenda que

el usuario pudiera visualizar los memes con total fluidez en el mvil teniendo
como nico cuello de botella la tasa de transferencia a internet del usuario.
Est claro que esta actividad estaba pensada usando la WIFI debido al alto
consumo que puede tener en una red mvil. Respecto a la carga en la
memoria, las imgenes son almacenadas en una tabla hash de tipo diccionario
(new Dictionary<int,Texture2D>()) que como clave tena un entero que lo
identifica segn el orden en la web y como valor una imagen que se almacena
en el tipo Texture2D especfico de Unity3D para ello. Para saber qu es lo que
hay que cargar o descargar siempre se almacena un ndice con el valor del
puesto del meme actual segn la pgina, y en funcin de su posicin tratamos
de tener cargados siempre un nmero pginas de memes n anterior,
posterior y la pgina en la que se encuentra el ndicelocalizado. Hay que tener
en cuenta que cada pgina contiene 5 memes y se cargan de cinco en cinco, de
ah que la carga y la descarga se haga de cinco en cinco tambin. Por ejemplo,
si considerramos ese nmero n=1 pgina de margen por cada lado y el
meme actual fuera el nmero 11 entonces quedara algo como en la siguiente
tabla:

...

10

11

12

13

14

15

16

17

18

19

20

21

22

...

El azul claro seran los memes que pertenecen a esa pgina de margen que
ha de tener cargada de forma contigua a la pgina actual siempre. En
amarillo estn los memes cargados por pertenecer a la pgina actual en la que
se encuentra el meme actual (en verde). En blanco quedan los memes que no
estn cargados y que se descargan en cuanto se cambia de pgina actual.

Podramos resumir el ciclo de carga de memes en el siguiente esquema:

Figura 3.2: Ejemplo Esquema de la relacin y funcionamiento entre las webs de memes y el mdulo de
gestin de memes de la aplicacin

A continuacin se trabaj en la visualizacin de los memes. Con el sistema

de almacenamiento descrito previamente el visualizador solo tiene que pedir el
meme actual y ste resuelve la operacin automticamente. La visualizacin
de los memes comprenda tres problemas:
Visualizacin side-by-side
Ajuste dinmico de una imagen a la pantalla (y en SBS)
Control de la imagen
Efecto del ejercicio visual

Al tratarse de una perspectiva ortogrfica totalmente bidimensional, para

crear el efecto side-by-side lo nico que se hizo fue crear dos cmaras
(ortogrficas) y ponerlas en la misma posicin siempre. Cada una tiene
restringida la mitad de la pantalla para renderizar.
Una vez solucionado el side-by-side se investig cules eran los clculos
necesarios para adaptar las dimensiones de un plano 3D a los bordes en ancho
de lo que la cmara captaba en ortogrfico (contando con que era en SBS).
Las imagenes de memes tienen comnmente una disposicin vertical con una
altura superior al ancho, de ah que se ajuste al ancho.
Se incorporaron los controles para mover verticalmente la imagen y navegar
por ella adems de pasar al siguiente y anterior meme.

3.1.2

Desarrollo del efecto para la ambliopa

Llegado a este punto del proyecto, se empez con una de las tareas ms
importantes del mismo. Investigar como hacer el ejercicio visual. Para
empezar se gener una cuadrcula que haca que en un ojo se viera una parte
de la imagen y se tuviera que usar el otro para completarla. Era una primera
propuesta que se decidi con el especialista en oftalmologa. ste fue el
resultado:

Figura 3.3: Ejemplo Primera propuesta del prototipo

El primer problema detectado fue que la visin con los cascos no abarcaba
toda la pantalla, lo que hizo que se le aadiera posteriormente un margen
lateral que permitiera ver el meme en un tamao visible. Lo de los cuadros
fue inviable, era demasiado aguda la diferencia entre los dos ojos, y no se

llegaba a fusionar la imagen. Se hizo una siguiente prueba solo con un ojo con
la cuadrcula aplicada y mejor pero no lo suficiente, seguan siendo muy
bruscos los cuadros a la hora de visualizar la imagen. Se propuso en vez de
poner cuadros negros, hacerlos en otro color, pero dependiendo de la imagen
funcionaba o no, porque cada imagen tena su color en el que se visualizaba
de forma ms cmoda y an as, en una propia imagen un color poda ser
cmodo para el ojo en una parte y no serlo en otra.

Figura 3.4: Ejemplo Segunda propuesta

La opcin que solucion finalmente el problema fue difuminar en cada

cuadrado lo que oclua en la imagen. Era un efecto mucho ms complicado de
desarrollar que los anteriores, se desarroll un shader en GLSL para Opengl
ES de blur selectivo que actuaba solo en los cuadrados y en el resto
renderizaba la imagen de forma convencional. Tambin tiene parmetros que
permiten controlar el tamao de los cuadros.

Figura 3.5: Ejemplo Reproductor de memes funcionando con el efecto visual aplicado

3.1.3

Desarrollo del visor de vdeos

El primer paso fue estudiar el funcionamiento del plugin que permite

reproducir videos. Lo que hace es transmitir a una textura los fotogramas del
video y reproducir el audio incorporando todas las funciones como play,
pause, etc a travs de cdigo. Esto nos permita aplicar el shader que
habamos desarrollado previamente para crear el ejercicio visual. Hubo que
hacer adaptaciones del cdigo del plugin para reproducirlo en dos planos (uno
para cada ojo).
Se reutiliz el cdigo que dimensionaba en pantalla los memes para el
vdeo, modificando parte de su comportamiento debido a las necesidades de
este visor en concreto.
Posteriormente se aadieron los controles para el visor que permitan
acceder a todas las caractersticas convencionales de un reproductor de video.

Figura 3.6: Ejemplo Reproductor de vdeo funcionando con el efecto visual aplicado

3.1.4

Desarrollo del Breakout

El breakout es un juego muy conocido en el que hay que tratar que una
bola rompa todos los ladrillos rebotando con una plataforma que controlamos
sin que se salga fuera de los lmites del mapa.
Para el desarrollo de las fsicas se utiliz el motor de fsicas 2D de Unity. Se
empez por delimitar los bordes del mapa y establecer los tamaos de los
objetos del juego ( la bola, la plataforma y los ladrillos) en funcin del
tamao de pantalla en SBS. Se consigui obteniendo un factor de escala
comn que se pudiera aplicar a todas las escalas y posiciones al comenzar la
actividad.
Lo ms complejo fue conseguir que la fsica de la bola fuera la correcta. La
bola del breakout no sigue un comportamiento fsico normal, siempre tiene
una velocidad constante, al rebotar no pierde energa ni sufre friccin, los
ngulos que toma son exactos, hay que evitar que la bola entre en un bucle
rebotando eternamente, etc Para conseguir esto hubo que ajustar muchos
parmetros y controlar a travs de cdigo todas las situaciones.
Se desarroll un gestor del gameplay que se encargaba de posicionar los
bloques, gestionar el nmero de bolas del que dispona el player y el nivel en
el que se encontraba. Para que el juego fuera mnimamente divertido se hizo
que hubieran varios niveles de dificultad. Comienza en el nivel uno, el ms
facil, que tiene 2x2 ladrillos, el dos tiene 3x3 ladrillos, el tres 4x4 ladrillos,....
y as contina la progresin. Se va aumentando el nmero de ladrillos con
cada nivel y as su dificultad tambin. Cada vez que una bola se pierde o se

aumenta un nivel de dificultad hay una interfaz que es controlada por este
gestor y que muestra esa informacin al usuario.
Respecto al ejercicio visual, en este decidimos hacer uno diferente para
realizar pruebas. El ejercicio consiste en que la bola solo se ve a travs del ojo
afectado.
Se integr soporte para gamepads Android de forma que con l se puede
controlar la plataforma, moverla horizontalmente y lanzar la bola al inicio.
A continuacin podemos ver el resultado, con las interfaces en el nivel 1 y
el 3 ajustando como ojo amblope el ojo derecho:

Figura 3.7: Ejemplo Captura de pantalla en el nivel 1 del Breakout

Figura 3.8: Ejemplo Captura de pantalla en el nivel 3 del Breakout

3.1.5

Desarrollo del Men

Por ltimo era necesario tener un men con el cual poder acceder a todas
las actividades. Existen 4 paneles en el men:
Breakout
Meme viewer
Video player
Config
Para crear los botones de los paneles, se usa la librera de cardboard SDK
que provee de funciones para pulsar los botones en el entorno virtual.
El panel del breakout y el meme viewer solo tienen un botn cada uno que
ejecuta cada una de las actividades. En el panel config hay dos botones para
indicar que ojo es el afectado y que los ejercicios se adapten en funcin de
ello. Se cambia una variable esttica que cada actividad reconoce
posteriormente para modificar su manera de visualizar para cada ojo.

Figura 3.9: Ejemplo Panel de configuracin que permite seleccionar el ojo afectado

Para la reproduccin de video era necesario hacer un panel en el que poder

seleccionar el video. Para ello se ha creado un panel como este:

Figura 3.10: Ejemplo Panel para reproducir un vdeo

El men reconoce los vdeos que estn en la ruta /sdcard/Movies del

telfono. Tenemos botones para pasar al video siguiente y anterior de esa
carpeta y el botn Play para reproducirlo.

Captulo 4
Conclusiones y lneas futuras
El desarrollo de este proyecto ha sido muy gratificante dado que he cubierto
todos los objetivos que me propuse al hacerlo. He aprendido muchas cosas, he
realizado un proyecto que tiene parte de investigacin con toda la aventura
que ello conlleva, he colaborado con otros campos ajenos a la ingeniera
informtica, he terminado el desarrollo tcnico con xito y lo ms importante:
existe un tratamiento accesible que permitir a muchas personas con
problemas visuales mejorar.
Todava queda una cuestin muy importante que descubriremos con el
tiempo: Qu efectividad tiene el tratamiento? Hay que realizar un estudio
con personas que estn dispuestas a comprometerse con las actividades y dar
informacin de la evolucin. Ese estudio puede llevar muchos meses pero tarde
o temprano sabremos los resultados.

Captulo 5
Summary and Conclusions
The development of this project has been very rewarding because I have
covered all the goals I set out to do. I have learned many things, I have done
a project with research part with all the adventure that entails, I have
collaborated with other fields outside computer engineering, I have finished
the technical development successfully and most importantly: there is an
accessible treatment and it will allow many people with visual problems
improve.
There is still a very important issue that we will discover with time: How
effective is the treatment? A study must be carried out with people who are
willing to commit to the activities and provide information of evolution. That
study may take many months, but sooner or later we'll know the results.

Captulo 6
Presupuesto
Tipos

Descripcin

Importe

Casco de realidad de
smartphones para VR
gama media

Casco necesario para

100
desarrollar y visualizar la
aplicacin.

Plugin para reproducir

video

Plugin que permite

reproducir vdeo en
Android con Unity 3D
Tabla 6.1: Presupuesto

30

Bibliografa
[1] http://www.ncbi.nlm.nih.gov/pubmed/25131694
[2] http://www.elmundo.es/elmundosalud/2008/03/04/medicina/1204619448.html
[3] http://www.fayerwayer.com/2013/04/jugar-al-tetris-un-nuevo-tratamiento-paracorregir-el-ojo-vago-en-adultos/
[4] http://www.news-medical.net/health/New-hope-for-adults-with-amblyopia(Spanish).aspx
[5] http://www.elmundo.es/elmundosalud/2008/03/04/medicina/1204619448.html
[6] http://www.fayerwayer.com/2013/04/jugar-al-tetris-un-nuevo-tratamiento-paracorregir-el-ojo-vago-en-adultos/
[7] http://www.news-medical.net/health/New-hope-for-adults-with-amblyopia(Spanish).aspx