Proyecto Yahuar

Instalación de las Herramientas

Instalación Apache Cordova.

A continuación se presenta los requisitos para instalar Apache Córdova.

Instalar Node.js.
Instalar Java jdk (Cambiar el Path de java).

Instalación de Node.js

Cordova se encuentra desarrollada sobre Node.js por lo que es necesario realizar la instalación de esta plataforma.

Se debe realizar los siguientes pasos para la instalación de Node.js en Windows.

Ingresar a la página oficial de Nodejs (https://nodejs.org/es)
Descargar la versión que proporciona en este caso se utilizó 8.12. 0LTS.
Ejecutar el Instalador que se descargó.

2. Instalación de Java jdk y configuración del PATH.

Ingresar a la página oficial de Oracle (http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151. html).
Descargar el jdk de java para Windows.
Instalar el archivo descargado.
Abrir el Panel de Control-sistema y seguridad-Sistema-Cambiar Preferencias.
A continuación en Opciones Avanzadas. Se encontrará el botón Variables de Entorno de Usuario, seleccionar PATH y Editar.
En este punto establecer la ruta donde se encuentra instalada la aplicación Java, se debe establecer la carpeta raíz de java.
Guardar esa configuración y verificar mediante líneas de comandos en la terminal de Windows.
Ingresar el Comando javac para ver si funciona correctamente, ingresar el comando java—version para verificar la versión de java que se encuentra instalada.

Una vez instaladas las herramientas anteriores se procede a la instalación de Apache Cordova.

3. Instalación de Apache Córdova por línea de comando.}

Abrir la terminal de Windows.
Ingresar el comando npm install –g cordova
Esperar que se instale Apache cordova en el sistema operativo.

Instalación de Phonegap

Para la instalación de Phonegap se realiza lo siguiente.

Abrir la página oficial de Phonegap https://www.phonegap.com/.
En la sección “Get Started”
Elegir la opción para la descarga en el sistema operativo Windows, comenzará a descargarse automáticamente el instalador de Phonegap.
Ejecutar el instalador.

Si prefieres instalar mediante linea de comandos.
- Abrir el terminal de Windows y ejecutar el comando npm install -g phonegap

Necesitamos una consola de comando.

Es de libre elección, pero recomiendo utilizar ATOM.

Ir a la página oficial de ATOM https://atom.io/
Descargar la Versión de Windows disponible.
Ejecutar el instalador.

Ahora para mayor facilidad de ejecución de comandos mediante terminal Instalaremos Git.

Ir a la pagina oficial de git - https://git-scm.com/
o ejecutar el siguiente enlace de desacarga https://git-scm.com/download/win.
La version de descarga es de 64 bits.

Estructura de la Aplicación

Crear Proyecto Wikitude Phonegap

Abrir Phonegap Desktop.
Crear un nuevo proyecto Phonegap.

Crear Cuenta en Wikitude

Wikitude

Wikitude es una herramienta de Realidad Aumentada, ofrece a los desarrolladores una serie de ejemplos que ayudan a la creación de nuevas aplicaciones móviles con AR. En los ejemplos que se obtiene desde los diferentes repositorios de github se encuentra Geolocalización, Lectura de códigos QR, el reconocimiento de imágenes para mostrar videos, objetos 3D animados o estáticos entre otros.

Para poder realizar proyectos con reconocimiento de imágenes y

obtener toda la documentación e información para el desarrollo de proyectos con Wikitude debemos crear una cuenta en la página oficial de wikitude https://www.wikitude.com/.

Una vez dentro de la pagina ir a la sección DEVELOPER.
Seleccionar Wikitude Studio (Log in).
Registrar su información.

Nota: Para efectos de obtención de licencias de tipo educativa recomiendo utilizar el correo institucional.

3D Encoder y Blender

Para la creación de Objetos 3D se utilizó Blender ya que es un software libre.

Para la instalación de esta herramienta se debe ir a la pagina oficial de Blender y descargar la versión que se encuentra vigente.

Dejaré algunos objetos 3D que creé y descargué para el desarrollo de la aplicación en la sección "Descargas".

Wikitude proporciona un visor de objetos 3D propio de Wikitude.

No es posible crear objetos 3D dentro de esta herramienta ya que como su nombre lo dice es solamente un visor, pero todos los objetos creados deben estar en el formato de este visor que es .wt3. Esta herramienta se denomina 3D Encoder.

