Dans notre publication précédente sur la boîte à outils Web GWT , nous avons discuté des forces et des caractéristiques de GWT , qui, pour rappeler l'idée générale, nous permet de transpiler le code source Java en JavaScript et de mélanger les bibliothèques Java et JavaScript de manière transparente. Nous avons noté que le JavaScript généré par GWT est considérablement optimisé.

Dans le post d’aujourd’hui, nous aimerions aller un peu plus loin et voir la boîte à outils GWT en action. Nous allons vous montrer comment tirer parti de GWT pour créer une application particulière: un réalité augmentée (AR) application web qui s'exécute en temps réel, entièrement en JavaScript, dans le navigateur.

différence entre ai et vi

Dans cet article, nous nous concentrerons sur la façon dont GWT nous donne la possibilité d'interagir facilement avec de nombreuses API JavaScript, telles que WebRTC et WebGL, et nous permet d'exploiter une grande bibliothèque Java, NyARToolkit, jamais destinée à être utilisée dans le navigateur. Nous montrerons comment GWT a permis à mon équipe et moi à Jooink de rassembler toutes ces pièces pour créer notre projet animalier, Picshare , une application AR basée sur des marqueurs que vous pouvez essayer dans votre navigateur maintenant .

Cet article ne sera pas une présentation complète de la création de l'application, mais présentera plutôt l'utilisation de GWT pour surmonter facilement des défis apparemment insurmontables.

Aperçu du projet: de la réalité à la réalité augmentée

Picshare utilise la réalité augmentée basée sur des marqueurs. Ce type d'application AR recherche la scène pour un marqueur : un motif géométrique spécifique et facilement reconnaissable, comme ça . Le marqueur fournit des informations sur la position et l’orientation de l’objet marqué, ce qui permet au logiciel de projeter des scènes 3D supplémentaires dans l’image de manière réaliste. Les étapes de base de ce processus sont:

• Accéder à la caméra: Lorsqu'il s'agit d'applications de bureau natives, le système d'exploitation fournit un accès E / S à une grande partie du matériel du périphérique. Ce n’est pas la même chose avec les applications Web. Les navigateurs ont été conçus pour être en quelque sorte un «bac à sable» pour le code JavaScript téléchargé à partir du net, et à l'origine n'étaient pas destinés à permettre aux sites Web d'interagir avec la plupart du matériel de l'appareil. WebRTC franchit cette barrière en utilisant les fonctionnalités de capture multimédia HTML5, permettant au navigateur d'accéder, entre autres, à la caméra de l'appareil et à son flux.
• Analysez le flux vidéo: Nous avons le flux vidéo… et maintenant? Nous devons analyser chaque image pour détecter les marqueurs et calculer la position du marqueur dans le monde 3D reconstruit. Cette tâche complexe est l'affaire de TheARToolkit .
• Augmentez la vidéo: Enfin, nous voulons afficher la vidéo originale avec des objets 3D synthétiques ajoutés. Nous utilisons WebGL pour dessiner la scène finale augmetée sur la page Web.

Tirer parti des API HTML5 avec GWT

L'utilisation d'API JavaScript telles que WebGL et WebRTC permet des interactions inattendues et inhabituelles entre le navigateur et l'utilisateur.

Par exemple, WebGL permet des graphiques accélérés par le matériel et, avec l'aide du tableau typé spécification, permet au moteur JavaScript d'exécuter le calcul des nombres avec des performances presque natives. De même, avec WebRTC, le navigateur peut accéder aux flux vidéo (et autres données) directement à partir du matériel informatique.

WebGL et WebRTC sont tous deux des bibliothèques JavaScript qui doivent être intégrées au navigateur Web. La plupart des navigateurs HTML5 modernes offrent une prise en charge au moins partielle des deux API (comme vous pouvez le voir Ici et Ici ). Mais comment exploiter ces outils dans GWT, qui est écrit en Java? Comme discuté dans le post précédent , La couche d’interopérabilité de GWT, JsInterop (publié officiellement dans GWT 2.8) en fait un jeu d'enfant.

Utiliser JsInterop avec GWT 2.8 est aussi simple que d'ajouter -generateJsInteropExports comme argument du compilateur. Les annotations disponibles sont définies dans le package jsinterop.annotations, regroupé dans gwt-user.jar.

WebRTC

Par exemple, avec un travail de codage minimal, en utilisant le WebRTC getUserMedia sur Chrome avec GWT devient aussi simple que d'écrire:

