Llevo unos cuantos post (los dejaré al final de este) investigando sobre realidad aumentada con javascript. En el 2010 parecía un realidad difícil y aislada. Predominaba flash en todas las webs y la realidad aumentada no era mainstream. Ahora, 7 años después, y gracias a una librería llamada threejs cada vez existen proyectos orientados a los navegadores como chrome.

El autor se llama Jerome Etienne y es un entusiasta irlandés que busca transformar «mágicamente» la tecnología de webgl y threejs (tiene una web donde enseña dicha librería) en realidad aumentada. Su librería es considerada como uno de los productos más eficientes para trabajar realidad aumentada con javascript. Él es un ex Daqri por lo que muchos dirán: todo tiene sentido.

Su librería se llama AR.js (augmented reality javascript) y muchos ya hablan de la tendencia #webAR. He estado probando su trabajo y pronostico que escucharemos más sobre él.

Tabla de Contenido hide
1 ¿Por qué AR.JS es una solución definitiva para webAR?
2 Primeros pasos
3 Este sería el ejemplo del proyecto
3.1 Los links de antiguos post aquí
4 Nuevos post sobre ARJS
4.1 Otra alternativa 2019 – actualización

¿Por qué AR.JS es una solución definitiva para webAR?

Quizá la palabra «definitiva» es muy apresurada, podríamos decir que es la más eficiente actualmente en el mercado. Explicaré los puntos más resaltantes:

  • Rápida render: Con objetos simples se llega a 60fps y lo he usado con mi htc gama baja.
  • Orientado a web : Antes debíamos instalar programas y plugin. Ahora con esta solución no requiere nada porque es enteramente javascript (three.js + jsartoolkit5)
  • Open Source : libre, libre, libre.
  • Estandarizado: Funciona con cualquier navegador que corra webgl y webrtc

Primeros pasos

Vamos a lanzar el primer ejemplo de realidad aumentada.

  • Entra a su github -> https://github.com/jeromeetienne/AR.js
  • Clona o descarga el archivo para tu uso personal
  • Tenemos que abrir el archivo llamado mobile-performance. Este se encuentre \AR.js-master\three.js\examples
  • Si lanzas el proyecto chrome posiblemente no aparecerá nada. Esto es porque primero debe estar en un entorno web para visualizar los objetos.



  • En esta parte del código se escribe la información general sobre las llamadas a three.js y artoolkit.js
<!DOCTYPE html>
 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 <!-- three.js library -->
 <script src='vendor/three.js/build/three.js'></script>
 <script src="vendor/three.js/examples/js/libs/stats.min.js"></script>
 <!-- jsartookit -->
 <script src="../vendor/jsartoolkit5/build/artoolkit.min.js"></script>
 <script src="../vendor/jsartoolkit5/js/artoolkit.api.js"></script>
 <!-- include threex.artoolkit -->
 <script src="../threex-artoolkitsource.js"></script>
 <script src="../threex-artoolkitcontext.js"></script>
 <script src="../threex-armarkercontrols.js"></script>

<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'>
  <a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - three.js mobile performance
  <br/>
  Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
 </div><script>
  • Iniciando el render, es decir, preparando para la lanzar las imágenes y formatos 
//////////////////////////////////////////////////////////////////////////////////
 // Init
 //////////////////////////////////////////////////////////////////////////////////

// init renderer
 var renderer = new THREE.WebGLRenderer({
 // antialias : true,
 alpha: true
 });
 renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 // renderer.setPixelRatio( 1/2 );
 renderer.setSize( window.innerWidth, window.innerHeight );
 renderer.domElement.style.position = 'absolute'
 renderer.domElement.style.top = '0px'
 renderer.domElement.style.left = '0px'
 document.body.appendChild( renderer.domElement );

// array of functions for the rendering loop
 var onRenderFcts= [];

// init scene and camera
 var scene = new THREE.Scene();

var ambient = new THREE.AmbientLight( 0x666666 );
 scene.add( ambient );

var directionalLight = new THREE.DirectionalLight( 0x887766 );
 directionalLight.position.set( -1, 1, 1 ).normalize();
 scene.add( directionalLight );
  • Activamos cámara
//////////////////////////////////////////////////////////////////////////////////
 // Initialize a basic camera
 //////////////////////////////////////////////////////////////////////////////////

// Create a camera
 var camera = new THREE.Camera();
 scene.add(camera);
  • Se lanza la base de la realidad aumentada con artoolkit.js. Por ejemplo se lanza el comando de la cámara, el tamaño de la resolución
////////////////////////////////////////////////////////////////////////////////
 // handle arToolkitSource
 ////////////////////////////////////////////////////////////////////////////////

var arToolkitSource = new THREEx.ArToolkitSource({
 // to read from the webcam
 sourceType : 'webcam',

// to read from an image
 // sourceType : 'image',
 // sourceUrl : '../../data/images/img.jpg',

// to read from a video
 // sourceType : 'video',
 // sourceUrl : '../../data/videos/headtracking.mp4',

sourceWidth: 80*3,
 sourceHeight: 60*3,
 })

arToolkitSource.init(function onReady(){
 // handle resize of renderer
 arToolkitSource.onResize(renderer.domElement)
 })

// handle resize
 window.addEventListener('resize', function(){
 // handle arToolkitSource resize
 arToolkitSource.onResize(renderer.domElement)
 })
  • Se lanza los demás parámetros. Por ejemplo el famoso camara_para, el elemento para funcionar la cámara web.
