Crea contenido de realidad aumentada

En esta sección iremos probando diferentes aplicaciones de creación de contenido de realidad aumentada y os mostramos nuestra experiencia con ellas. En ninguna de ellas es necesario tener conocimientos técnicos (salvo en las de desarrollar), aunque algunas disponen de funcionalidad para desarrolladores RA.

 

Crear tu propio contenido
      Onirix
Metaverse AR  Metaverse            
Aumentaty    Aumentaty            
     Actionbound           
Roar        Roar
        Spark AR
       Zapworks
       Wikitude

 

 

 

 

Metaverse

Con esta plataforma podremos crear experiencias de realidad aumentada para iOS y Android. Esta app es ideal para enseñar contenidos en el aula o publicitar nuestros productos comerciales.

Metaverse AR

Nosotros empezaremos creando una sencilla aplicación en la que aparecerá una imagen con un botón en la parte inferior de la pantalla. Al pulsar sobre el botón nor llevará a una web (en este caso la nuestra).

Pulsaremos sobre el enlace de empezar a crear del apartado de Metaverse.

Metaverse empezar a crear

Ahora pulsaremos sobre el botón de Crear experiencia de la web (arriba a la derecha), que nos redirigirá al estudio con una escena precargada. Clicando sobre los diferentes apartados vamos completando la aplicación.

Metaverse aplicación

En el apartado superior pondremos un texto, en el apartado de en medio cargaremos nuestra imagen .png, y en la parte inferior configuraremos un botón que al pulsarlo llevará a los usuarios a la web. Además, cargaremos un audio de la plataforma.

En cuanto a la configuración del botón (parte derecha de la pantalla), deberemos establecer la transición. Para nuestro propósito, seleccionaremos Transición a la escena 2 (nuestra escena 2 es la página web).

Metaverse configuración botón

Para borrar un elemento deberemos pulsar sobre el botón deshacer de la barra superior.

Una vez terminada nuestra aplicación, pulsaremos sobre publicar. En la siguiente pantalla podremos seleccionar opciones avanzadas como la visibilidad (público, grupo o por enlace web o QR).

El siguiente paso sería compartir nuestra app con otras personas para lo que usaremos la dirección web o el código QR que nos proporciona la plataforma.

QR Pin Pan Metaverse

Para probar nuestra aplicación deberemos instalar la app Metaverse en Android o IOS.

El resultado que veremos en nuestro móvil o tablet es el siguiente:

 

Continuaremos realizando nuevas aplicaciones con esta y otras plataformas y comentando nuestra experiencia con todas ellas.

 

 

 

Onirix

Plataforma de creación de realidad aumentada para iOS y Android. Con ella podremos crear, por ejemplo, experiencias para el ámbito de la educación, para el publicitario, médico, turismo o el comercial.

La dinámica básica consiste en crear tu aplicación en la plataforma web y descargar su app para visualizar tu proyecto.

Onirix

La plataforma provee soporte para dos tipos de usuarios: creativos y desarrolladores de AR. Nosotros empezaremos la prueba gratuita para creativos, con la que crearemos (sin uso de conocimientos técnicos) un sencillo escenario y sus objetos en una sala.

La aplicación es bastante sencilla e intuitiva, además cuenta con videotutoriales, portal de desarrolladores y un servicio gratuito de resolución de dudas bastante ágil.

Comenzamos la prueba registrándonos en su plataforma Onirix pulsando el botón “Probar ahora” de la parte superior de su página web. En la siguiente pantalla indicaremos que somos creativos y completaremos con nuestros datos. Para finalizar pulsamos sobre el botón de crear cuenta.

Una vez registrados procedemos a loguearnos con nuestros datos. Veremos la plataforma de creación de contenido con tres botones en la parte superior izquierda de la pantalla. Pulsaremos sobre proyectos y luego sobre nuevo proyecto.

Onirix menu

