AR.JS solución definitiva de realidad aumentada con javascript
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 threejscada 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
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 -> https://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) ->https://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!
Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk
0 comentarios:
Publicar un comentario