Blender arroja varios tipos de formatos de objetos 3D, pero el tipo que vamos a utilizar es el formato .fbx, mismo que será transformado en la Herramienta 3D Encoder ya que es el único formato que puede ser transformado a .wt3.

Para la instalación de 3D Encoder es necesario descargar de la misma pagina oficial de wikitude el SDK de Wikitude.

En la dirección https://www.wikitude.com/download/ escoger la opción de Android, para descargar todo la información y herramientas que se utilizará para el desarrollo de la aplicación.

Una vez descargado el SDK de Wikitude. abrir la carpeta Tools, aquí se encontrará el 3D Encoder.

Instalar para Android wikitude3DEncoder.msi y el Setup.exe.

Una vez creado el proyecto.
Dirigirse a la carpeta en donde se creó.
En la siguiente ventana se presenta la estructura básica de un proyecto Phonegap con Realidad Aumentada.
La carpeta "hooks" no tendrá ningún cambio.
A la carpeta "platforms" añadiremos la plataforma Android.
A la Carpeta "res" agregamos los iconos de la aplicación.
La Carpeta "www" es la principal, en donde realizaremos el proyecto con programación Web es decir utilizaremos JavaScript, HTML5 y CSS.
El archivo config.xml es muy importante a la hora de la ejecución del programa en el dispositivo Android, este archivo sufrirá unas pequeñas modificaciones.

Elegir la opción Wikitude Augmented Reallity
Clic en "Next"

Una vez dentro de la carpeta principal del proyecto hacer Clic derecho y seleccionar "Git Bash Here" para abrir la Terminal.
Para agregar la plataforma Android dentro de la carpeta platforms utilizaremos el comando.
- cordova platform add android
Dentro de la carpeta "www" pega la carpeta "res" que se encuentra en el enlace que esta en el segmento descargas Proyecto Yahuar.

Elegir el lugar en donde se va a crear el proyecto.
Escribir el nombre del proyecto.
escribir el ID del proyecto(Opcional).
Clic en "Create Project".

Después de la ejecución de este comando podemos verificar que ya se encuentra la carpeta Android dentro de la carpeta platforms.

A continuación agregamos el comando:
- cordova build android
Agregamos este comando con el fin de tener estructurada la plataforma Android con las carpetas de salida de las .apk.

Se presenta un error, para solucionar este problema es necesario pegar un icono de la aplicación que servirá como icono en el escritorio de los dispositivos android.
La medida de este icono es de 200 pixeles X 200 pixeles.

Volvemos a ejecutar el comando cordova build android
Esta vez tenemos un mensaje de error debido a la versión mínima de Android.
Para solucionar esto se debe estabilizar la versión mínima, esta por defecto en 14 que corresponde a la version 4.0.0, para este proyecto es necesario dejarla en 4.0.0 que corresponde a Ice Cream Sandwich como indica la siguiente tabla.

Subir la Versión Mínima de Android

Error.

Este error es el que se obtuvo despues de la ejecución del comando cordova build android

Para solucionar este error se debe realizar una búsqueda dentro de todos los archivos del proyecto de los archivos denominados "AndroidManifest.xml", para estabilizar la versión de Android mediante comandos es necesario abrir Atom o un editor de comandos.
Abriremos todos los archivos AndroidManifest.xml
Editaremos la linea uses-sdk android:minSdkVersion="16"
para bajar la versión cambiamos el número 16 por el número 14.
Existen algunos archivos AndroidManifest.xml en los que no existe esta linea, simplemente los cerramos.
Guardar los cambios en cada uno de los archivos AndroidManifest.xml.
Después copiar la dirección que se encuentra en el error y pegar en el explorador de windows, en mi caso es:
- C:\Users\jwvb_\Desktop\Proyectos\yahuar\platforms\android\CordovaLib\build\intermediates\manifests\full\debug\

Se procede a Editar el archivo AndroidManifest.xml se comprueba que se encuentre el numero 14.

Por último volver a ejecutar el comando cordova build android

Tenemos Como resultado una ejecución exitosa del comando

CORDOVA BUIL ANDROID

Instalación de Wikitude Plugin

Para la instalación del Plugin de Wikitude se debeingresar el comando