Elegiremos nuestro nombre de proyecto, y escogeremos uno de los tres tipos de proyecto (Targets: objetivos, Spaces: espacios o Places: lugares). En nuestro caso seleccionaremos objetivos ya que crearemos objetos en una sala en el lugar que queramos (espacios y lugares está deseñado para realidad aumentada en determinados sitios y objetos, por ejemplo, si queremos mostrar información de un cuadro en un museo, o de edificios de un campus).

Después de crear el proyecto pulsaremos sobre el y crearemos un nuevo objetivo. Para ello, proporcionaremos un nombre y el tipo de objetivo superficie (el tipo de objetivo marcador es para crear AR sobre determinados marcadores, por ejemplo, al escanear un determinado dibujo con el móvil o tableta aparezca información u objetos 3D).

Onirix escenario vacio

En la barra inferior de la pantalla podremos escoger nuestros elementos (objetos 2D, 3D, carteles, música, enlaces, videos, etc.). Nosotros colocaremos varios objetos 3D, una canción, nuestro logotipo, un enlace a nuestra web y otro a nuestro canal de Youtube.

 

Para incluir elementos tan solo deberemos seleccionarlos, arrastrarlos y soltarlos. Posteriormente podremos moverlos, girarlos, o escalarlos en el cuadro de la derecha de la pantalla o con las flechas del estudio.

Además, muchos de los tipos de elementos permiten que se le añadan eventos. Gracias a estos, cuando el usuario pulse en el móvil o tableta sobre uno de los objetos, se realizará una acción, como abrir un enlace, mostrar un video o habilitar otro objeto. Nosotros crearemos eventos para que al pulsar sobre nuestro cartel se dirija al usuario a nuestra web y otro para nuestro canal de youtube.

Onirix evento

Onirix Evento

Tras completar nuestro escenario procederemos a descargar e instalar la aplicación Onirix en Android (también disponible en iOS). Nos logueamos con el mismo usuario de la plataforma y cargamos nuestro proyecto ya creado, como se muestra en el video.

El resultado de nuestras pruebas en el móvil (también se puede hacer con tableta) es el siguiente:

 

En los próximos días probaremos Onirix para desarrolladores, así como la nueva funcionalidad de compartir (mediante códigos QR o numéricos) tus creaciones tanto online como offline.

 

 

 

 

 

Aumentaty

Con Aumentaty podremos crear aplicaciones de realidad aumentada. Cuenta con aplicaciones móviles como Creator y Scope, entre otras. Nosotros utilizaremos Creator para crear nuestra aplicación de realidad aumentada y la visualizaremos con Scope.

Comenzaremos registrándonos en su página desde el navegador. Después nos loguearemos.

Aumentaty Login

Iremos a la sección de descargar del programa Creator, donde elegiremos la versión para descargar (32 o 64 bits).

Una vez descargado el ejecutable lo instalaremos en nuestro ordenador. Al abrirlo deberemos introducir nuestras credenciales de Aumentaty.

Aumentaty windows creator

Una vez logueados, pulsaremos sobre la opción del menú de la izquierda ‘Proyectos‘, y después sobre Nuevo Proyecto. En la ventana que aparece podremos darle nombre a nuestro proyecto, y completar la descripción y el logo.

Aumentaty creator nuevo proyecto

Ahora crearemos una ficha dentro de este proyecto, dándole nombre y descripción. El siguiente paso es elegir el tipo de ficha para asociar el contenido: marcador, geoposición o evento. Nosotros seleccionaremos marcador para asociar el contenido a una marca, y elegiremos una imagen que disparará posteriormente nuestro contenido.

Aumentaty Creator ficha

Al finalizar los pasos nos encontraremos en la pantalla de edición de Creator. Aquí podremos ajustar la cámara con el ratón y su ruleta.

Aumentaty editor creator

Pulsaremos sobre el icono de Añadir. Ahora podremos agregar texto, imagenes, objetos 3D, videos o enlaces.

