Realidad Aumentada en desarrollo de apps híbridas

La realidad aumentada es una de las experiencias en cuanto a aplicaciones móviles que estuvo muy de moda el año pasado y que ha generado una nueva gama de aplicaciones que más que ofrecer features al usuario ofrecen “experiencias.

Ahora bien, desde el punto de vista de desarrollo de software sabemos que no es nada simple, sin embargo, existen en la actualidad una gran cantidad de SDKs y librerías para facilitar el trabajo de desarrollo, integrables con tecnologías web que ya conocemos.

En este artículo nos centraremos en herramientas que nos permitan desarrollar usando  Javascript y Cordova, para desarrollo móvil híbrido

Wikitude

El primero de los SDKs que probé, y debo decir, el más completo de los que he visto hasta ahora. Wikitude nos ofrece un kit de desarrollo bastante integrado con diferentes plataformas, nativas e híbridas. Wikitude nos permite:

  • Reconocimiento de patrones / imágenes.
  • Sobreponer imágenes y modelos 3D’s sobre estos patrones.
  • Reconocimiento geográfico y ubicación de elementos (videos, imágenes, modelos 3Ds) según ciertas coordenadas en el espacio.
  • Generación/conversión de elementos para compatibilidad con el SDK.

La verdad es que el código Javascript para desarrollar una experiencia de realidad aumentada con Wikitude es increíblemente sencillo y fácil de entender. Por ejemplo, para reconocimiento de un patrón y sobreponer una imagen sobre el mismo tendríamos que implementar algo como esto

var World = {
 loaded: false,

 init: function initFn() {
 this.createOverlays();
 },

 createOverlays: function createOverlaysFn() {

 //Definiendo target, la imagen donde haremos el reconocimiento del patrón

 this.tracker = new AR.ClientTracker("assets/gandalf.wtc", {
 onLoaded: this.worldLoaded
 });

 /* Creando un item que aparecerá en el tracker previamente definido, definimos las coordenadas, la escala y el resource 
 es un simple archivo PNG */
 var imgOne = new AR.ImageResource("assets/angular.png");
 var overlayOne = new AR.ImageDrawable(imgOne, 1, {
 offsetX: -0.15,
 offsetY: 0,
 scale : 0.5
 });

 /*
 Definimos el recurso de entrada, en este caso la cámara
 */
 var pageOne = new AR.Trackable2DObject(this.tracker, "*", {
 drawables: {
 cam: overlayOne
 }
 });
 },

 //Evento que nos indica cuando el "mundo" o viewer de Wikitude ha sido cargado
 worldLoaded: function worldLoadedFn() {
 console.log("world loaded")
 }
};

World.init();

Así, vemos cómo en pocas líneas podemos generar una experiencia sencilla en una app android híbrida. El formato de las imágenes “objetivo” como se puede ver en el código es .wtc, éstas imágenes son generadas con un conversor que provee el SDK y es necesario que estén en este formato porque es así que wikitude puede reconocer el patrón de imagen.

El resultado del código anterior sería algo como esto:

Éste ejemplo es particularmente fácil de editar y el recurso a renderizar puede ser una imagen, un modelo 3D, o un video transparente (con canal alpha). Inclusive, Wikitude nos ofrece una herramienta web para generar estos recursos para usarlos local o remotamente en nuestra app. El target o patrón debe tener un formato específico al igual que cada recurso que será renderizado.

Existen bastantes ejemplos en el repo oficial de Wikitude con los que podemos jugar un rato y usarlos como base para proyectos personales. Además existe un repo que ofrece una app base con integración con Ionic. Recomiendo usarlo, ya que uno de los problemas que tiene Wikitude es que es algo complicado de configurar y la documentación tiene algunos vacíos.

