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.
¿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.
- El primero es sobre realidad aumentada con AWE.JS (otro proyecto de javascript)http://emiliusvgs.com/2016/10/08/awejs-realidad-aumentada-jquery/
- Este un proyecto extenso y muy bien analizado sobre realidad aumentada con GWT, utilizando Chrome http://emiliusvgs.com/2013/10/08/realidad-aumentada-web-gwt/
- Realidad aumentada con una librería javascript llamada Cocoon. http://emiliusvgs.com/2014/07/26/realidad-aumentada-cocoonjs/
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!
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
Hola realizo pAso a paso pero me aparece camara error. Ayuda por favor.