Una vez añadidos todo nuestro contenido volveremos al proyecto y pulsaremos sobre publicar. Añadiremos la información del proyecto como el tipo o su descripción, para encontrarlo en el buscador más fácilmente.

Publicar creator

Ahora probaremos nuestro proyecto en el móvil.

 

Descargaremos la aplicación Aumentaty Scope para Android (también disponible para iOS).

QR Scope

Aumentaty Scope

Tras abrirla, introduciremos nuestro nombre de usuario y contraseña.

Una vez dentro buscaremos nuestro proyecto, lo descargaremos (abajo a la izquierda de la pantalla) y pulsaremos sobre Abrir.

Ahora pulsaremos sobre el icono de la cámara para escanear nuestro marcador y listo!, debe aparecer nuestro contenido creado con Creator.

 

 

 

 

Actionbound

Actionbound es una aplicación de realidad aumentada para realizar búsquedas (bounds) del tesoro interactivas para guiar al alumno en un camino de descubrimiento.

La aplicación (para móvil y tablet) permite crear y usar eventos, recorridos por lugares de interés (GPS), mapas, brújula, imágenes, videos, pruebas, misiones, torneos o códigos QR.

Comenzaremos registrándonos en su página ,seleccionaremos la opción que queramos (en nuestro caso probaremos la versión educativa).

El pase de diapositivas requiere JavaScript.

Al pulsar sobre new bound deberemos crear un nombre de proyecto, su web y elegir si será multijugador (varias personas en un mismo dispositivo) y si queremos que las fases sean completadas en un orden fijo o aleatorias.

Al finalizar pulsaremos sobre create bound y podremos empezar a crear elementos. Nosotros crearemos solo algunos:

  • Un punto de información.
  • Un lugar.
  • Una pregunta sin límite de tiempo con respuesta a elegir entre varias opciones. Con dos intentos y 10 puntos si fallan la respuesta.

El pase de diapositivas requiere JavaScript.

Una vez finalizada la creación de elementos seguiremos con la configuración de nuestro bound. Para ello, pulsaremos sobre el icono de llave de la izquierda y procederemos a seleccionar las características.

Para finalizar testearemos (para publicar se necesita adquirir una cuenta) nuestra aplicación para poder probarla en el móvil o tableta. Pulsando sobre el icono de nuestro bound podremos pulsar sobre el icono Test. En la siguiente pantalla visualizaremos nuestro código QR, que posteriormente escanearemos con nuestro dispositivo.

Ahora descargaremos la aplicación para nuestro móvil o tablet (iOS o Android).

El siguiente paso es buscar nuestro proyecto (bound) escaneando con el móvil o tablet el código QR de nuestro bound en la web. En nuestro caso escanearemos el código que aparece al pulsar Test.

El resultado es el siguiente:

 

 

 

 

 

 

 

Roar

Roar es una aplicación que te permite crear realidad aumentada, tanto para negocios, marcas, educación o publicidad, entre otros. 

Con sus herramientas podremos incrustar vídeo, imágenes, textos, botones o modelos 3D.

El resultado de nuestros diseños lo visualizaremos en nuestros dispositivos móviles (iOS o Android).

Para crear una aplicación nos dirigiremos a su web, y pulsaremos sobre el botón Crear la RA.

 

De entre todas la opciones elegiremos la de Target Image, pulsando sobre Select.

El pase de diapositivas requiere JavaScript.

En este punto, si no estamos registrados, pulsamos sobre Sign Up para hacerlo. Tras el registro activaremos nuestra cuenta desde el correo. Nosotros usaremos la versión gratuita.

Después, seleccionamos Create Ar. A continuación, pulsaremos sobre Custom Target y subiremos una imagen de mínimo 315×315 píxeles como marcador.

Tras pulsar sobre Select this Target, podremos añadir nuestro contenido en el editor. En la parte superior del editor estableceremos el nombre de nuestra aplicación de realidad aumentada.

Como contenido agregaremos un video de YouTube, arrastrando el elemento video y soltándolo en nuestra área de contenido. En el apartado de URL pegaremos la dirección YouTube del video que queramos.

