Shareity AR Challenges

______________
Firma
Javier Alfonso Fernández Gucciardi

Caracas, 01 de Abril del 2019

 Índice General

Sinopsis 3

Introducción 4

Capítulo I: Propuesta de pasantía 5

​1.1. Planteamiento del Problema 5

​1.2. Objetivo General 6

​1.3. Objetivos Específicos 6

​1.4. Alcance 7

​1.5. Limitaciones 8

Capitulo II: Marco Teórico 9

​2.1. ​JavaScript 9

​2.2. ​WebGL 9

​2.3. ​ThreeJS 9

​2.4. ​WebXR Polyfill 9

​2.4. ​WebPack 9

Capitulo III: Marco Experimental 10

​3.1. Metodología Empleada 10

​3.1.1. Scrum 10

​3.1.2. Implementación 11

1
 ​3.2. Desarrollo 1​2

​3.3. Resultados 1​3

Conclusiones​ ​y​ ​recomendaciones 1​4

Referencias Bibliográficas 1​4

Apéndices o Anexos 15

7.1. ​Carga de escena y loading spinner. 15

7.2. Moneda en escena. 1​6

7.3. Efecto de explosión para las monedas. 17

7.4. ​Moneda en escena. 18

7.5.​ ​Moneda en escena. 19

7.6. Modal de succes y animación de publicidad. 20

7.7. Modal para compartir el logro. 21

2
Sinopsis

En este trabajo se informa al lector sobre el desarrollo de una aplicación web

con realidad aumentada que consiste en completar un reto coleccionando monedas y
subiendo tu puntaje, una vez obtenidas todas las monedas del reto el sponsor donará
una cierta cantidad de dinero a una fundación, esta aplicación web se le dio el nombre
de Shareity AR Challenges, la cual la empresa Mipto Tech necesita desarrollar.

Se necesita desarrollar las escenas con realidad aumentada, la interfaz gráfica,

el reto, una brújula, el puntaje y la obtención de la geolocalización.

Se utilizó una metodología similar a Scrum la cual se describe en el apartado de

metodología empleada.

Se utilizó una librería puntera y experimental, la cual se espera que un futuro

cercano sea implementado de forma nativa en los exploradores de uso común para así
poder levantar la aplicación desde el teléfono con cualquier navegador.

3
Introducción

El proyecto Shareity AR Challenges, consiste en una aplicación web en realidad

aumentada, en donde el objetivo es superar el reto. Por los momentos solo consiste de
un reto donde tienes que buscar y coleccionar una cierta cantidad de monedas en tu
entorno, una vez coleccionadas todas las monedas la empresa patrocinadora donará
una cierta cantidad de dinero a una fundación determinada en un momento
determinado.

Ya que la aplicación es web no es necesario instalarla, esta abre desde el

mismo navegador.

La realización de este proyecto de pasantía se desarrolló bajo una metodología

parecida al Scrum, con sprints semanales.

4
Capítulo I: Propuesta de pasantía

1.1. Planteamiento del Problema

Mipto Tech es una compañía dedicada a ofrecer servicio de desarrollo web,

desarrollo de videojuegos y aplicaciones con realidad aumentada o realidad virtual.
Esta empresa necesita desarrollar una aplicación web que utilice tecnologías en
computación gráfica para desplegar objetos 3D en realidad aumentada. Utilizando
herramientas web, se podrá desarrollar una serie de componentes que permitan la
mejora en sus funcionalidades, por medio de tecnologías punteras, sin la necesidad de
crear una aplicación para las tiendas (web app).

La aplicación tiene como finalidad de realizar una serie de retos

correspondientes a realidad aumentada, los cuales pueden ser búsqueda de ciertos
objetos 3D en un espacio determinado, o interacción con otros usuarios a través de
estos objetos.

5
1.2. Objetivo General

Desarrollar una aplicación web con integración a realidad aumentada para

resolver ciertos retos y poder ganar puntos en la aplicación.

1.3. Objetivos Específicos