Pros

  • Una vez configurado es bastante fácil de usar y la herramienta web es bastante sencilla para generar contenido compatible.
  • Inclusión de múltiples formatos y tipos de recursos.
  • La licencia libre no tiene limitaciones por lo que se puede desarrollar/probar sin pagar nada.
  • Ofrece scripts tanto para Linux/Mac y Windows para generar/convertir contenido compatible con el SDK.
  • Ofrece SDKs nativos para cada plataforma así como un plugin Cordova para aplicaciones híbridas.
  • La gama de ejemplos es sencilla y completa.
  • Soporte de vídeos transparentes y chroma key.
  • Soporte para SmartGlasses (http://www.wikitude.com/developer/documentation/epson)

Contras

  • Es algo complicado la configuración del entorno.
  • La documentación tiene algunos vacíos y errores (tal vez no ha sido actualizada).
  • El alto costo de la licencia (más de 2400 euros).
Wikitude Studio, donde podemos generar contenido compatible con el SDK (.wtc)

CraftAR

CraftAR es un SDK bastante parecido al anterior pero con algunos features más sencillos, está desarrollado por Catchoom. Sin embargo es bastante potente y ofrece los features más importantes que da Wikitude. Al igual que éste ofrece un SDK tanto nativo como para apps híbridas con Cordova.

Montar un ejemplo con CraftAR es mucho más sencillo (en cuanto a configuración de entorno de app) que con wikitude, pero los ejemplos son bastante básicos comparados con el anterior. Además, el código es un poco más complejo. Veamos:

function didGetResults(results) {
  if(results.length > 0) {
  	//Fijando un item (target) predefinido
    var item = results[0].item;
    if (item.isAR) {

			//Definición de contenido a ser renderizado
      CraftARContent.createImageContentWithPath("ar_content.png", function(contentImage){
        contentImage.wrapMode = CraftARContent.CRAFTAR_TRACKING_WRAP_ASPECT_FIT;
        contentImage.attachTo(item);
        CraftARTracking.addItem(item, function(){
          CraftARTracking.startTracking();
        },function(err) {
          alert("Error adding AR item: " + err.errorMessage);
          CraftARSDK.startFinder();
        });
      });
    } else {
      CraftARSDK.startFinder();
    }

  }
}

function didStartCapture() {
  CraftARSDK.searchController = CraftARCloudRecognition.searchController;
  CraftARCloudRecognition.onSearchResults(didGetResults);
  CraftARCloudRecognition.onSearchError(onError);
  CraftARCloudRecognition.setCollectionWithToken("augmentedreality", function() {
    CraftARSDK.startFinder();
  }, function(err) {
    alert("Error setting token: " + err.errorMessage);
  });                 
}

function didGetTouchEvent(touch) {
  var event = touch.event;
  var content = touch.content;
  switch (event) {
    case CraftARTouch.CRAFTAR_CONTENT_TOUCH_IN:
      console.log("Touch in: " + content.uuid);
      break;
    case CraftARTouch.CRAFTAR_CONTENT_TOUCH_OUT:
      console.log("Touch out: " + content.uuid);
      break;
    case CraftARTouch.CRAFTAR_CONTENT_TOUCH_UP:
      console.log("Touch up: " + content.uuid);
      break;
    case CraftARTouch.CRAFTAR_CONTENT_TOUCH_DOWN:
      console.log("Touch down: " + content.uuid);
      break;
    default:
      break;
               }
}

function didStartTrackingItem(item) {
  console.log("Start tracking Item: " + item.uuid);
}


function didStopTrackingItem(item) {
  console.log("Stop tracking item: " + item.uuid);
}


function didTrackingTimeout() {
  alert("Tracking timeout");
}

function startCraftAR() 
{
  CraftARTouch.onTouchEvent(didGetTouchEvent);

  CraftARTracking.onStartTracking(didStartTrackingItem);  
  CraftARTracking.onStopTracking(didStopTrackingItem);
  CraftARTracking.onTrackingTimeOut(didTrackingTimeout);

  CraftARSDK.onStartCapture(didStartCapture); 
  CraftARSDK.startCapture();
}

document.addEventListener("deviceready", function() {
  startCraftAR();
}, false);

Sigue más o menos la misma secuencia, pero el proceso es un poco más engorroso, sin embargo, el resultado es bastante decente. Un feature adicional es que es compatible con Unity 3D, por lo que no se limita solo a herramientas web. Podemos renderizar igualmente imágenes, modelos 3D y videos transparentes.

Posee además una herramienta web para generar contenido que es mucho más poderosa que la de Wikitude y además contamos con una API Rest para manejar nuestros targets y contenidos.

Pros

  • Webstudio de generación de contenidos bastante potente.
  • Facilidad de configuración de app y ejecución de ejemplos.
  • Cuenta con API Rest para acceder a nuestros contenidos.
  • Precio mucho más económico que el de Wikitude y más variedad de paquetes (1990 Euros).
  • Los paquetes generados pesan bastante poco.

Contras

  • La documentación está bastante incompleta y deja muchos vacíos.
  • Los ejemplos son muy sencillos y no explotan al máximo todos los features de la API.
  • La generación de vídeos transparentes es más engorrosa que con wikitude.

EZAr

EZAr es otra de las librerías que estuve revisando. Es la única mostrada aquí que es gratis  que ofrece una solución parcial sobre el asunto de realidad aumentada. Con EZAr podemos:

  • Renderizar elementos de three.js sobre la cámara (librería de renderizado 3D Javascript).
  • Renderizar imágenes sobre la cámara.
  • Detección de expresiones faciales.

EZAr es de las tres herramientas mostradas aquí, la librería más limitada en cuanto a resultados; no brinda detección de patrones en la cámara, ni detección geográfica, se limita al renderizado de recursos sobre el target, posicionándolo sobre él, pero sin ajustarse a las dimensiones. Sin embargo, tiene el feature de detección facial que no tienen los otros SDKs y por supuesto cuenta con plugins Cordova tanto para Android y iOS.

Los proyectos base y ejemplos son muy fáciles de configurar y ejecutar y la documentación está acorde con la simplicidad del proyecto.

Pros

  • Es gratuita.
  • Posee detección facial.
  • Los ejemplos son sencillos  y fáciles de montar.
  • Integración de three.js.

Contras

  • No hay detección de patrones/targets ni ajuste según dimensiones.
  • No se pueden renderizar videos.
  • No existe detección geográfica.
  • Es bastante limitada.

En conclusión EZAr es una buena librería para proyectos simples y que no requieran de tanta experiencia de usuario.

Enlaces de interés

https://www.wikitude.com/

https://catchoom.com/solutions/augmented-reality/

https://www.ezartech.com/

https://www.layar.com/

https://artoolkit.org/

 

Anuncios

Un comentario Agrega el tuyo

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s