Présentation du SDK

Metaio SDK

metaioSDK

Le SDK de Metaio est une solution très complète pour le développement d'applications de réalité augmentée de tout type, et quelle que soit l'approche adoptée. Il est possible de développer des applications Android, iOS, Windows Phone et même au sein de l'environnement Unity. Metaio a également développé une application XML [1] répondant au nom d'AREL qui permet le déploiement rapide d'applications Web. A noter qu'il est possible de développer des applications sans programmer en utilisant l'outil Metaio Creator. De nombreuses informations sont consultables sur leur portail développeur.

AREL

AREL [2] est l'application XML de Metaio qui permet de décrire la scène relative à l'application, en d'autres termes à décrire la manière d'insérer les modèles virtuels ainsi que l'interface utilisateur associée. Cet outil permet de développer très facilement des applications Web de réalité augmentée. Le principe d'utilisation d'AREL est synthétisé par le schéma ci-dessous :

AREL
Source : [2]

En somme, une application basée sur AREL nécessite au moins trois fichiers : le document AREL qui contient une description statique de la scène, un document HTML qui permet d'ajouter un « calque » d'interface (des boutons par exemple) et un fichier Javascript pour la partie dynamique, entre autres pour faire le lien entre l'interface et ce qu'il se passe dans la scène. On peut bien évidemment appliquer une feuille de style CSS au fichier HTML pour un meilleur résultat visuel. Remarquons qu'une telle application ne peut fonctionner de manière autonome, c'est-à-dire sans être liée à un des « produits » de Metaio. En effet, le document AREL doit pouvoir être interprété pour que la scène qu'il décrit puisse être générée. Plusieurs possibilités s'offrent au développeur : « encapsuler » l'application au sein d'une application Android, iOS ou Windows Phone en utilisant l'API de Metaio ou bien utiliser l'application comme « channel » pour Junaio, l'application de Metaio.

Exemple d'utilisation

Application Web avec AREL

Objectif

Voyons de plus près comment peut s'implémenter une telle application. Pour ce faire, on se réfère au portail développeur de Metaio, qui propose des embryons de code pour bien démarrer [2]. En particulier, on s'intéresse à la réalisation d'une application de type viewer dans un contexte basé marqueur.

resultat
Source : [3]

Metaio propose un marqueur par défaut, qui illustre sa mascotte Metaioman (ci-dessous). Mais bien entendu, il est possible de créer ses propres marqueurs.

marqueur
Un des marqueurs proposés par Metaio

A ce propos, Metaio donne quelques conseils pour créer des marqueurs facilement détectables et assurer de fait un tracking robuste [4] : favoriser les photos et les images « riches » en couleurs et en éléments visuels avec des contours nets, éviter les images avec peu de détails visuels ou qui contiennent du texte, etc.

Implémentation

Le premier fichier à créer est le fichier XML. Ici, on souhaite afficher le modèle 3D tiger.md2 lorsque le marqueur correspondant sera détecté. Il faut donc indiquer où est stocké le modèle et comment on souhaite l'intégrer dans la scène. Les balises parlent d'elles-mêmes (c'est un des points forts de XML !) :

<?xml version="1.0" encoding="UTF -8"?>
<results>
	<arel>simpleAREL.html </arel>
	<object id="Tiger">
		<assets3d>
			<model>Assets/tiger.md2</model>
			<texture>Assets/tiger.png</texture>
			<transform>
				<translation>
					<x>10.0 </x><y>0.0</y><z>0.0</z>
				</translation>
				<rotation type="eulerdeg">
					<x>90.0 </x><y>0.0</y><z>0.0</z>
				</rotation>
			</transform>
			<properties>
				<coordinatesystemid>1</coordinatesystemid>
			</properties>
		</assets3d>
	</object>
</results>

A noter la balise <arel> qui indique le fichier HTML d'interface à superposer à notre scène. Le fichier HTML appelé est le suivant :

<!-- simpleAREL.html -->

<html>
	<head>
		<!-- Integrates the arel javascript bridge -->
		<script type="text/javascript" src="http :// dev.junaio.com/arel/js/arel.js"></script>
		
		<!-- Includes application logic -->
		<script type="text/javascript" src="logic.js"></script>
	</head>
	
	<body></body>
</html>

On constate qu'en l'occurrence il n'y a pas d'interface (le « body » est vide). On ne fait qu'importer la bibliothèque Javascript de Metaio, ainsi que le script dédié à l'application, ici nommé logic.js (ci-dessous).

// logic.js

function trackingHandler (type , param ){
	// called when a pattern is tracked / lost
}

arel.sceneReady(function(){
	// scale up loaded 3D model by factor 2
	arel.Scene.getObject("Tiger").setScale( new arel.Vector3D (2, 2, 2) );
	// set a listener for tracking events
	arel.Events.setListener( arel.Scene, trackingHandler );
});

L'attribut sceneReady permet de charger les éléments de la scène et de créer des écouteurs : lorsque le marqueur sera détecté, la fonction trackingHandler sera appelée.

Résultat

Metaio ne fournit pas d'images de ce que donne cette application élémentaire, et pour des raisons techniques (smartphone pas assez puissant), je n'ai pas pu l'essayer moi-même. En revanche, au regard des tutoriaux disponibles [3], cette application devrait donner un résultat analogue à l'image suivante, au marqueur et au modèle virtuel près :

resultat
Résultat analogue pouvant être obtenu

Remarque : Metaio supporte les modèles 3D au format OBJ (modèles statiques), MD2 ou FBX (modèles animés). Des logiciels de modélisation tels que Blender ou 3dMax sont donc tout à fait utilisables.

Références

[1] W3C. Extensible Markup Language (XML). http://www.w3.org/XML/
[2] Metaio. AREL overview. http://dev.metaio.com/arel/overview/
[3] Metaio. Hello, World! http://dev.metaio.com/sdk/tutorials/hello-world/
[4] Metaio. Tips to Create Image Trackable http://dev.metaio.com/sdk/tracking-config/create-image-trackable/
Metaio. Metaio Developer Portal. http://dev.metaio.com/sdk/getting-started/
Metaio. Creator. http://dev.metaio.com/creator/
Metaio. AREL XML reference. http://dev.metaio.com/arel/xml-reference/