Comprobar visualmente que el Plugin se encuentra instalado correctamente en la carpeta Plugins.

Solicitud de Licencia Educativa

Ingresar en el siguiente enlace

https://www.wikitude.com/wikitude-academy/

Hacer clic en "Aply for EDU License".

Ingresar la información solicitada y enviar.

La respuesta será recibida dentro de una semana como máximo en la cuál necesitarán una confirmación de que en realidad eres un estudiante, por este motivo la recomendación es hacerlo con un email institucional.

Caso contrario demuestra que eres estudiante enviando un documento .pdf en el que conste tu carné y el nombre de la universidad a la que perteneces así como la carrera.

Una vez que se cumpla con los parámetros solicitados te enviarán por correo la cadena de Licencia.

La cadena Licencia se debe pegar dentro del Plugin de Wikitude.
Nos dirigimos a la dirección en donde se creo el Plugin de Wikitude.
- \yahuar\plugins\com.wikitude.phonegap.WikitudePlugin\www
Ingresar la cadena de Licencia dentro "ENTER-YOUR-KEY-HERE".

Es requisito que el WikitudePlugin.js con la licencia incorporada se encuentre en las siguientes direcciones.

node_modules/com.wikitude.phonegap.wikitudeplugin/www/WikitudePlugin.js
plugins/com.wikitude.phonegap.WikitudePlugin/www/WikitudePlugin.js
platforms/android/assets/www/plugins/com.wikitude.phonegap.WikitudePlugin/www/WikitudePlugin.js
platforms/android/platform_www/plugins/com.wikitude.phonegap.WikitudePlugin/www/WikitudePlugin.js

Si es necesario crear carpetas hacerlo ya que esas son las direcciones válidas para ejecutar correctamente la licencia de Wikitude, las carpetas a crear son assets/www dentro de la plataforma android.

Archivo config.xml

Reemplazar la totalidad del contenido del archivo config.xml por las siguientes lineas.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.yahuar" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>YahuAR</name>
<description>
Aplicacioón móvil para apoyar el turismo de la laguna de yahuarcocha utilizando realidad aumentada.
</description>
<author email="jwvacab@utn.edu.ec" href="">
Jhonny Vaca - 0989575951
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<plugin name="com.wikitude.phonegap.WikitudePlugin" spec="https://github.com/Wikitude/wikitude-cordova-plugin.git" />
<engine name="android" spec="^7.0.0" />
</widget>

Como se observa en las lineas del archivo config.xml solamente se utiliza dos plugins

Primero:

Segundo

En este plugin se accede directamente a muchos de los componentes de los dispositivos Android como:

Cámara

GPS

Brújula

Memoria Interna

Teclado

Entre Otros

ARCHIVOS HTML

index.html

Crear un archivo index.html dentro de la carpeta "www" y reemplazarlo por el archivo index.html que ya existe.

Los archivos js y css que son utilizados en este archivo se encontrarán en el enlace para ser descargados.

<!DOCTYPE html>
<html lang="en" class="no-js">
   <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Ar</title>

function onLoad()
{
document.addEventListener("deviceready", onDeviceReady, true);
}

function exitFromApp()
{
navigator.app.exitApp();
}

</script>

</head>
<body>

<div class="container">
           
           <div class="codrops-top clearfix">
               <a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/CreativeLinkEffects/"><span></span></a>
               <span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=16114"><span></span></a></span>
           </div>
           <header>
               <h1>YAHUAR <span>Turismo Inteligente</span></h1>
<center><span>INF: INFORMACIÓN</span> <span>IMG: RECONOCIMIENTO DE IMÁGENES</span> <span>NAV: NAVEGAR A LUGARES </span> <span>GEO: VISITAR LUGARES CON OBJETOS GEORREFERENCIADOS</span><span>POI: PUNTOS DE INTERES(POINT OF INTEREST)</span></center>
           </header>
           <div class="component">
               <h2></h2>
               
               <button class="cn-button" id="cn-button">Menu</button>
               <div class="cn-wrapper" id="cn-wrapper">
                   <ul>

                       <li><a href="index.html"><span>INICIO</span></a></li>
                       <li><a href="info.html"><span>INF</span></a></li>
                       <li><a href="imageness.html"><span>IMG</span></a></li>
                       <li><a href="local.html"><span>NAV</span></a></li>
                       <li><a href="geo.html"><span>GEO</span></a></li>
                       <li><a href="funciones/mapa/index.html"><span>MAP</span></a></li>
                       <li><a href="funciones/informacion/index.html"><span>POI</span></a></li>

