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

Nouvelle démo webgl : traceur de surfaces

Le webgl peut avoir des applications mathématiques intéressantes, notamment dans le cas de la représentation d’objets 3D telles les surfaces.
Nous avons développé un traceur de surfaces en 3D de type z=f(x,y) , qui prend en compte les différentes fonctions mathématiques fournies par le javascript.
Le traceur est disponible ici : spacegoo.com/demo_plots.php

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

SPACEGOO plots
Runtime
0:58
Compteur de vues
192

Convertir ses applications HTML5 en Flash

html5 to flash icon

Le gros problème des jeux HTML5/Flash est que l’on ne peut pas les proposer à la majorité des sites internet regroupant des jeux flash.
Ce problème est résolu en utilisant notre convertisseur HTML5 to Flash.

Le .SWF produit remplace l’élément OBJECT ou EMBED par une IFRAME menant vers le jeu HTML5. Cependant plusieurs restrictions existent concernant la page affichant le SWF :
– la taille de l’élément OBJECT/EMBED doit être d’au minimum 450×350 pixels
– l’élément OBJECT/EMBED ne doit pas avoir l’attribut allowscriptaccess='never'. C’est peu fréquent mais présent sur certains sites de jeux flash (par exemple sur kongregate.com).

Le SWF produit peut être compressé d’environ 50% en utilisant SWFTOOLS. La commande à exécuter est la suivante : swfcombine -dz file.swf -o file_new.swf.

Accéder à notre convertisseur HTML5 to Flash

Une petite démo de SPACEGOO MAZE en faux Flash :

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