DevLab

by AleXandria
Hands-on workshops

How to integrate VR / AR / MR

AleXandria Developer Program

P a g i n a |1
© 2017 AleXandria Intellectual Property. All rights reserved. AleXandria, AleXandria logo and all other
AleXandria marks contained herein are trademarks of AleXandria Intellectual Property and/or
AleXandria affiliated partners. All other trademarks are the property of their owners. Actual results and your
experience may vary from those described in this case study. Information and offers subject to change.
Users of this book are fully responsible for abiding by the Terms and Conditions and any other legal
requirements of all companies and their products, whether AleXandria or non-AleXandria partners.
Inclusion of non-AleXandria products in this workbook does not imply AleXandria endorsement of said
products.

AleXandria Developer Program

P a g i n a |2
!

INTRODUCCIÓN

AleXandria Developer Program

P a g i n a |3
Bienvenido al taller de AleXandria sobre Realidad Virtual, Realidad Aumentada y Realidad Mixta. El
objetivo del taller y este manual es familiarizarse con los conceptos y técnicas relativas a la creación y
la distribución Realidad Virtual (RV), Realidad Aumentada (RA) y empleo de Realidad Mixta.

Los visores de realidad virtual y videos en 360º ofrecen a los creadores de contenidos formas
completamente nuevas en diferentes ámbitos, los cuales comienzan a mostrar su verdadero potencial
en métodos de aprendizaje y enseñanza en la educación médica. La perspectiva única y el sentimiento
de presencia ofrecidos por la RV/RA/RM es quizás la mejor razón para involucrarlas en programas
académicos donde los métodos tradicionales utilizan proyecciones de estructuras tridimensionales en
gráficas en 2D o quizá 3D, pero que son estáticas y tienen limitaciones para el usuario en su
manipulación. Comienza una era donde se está creando contenido medico en diferentes especialidades
el cual utiliza Realidad Virtual, las universidades, escuelas de medicina y hospitales de mayor prestigio
a nivel mundial están invirtiendo en la integración de RV en sus programas educativos y están
generando laboratorios completos los cuales integran este tipo de tecnologías de alto impacto en la
educación, simulación y entrenamiento de habilidades médicas, así como el tratamiento de diferentes
enfermedades o condiciones patológicas.

Después de este taller, usted se contara con las herramientas necesarias para comenzar a
experimentar y crear contenido básico para aplicaciones de Realidad Virtual, Realidad Aumentada y
Realidad Mixta

Al final de este taller, usted debe:

• Ser capaz de explicar de manera básica que es la Realidad Virtual, Realidad Aumentada,, 2D/
Psuedo-3D y su aplicación actual en Medicina.
• Tener una comprensión firme de las técnicas de creación de Realidad Virtual, incluyendo las
aplicaciones en la educación y práctica médica, así como las limitaciones que se presentan.
• Generar AR y su empleo en medicina de manera sencilla (Actualización).
• Ser capaz de generar imágenes en Pseudo-3D partiendo de imágenes 2D.
• Poder generar videos de imágenes 2D, Pseudo-3D y realidad virtual.

AleXandria Developer Program

P a g i n a |4
 • Integrar imágenes 2D/Pseudo-3D, AR , VR , MR a casos clínicos y cátedra de medicina.

PREREQUISITOS
Para completar los ejercicios en este libro, necesitará:
• Conexión a Internet
• Un teléfono iOS con iOS 9.0 o superior, o un teléfono inteligente Android que incluya
Giroscopio / acelerómetro.
• Para aquellos interesados en realizar cada uno de los ejercicios presentados en la charla, se
deberá contar con los siguiente.
o Windows 7 SP1 ó superior. ; OS - X 10 ó superior (MAC).
o Cuenta de usuario en Google( Gmail, Youtube), Facebook, Instagram, Periscope, Twitter,
Snapchat, WhatsApp.
o Google Chrome.
o Software para grabar pantalla:
▪ Grabador de pantalla, download : https://www.apowersoft.es/grabador-de-
pantalla (windows/Mac)

o Software :
▪ http://depthy.me/#/
▪ https://3dthis.com/xtrude.htm
▪ https://studio.hpreveal.com/home
▪ https://itunes.apple.com/us/app/hp-reveal/id432526396?mt=8
▪ http://jdownloader.org/download/index
▪ https://videoconverter.wondershare.com/es/
▪

AleXandria Developer Program

P a g i n a |5
 ▪ APPS:
