Hola Aumentados! Bienvenidos a este nuevo tutorial donde hablaremos un poco de los tipos de modelos 3D que podemos utilizar en nuestras aplicaciones de realidad aumentada utilizando la libreria AR.js, A-frame y javascript.
Nunca antes haz escuchado de la libreria Ar.js (AR. js is a lightweight library for Augmented Reality on the Web, coming with features like Marker based and Location based AR. ) aqui te dejo el link directo a su pagina oficial: AR.js GitHub
Nunca antes haz escuchado de A-frame? Aqui te dejo el link directo a su pagina donde se introduce a Ar.js: A-frame
Despues de realizar esta breve introduccion podemos comenzar!
- Que es un modelo 3D? Es una representacion matematica de cualquier elemento (objeto) tridimensional, el cual se trabaja y desarrolla en un software especializado para diseño 3D (3d max, maya, blender, google sketchup, entre muchos otros). El resultado de este proceso se llamada Modelo 3D.
- Que tipo de extensiones de modelos 3D existen? Existen muchos tipos de extensiones y cada software especializado tiene su extension propia, asi mismo existen otras extensiones que son genericas y que pueden ser utilizadas por cualquier tipo de software 3D.
- Pero que es una extension? Bueno, te explico; cuando decides empezar en el mundo de la creacion de contenido 3D (modelos 3D) eliges un software, por ejemplo 3D Max y la extension con la que se va a guardar tu modelo sera .max. si eliges por ejemplo Blender tu extension sera .blend y si elijes Rhino 3D, pues sera .3dm. Estas son extensiones propias de cada programa pero tambien existen las extensiones genericas. Aqui una web que muestra algunos tipo de extensiones
- Que es una extension generica? Este tipo de extensiones puede ser exportadas o importadas a tu software 3D. por ejemplo, si creas contenido en 3D max y decides pasar tu archivo a Blender no podras hacerlo por que cada programa tiene su extension personalizada y ahi es cuando entran las extensiones genericas, con ellas solo tendras que exportar tu archivo en un formato .DAE .obj .Gltf , etc y asi podras seguir trabajandolo en cualquier software de creacion de contenido 3D.
Despues de explicar un poco que es un modelo 3D y sus tipos de extensiones podemos pasar a lo que vinimos. Hablar sobre los distintos tipos de Modelos 3D que nos permite utilizar la libreria Ar.js y A-frame.
Cuales son los tipos de modelos que nos permiten:
- COLLADA DAE (.dae)
- OBJ (.obj)
- glTF 2.0 y glTF (.gltf and .bin)
- PLY (.ply)
- JSON (.json)
- FBX (.fbx)
Pasemos a explicar como utilizar cada uno de ellos en AR.js
este es el codigo mas basico para crear realidad aumentada en javascript con ar.js
<script src=”https://aframe.io/releases/0.6.0/aframe.min.js"></script> <script src=”https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script> <body style=’margin : 0px; overflow: hidden;’> <a-scene embedded arjs=’sourceType: webcam;’> <a-marker preset=’hiro’> "AQUI AGREGAS TU MODELO 3D" </a-marker> <a-entity camera> </a-entity> </a-scene> </body>
Luego de que ya tenemos nuestro codigo basico armado solo nos queda empezar a crear y llamar nuestros modelos 3D.
Empecemos!!!
COLLADA DAE (.dae)
Este tipo de modelo 3D fue eliminado de la version actual de Ar.js y A-frame pero aun asi podemos acceder y utilizarlo si usamos la version 0.6.0 y como hacemos eso? al inicio de nuestra aplicacion en la seccion de scripts.
- <script src=”https://aframe.io/releases/0.6.0/aframe.min.js«></script> version actual AR.js v.2.0.0.
<a-entity collada-model=”url(ubicacion y nombre de tu modelo 3d con extension .dae)”> <a-entity>
tambien existe otro metodo para utilizar un modelo .dae si quieres saber como hacerlo puedes descargar los archivos al final de esta entrada.
OBJ (.obj)
Para utilizar los modelos .obj, debes saber que este tipo de archivo utiliza dos archivos, el primero es uno con extension .obj y el segundo es un archivo con extension .mtl (este archivo contiene las rutas de todas las texturas del modelo 3D). Para utilizar los archivos .obj en realidad aumentada debes de agregar lo siguiente a tu codigo:
<a-entity obj-model=”obj: url(ubicacion y nombre de tu modelo 3d con extension .obj); mtl: url(ubicacion y nombre de tu modelo 3d con extension .mtl)”><a-entity>
Descargar ejemplo de .obj
glTF 2.0 y glTF (.gltf and .bin)
Para utilizar los modelos gltf 2.0 y glTF, debes saber que este tipo de archivo utiliza tambien dos archivos, el primero es uno con extension .gltf y el segundo es uno con extension .bin. Para utilizar los modelos con este tipo de extension en realidad aumentada (agumented reality) debes de agregar lo siguiente a tu codigo:
<a-entity gltf-model-next=”src: url(Ubicacion y nombre con extension .gltf)”></a-entity>
con los modelos gltf 2.0 y no con loe glTF. Debes de agregar un nuevo script en tu codigo y es el siguiente:
<script src=”https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js»></script>
Con los siguientes tipos de modelos (PLY, JSON, FBX) tambien es necesario agergar el script anterior
PLY (.ply)
<a-entity ply-model=”src: url(Ubicacion y nombre con extension .ply);"> </a-entity>
JSON (.json)
<a-entity json-model=”src: url(Ubicacion y nombre con extension .json);”></a-entity>
FBX (.fbx)
<a-entity fbx-model=”src: url(Ubicacion y nombre con extension .fbx);”></a-entity>
Esta estas son las configuraciones basicas para llamar a nuestras aplicaciones de realidad aumentada los diferentes tipos de modelos 3D. Debes de tener en cuenta que si el modelo tiene muchos poligonos, la aplicacion puede llegar a tardar un poco en cargar el modelo y verse bloqueada mientras carga el modelo (Depende tambien del equipo en el que estes corriendo la aplicacion). Como consejo evita crear modelos demasidos complejos y mantente dentro de un rango prudente, para ello podrias aprender a hacerlos en modo de prueba y error para ver cual te funciona mejor de acuerdo a tu aplicacion.
Si quieres descargar algunos de los ejemplos de este tutorial puedes hacerlo en el siguiente link:
DESCARGAR EJEMPLOS DAE – GLTG Y OBJ
Nota: Dependiendo del modelo 3D que hagas o descargues debes de tener en cuenta la iluminacion del modelo, la posicion y el tamaño. Si tu modelo esta muy grande puedes hacerlo mas pequeño utilizando la opcion (scale=».001 .001 .001″) utilizando decimales y no negativos (scale=»-10 -10 -10″) NO UTILICES NEGATIVOS.
Nota adicional: Es posible que algunos simbolos como ; < > «» se vean afectados en el codigo por el editor o la forma que los copias, asi que verifica que todo este en orden antes de compilar tu aplicacion.