</ul>

</div>
               
           </div>

<form>

       <div data-role='map' id="map">
       <center>
       <section id="wrapper">
       <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
       <article></article>
       <script>
       function success(position) {
       var mapcanvas = document.createElement('div');
       mapcanvas.id = 'mapcontainer';
       mapcanvas.style.height = '310px';
       mapcanvas.style.width = '310px';

document.querySelector('article').appendChild(mapcanvas);

var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

       var options = {
       zoom: 15,
       center: coords,
       mapTypeControl: false,
       navigationControlOptions: {
       style: google.maps.NavigationControlStyle.SMALL
       },
       mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

       var marker = new google.maps.Marker({
       position: coords,
       map: map,
       title:"Estas aqui"
       });
       }

       if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(success);
       } else {
       error('Geo Location is not supported');
       }

       </script>
       </section>
       </center>
       </div>
       </div>
       </div>

<center>
<button name="buttonClick" onclick="exitFromApp()" style="BORDER: rgb(286,286,286) 2px solid; FONT-SIZE: 20pt; FONT-FAMILY: Verdana;
BACKGROUND-COLOR: rgb(049,127,067)">Salir</button>
</center>
<br>
<br>

<footer>
   <div class="wrap">
       <div class="logo">
       </div>
   <center><div class="copy">
           <p>Copyright © 2018 <a href="">Jhonny Vaca</a>.</p>
       </div></center>

</div>
</footer>

</div>
<script src="js/polyfills.js"></script>
<script src="js/demo2.js"></script>

Los archivos resaltados con color naranja se encuentran en el enlace listos para ser descargados.

El archivo style.css debe estar al mismo nivel que el index.html debido a que existe otro archivo con el mismo nombre dentro de la carpeta css

Realidad Aumentada con Reconocimiento de Imágenes

Subir Imágenes a Wikitude Studio.

Ingresar con el usuario y contraseña que habíamos creado en Wikitude Studio en la página principal de Wikitude.
Crear un nuevo proyecto lo denominaremos "YahuAR"
Subir las imágenes que vamos a utilizar en el reconocimiento de imágenes para que proyecten videos dentro del proyecto creado.

Para esta sección es necesario tener videos que serán resultado del reconocimiento de las imágenes subidas. Estos videos no deben pesar más de 10MB, el formato debe ser .mp4. En la siguiente imagen se observa vídeos que han sido guardados anteriormente.

Abrir una imagen de las que ya fueron subidas anteriormente, se desplegará el Editor de Wikitude Studio o Wikitude Studio EDITOR

Seleccionar la opción Insertar Video que se encuentra en el icono superior izquierdo de la pantalla representada por una cámara de video o también en la barra de menú superior, como se observa en la siguiente figura.

En esta opción pedirá subir un video en mismo que tiene que cumplir con las características antes mencionadas para lo que se busca los videos previamente guardados en el computador y se realiza la carga del mismo.

Presentación del video superpuesto a la imagen agregada, el video puede ser movido al lugar que más se lo requiera, si es necesario se debe modificar las propiedades que se encuentran en la parte de la izquierda del editor de Wikitude, la Fig. 65 indica la superposición del video en la imagen asignada.

Dirigirse a la parte derecha de Wikitude Studio EDITOR y seleccionar la opción Project –Download Offline Project.

Se desplegará la siguiente ventana representada en la siguiente figura, en donde se establece un envió del proyecto al correo con el que se haya registrado.

Verificar que si el proyecto llegó correctamente al correo.

En el mensaje que llegó se puede observar que el correo contiene tres proyectos que son establecidas para tres plataformas diferentes de desarrollo como son para javascript, Xcode y Android Studio.

La aplicación general se encuentra desarrollada en JavaScript por lo que se procede a descargar la opción “JS Experience” en donde se encuentra una estructura de carpetas que están listas para ser utilizadas dentro del proyecto principal, cabe recalcar que el código descargado esta diseñado para la plataforma de ios y Android.