Ahora modificaremos los atributos para que el video aparezca por encima del marcador e inclinado. Para ello, estableceremos Rotation X en 45º, Position: arriba del marcador (pulsar flecha arriba varias veces) y Altitude en 375.

Añadiremos también un botón de tipo enlace (Link) que al pulsarlo nos redirija a una página y una imagen.

También agregaremos un objeto 3D .obj. Podemos encontrar estos modelos en páginas como free3D. Nosotros descargaremos uno de ejemplo y lo importaremos desde la plataforma roar.

Hemos de asegurarnos que el archivo comprimido con el objeto 3D contiene los archivos necesarios y con el formato adecuado. Sino no se cargará el objeto (la plataforma ROAR cuenta con soporte para dudas).

Para publicar nuestra aplicación, pulsaremos sobre SAVE y seguidamente en Publish. El siguiente paso es escanear el código QR de la aplicación ROAR, instalarla y abrirla.

Tras unos segundos, nuestra aplicación quedará almacenada en la biblioteca pública, para buscarla y probarla.

Una vez abierta la aplicación, nos pedirá si queremos la opción marcador o superficie (marker o surface). Elegiremos la primera opción para visualizarlo sin marcador y la segunda si queremos escanear nuestro marcador impreso.

 

 

 

 

 

 

Spark AR

Spark AR es una plataforma para la creación de aplicaciones de realidad aumentada. Nos permitirá crear efectos AR, agregar animaciones, audio, objetos 3D (propios o de su biblioteca gratuita) e interactividad, y sin necesidad de grandes conocimientos técnicos.

Gracias a su herramienta Spark AR Studio para PC, crearemos nuestra realidad aumentada para luego visualizarla en la aplicación Spark AR Player (iOS e Android). Además, cuenta con un gestor de efectos: SparkARHub, con el que administrar dónde se publican nuestros efectos Facebook, Instagram y Messenger. También cuenta con una gran comunidad, en la que encontrar inspiración y consultar y resolver dudas.

 

Comenzaremos descargando e instalando Spark AR Studio. Será necesario disponer de iTunes para probar en dispositivos iOS. Una vez descargado el programa a nuestro ordenador, lo abriremos y crearemos un nuevo proyecto.

En la parte izquierda pulsaremos sobre add object (agregar objeto), y buscaremos e insertaremos un seguidor de cara (Face tracker). A continuación, insertaremos una malla de cara (Face mesh), que podremos ver en el visualizador.

El pase de diapositivas requiere JavaScript.

Ahora cambiaremos el material de nuestra malla. Primero, crearemos un nuevo material pulsando en agregar activo (add asset) y luego Material. Seleccionaremos el nuevo material y pulsaremos sobre Elegir fichero (choose file) en sus características de textura a la derecha. Seleccionaremos la imagen que queramos como material.

Ahora pulsaremos sobre la malla de cara que creamos y cambiaremos su atributo Material por el nuestro.

Crearemos también un seguidor de mano (hand tracker), de tal modo que al mostrar la mano a la cámara aparezca un objeto 3D.

Primero, agregaremos un objeto 3D (add asset) que podemos conseguir en sketchfab. Ahora pulsaremos sobre añadir objeto (add objetc) y seleccionaremos rastreador de manos (hand tracker). Por último, arrastraremos el objeto 3D al seguidor de manos.

Podemos añadir muchos otros objetos, planos o marcadores. Nosotros crearemos un cartel 3D para terminar nuestro proyecto.

Probaremos ahora lo que llevamos en la aplicación Android (también disponible para iOS) Spark AR Player. Para ello, la descargaremos e instalaremos en nuestro dispositivo.

Al abrirla en el móvil o tablet, nos informará de que deberemos habilitar el modo de desarrolladores y el debug usb.