1.​ ​ Mejorar un componente web para la ofuscación de código utilizando webpack.

2. Desarrollar un componente web que permita desplegar una escena WebGL en AR

utilizando WebXR.

3. Generar un ambiente de pruebas para la PC, el cual permita realizar todas las
pruebas sin necesidad de un dispositivo de realidad aumentada.

4. Generar la interfaz gráfica web para la interacción de la cámara (brújula, puntos y

retos).

5.​ ​ Desarrollar primer reto, búsqueda de objetos en una geolocalización específica.

6. Realizar pruebas al Sistema para mejorar ciertos módulos y estandarizar el código

Fuente.

6
1.4. Alcance

Desarrollar un Producto Mínimo Viable (MVP) de un Alpha con todas las

funcionalidades asignadas. Entregar códigos escalables y documentados para
Javascript, ThreeJS, WebXR bajo los parámetros por los cuales se rige la empresa
para poder entregar el producto al cliente. Este producto debe ser capaz de acceder a
un servidor donde pueda encontrar un reto, poder aceptarlo y realizar el reto de
búsqueda de objetos 3D en un espacio determinado, utilizando la tecnología de toque
de la pantalla móvil para seleccionar y realizar el reto satisfactoriamente.

1. Mejorar un componente web para la ofuscación de código utilizando webpack:

utilizar la herramienta webpack para mejorar el componente web que se encarga de
proteger el código de la aplicación para que sea menos legible.

2. Desarrollar un componente web que permita desplegar una escena WebGL

en AR utilizando WebXR: Desarrollar un componente web con three.js el cual permita
desplegar la escena.

3. Generar un ambiente de pruebas: desarrollar un ambiente de pruebas para

PC el cual valide si existe AR, si existe, desplegará el AR, si no, desplegará la escena
en WebGL permitiendo hacer pruebas sin necesidad de un dispositivo de AR.

4. Generar la interfaz gráfica web para la interacción de la cámara: diseñar y

sincronizar las GUIs para la brújula (Giroscopio), puntos y retos.

7
 5. Desarrollar primer reto, búsqueda de objetos en una geolocalización
específica: desarrollar el primer reto, el cual deberá permitir al usuario poder buscar
objetos 3D en un área determinada usando AR.

6. Realizar pruebas al Sistema para mejorar ciertos módulos y estandarizar el

código Fuente: Probar el prototipo en diferentes plataformas de compilación y arreglar
los bugs encontrados en esta fase final.

1.5. Limitaciones

Se deberán cumplir una serie de horas de trabajo de forma presencial en las

instalaciones de Mipto Tech, donde deberán cumplir un tiempo estimado de
entrenamiento para dominar las herramientas de trabajo.

● Utilizar la API WebGL para el renderizado de los gráficos en 3D y 2D de

la aplicación web.
● Utilizar la librería de javascript 3D ThreeJS para la elaboración de las
escenas de la aplicación web.
● Utilizar el API WebXR para desarrollar la aplicación web de AR, la cual
por ser experimental y pionera tiene muy poca documentación.
● Utilizar WebPack para la ofuscación de código y asi proteger el código
fuente.
● Realizar una sincronización diaria de todos los códigos a través de git, un
controlador de versiones.

8
Capitulo II: Marco Teórico

2.4. JavaScript

Es un lenguaje de programación interpretado de alto nivel que cumple con las

especificaciones de la ECMAScript​. Se caracteriza por ser dinámico, imperativo,
orientado a objetos, basado en prototipo y de débil tipado.

2.1. WebGL

WebGL es una API multiplataforma de código libre usada para crear gráficos de
computadoras en 3d dentro de un navegador. Basada en OpenGL ES 2.0, WebGL usa
el lenguaje OpenGL shading (GLSL) y ofrece la familiaridad del estándar del OpenGL
API. Ya que corre en el elemento canvas de HTML5, WebGL tiene integración
completa con todas las interfaces DOM (Document Object Model).

2.2. ThreeJS