Integración del proyecto descargado en el proyecto principal

Crear la carpeta funciones y dentro de esta la carpeta vídeo,

debe quedar de esta manera.

yahuar\www\funciones\video

Descomprimir dentro de esta carpeta el proyecto que se descargó previamente del correo personal.

Ejecución SubProyecto Reconocimiento de imágenes para proyección de imagenes.

El archivo index.html (principal) tiene el enlace al archivo imageness.html

este a su vez ejecuta la realidad aumentada mediante un botón que se encuentra dentro de el mismo y ejecuta los archivos de tipo javascript que se encuentran llamados desde este mismo archivo imageness.html

Reconocimiento de las imágenes en ejecución.

.

Para el reconocimiento de imágenes fue necesario crear un folleto en donde se encuentren las imágenes que serán reconocidas.

Realidad Aumentada con Geolocalización

Utilizar Ejemplos extraídos del SDK de Wikitude.

Para este subproyecto es necesario extraer uno de los ejemplos del SDK de Wikitude.
Buscamos la carpeta denominada: "09_ObtainPoiData_2_FromLocalResource"
Copiar el ejemplo indicado cambiar de nombre a la carpeta de "09_ObtainPoiData_2_FromLocalResource" por "local".
Pegar la carpeta "local" dentro de la siguiente dirección www/funciones/ quedaría así www/funciones/local/
Dentro de esta carpeta "local" existe la carpeta "js",
Abrir la carpeta js con el editor de codigo Atom para modificar el archivo jsonmydata.js
Buscar los lugares que necesitamos agregar junto con su longitud, latitud y altitud para que de esta manera poder visualizar esta información en la cámara del dispositivo Android.

Una vez modificado este archivo nos dirigimos al archivo index que se encuentra dentro de la carpeta "local" para comprobar que los 3 archivos .js estén llamados correctamente.

Después de la comprobación analizaremos el botón que ejecuta la realidad Aumentada.

En el archivo index.html (principal) que se encuentra al abrir la carpeta www del proyecto Yahuar contiente los enlaces a las paginas html en donde se encuentra información acerca del subproyecto a que le corresponda como son Realidad Aumentada con Reconocimiento de Imágenes, Realidad Aumentada con Geolocalización y Realidad Aumentada con Geolocalización de Objetos 3D.

Para todos estos subproyectos vamos a utilizar la misma línea de código que representa al botón que ejecuta la Realidad Aumentada.

La linea es la siguiente:

<a id="scan" href="javascript:app.loadARchitectWorld(getSamplePath(0, 2));" style="BORDER: rgb(286,286,286) 2px solid; FONT-SIZE: 20pt; FONT-FAMILY: Verdana; BACKGROUND-COLOR: rgb((049,127,067))"><button>VER REALIDAD AUMENTADA</button></a>

Como se observa se llama al método loadARchitectWorld que carga otro método getSamplePath(0,2) en el cual se encuentran las direcciones de los subproyectos a ser llamados.

Nota: Estos archivos ya se encuentran implícitos en los archivos html que han sido compartidos.

Para que el método getSample() tenga éxito es necesario agregar las direcciones que serán utilizadas.

Ejecutar la realidad Aumentada con Geolocalización.

Realidad Aumentada con Geolocalización de Objetos 3D

Creación de Objetos 3D.

Para la creación de los objetos 3D como lo habiamos indicado es necesario hacerlo con Blender ya que es un software libre.

En la elaboración de cada objeto se dispuso una estandarización, es decir todos los objetos poseen características similares.

después de la creación de los objetos 3D tendremos como resultado archivos en formato .fbx, a los que debemos transformar a archivos .wt3

Esta acción la realizamos con el 3D Encoder de Wikitude.

Primero Abrimos nuestra aplicación Wikitude 3D Encoder.
Importamos el archivo .fbx.
Se da clic en File despues en la opción Open fbx/wt3
Seleccionar la Ubicación del archivo .fbx y aceptar.

Nota: Algunos Objetos fueron descargados de paginas donde ofrecen objetos 3D gratuitos como es el caso de la bicicleta.

Utilizar Ejemplo extraído del SDK de Wikitude.

