La vision par ordinateur avec Gwt

Jour 2 !

Arnaud Tournier, le 28-01-2015

La vision par ordinateur avec Gwt

Les technologies Web et GWT sont-ils suffisant pour créer des applications de calcul intensif ?

On doit maitriser la plateforme Web, On doit pouvoir réutiliser du code (les bibliothèques scientifiques).

Au départ leur réponse était plutot non. Mais ils ont essayé, avec un projet de réalité augmentée.

L’application numéro un

Elle consiste en :

  • Détection de marqueur,
  • Calcul de la position et orientation du marqueur,
  • Rendu des objets 3d en surimpression de l’image.

Réutilisation du code

NyARToolKit est développé en pur Java, avec de bonnes performances et une license sympa.

http://nyalta.jp/nyartoolkit/wp/

Portage en GWT

http://code.google.com/p/gwt-nyartoolkit

Une fois sur que le code peut être réutilisé avec GWT, il faut établir l’architecture de l’application.

Premièrement, capter la vidéo

On utilise WebRTC pour acquerir un flux video en Javascript depuis un navigateur.

Pour utiliser cette API JS en GWT, ils ont commencé par utiliser Elemental 1.0. Mais c’était trop au niveau des dépendances donc ils ont finalement wrappé l’API en JSNI.

OK, donc on capte un flux vidéo, on le traite avec NyarToolkit et on obtient les informations nécessaires pour la suite.

Il reste à trouver quelques modèles 3d et les afficher avec WebGL.

WebGL

Il y a de nombreuses bibliothèques : three.js, BabylonJS, parallax (GWT!), …

Donc ils ont développé un wrapper : http://code.google.com/p/gwt-webgl

Avec en plus une bibliothèque Tiny3D qui a :

  • 3D geometry,
  • Eclairage Lambertian et Phong…

PicShare

http://picshare.jooink.com

Donc voilà le premier POC. Essayons pour les perfs…

Voilà une capture d’écran illustrant le logiciel en action : un modèle 3D est incrusté dans la vidéo issue de la WebCam.

(Vidéo à venir…)

Les performances sont très bonnes car à part NyarToolkit tout est optimisé (WebGL, WebRTC …)

Voici une illustration de l’architecture de l’application telle qu’elle fonctionne aujourd’hui :

Version mobile ?

Avec MGWT, ils en ont fait une implémentation pour mobile.

L’application numéro 2 : détection de features en temps réel

On retire NyarToolkit pour préférer une reconnaissance de type ‘feature tracking’.

On a des bibliothèues comme OpenCV, VLFeat, VLX, mais en C/C++ !

Ils ont décidé de ne pas passer par emscripten, mais plutot avec BoofCV (écrit en pur Java).

BoofCV

Biliothèque opensource en Java facile à utiliser. En plus dans certains cas, elle est plus rapide qu’OpenCV.

http://github.com/lessthanoptimal/BoofCV

Donc le but est de porter cette librairie pour GWT. Le problème est qu’elle dépend de pas mal d’autres librairies

Le portage est dispo sur le github de Jooink.

GWT-EJML

  • construction des fichier .gwt.xml
  • super source des classes devant être modifiées. Cela permet de conserver le code original et donc de maintenir le projet plus facilement.

Super source de certaines classes du JRE : ByteArrayOutputStream, PrintStream.printf (très utilisé dans EJML) par exemple.

Démo : http://gwtejml.appspot.com

Démonstration des exemples. C’est très sympa !

A la suite de cette intégration, ils doivent aussi optimiser la bibliothèque qui bien sûr plus lente que la version native.

DDOGLEG

Problème avec cette bibliothèque : elle utilise la réflection. Donc gros travail de ce côté.

GeoRegression

Là cette bibliothèque a été plus facile à porter.

Tous les portages de ces librairies sont sur leur GitHub.

Problèmes principaux

Utilisation de la réflection : - pour gérer principalement les Arrays de types primitifs - la solution a été de faire des Factory à la place. Travail collaboratif avec l’auteur de la bibliothèque.

Côté encodage des images : - Navigateur : img, video - BoofCV : tableau de valeurs

Ils ont utilisé canvas.getContext2d().getImageData(...)

Démos.

En premier la détection de feature, qui détecte des tournesols dans une image. Cela ne se voit pas très bien sur la photo, mais en bas vous pouvez voir des petits cercles rouges sur les fleurs de tournesol.

Autre exemple, la détection de “Interest point association”. Ceci sert à associer des points sur une image avec des points stockés en base, de façon à reconnaitre des features.

En voici une illustration, ici les deux photos côte à côte montrent a gauche l’image d’une attraction au musée, stockée en base et préalablement traitée. A droite, on voit la même attraction prise à un autre moment. L’algorithme fait la correspondance entre les points présents sur les deux images. Notez comme la personne qui passe devant l’objectif dans l’image de droite ne gêne pas l’algorithme de reconnaissance !

Questions

Ont-ils essayé de faire du calcul sur le GPU avec WebGL ?? Par exemple pour optimiser le portage de BoofCV (un genre de WebCuda)

Oui ils y ont pensé, mais pas encore essayé.

Ont-ils constaté des erreurs de précision sur Javascript ?

Ont-ils essaayé emscripten avec openCV ?

Non pas encore.


Arnaud Tournier, le 28-01-2015