Es una librería para JavaScript multi-navegador y una API usada para crear y
desplegar animaciones 3d de computación gráfica. ThreeJS ​usa WebGL​.

2.4. WebXR Polyfill

Es una librería para JavaScript y una API usada para crear aplicaciones en
realidad aumentada. Se encuentra en estado experimental.

2.5. WebPack

Es un agrupador de módulos estático para aplicaciones modernas de JavaScript.

Una vez que WebPack procesa tu aplicación, internamente construye un grafo de
dependencias para mapear cada módulo existente que el proyecto necesite y genera
uno o más paquetes.

9
Capitulo III: Marco Experimental

3.1. Metodología Empleada

Se usó una metodología parecida a Scrum en la cual se utilizaron varias

características de esta como: Product Backlog, Sprint Backlog, Daily Meeting, Historias
de Usuario, cada Sprint fue de una semana con un total de seis Sprints.

Para organizar los sprints y el product backlog se utilizó la herramienta Trello, la cual te
permite colocar las tareas como etiquetas y a medida que vas las vas haciendo las
puedes mover de la columna de tareas a “haciendo”, “esperando por revisión” y “lista”.

Por último se utilizó la herramienta GitHub para mantener un control de

versiones.

3.1.1. Scrum

Scrum es una metodología ágil que busca incorporar al cliente final en el el

equipo de desarrollo permitiendo obtener resultados favorables. Trabaja con los
siguientes roles: el equipo de desarrollo, el cliente (Product Owner) y el líder de
proyecto (Scrum Master).

Scrum trabaja con Sprints, sirven para organizar las actividades a ser realizadas.
Estos Sprint indican cuántas y cuáles actividades (Historias de Usuario) se realizarán.
En las Historias de Usuario se representan las funcionalidades de cada característica
individual de producto.

10
 3.1.2. Implementación

Se establecieron Sprints semanales, con las Historias de Usuario a ser

realizadas según el cronograma de actividades, asignadas en la Planificación de Sprint
cada semana.

Diariamente se realizaron los Daily Meetings para informar el avance de las

actividades del sprint para esa semana. Se realizaba una reunión Al final de cada
semana para informar el cumplimiento de las actividades descritas para cada sprint.

El tutor empresarial al final de la semana revisaba las tareas finalizadas para

determinar si dicha tarea cumplía con los requerimientos descritos para dicha tarea.

11
3.2. Desarrollo

Se realizaron varios tutoriales intensivos de la empresa para familiarizarse con la

tecnología a utilizar (Three.js), una vez terminado dichos tutoriales se organizó una
reunión con el tutor empresarial para hablar sobre el proyecto, la idea general y como
se debía preceder en el desarrollo de la aplicación web para luego proceder a
familiarizarse con el código existente.

Se desarrolló la escena del reto, permitiendo a la librería de WebXR Polyfill

definir un anchor para el suelo y así poder generar las monedas en coordenadas de
mundo, cargando las en pantalla para ser buscadas por el usuario, se diseñó y
desarrolló con html y css la interfaz de esta escena. [7.1, 7.2, 7.4, 7.5]

Se realizó el diseño de la brújula, el puntaje del usuario de las monedas

obtenidas para luego así implementarlo en la aplicación, se le agregaron animaciones a
las monedas una vez son tocadas por el usuario para explotar generando dicha
explosión con partículas y una vez recolectada cada moneda el contador del puntaje es
actualizado, se agregó la opción para reiniciar la escena si el usuario así lo desea una
vez completada la recolección de todas las monedas de la escena. Sin embargo, la
brújula no le permitía a la librería de realidad aumentada funcionar por lo que se decidió
no hacerla, ya que el problema viene directamente con la librería de realidad
aumentada usada, siendo esta experimental. [7.3, 7.6]

Se implementó la geolocalización web para poder identificar desde donde se le

está accediendo a la página y así en un futuro poder desplegar distintas escenas
dependiendo de la ubicación, también a las monedas de la escena se le agrego para