Navigator.webkitGetUserMedia( configs, stream -> video.setSrc( URL.createObjectURL(stream) ), e -> Window.alert('Error: ' + e) );

Où la classe Navigator peut être défini comme suit:

@JsType(namespace = JsPackage.GLOBAL, isNative = true, name='navigator') final static class Navigator { public static native void webkitGetUserMedia( Configs configs, SuccessCallback success, ErrorCallback error); }

La définition des interfaces SuccessCallback et ErrorCallback, tous deux implémentés par l'expression lambda ci-dessus et définis en Java au moyen de @JsFunction annotation:

@JsFunction public interface SuccessCallback { public void onMediaSuccess(MediaStream stream); } @JsFunction public interface ErrorCallback { public void onError(DomException error); }

Enfin, la définition de la classe URL est presque identique à celui de Navigator, et de même, le Configs la classe peut être définie par:

@JsType(namespace = JsPackage.GLOBAL, isNative = true, name='Object') public static class Configs { @JsProperty public native void setVideo(boolean getVideo); }

La mise en œuvre réelle de toutes ces fonctionnalités a lieu dans le moteur JavaScript du navigateur.

Vous pouvez trouver le code ci-dessus sur GitHub Ici .

Dans cet exemple, par souci de simplicité, le navigator.getUserMedia() L'API est utilisée car c'est la seule qui fonctionne sans polyfilling sur la version stable actuelle de Chrome. Dans une application de production, nous pouvons utiliser adapter.js pour accéder au flux via le plus récent navigator.mediaDevices.getUserMedia() API, uniformément dans tous les navigateurs, mais cela dépasse le cadre de la présente discussion.

WebGL

L'utilisation de WebGL à partir de GWT n'est pas très différente de celle de WebRTC, mais c'est un peu plus fastidieux en raison de la complexité intrinsèque de la norme OpenGL.

Notre approche ici reflète celle suivie dans la section précédente. Le résultat de l'encapsulation peut être vu dans l'implémentation GWT WebGL utilisée dans Picshare , qui peut être trouvé Ici , et un exemple des résultats produits par GWT peut être trouvé Ici .

Activer WebGL en lui-même ne nous donne pas réellement de capacités graphiques 3D. Comme l'écrit Gregg Tavares :

Ce que beaucoup de gens ne savent pas, c'est que WebGL est en fait une API 2D, pas une API 3D.

L'arithmétique 3D doit être effectuée par un autre code et transformée en image 2D pour WebGL. Il existe de bonnes bibliothèques GWT pour les graphiques 3D WebGL. Mon favori est Parallaxe , mais pour la première version de Picshare nous avons suivi un chemin plus «do-it-yourself», écrivant une petite bibliothèque pour le rendu de maillages 3D simples. La bibliothèque nous permet de définir un caméra en perspective et gérer une scène d'objets. N'hésitez pas à y jeter un œil, Ici .

Compilation de bibliothèques Java tierces avec GWT

NyARToolkit est un port pur-Java de ARToolKit , une bibliothèque de logiciels pour créer des applications de réalité augmentée. Le port a été écrit par les développeurs japonais à Nyatla . Bien que l'ARToolKit original et la version Nyatla aient quelque peu divergé depuis le portage d'origine, le NyARToolkit est toujours activement maintenu et amélioré.

La RA basée sur les marqueurs est un domaine spécialisé et nécessite des compétences en vision par ordinateur, en traitement d'images numériques et en mathématiques, comme cela apparaît ici:

Reproduit de Documentation ARToolKit .

Reproduit de Documentation ARToolKit .

Tous les algorithmes utilisés par la boîte à outils sont documentés et bien compris, mais les réécrire à partir de zéro est un processus long et sujet aux erreurs, il est donc préférable d'utiliser une boîte à outils existante et éprouvée, comme ARToolKit. Malheureusement, lorsque vous ciblez le Web, rien de tel n'est disponible. Les boîtes à outils les plus puissantes et avancées n'ont pas d'implémentation en JavaScript, un langage principalement utilisé pour manipuler des documents et des données HTML. C'est là que GWT prouve sa force inestimable, nous permettant de simplement transpiler NyARToolkit en JavaScript, et de l'utiliser dans une application Web avec très peu de tracas.

Compiler avec GWT

Puisqu'un projet GWT est essentiellement un projet Java, utiliser NyARToolkit est juste une question d'importer les fichiers source dans votre chemin source. Cependant, notez que puisque la transpilation du code GWT en JavaScript se fait au niveau du code source, vous avez besoin des sources de NyARToolkit, et pas seulement d'un JAR avec les classes compilées.

