AR.JS solución definitiva de realidad aumentada con javascript

Llevo unos cuantos post (los dejaré al final de esta) 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.

¿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

realidad aumentada con javascript

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í ->

Awe.js realidad aumentada con jquery

Realidad aumentada para web con GWT – Nyartoolkit

Realidad Aumentada con CocoonJS

Recibe toda la información necesaria sobre realidad aumentada y el mundo de la innovación. Descarga gratis material especial de nuestra comunidad.

One Response

  1. Daniel July 25, 2017

Leave a Reply