Una vez configurado nos dirigiremos a Spark AR Studio en nuestro ordenador y pulsaremos sobre el icono Send to device. En la ventana que se abre tendremos dos opciones: enviar al dispositivo o copiar el enlace de Facebook Camera y abrirla en el móvil.

  

 

En nuestro caso abriremos el enlace de Facebook, pulsaremos sobre Facebook Camera y listo. Ahora se aplicará la máscara y los efectos, y podremos guardar el video o compartirlo.

Estos son los resultados de nuestro proyecto Spark AR: se aplica nuestra malla a la cara (en nuestro caso el logotipo), cuando muestro la mano aparece nuestro objeto 3D y arriba aparece el texto en 3D:

 

 

 

 

 

 

 

Zapworks

La plataforma Zapworks ofrece un completo kit de herramientas de realidad aumentada para agencias, empresas y educadores. Permite construir, publicar, analizar y escalar experiencias inmersivas de AR en todo el proceso del cliente.

Dispone además de la herramienta ZapWorks Studio con la que diseñadores y desarrolladores podrán crear experiencias AR, VR y MR personalizables en impresión, productos, empaques, ventas minoristas, eventos y entre otros.

Si queremos crear experiencias de forma más sencilla, podremos optar por la herramienta de arrastrar y soltar Zapworks designer.

La plataforma dispone de una gran comunidad, documentación, tutoriales, foros y concursos.

Nosotros crearemos una sencilla aplicación de realidad aumentada con Zapworks designer, en su versión de prueba.

Comenzaremos visitando su web y registrándonos. En nuestro caso seleccionaremos el espacio de trabajo para educación en secundaria, completaremos los campos y pulsaremos en próximo paso.

 

 

En el siguiente paso, la aplicación nos permite invitar a compañeros para el proyecto a través de su email. Pulsaremos sobre el icono de ir al panel de control.

 

 

En el panel de control pulsaremos sobre hacer un nuevo zapcode, y elegiremos el estilo cuadrado en la siguiente ventana.

En el siguiente paso seleccionaremos la herramienta diseñador y pulsaremos sobre crear zapcode. La aplicación nos dirigirá al panel de control y veremos nuestro zapcode listo para editar.

 

El pase de diapositivas requiere JavaScript.

 

Al hacer click para editar nuestro zapcode, la aplicación nos llevará a la ventana de edición con múltiples opciones. Pulsaremos sobre editar contenido zapcode y en la siguiente pantalla haremos click sobre descarga tu zapcode. Seleccionaremos una de las imagenes y pulsaremos en descargar (disponemos de los formatos de imagen PNG o SVG). 

Ahora deberemos subir una imagen de seguimiento para nuestro proyecto, en nuestro caso seleccionaremos un logo.

 

El pase de diapositivas requiere JavaScript.

 

Llegados a este paso, toca agregar contenido a nuestra escena. Empezaremos introduciendo un texto y una imagen, pulsando sobre sus iconos.

En ambos objetos tendremos opciones de configuración, como tamaño color y posición.

 

El pase de diapositivas requiere JavaScript.

 

Cuando seleccionamos un elemento (texto, imagen, video o cualquier otro) tendremos las opciones de eliminarlo, copiarlo o bloquearlo, arriba a la derecha.

Continuaremos nuestro proyecto agregando un botón para que al pulsarlo dirija al usuario a una web. Para ello, seleccionaremos la pestaña comportamiento (con el botón seleccionado) y elegiremos la opción del combo Enlace a. Aparecerá un input Enlazar donde escribiremos la web que se visitará al pulsar el botón.

 

El pase de diapositivas requiere JavaScript.

 

Para terminar agregaremos un audio y un video de Youtube y publicaremos nuestro proyecto.

 

 

Para probar la aplicación descargaremos e instalaremos la aplicación Zappar en nuestro dispositivo Android. Al abrirla podremos escanear la imagen de nuestro proyecto con el movil o tablet y visualizar el contenido.

Ahora iremos a la web desde nuestro ordenador y pulsaremos en el botón avance para que se genere el marcador que escanearemos con el movil o tablet.