12
que aparecieran en una posición aleatoria al momento de cargar la escena. [7.2, 7.4,
7.5]

Se desarrolló el ambiente de pruebas para ser levantado con un navegador

como Google Chrome, Firefox o Safari (cabe destacar que en el ambiente de pruebas
la brújula si funciona) y a la escena se le colocó una publicidad en 3D donde aparece
quien es el sponsor y la fundación a recibir la donación así como la cantidad a ser
donada.

Se corrigieron los bugs encontrados así como se refactorizó el código para

hacerlo más legible y escalable, modularizando los componentes de la aplicación. Se
probó la aplicación en algunos teléfonos disponibles en la empresa como: iPhone 7,
iPhone 6s, Xiomi Redmi 6A; siendo el único viable para correr la aplicación el IPhone 7
debido a la librería usada.

  Terminando así el desarrollo de las características propuestas en la pasantía

para la aplicación web Shareity AR Challenges.

3.3. Resultados

Se obtuvo una aplicación capaz de levantar realidad aumentada la cual consiste

en completar un reto, consiguiendo todas las monedas dentro del mismo. Además se
obtuvieron nuevos conocimientos de tecnologías nuevas y punteras así como también
una experiencia laboral, los cuales servirán para experiencias futuras en el ámbito
laboral.

13
Conclusiones y Recomendaciones

Se sugiere que la aplicación levante en realidad virtual si el dispositivo no

soporta realidad aumentada y agregar controles de cámara para que el usuario pueda
recorrer la escena, así como considerar otras librerías de realidad aumentada ya que la
librería usada WebXR Polyfill no presenta suficiente documentación y dificulta el
desarrollo específico que esta aplicación para ciertas características como por ejemplo
la brújula.

Referencias Bibliográficas

1. Documentación de la librería Three.js

https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-sce
ne
2. Documentación de la librería WebXR
https://github.com/mozilla/webxr-polyfill/blob/master/README.md
3. Ejemplos de la librería Three.js
https://threejs.org/examples/
4. Ejemplos de la librería WebXR
https://examples.webxrexperiments.com/
5. Documentacion WebGL
https://www.khronos.org/webgl/wiki/Main_Page
6. Documentacion WebPack
https://webpack.js.org/concepts

14
Apéndices o Anexos

7.1 Carga de escena y loading spinner

15
7.2 Moneda en escena

16
7.3 Efecto de explosión para las monedas

17
7.4 Moneda en escena

18
7.5 Moneda en escena

19
7.6.Modal de succes y animación de publicidad

20
7.7. Modal para compartir el logro.

21
 EVALUACIÓN INDIVIDUAL DE LA PASANTÍA
TUTOR ACADÉMICO
NOMBRE DEL ESTUDIANTE: ____________________________________________
C.I.: _________________________________________________________________
EMPRESA: ___________________________________________________________
TUTOR ACADÉMICO: __________________________________________________
(En cada caso marcar el puntaje elegido)

OBSERVACIONES:______________________________________________________
______________________________________________________________________
______________________________________________________________________

______________________________

22
 FIRMA DEL TUTOR ACADÉMICO

EVALUACIÓN INDIVIDUAL DE LA PASANTÍA TUTOR INDUSTRIAL

NOMBRE DEL ESTUDIANTE: _____________________________________________

C.I.: __________________________________________________________________
EMPRESA: ____________________________________________________________
TUTOR INDUSTRIAL: ___________________________________________________
(En cada caso marcar el puntaje elegido)

OBSERVACIONES:______________________________________________________
______________________________________________________________________
______________________________________________________________________

23
 ______________________________
FIRMA DEL TUTOR INDUSTRIAL

INFORME DE ACTIVIDADES DE LA PASANTÍA

Nombre del Pasante: ____________________________________________________
Empresa: _____________________________________________________________
Fecha inicio y fin: _______________________________________________________

Obs: Sólo llenar la tabla de problemas-solución, en caso de presentarse alguno

24