▪ HP Reveal (iOS /android)
▪ Anatomy 4D ios
▪ Anatomy 4D android
▪ Facebook
▪ Instagram
▪ Periscope
▪ Snapchat
▪ Twitter
▪ Youtube
▪ WhatsApp

F ORMATOS C ONVENIDOS
Duración: aproximado 30 minutos

En este ejercicio:

Aplicación de realidad aumentada en medicina

Como crear realidad aumentada

AleXandria Developer Program

P a g i n a |6
DevLab
by AleXandria

AleXandria Developer Program

P a g i n a |7
Hands-on workshops

Creación, Aplicación
de RV/ RA / MR

AleXandria Developer Program

P a g i n a |8
DevLab
by AleXandria
Hands-on workshops

Introducción a la realidad Virtual.

// Hola, Mundo.

// Siéntase en la libertad de preguntar.

Hoy día veremos como generar imágenes de realidad virtual ya que el año pasado existía
una herramienta web 2.0 la cual se presento con la finalidad de generar la sensación de
profundidad en nuestras imágenes y de igual forma nos permitía generar la vision
estereoscópica,

Pero que es una visión estereoscópica, este tipo de

vision es generado mediante dos lentes, dichos lentes
nos permiten generar la sensación de profundidad,
esto se logra por que el campo de vision para el ojo
izquierdo y derecho están delimitados por una
separación física en el centro de las gafas aunado a
que los cristales generan un efecto de lupa , así que
es bastante importante que teléfono tenga una
concentración alta en pixeles por pulgadas.

AleXandria Developer Program

P a g i n a |9
algunas veces pensamos que esta tecnología es nueva pero realmente es mas vieja de lo
que pensamos y para muestra tenemos estas imágenes( por favor no olvides estas
imágenes ).

Permite que te felicitemos en estos momentos ya eres un experto en realidad virtual; por
que por que ahora ya sabes que la realidad virtual es un conjunto de imágenes
observadas desde un punto de vista diferente en cada ojo y con cierta limitación del campo
visual a través de unas lupas ( ahora ya sabes como hacer tus lentes de realidad caseros).

Para este momento como todo experto en realidad virtual te estarás preguntando
¿ Pero…? ¿Cómo logro la profundidad ? Y ¿Cómo logro el movimiento?

Hace un año usábamos la herramienta web 2.0 llamada 3Defy.com basada en Flash pero
con los problemas de seguridad que Adobe presento con Shockwave, Shockwave Player y
Flash, los principales navegadores decidieron dejar de usarlos pasando a HTML 5 como
principal alternativa y por lo tanto la herramienta dejo de ser útil.

Hoy día existen herramientas similares que la han venido a sustituir cada una con sus
curiosidades, aquí trataremos 2 que son las mas sencillas:

AleXandria Developer Program

P a g i n a | 10
Esta herramienta esta disponible en http://depthy.me/#/ y su interfaz es super intuitiva, la
pantalla principal nos deja ver los siguiente:

Ahora que sigue, pues bueno ahora lo siguiente es entrar a google buscar la imagen que
quieras trabajar , si, la que quieras , en este caso nosotros usaremos una litografía de
Remedios Varo la cual se intitula retrato del Dr. Ignacio Chávez, entonces seleccionamos
open photo.

AleXandria Developer Program

P a g i n a | 11
Se nos muestra la siguiente ventana :

Exacto como lo supiste le daremos en Draw it y veremos la siguiente ventana;

AleXandria Developer Program

P a g i n a | 12
 creo que a todos nos gusta ver lo que hacemos por lo tanto daremos, daremos Click en
Preview y veremos los siguiente.

Ahora bien, llegando a este el proceso es tuyo, ahora practica, NO?? Cierto se me
olvidaba que ya eres un experto en RV, hay que salvar lo que hicimos, iremos al botón de
Finish, lo que nos permite ver la imagen siguiente;

AleXandria Developer Program

P a g i n a | 13
En esa imagen tenemos el botón de compartir daremos click y obtendremos el siguiente
menú:

Seleccionamos crear video y posterior a esto obtendremos el siguiente menú

seleccionamos Large y después Do it¡ y pude presentarse un error esperado ya que la
pagina también trabaja con Adobe Flash, por lo tanto emplearemos la app para recorte de
pantalla que venimos usando desde hace un año .

La cual nos permite grabar solo una porción del de la pantalla y se vera mas o menos así

AleXandria Developer Program

P a g i n a | 14
Obtendremos nuestro video de una sola imagen, ahora mediante el software que también
conocíamos Wondershare el cual nos permite generar un video en derecha e izquierda

