Si bien tenemos un tutorial sobre GTW – Nyartoolkit sentía que era necesario obtener una versión más fácil para el usuario. Por ello encontré awe.js Lamentablemente no está actualizada del todo. Por lo que esperemos que nos otorguen nuevas actualizaciones para trabajar con ejemplos más complejos.
La web evoluciona constantemente. Tenemos a Chrome que impulsa proyectos webgl y a Vivaldi que les pisa los talones. La web con HTML5 es el «estándar». Ya hemos llegado a la era donde los dispositivos se pueden controlar con códigos html + javascript. La realidad aumentada ya es portable para smartphones y desde hace un año es factible trabajarlo con javascript. Atrás quedó flash y flartoolkit: la primera librería que utilicé de manera comercial.
A continuación les mostraré el tutorial de realidad aumentada con javascript
La librería de realidad aumentada: Awe.js
Es una librería especializada para hacer realidad aumentada en navegadores. Así de sencillo. Para trabajar esta librería se ha fusionado a three.js + jsartoolkit. Con estos dos elementos como base se ha logrado un buen resultado que interpeta objetos y es capaz de utilizar la cámara web desde el browser ya sea desde un celular o una computadora. Además no solo funciona en los navegadores. Awe tiene ejemplos para google glash, oculus rift, leap motion y geocalización desde smartphone.
Yo mostraré la versión para navegadores.
- Descargue la librería desde github
- Abre tu programa de edición de códigos como sublime text.
- Interpreta el código y modifícalo según tu conveniencia
Este es el ejemplo en vivo
Iniciando el código. Se configura los elementos de cámara, luces.
<script type="text/javascript">
window.addEventListener('load', function() {
window.awe.init({
device_type: awe.AUTO_DETECT_DEVICE_TYPE,
settings: {
container_id: 'container',
default_camera_position: { x:0, y:0, z:0 },
default_lights:[
{
id: 'point_light',
type: 'point',
color: 0xFFFFFF,
Leyendo los códigos y librerías de dependencia . Aparece la tecnología jsartoolkit y el marcador awe.
ready: function() {
awe.util.require([
{
capabilities: ['gum','webgl'],
files: [
[ '../../js/awe-standard-dependencies.js', '../../js/awe-standard.js'],
'awe-jsartoolkit-dependencies.js',
'awe.marker_ar.js',
Se lanza la aplicación y las coordenadas dentro del espacio. En «geometry» se puede modificar según los elementos de threejs y en el apartado de texture se agrega la imagen que cubrirá el objeto. Además la lectura de pc:1 y android:1 determina la visualización de ambos dispositivos.
success: function() {
awe.setup_scene();
awe.pois.add({ id:'poi_1', position: { x:0, y:0, z:10000 }, visible: false });
awe.projections.add({
id:'projection_1',
geometry: { shape: 'cube', x:120, y:120, z:120 },
material:{ type: 'phong', color: 0xFFFFFF },
texture: { path: 'awe_by_buildAR.png' },
}, { poi_id: 'poi_1' });
awe.events.add([{
id: 'ar_tracking_marker',
device_types: {
pc: 1,
android: 1
Se lanza el evento de la lectura del marcador y del tracking.
register: function(handler) {
window.addEventListener('ar_tracking_marker', handler, false);
},
unregister: function(handler) {
window.removeEventListener('ar_tracking_marker', handler, false);
},
handler: function(event) {
if (event.detail) {
if (event.detail['64']) { // we are mapping marker #64 to this projection
awe.pois.update({
data: {
visible: true,
position: { x:0, y:0, z:0 },
matrix: event.detail['64'].transform
},
where: {
id: 'poi_1'
}
});
}
else {
awe.pois.update({
data: {
visible: false
},
where: {
id: 'poi_1'
}
});
}
awe.scene_needs_rendering = 1;
}
}
}])
},
},
Marcador Awe.js
