developpement - Rendu 3D WebGL de fichiers IRM

Le 16 juillet 2013
three.js mri parser

Cette fois-ci, du WebGL !

Après avoir traité de la génération de terrain en voxels sous Flash, nous nous sommes intéressés à une technologie plus d’actualité : Le WebGL. Erwan S. a décidé de tester cette technologie en développant une petite application web pour visualiser des fichiers IRM. Avant de vous présenter son interface, un petit rappel sur le WebGL s’impose !

Le WebGL a été crée par le Khronos Group et permet d’exploiter les performances matérielles de votre machine.  Pour faire simple, on utilise la carte graphique et non le processeur pour afficher la 3D. Pour le développement d’un tel rendu, il faut se servir du Javascript et notamment de certaines bibliothèques JS tel que Three.js.  Cette dernière permet d’utiliser de nombreuses fonctionnalités présentes dans la conception numérique en 3D. Par exemple la génération de particules, l’assignation de matériaux ou encore la création de caméras.

Un rendu 3D de fichiers IRM

La réalisation de Steven Wittens permet l’affichage de fichiers IRM en 3 dimensions. Développé en CSS3 grâce à son propre moteur de rendu 3D, et affiché en Canvas dans la page, il est possible de choisir une profondeur de coupe afin d’observer l’intérieur de la boite crânienne. Malheureusement, ce rendu 3D est actuellement limité à un affichage sur les navigateurs utilisant le WebKit, et ne fonctionne donc pas sur Firefox notamment. Inspiré par ce projet, Erwan a utilisé un ensemble de fichiers IRM pour réaliser une visualisation en WebGL d’une boite crânienne.

Pour tester l’application, c’est ici que ça se passe!

Comment ça marche?

Tout d’abord, on a besoin d’un ensemble de fichiers images provenant d’une IRM. On récupère ainsi des images en noir et blanc de chaque couches de la boite crânienne. L’application crée et positionne alors des particules 3D dans une scène. Chaque particule correspond à un point précis d’une seule couche. Plus on charge de couches de fichiers IRM, et plus les particules sont positionnées en hauteur. Ainsi, on  arrive à créer un très grand nombre de particules qui représente alors notre modèle en 3 dimensions. En fonction de la nuance de gris visualisée sur une des images de l’IRM, on vient assigner une couleur à la particule grâce à un fichier image comportant un dégradé. Par exemple, l’os correspond à la nuance la plus blanche sur l’IRM, et chacune de ses particules va donc prendre une couleur proche du blanc sur le dégradé.

Maximilien Trufier et Angélique Léobon

Inspirations | Exemples

Illustrations

Rendu de This is your brain
Coupe d’une boite crânienne en CSS3

Aperçu de l’Application


chantier - Nouveau lieu pour Pixine > J -2

Le 3 juillet 2013
street art

A deux jours de la réception du bâtiment, les équipes de Koox et Pixine donnent un dernier coup de peinture aux 150M² de studio et à leur cyclo.

Crédit photo : Stéphane Monnet


developpement - Quelle librairie Javascript choisir pour manipuler des données JSON ?

Le 8 avril 2013

JSON et les internautes

Je profite d’une récente analyse interne pour vous parler du format JSON. Pixine travaille actuellement sur une application web qui devra manipuler un grand nombre d’informations stockées dans des données JSON. La problématique peut sembler anodine à des développeurs confirmés, car il est effectivement aisé de développer un petit jeu de fonctions usuelles qui couvrent 90% des besoins de développement.

Cependant, dans un besoin de souplesse, nous avons choisi de nous appuyer sur une librairie Javascript spécialisée dans la gestion de données / database. Lors de mes recherches, trois outils se sont dégagés du lot :  JSLINQ, TAFFYdb et UNDERSCORE. Voici mon opinion après quelques tests effectués sous TaskSpeed (visible ici) :

JSLINQ.js : se compose de seulement quelques fonctions primaires mais performantes. Les résultats aux tests de vitesse sont particulièrement bons, mais le développeur se doit de compléter les fonctions de base. Finalement on s’approche beaucoup d’un développement maison.

TAFFYdb.js : une boite à outil particulièrement complète. Sa simplicité et sa manipulation en objet en font un véritable plaisir à utiliser. La documentation n’est pas très fournie mais est suffisante pour progresser rapidement. En revanche, des performances désastreuses noircissent mon opinion de cette solution.

UNDERSCORE.js : prenons les avantages des deux librairies listées ci-dessus, oublions la gestion en objet, le surplus de développement et les performances catastrophiques … et nous obtenons underscore. On apprécie également la documentation suffisante et les nombreuses fonctions. Rapide et polyvalente, cette petite librairie est celle que nous emploierons pour nos manipulations JSON.

JSON ou XML ?

Deux écoles s’affrontent sur la question. Il est indéniable que pour des besoins de performance dans un environnement Web, JSON est bien mieux placé que le XML. En moyenne, un JSON est 40% plus léger qu’un XML, ce qui représente un gain conséquent lors des transferts de données. Pour ce qui est du ‘parsage’ des données, le XML est plus rapide. Pour optimiser l’utilisation du JSON, une bonne pratique : il suffit de renseigner votre variable dans votre fichier JS/HTML directement en PHP :

<script type=’text/javascript’ charset=’utf-8′>
var JSON_datas = <?php echo $JSON_datas ?>;
</script>

A voir aussi :


chantier - Curiosity #Phase charpente

Le 12 mars 2013

Curiosity prend forme. La charpente métallique est maintenant solidement arrimée sur le parc
d’E.S.T.E.R ( Limoges Technopole). Avec KOOX productions, nous pourrons bientôt exploiter pleinement notre nouveau studio (photo, cinéma et vidéo) de 150m².


design - Premier citron contest

Le 7 mars 2013
C’était le week-end, il neigeait sur Limoges. J’avais sur un coin de mon bureau un citron desséché. Je suis sorti, j’ai fait une photo. Un peu énigmatique, je l’avoue. J’ai posé cette photo sur Facebook et Erwan l’a détournée dans les minutes qui ont suivi. Mon citron est devenu vache.
De retour au travail, j’ai pensé que cette photographie pouvait encore servir. Erwan avait montré la voie.
J’ai organisé un mini concours. Il y avait une tablette de chocolat à gagner. Il n’en reste pas une miette.
Pas grave, vous pouvez toujours vous délecter des créations qui ont surgi de nos cerveaux fulminant.
Tout le monde a participé : graphistes, développeurs, commerciaux…

Cliquez ici pour voir l’ensemble des créations originales.

Je sens votre inspiration monter. Je suis sûr que vous regrettez de n’avoir pas pu participer.
Allez, voici le lien pour télécharger la photo originale. Envoyez-nous vos créations, nous les ajouterons à la galerie. Prouvons au monde entier que l’imagination et la créativité arrivent à se cacher jusque dans un vieux citron tout desséché.

Stéphane Monnet