////////////////////////////////////////////////////////////////////////////////
 // initialize arToolkitContext
 ////////////////////////////////////////////////////////////////////////////////

// create atToolkitContext
 var arToolkitContext = new THREEx.ArToolkitContext({
 cameraParametersUrl: '../../data/data/camera_para.dat',
 detectionMode: 'mono',
 imageSmoothingEnabled: false,
 maxDetectionRate: 30,
 sourceWidth: arToolkitSource.parameters.sourceWidth,
 sourceHeight: arToolkitSource.parameters.sourceHeight,
 })
 // initialize it
 arToolkitContext.init(function onCompleted(){
 // copy projection matrix to camera
 camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
 })

// update artoolkit on every frame
 onRenderFcts.push(function(){
 if( arToolkitSource.ready === false ) return

arToolkitContext.update( arToolkitSource.domElement )
 })
  • Ya nos olvidamos de los marcadores? En esta versión aún se usa el marcador de blanco y negro gracias a nuestro marcador por excelencia: EL HIRO
////////////////////////////////////////////////////////////////////////////////
 // Create a ArMarkerControls
 ////////////////////////////////////////////////////////////////////////////////

var markerRoot = new THREE.Group
 scene.add(markerRoot)
 var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
 type : 'pattern',
 patternUrl : '../../data/data/patt.hiro'
 // patternUrl : '../../data/data/patt.kanji'
 })
  • Se agrega el objeto 3d de three.js para lanzar elementos. Para esto se puede trabajar con diferentes formas y elementos. Yo estoy tratando de trabajar con https://threejs.org/editor/ 
//////////////////////////////////////////////////////////////////////////////////
 // add an object in the scene
 //////////////////////////////////////////////////////////////////////////////////

// add a torus knot
 var geometry = new THREE.CubeGeometry(1,1,1);
 var material = new THREE.MeshNormalMaterial({
 transparent : true,
 opacity: 0.5,
 side: THREE.DoubleSide
 });
 var mesh = new THREE.Mesh( geometry, material );
 mesh.position.z = geometry.parameters.height/2
 markerRoot.add( mesh );

var geometry = new THREE.TorusKnotGeometry(0.3,0.1,32,32);
 var material = new THREE.MeshNormalMaterial();
 var mesh = new THREE.Mesh( geometry, material );
 mesh.position.z = 0.5
 markerRoot.add( mesh );

onRenderFcts.push(function(){
 mesh.rotation.x += 0.1
 })
  • Parte final para renderizar
//////////////////////////////////////////////////////////////////////////////////
 // render the whole thing on the page
 //////////////////////////////////////////////////////////////////////////////////
 var stats = new Stats();
 document.body.appendChild( stats.dom );
 // render the scene
 onRenderFcts.push(function(){
 renderer.render( scene, camera );
 stats.update();
 })

// run the rendering loop
 var lastTimeMsec= null
 requestAnimationFrame(function animate(nowMsec){
 // keep looping
 requestAnimationFrame( animate );
 // measure time
 lastTimeMsec = lastTimeMsec || nowMsec-1000/60
 var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
 lastTimeMsec = nowMsec
 // call each update function
 onRenderFcts.forEach(function(onRenderFct){
 onRenderFct(deltaMsec/1000, nowMsec/1000)
 })
 })
 </script></body>

Este sería el ejemplo del proyecto

Pruébalo tu mismo haciendo clic en este ejemplo – demo en vivo

Los links de antiguos post aquí

Estos post fueron investigaciones relacionadas a realizar realidad aumentada a través del navegador.



Nuevos post sobre ARJS

Realicé un post sobre AR.js y su uso para formas geométricas dentro del código. No realizo una llamada a un objeto, sino a la misma librería que podemos estar usando como A-frame.

AR.js para proyectar elementos geométricos -> http://emiliusvgs.com/realidad-aumentada-arjs-aframe-geometria/

Realicé otro post sobre el uso de AR.js y cómo importar objetos 3D con el formato gLTF para unir en un proyecto de realidad aumentada.

AR.js para proyectar objetos 3D (GLTF) ->http://emiliusvgs.com/realidad-aumentada-con-objetos-3d-arjs-aframe/

Otra alternativa 2019 – actualización

En el 2018 se dió a conocer 8THWall, una plataforma que brinda un framework para trabajar proyectos de realidad aumentada para navegadores móviles. Es interesante descubrir como va creciendo este mercado y a su vez impulsando varios características para desarrollar proyectos.

8th Wall permite hacer ejemplos teniendo en cuenta la superficies planas, imágenes como tracker y claro agregar objetos 3D estáticos o animados para ser usados dentro de las experiencias. La tendencia Web-AR crece con fuerza no dudes en aprender esta tecnología pues será muy utilizado en los siguientes años. Emiliusvgs se despide! Bye!



RELATED ARTICLESMORE FROM AUTHOR

3 COMMENTS

  1. Hola Emilio Vegas,
    He visto tu tutorial de realidad aumentada, es un trabajo increíble de tecnología web, me preguntaba si con estas herramientas es posible crearme una pagina web donde almacene mis diseños 3d y mis marcadores (tal ves en una base de datos), y cuando enfoque con mi dispositivo algún marcador especifico me muestre mi diseño 3d?. En todo caso me puedes orientar.. xfa

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.