En la plataforma web agregaremos ahora una nueva escena (escena2). En nuestra escena1 original, pondremos un botón que al pulsarlo nos llevará a nuestra escena2 (pestaña comportamiento). En esta segunda escena pondremos un nuevo texto y una nueva imagen.

 

 

El resultado en nuestro dispositivo móvil es el siguiente:

 

 

 

 

 

 

 

 

 

Wikitude

Plataforma para crear contenido de realidad aumentada sin conocimientos de programación. También ofrece kits de desarrollo para diversas plataformas (móviles, gafas inteligentes, React, Ionic, Adobe Air o Qt).

Nosotros crearemos una aplicación AR para dispositivos móviles a través de su herramienta Wikitude Studio.

Una vez registrados en su web, pulsaremos sobre el botón agregar proyecto. Seleccionaremos el tipo de proyecto (imagen u objeto 3D) y le daremos nombre. Tras pulsar sobre el botón crear, veremos nuestro proyecto en la ventana de proyectos.

Pulsaremos ahora sobre nuestro proyecto y sobre el botón añadir objetivos de imagen. Ahora basta con arrastrar y soltar la imagen que queramos como objetivo.

 

El pase de diapositivas requiere JavaScript.

 

En el siguiente paso, pulsaremos sobre nuestra imagen y seleccionaremos la opción editar. Una vez en el editor, veremos nuestra imagen en 3D y podremos agregar otros elementos, como imagenes, botones u objetos 3D.

En nuestro caso empezaremos agregando un botón pulsando sobre la opción insertar y después botón. En la siguiente ventana seleccionaremos el diseño del botón (también permite subir nuestro propio botón) y una URL de destino (para cuando se pulse el botón).

 

El pase de diapositivas requiere JavaScript.

 

Cuando seleccionamos los objetos insertados, aparecen nuevas opciones, abajo a la izquierda, para rotar, desplazar y escalar. También, podremos hacer lo mismo y agregar otras características en el panel de la derecha.

Agregaremos ahora un video de Youtube a la escena pulsando sobre insertar, y video. En la siguiente ventana pulsamos sobre la ventana externo y pegaremos la URL del video. Este elemento también lo podremos mover, escalar o rotar.

 

 

Del mismo modo que para botones y videos, crearemos un texto en la parte superior de la escena.

Si queremos insertar objetos 3D deberemos importarlos en el formato de Wikitude (.wt3). Para ello, descargaremos su codificador 3D, lo instalaremos y convertiremos nuestro objeto a un formato compatible.

Después de descomprimir el archivo descargado, pulsaremos sobre setup y seguiremos los pasos de instalación. Una vez instalado, lo abriremos y pulsaremos sobre file -> open fbx/wt3. Buscaremos nuestro fichero con el objeto 3D y lo abriremos.

Una vez cargado, procederemos a exportarlo al formato de Wikitude. Pulsaremos sobre file -> export wt3. Ya tenemos listo nuestro objeto para insertarlo en el editor.

Agregaremos ahora nuestro elemento 3D a la escena pulsando en insertar -> modelo 3D. Arrastraremos y soltaremos nuestro fichero wt3 recién creado y listo.

 

El pase de diapositivas requiere JavaScript.

 

Veamos lo que llevamos de proyecto en realidad aumentada con nuestro dispositivo móvil.

Descargaremos e intalaremos la aplicación de Wikitude (Android o iOS). Abriremos la aplicación y pulsaremos sobre desarrollador, donde iniciaremos sesión con nuestra cuenta. Ahora seleccionaremos nuestro proyecto y escanearemos nuestro objetivo (en nuestro caso el logo Virtual Pin Pan).

Deberemos ver cómo aparecen los elementos creados: el botón con un enlace a nuestra web, el enlace a un vídeo de Youtube, el texto y un objeto 3D.

El resultado de escanear nuestro objetivo con el dispositivo móvil es el siguiente:

 

 

 

 


Publicidad