La bibliothèque utilisée par Picshare peut être trouvé Ici . Il ne dépend que des packages trouvés à l'intérieur de lib/src et lib/src.markersystem de la version NyARToolkit archivée Ici . Nous devons copier et importer ces packages dans notre projet GWT.

Nous devrions garder ces paquets tiers séparés de notre propre implémentation, mais pour procéder à la «GWT-ization» de NyARToolkit, nous devons fournir un fichier de configuration XML qui informe le compilateur GWT où chercher les sources. Dans le package jp.nyatla.nyartoolkit, on ajoute le fichier NyARToolkit.gwt.xml

com.jooink.gwt.nyartoolkit

Maintenant, dans notre package principal, GWT_NyARToolKit.gwt.xml, nous créons le fichier de configuration principal, No source code is available for type java.io.InputStream; did you forget to inherit a required module? , et demandons au compilateur d'inclure la source de Nyatla dans le chemin de classe en héritant de son fichier XML:

InputStream

Assez facile, en fait. Dans la plupart des cas, cela suffirait, mais malheureusement, nous n’avons pas encore terminé. Si nous essayons de compiler ou d'exécuter via Mode Super Dev à ce stade, nous rencontrons une erreur indiquant, de manière assez surprenante:

jre

La raison en est que NyARToolkit (c'est-à-dire une bibliothèque Java destinée aux projets Java) utilise des classes du JRE qui ne sont pas prises en charge par les GWT JRE émulé . nous discuté brièvement de cela dans le post précédent.

Dans ce cas, le problème est avec java.io.FileInputStream java.io.InputStream java.io.InputStreamReader java.io.StreamTokenizer java.lang.reflect.Array java.nio.ByteBuffer java.nio.ByteOrder et classes d'E / S associées. En l'occurrence, nous n'avons même pas besoin d'utiliser la plupart de ces classes, mais nous devons fournir une implémentation au compilateur. Eh bien, nous pourrions investir une tonne de temps dans la suppression manuelle de ces références de la source NyARToolkit, mais ce serait fou. GWT nous offre une meilleure solution: fournissez nos propres implémentations des classes non prises en charge via la balise XML.

Comme décrit dans le documentation officielle :

calculateur de taux horaire d'entrepreneur indépendant

Thetag indique au compilateur de re-rooter un chemin source. Ceci est utile dans les cas où vous souhaitez réutiliser une API Java existante pour un projet GWT, mais la source d'origine n'est pas disponible ou ne peut pas être traduite. Une raison courante à cela est d'émuler une partie du JRE non implémentée par GWT.

Sois exactement ce dont nous avons besoin.

Nous pouvons créer un java.lang.reflect.Array répertoire dans le projet GWT, où nous pouvons mettre nos implémentations pour les classes qui nous posent des problèmes:

FileInputStream

Tous ces éléments, sauf package java.io; import java.io.InputStream; import com.google.gwt.user.client.Window; public class FileInputStream extends InputStream { public FileInputStream(String filename) { Window.alert('WARNING, FileInputStream created with filename: ' + filename ); } @Override public int read() { return 0; } } , sont vraiment inutilisés, nous n'avons donc besoin que d'implémentations stupides. Par exemple, notre Window.alert se lit comme suit:

java.lang.reflect.Array

Le package java.lang.reflect; import jp.nyatla.nyartoolkit.core.labeling.rlelabeling.NyARRleLabelFragmentInfo; import jp.nyatla.nyartoolkit.markersystem.utils.SquareStack; import com.google.gwt.user.client.Window; public class Array { public static Object newInstance(Class c, int n) { if( NyARRleLabelFragmentInfo.class.equals(c)) return new NyARRleLabelFragmentInfo[n]; else if(SquareStack.Item.class.equals(c)) return new SquareStack.Item[n]; else Window.alert('Creating array of size ' + n + ' of ' + c.toString()); return null; } } l'instruction dans le constructeur est utile pendant le développement. Bien que nous devions être capables de compiler la classe, nous voulons nous assurer que nous ne l'utilisons jamais réellement, donc cela nous alertera au cas où la classe serait utilisée par inadvertance.

GWT_NyARToolkit.gwt.xml est en fait utilisé par le code dont nous avons besoin, donc une implémentation pas complètement stupide est nécessaire. Voici notre code:

Sensor.update()

Maintenant, si nous plaçons dans le // given a drawing context with appropriate width and height // and a where the mediastream is drawn ... // for each video frame // draw the video frame on the canvas ctx.drawImage(video, 0, 0, w, h); // extract image data from the canvas ImageData capt = ctx.getImageData(0, 0, w, h); // convert the image data in a format acceptable by NyARToolkit ImageDataRaster input = new ImageDataRaster(capt); // push the image in to a NyARSensor sensor.update(input); // update the NyARMarkerSystem with the sensor nyar.update(sensor); // the NyARMarkerSystem contains information about the marker patterns and is able to detect them. // After the call to update, all the markers are detected and we can get information for each // marker that was found. if( nyar.isExistMarker( marker_id ) ) { NyARDoubleMatrix44 m = nyar.getMarkerMatrix(marker_id); // m is now the matrix representing the pose (position and orientation) of // the marker in the scene, so we can use it to superimpose an object of // our choice ... } ... module, nous pouvons compiler et utiliser en toute sécurité NyARToolkit dans notre projet!

Coller tout ensemble avec GWT

Nous sommes maintenant en mesure d'avoir:

• WebRTC, une technologie capable de prendre un flux de la webcam et de l'afficher dans atag.
• WebGL, une technologie capable de manipuler des graphiques accélérés par matériel dans un HTML.
• NyARToolkit, une bibliothèque Java capable de prendre une image (sous forme de tableau de pixels), de rechercher un marqueur et, le cas échéant, de nous donner une matrice de transformation qui définit pleinement la position du marqueur dans l'espace 3D.

Le défi est maintenant d'intégrer toutes ces technologies ensemble.

Nous n'entrerons pas dans les détails sur la façon d'accomplir cela, mais l'idée de base est d'utiliser les images vidéo comme arrière-plan de notre scène (une texture appliquée au plan «lointain» dans l'image ci-dessus) et de construire une structure de données 3D nous permettant de projeter cette image dans l'espace en utilisant les résultats de NyARToolkit.

Cette construction nous donne la bonne structure pour interagir avec la bibliothèque de NyARToolkit pour la reconnaissance des marqueurs et dessiner le modèle 3D au-dessus de la scène de la caméra.

Rendre le flux de la caméra utilisable est un peu délicat. Les données vidéo ne peuvent être dessinées que dans un élément. L'élément HTML5 est opaque et ne nous permet pas d'extraire directement les données d'image, nous sommes donc obligés de copier la vidéo vers un intermédiaire, d'extraire les données d'image, de la transformer en un tableau de pixels, et enfin de la pousser vers NyARToolkit

|_+_|

méthode. Ensuite, NyARToolkit peut faire le travail d'identification du marqueur dans l'image, et renvoyer une matrice de transformation correspondant à sa position dans notre espace 3D.

Avec ces éléments, nous pouvons colocaliser un objet synthétique exactement au-dessus du marqueur, en 3D, dans le flux vidéo en direct! Grâce aux hautes performances de GWT, nous disposons de nombreuses ressources de calcul, nous pouvons même appliquer certains effets vidéo sur le canevas, tels que le sépia ou le flou, avant de l'utiliser comme arrière-plan pour la scène WebGL.

Le code abrégé suivant décrit le cœur du processus:

|_+_|

Avec cette technique, nous pouvons générer des résultats tels que celui-ci:

C'est le processus que nous avons utilisé pour créer Picshare , où vous êtes invité à imprimer un marqueur ou affichez-le sur votre mobile et jouez avec la RA basée sur les marqueurs dans votre navigateur. Prendre plaisir!

Remarques finales

Picshare est un projet pour animaux de compagnie à long terme pour nous chez Jooink. La première mise en œuvre remonte à quelques années, et même alors, elle était suffisamment rapide pour être impressionnante. À ce lien vous pouvez voir l'une de nos expériences précédentes, compilée en 2012 et jamais touchée. Notez que dans l'exemple, il n'y en a qu'un. Les deux autres fenêtres sont des éléments affichant les résultats du traitement.

GWT était assez puissant même en 2012. Avec la sortie de GWT 2.8, nous avons acquis une couche d'interopérabilité bien améliorée avec JsInterop, augmentant encore les performances. En outre, pour célébrer beaucoup, nous avons également obtenu un environnement de développement et de débogage bien meilleur, le mode Super Dev. Oh oui, et le support de Java 8.

Nous attendons avec impatience GWT 3.0!