Archives par étiquette : SPACEGOO

SPACEGOO est une startup crée en Novembre 2010, centrée sur le développement de solutions innovantes permettant de créer des sites internet en 3D.

Héritage en Javascript

Le javascript est aujourd’hui largement utilisé sur le Web. Tous les navigateurs implémentent leur moteur javascript, et il est évidemment le langage incontournable quand il s’agit d’utiliser WebGL ou WebCL.

Il est présenté comme un langage objet, mais ses capacités à ce niveau restent nativement limitées. Notamment, l’héritage n’est pas prévu. Lorsqu’on développe une application conséquente, l’héritage est pourtant un facteur indispensable pour réduire la quantité de code et donc les coûts de développement d’une application.

Il existe plusieurs méthodes pour contourner cette faiblesse du langage, et nous allons vous en présenter une, qui est à notre avis la plus souple et la plus élégante. Selon la terminologie de Douglas Crockford, il s’agit d’un pattern d’héritage « fonctionnel ». Rien ne vaut un exemple, alors en voici un :


var motherClass = function (spec) {
var that = {}; // création de l'objet retourné
that.get_name = function () { // "virtual" method
}
return that;
}

var daughterClass = function (spec) {
spec.name = spec.name || "";
var that = motherClass(spec); // l'héritage est ici : on initialise l'objet retourné en utilisant le constructeur de la classe mère
that.get_name = function () { // on spécifie le code de la méthode "virtuelle" mère
return "daughterClass : " + spec.name;
}
return that;
}

var instance = daughterClass({name: "daughter"}); // instanciation
console.log(instance.get_name ());

daughterClass : daughter 

On peut alors spécifier plusieurs classes héritant de « motherClass ».
Une autre classe pourrait par exemple être :

var daughterClass2 = function (spec) {
spec.name = spec.name || "";
var that = motherClass(spec); //héritage ici!
that.get_name = function () { // et respecification de l'interface
return "daughterClass2 : " + spec.name;
}
that.special_to_this_class = function () { // methode specifique à la classe daughterClass2
return "special";
}
return that;
}

Et on peut alors utiliser cela dans un même tableau (c’est un avantage du non-typage javascript) :


var tab = [];
tab[0] = daughterClass({name: "1"});
tab[1] = daughterClass2({name: "2"});

for (var i = 0 ; i < 2 ; ++i) { console.log(tab[i].get_name ()); }

daughterClass : 1
daughterClass2: 2

Après cela il ne tient qu’à vous d’enrichir les méthodes pour obtenir ce que vous voulez!

PS : notez que dans ces classes, on ne peut accéder aux attributs autrement qu’avec la méthode get. C’est un forme d’encapsulation des données!

Utilisation de WebCL : calcul d’un écoulement

Nous avons essayé les possibilités du WebCL, un futur standard du Khronos Group. Il s’agit de disposer des performances de calcul de l’openCL dans le navigateur. Etant donné que nous disposons d’ordinateurs avec CUDA installé, nous avons réalisé une démonstration pour vérifier les performances annoncées par Nokia.

Il s’agit d’une diffusion de gaz à travers un trou. Le gaz est modélisé par un ensemble de particules sphériques qui rebondissent elastiquement les unes sur les autres. WebCL se charge de gérer le moteur de collisions, tandis que WebGL affiche le résultat sur une texture.

Pour donner une idée de la différence de performance avec javascript, on a rendu possible d’effectuer le calcul en js, et le rendu sur un canvas en html5. Avec cette dernière technologie, il est difficile de monter à plus de 1000 particules sur mon corei7-2600K. A l’inverse, quand le calcul se déroule sur ma GTX470, le programme commence à ramer à 30 000 particules! Pourtant les implémentations CPU et GPU sont strictement identiques.

La démo est disponible ici : spacegoo.com/particles.php

Si vous n’êtes pas compatible webgl, vous pouvez toujours admirer cette vidéo capture d’écran :

Many particles flow simulation (WebCL)
Runtime
2:01
Compteur de vues
1,534

Mise à jour de la démo de jeu de cartes

SPACEGOO CARDS v2 est en ligne. Par rapport à la première version, nous avons :

  • Allégé la démo (elle pèse maintenant 1,7MO), notamment grâce à une simplification du maillage du personnage,
  • Fluidifié les mouvements
  • Ajouté le clignement des yeux par changement de texture
  • Ajouté un mouvement léger de respiration
  • Ajouté des accessoires (un chapeau et des lunettes)
  • Rajouté des expressions du visage, par déformation du maillage en deux points
  • Mis en place un menu à droite pour éviter le recours systématique au clavier
  • Relooké le personnage (surtout la coiffure !)

Afficher la démo

Si vous n’êtes pas compatible webgl, vous pouvez toujours admirer la capture d’écran vidéo :

WebGL card Dealer (v2)
Runtime
0:58
Compteur de vues
547

Nous sommes maintenant dans les starting blocks pour le développement d’un poker complet.

Editeur de circuits en html5

Nous voulons créer un jeu de voitures en 3D en WebGL.  Nous avons donc commencé par créer un éditeur de circuits.

Créé en html5 et php, ce logiciel permet à l’utilisateur d’importer une image de fond (vue aérienne ou tracé d’un circuit connu) puis d’en créer une représentation 3D sous la forme d’un fichier ply (stanford).

Voici un exemple du résultat [circuit de Dijon] L’essentiel de la procédure consiste à définir des courbes de Bézier qui représenteront le bord du circuit. On peut alors éditer les points de contrôle de chaque courbe par simple clic/glisser. On dispose à tout moment de la touche ‘u’ pour revenir en arrière.

On peut ensuite calculer le maillage et l’exporter en ply, comme présenté dans la vidéo ci-dessous :

Spacegoo Circuit Editor
Runtime
1:20
Compteur de vues
203