Présentation du framework
awe.js
awe.js est un framework jQuery (donc Javascript) open source relativement simple d'utilisation (bien qu'encore peu documenté), récemment proposé conjointement par Rob Manson et BuildAR, qui permet de développer des applications de réalité augmentée basée marqueur ou localisation, au sein même d'un navigateur ! Les auteurs parlent d'ailleurs de « Web augmenté ». Le plugin est bâti sur JSARToolkit [1] et utilise entre autres les standards WebRTC [2] et WebGL [3] ; l'utilisation d'un navigateur récent est donc recommandée.
Le code source peut être téléchargé depuis GitHub, et plus exactement ici. Une petite introduction quant à son utilisation peut être visualisée à cet endroit, en plus des informations sur la page GitHub. Des développements plus avancés sont possibles : des exemples de couplage avec les lunettes Oculus Rift, le capteur Leap Motion et les Google Glass ont déjà été présentés.
Exemple d'utilisation
Application basée marqueur
Objectif
L'objectif est de réaliser une application élémentaire ayant pour fonction d'afficher une forme géométrique (en l'occurrence un cube) lorsqu'un marqueur donné est détecté. La vidéo capturée par la caméra sera retransmise en plein écran. Pour ce faire, on réutilise l'exemple publié par les auteurs, téléchargeable sur GitHub [4], en modifiant quelques paramètres. Le marqueur utilisé sera celui proposé par défaut, et la texture qui sera appliquée à notre modèle 3D celle ci-dessous :
 Marqueur utilisé
|
 Texture appliquée
|
Implémentation
Analysons tout d'abord les fichiers fournis dans l'exemple « marker_ar » [4] :
- le dossier js contient les différents fichiers Javascript relatifs au plugin « awe.js » ;
- le fichier awe-jsartoolkit-dependencies.js contient les fonctionnalités de JSARToolkit utilisées;
- le fichier awe.marker_ar.js implémente la gestion du flux vidéo de la caméra ;
- le fichier index.html décrit la structure de l'application ainsi que la structure de la scène.
C'est ce dernier fichier qui nous intéresse ici. Et en particulier le code Javascript qui y est inséré.
Pour définir la scène, il faut éditer l'attribut init :
window.awe.init({
...
});
Tous les extraits de code suivants devront alors être insérés à l'intérieur des incollades. On commence par définir quelques paramètres, notamment l'identifiant de l'élément «div» dans lequel sera inséré le résultat de la superposition, grâce à l'attribut container_id. Puis, on indique les standards utilisés ainsi que les URL des fichiers Javascript nécessaires au bon fonctionnement via les attributs capabilities et files. Note : 'gum' fait référence à l'API « get user media » [5]. Il ne reste alors plus qu'à définir la fonction callback.
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,
},
],
},
ready: function() {
awe.util.require([
{
// make sure it supports WebRTC, DeviceOrientation('gyro') and WebGL
capabilities: ['gum','webgl'],
files: [
[ 'js/awe-standard-dependencies.js', 'js/awe-standard.js'],
'js/awe-jsartoolkit-dependencies.js',
'js/awe.marker_ar.js',
],
success: callback,
},
{
capabilities: [],
success: function() {
document.body.innerHTML = '<p>Try this demo in the latest version of Chrome or Firefox on a PC or Android device</p>';
},
}]);
}
La fonction callback est le coeur du code car c'est à cet endroit que l'on définit les objets de notre scène. Le principe consiste à ajouter des « points d'intérêts » et à y lier des objets. Ici, un point d'intérêt s'entend au niveau de l'image et non pas au sens géo-spatial comme cela a pu être défini précédemment sur ce site. En l'occurrence, on ajoute un cube (cf. attribut geometry) auquel on applique la texture (cf. attribut texture) précédemment citée. Enfin, on ajoute des écouteurs pour être alerté lorsque le marqueur est détecté. A chaque détection, la fonction handler est appelée : si le marqueur correspond bien au marqueur indiqué alors on rend visible l'objet associé au point d'intérêt, à savoir le cube.
function callback(){
awe.setup_scene();
// now you can start adding your content here
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: 'ecl.jpg' },
},
{ poi_id: 'poi_1' });
awe.events.add([{
id: 'ar_tracking_marker',
device_types: {
pc: 1,
android: 1
},
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;
}
}
}]);
}
Résultat
Le résultat obtenu est en ligne. L'application est accessible à l'adresse suivante : http://chtomburin.net/vtecl/demo. Et le marqueur à l'adresse qui suit : http://chtomburin.net/vtecl/demo/marker.png. Un moyen rapide de tester l'application consiste à afficher le marqueur sur son smartphone, et à lancer l'application depuis son ordinateur. Ou bien l'inverse. L'application a été testée avec succès sous les dernières versions de Firefox et Chrome.
Insertion d'autres éléments
Malheureusement, la documentation proposée est encore assez pauvre. Il est de fait assez difficile de connaître a priori toutes les possibilités qu'offrent awe.js. Le meilleur moyen pour le moment d'obtenir des informations est de regarder le fichier awe-standard.js qui définit notamment l'objet awe. Par exemple, on peut se rendre compte des différentes formes que l'on peut visualiser, ainsi que des paramètres associés (l.538-574) :
switch(BODY.geometry.shape) {
case 'cube':
geometry = new THREE.CubeGeometry(shape.x, shape.y, shape.z);
break;
case 'sphere':
geometry = new THREE.SphereGeometry(shape.radius, shape.widthSegments, shape.heightSegments, shape.phiStart, shape.phiLength, shape.thetaStart, shape.thetaLength);
break;
case 'cylinder':
geometry = new THREE.CylinderGeometry(shape.radiusTop, shape.radiusBottom, shape.height, shape.radiusSegments, shape.heightSegments, shape.openEnded);
break;
case 'lathe':
geometry = new THREE.LatheGeometry(shape.points, shape.segments, shape.phiStart, shape.phiLength);
break;
case 'octahedron':
geometry = new THREE.OctahedronGeometry(shape.radius, shape.detail);
break;
case 'plane':
geometry = new THREE.PlaneGeometry(shape.width, shape.height, shape.widthSegments, shape.heightSegments)
break;
case 'tetrahedron':
geometry = new THREE.TetrahedronGeometry(shape.radius, shape.detail);
break;
case 'text':
geometry = new THREE.TextGeometry(shape.text, shape.parameters)
break;
case 'torus':
geometry = new THREE.TorusGeometry(shape.radius, shape.tube, shape.radialSegments, shape.tubularSegments, shape.arc);
break;
case 'torusknot':
geometry = new THREE.TorusKnotGeometry(shape.radius, shape.tube, shape.radialSegments, shape.tubularSegments, shape.p, shape.q, shape.heightScale);
break;
case 'tube':
geometry = new THREE.TubeGeometry(shape.path, shape.segments, shape.radius, shape.radiusSegments, shape.closed, shape.debug)
break;
default:
geometry = new THREE.CubeGeometry(10,10,10);
}
Remarquons qu'ici, le plugin fait appel à la bibliothèque JavaScript three.js [6] pour définir ses modèles 3D.
D'après les auteurs du SDK, des tutoriels devraient être mis en ligne prochainement.
Références
| [1] HTML5rocks. Writing Augmented Reality Applications using JSARToolKit. http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/ |
| [2] WebRTC. Web Real-Time Communications. http://www.webrtc.org/ |
| [3] Khronos. WebGL - OpenGL ES 2.0 for the Web. http://www.khronos.org/webgl/ |
| [4] BuildAR. Marker-based AR. https://github.com/buildar/awe.js/tree/master/examples/marker_ar |
| [5] W3C. Media Capture and Streams. http://dev.w3.org/2011/webrtc/editor/archives/20140218/getusermedia.html |
| [6] Three.js. Documentation. http://threejs.org/docs/ |
| BuildAR. awe.js, the jQuery for the Augmented Web. https://github.com/buildar/awe.js |
| BuildAR. An intro to awe.js (Tutorial). https://buildar.com/awe/tutorials/intro_to_awe.js/index.html#/ |