Para este subproyecto es necesario extraer uno de los ejemplos del SDK de Wikitude.
Buscamos la carpeta denominada: "07_3dModels_6_3dModelAtGeoLocation"
Copiar el ejemplo indicado cambiar de nombre a la carpeta de "07_3dModels_6_3dModelAtGeoLocation" por "GeoLocationObjetos".
Pegar la carpeta "GeoLocationObjetos" dentro de la siguiente dirección www/funciones/ quedaría así www/funciones/GeoLocationObjetos/
Dentro de esta carpeta "GeoLocationObjetos" existe la carpeta "js",
Abrir la carpeta js con el editor de codigo Atom para modificar el archivo 3dmodelatgeolocation.js.
Buscar los lugares que necesitamos agregar junto con su longitud, latitud y altitud para que de esta manera poder visualizar esta información en la cámara del dispositivo Android.
Modificar el archivo 3dmodelatgeolocation.js.

Establecer variables que contengan los objetos 3D, repetir esta acción para todos los objetos 3D.

A continuación guardar la localización en nuevas variables.

Repetir esta acción para todas las ubicaciones de los objetos 3D.

Ejecutar la realidad Aumentada con Geolocalización de Objetos 3D.

REALIDAD AUMENTADA

UTN

PROYECTOS REALIDAD AUMENTADA UTN

Proyecto YahuAR

Instalación de las Herramientas

Estructura de la Aplicación

Crear Cuenta en Wikitude

Subir la Versión Mínima de Android

Solicitud de Licencia Educativa

Archivo config.xml

ARCHIVOS HTML

index.html

Crear un archivo index.html dentro de la carpeta "www" y reemplazarlo por el archivo index.html que ya existe.

Los archivos js y css que son utilizados en este archivo se encontrarán en el enlace para ser descargados.

Los archivos resaltados con color naranja se encuentran en el enlace listos para ser descargados.

El archivo style.css debe estar al mismo nivel que el index.html debido a que existe otro archivo con el mismo nombre dentro de la carpeta css

Realidad Aumentada con Reconocimiento de Imágenes

Realidad Aumentada con Geolocalización

Realidad Aumentada con Geolocalización de Objetos 3D

Creación de Objetos 3D.

Para la creación de los objetos 3D como lo habiamos indicado es necesario hacerlo con Blender ya que es un software libre.

En la elaboración de cada objeto se dispuso una estandarización, es decir todos los objetos poseen características similares.

después de la creación de los objetos 3D tendremos como resultado archivos en formato .fbx, a los que debemos transformar a archivos .wt3

Esta acción la realizamos con el 3D Encoder de Wikitude.

Utilizar Ejemplo extraído del SDK de Wikitude.

PROYECTOS REALIDAD AUMENTADA UTN

Proyecto YahuAR

Instalación de las Herramientas

Estructura de la Aplicación

Crear Cuenta en Wikitude

Subir la Versión Mínima de Android

Solicitud de Licencia Educativa

Archivo config.xml

ARCHIVOS HTML

​

index.html

​

Crear un archivo index.html dentro de la carpeta "www" y reemplazarlo por el archivo index.html que ya existe.

Los archivos js y css que son utilizados en este archivo se encontrarán en el enlace para ser descargados.

​

Los archivos resaltados con color naranja se encuentran en el enlace listos para ser descargados.

El archivo style.css debe estar al mismo nivel que el index.html debido a que existe otro archivo con el mismo nombre dentro de la carpeta css

Realidad Aumentada con Reconocimiento de Imágenes​

​

Realidad Aumentada con Geolocalización​

​

Realidad Aumentada con Geolocalización​ de Objetos 3D

Creación de Objetos 3D.

​

Para la creación de los objetos 3D como lo habiamos indicado es necesario hacerlo con Blender ya que es un software libre.

​

En la elaboración de cada objeto se dispuso una estandarización, es decir todos los objetos poseen características similares.

​

​

​

​

​

​

después de la creación de los objetos 3D tendremos como resultado archivos en formato .fbx, a los que debemos transformar a archivos .wt3

​

Esta acción la realizamos con el 3D Encoder de Wikitude.

​

​

​

​

​

​

​

​

​

​

​

​

Utilizar Ejemplo extraído del SDK de Wikitude.

Realidad Aumentada con Reconocimiento de Imágenes

Realidad Aumentada con Geolocalización

Realidad Aumentada con Geolocalización de Objetos 3D