AleXandria Developer Program

P a g i n a | 15
 Y así es como logramos crear una imagen con movimiento y podemos usar lentes de
realidad virtual tipo cardboard para usarlas.

La siguiente app es 3Dthis.

En esta ocasión usaremos la herramienta de volumen que es muy similar a 3defy y la

encontraremos en el siguiente link.

AleXandria Developer Program

P a g i n a | 16
Veremos la siguiente pantalla:

Seleccionamos la imagen que ocuparemos y se vera como la siguiente imagen

AleXandria Developer Program

P a g i n a | 17
Emplearemos las herramientas básicas de edición y una vez concluida la nuestra edición
grabaremos de igual manera la pantalla y emplearemos Wondershare para convertir
nuestro video en imagen derecha - izquierda(D-I) en video ahora si solo ocupamos una
imagen simple solo capturamos pantalla y tendremos imagines fijas de realidad virtual.

AleXandria Developer Program

P a g i n a | 18
Realidad Aumentada

AleXandria Developer Program

P a g i n a | 19
De igual manera la aplicación que usamos anteriormente esta fuera de linea por tal
motivo, nos vimos en la necedad de buscar un sustituto en esta ocasión usaremos la
aplicación 2.0 HP Reveal (https://studio.hpreveal.com/home ) dicha aplicación tiene su
versión para el movil en esta ocasión emplearemos ambas versiones, iniciaremos con la
versión del escritorio.

Nos registramos como TRY FREE, una vez tengamos nuestro nombre de usuario
verificado, ingresamos con nuestro usuario y contraseña pudiendo observar esta pantalla:

AleXandria Developer Program

P a g i n a | 20
Ahora seleccionamos crear nueva aura y esto nos arrojara esta ventana:

Aquí nos detendremos un poco con la versión de escritorio, esto debido a que si
queremos usar realidad virtual necesitamos tener un visor de realidad virtual por tal
motivo ingresaremos a las tiendas de aplicaciones de nuestros teléfonos móviles y
descargaremos la app HP Reveal.

AleXandria Developer Program

P a g i n a | 21
Ahora ya estamos en posibilidad de emplear realidad aumentada creada por
nosotros, regresemos ahora a la app WEB.

Para este ejemplo empezaremos la imagen de un monitor cardiaco, así que

buscamos en google dicha imagen, nosotros emplearemos esta:

Una vez tengamos nuestra imagen, vamos a nuestro navegador a la aplicación, al

oprimir agregar imagen nos muestra la siguiente ventana :

AleXandria Developer Program

P a g i n a | 22
Nombramos la imagen gatillo y la buscamos en FROM FILE y salvamos, lo cual
generara una imagen como esta :

Ahora daremos click en siguiente y obtendremos la siguiente vista:

AleXandria Developer Program

P a g i n a | 23
Daremos click en Click to Upload Overlay y nos muestra la siguiente pantalla

Hoy usaremos un video descargado de youtube y para ello usaremos la aplicación

JDownloader disponible en http://jdownloader.org/download/index

AleXandria Developer Program

P a g i n a | 24
Una vez instalado el software veremos esta pantalla.

Ahora entramos a nuestro navegador favorito y accedemos a youtube.com y

buscaremos un video de un monitor con ritmo, en nuestro caso elegimos el de la
siguiente liga : https://www.youtube.com/watch?v=4t4d_1_Jc14 , ahora copiamos la
copiamos la URL o damos click en el botón de compartir y copiamos el enlace ( https://youtu.be/
4t4d_1_Jc14) ahora vamos a JDownloader

AleXandria Developer Program

P a g i n a | 25
En nuestro caso vemos el enlace en rojo por que esta duplicado el link, en su caso no pasara esto y
Usted borra los archivos no necesarios media su selección y el empleo de click derecho y después
eliminar dejando solo el archivo de video, una vez realizado esto daremos click en el botón PLAY y
esto iniciara con la descarga del video, una vez tengamos el video, lo agregaremos a nuestra AURA
viendo algo similar a esto:

Daremos click en Next y después en Unshare y veremos nuestra bibliotecas de auras,

AleXandria Developer Program

P a g i n a | 26
Daremos click sobre nuestra AURA daremos click en menú de la parte baja derecha pondremos full
screen y nos otorgara una imagen que se puede imprimir mediante captura de pantalla y se puede
emplear como gatillo para RA.

AleXandria Developer Program

P a g i n a | 27
AleXandria Developer Program
P a g i n a | 28
AleXandria Developer Program
P a g i n a | 29