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.

Lifting pour Spacegoo.com

Laisser un commentaire

Spacegoo.com reste la principale source de clientèle de Spacegoo. En effet, le site internet est plutôt bien positionné pour les requêtes de recherche concernant le WebGL. Ce positionnement s’explique principalement d’une part par l’ancienneté de Spacegoo.com, positionné sur le WebGL depuis sa création début 2011, et d’autre part par un bon pagerank et beaucoup de liens retour grâce à nos démonstrations.

En ce qui concerne les autres leviers de l’optimisation SEO, nous n’avons pas eu besoin d’y faire recours. L’interface actuelle de Spacegoo est peu compréhensible par les bots des moteurs de recherche, et il n’y a pas de version de fallback au cas où le visiteur n’est pas compatible WebGL. Déjà que les bots des moteurs de recherche ont du mal avec Javascript, alors leur demander de comprendre le WebGL…

Et quant aux campagnes de publicité, google adwords, efforts commerciaux divers, nous n’y avons pas recours. Nous sommes pour l’instant dans le B2B. Nos clients veulent des applications de qualité, mixant WebGL avec d’autres technologies web de pointe (WebRTC, WebAudio, …), et ils ont déjà fait leur choix technologique.

Bien que le design ne soit pas notre métier (notre métier est la programmation), nous avons effectué un petit lifting pour Spacegoo.com. La comparaison en images :

ancienne version :

Lancement de Configurator3D

Laisser un commentaire

Afin d’éclaircir notre offre commercial, nous avons lancé une marqué dédiée uniquement au développement de configurateurs produits affichant une vue 3D en temps réel.

Le site internet est disponible ici : Configurateurs 3D

Ce lancement s’intègre dans notre stratégie de diversification SEO : il est plus facile de promouvoir plusieurs sites internet, chacun tablant sur des expressions spécialisées bien définies, que de promouvoir un seul site internet sur une multitude d’expressions de recherche.

Le site internet dispose d’une interface simple, 2D, mais intégrant des éléments Webgl. Pour les voir, cliquez et déplacez le curseur de la souris en bas à gauche et en haut à droite.

Site « au repos » :

Page après avoir bougé les éléments webgl :

 

 

Nouveau look pour Spacegoo.com

Laisser un commentaire

Spacegoo a maintenant une interface entièrement en 3D. L’arrière plan est constitué par une sphère invisible portant des captures d’écran cliquables de nos applications de démonstration.

Le site internet est full javascript, et aucune version de fallback n’a été prévue : nous estimons que le taux de compatibilité du webgl est maintenant suffisant pour ne rien prévoir pour les non-compatibles. Ce dernier ne fait qu’augmenter, et il est maximal pour les utilisateurs de Google Chrome.

Marching cubes sandbox

Laisser un commentaire

Nous avons mis en ligne une nouvelle démo : marching cubes sandbox que vous pouvez voir ici : http://www.spacegoo.com/marchingCubes
Pour les gens qui ne sont pas compatibles, nous avons réalisé une vidéo capture d’écran :

Marching Cubes Sandbox
Runtime
0:59
Compteur de vues
1,264

Dans cette démo, nous avons implémenté l’algorithme marching cubes dans un version modifiée. En effet, webgl ne permet pas d’accéder au geometry shader comme dans le code original. Nous avons donc du migrer la génération des vertex du côté du javascript, avant d’en faire le rendu par WebGL.

Rappelons brièvement comment fonctionne l’algorithme. Il s’agit de générer une géométrie à partir d’une fonction appelée « fonction de densité ». Celle-ci prend la forme f(x, y, z) = 0 Par exemple, si on veut générer une sphère, on prendra f(x, y, z) = x^2 + y^2 + z^2 - R^2

On divise ensuite l’espace en cubes ou « chunks » pour récupérer la terminologie initiale. Ceux-ci sont disposés dans l’ordre idoine (celui des z-croissants) au sein du cône de vue WebGL. Chacun d’entre eux est ensuite divisé en une grille de 32*32*32 « voxels » pour lesquels on va générer les vertex. Pour décider si l’on en génére ou non, on regarde les valeurs de la fonction au huit sommets du « voxel ». Si cette valeur est positive, on attribue la valeur 1 au sommet, sinon la valeur 0. On se retrouve avec 256 cas possibles, qui se réduisent à 14 modulo le groupe de symétrie du cube. Voici ces cas (l’image est tirée du site nVidia) :

Les 14 cas primitifs


Une fois qu’on a parcouru tous les voxels, on se retrouve donc avec un tableau contenant les sommets et les faces à générer.
Il y a alors deux problèmes.

  • La plupart des calculs qu’on effectue aboutissent à un voxel qui ne génère pas de vertex, soit qu’il soit complètement en dehors de la surface, soit qu’il soit complètement en dedans.
  • Une fois qu’on a généré la géométrie, la plupart des vertex sont générés en plusieurs exemplaires, ce qui alourdit le rendu. De plus, les vertex index buffers de webgl sont limités à 65536 sommets, puisqu’ils sont encodés sur des short.

    • Pour résoudre ces problèmes, nous avons choisi en première approche une solution qui n’est pas optimale, mais permet d’aboutir simplement à de bons résultats.
    Nous avons rêglé le premier problème en remplaçant chaque chunk par un octree dont la racine est le chunk en question et dont on subdivise les cellules seulement si elles doivent générer des vertex. Par une astuce, on peut aussi s’assurer que la fonction de densité ne sera jamais évaluée deux fois au même endroit.
    Le deuxième problème est beaucoup plus complexe, et nous avons choisi de générer les vertex doubles, mais de faire une passe de calcul supplémentaire où on les enlève. Nous faisons ceci par un tri rapide simultané sur les deux buffers (vertex et index) et puis en supprimant les doublons.

    Cette solution a l’avantage d’être rapide car le tri rapide ne prend que peu de temps. L’inconvénient est qu’au cours du calcul, juste avant la phase de tri, les buffers sont énorme (plus de 4 fois plus gros que nécessaire) ce qui surcharge de travail le garbage collector javacript et peut rapidement saturer la mémoire du navigateur. Il faut noter en passant que notre première implémentation de l’octree était récursive ce qui, quand ça ne faisant pas planter la call stack de javascript, explosait le garbage collector. Nous avons donc préféré l’implémenter à la main.
    Nous avons donc pour projet d’optimiser cela en reprenant l’idée originale de l’algorithme, qui consiste à « marcher » dans l’octree en suivant les composantes connexes de la surface à mailler.
    Mais cela fera l’objet d’un autre article plus détaillé!

    Pavages de Penrose

    Laisser un commentaire

    Pour notre future démo, nous nous sommes intéressés aux pavages de Penrose.
    Il s’agit de pavages non-périodiques du plan construits à partir de règles locales. Ainsi, contrairement aux pavages classiques périodiques qu’on peut voir par exemple dans les mosaïques de l’Alhambra, ceux-ci ne possèdent aucune règle qui permet de déduire l’ensemble du dessin par une suite finie de rotations/translations.
    En résultent des motifs surprenants et très beaux.
    D’un point de vue scientifique, ils servent à étudier les quasi-cristaux, notamment pour déterminer leurs figures de diffraction. Alain connes s’en sert également comme d’un exemple privilégié pour illustrer sa géométrie non-commutative.

    Nous allons décrire un algorithme pour construire de tels pavages à partir de triangles d’or. Un triangle d’or est un triangle isocèle dont le grand côté est \varphi fois plus long que le petit côté. Il n’en existe que deux types :
    On définit alors une procédure de découpage de ces triangles. Partant de l’un ou l’autre cas, on le coupe en deux suivant la méthode suivante :

    • A gauche : \lVert SR\rVert = \lVert RQ \rVert ou de manière équivalente : S = (2-\varphi)*P + (\varphi - 1)*Q
    • A droite : \lVert RP\rVert = \lVert RS \rVert   ou de manière équivalente : S = (\varphi - 1)*Q + (2-\varphi)*R

    Les triangles générés par un tel découpage sont également des triangles d’or, ce qui permet de réiterer la procédure. Il faut noter qu’à chaque subdivision, on a le choix entre une division « à gauche » ou « à droite », ce qui permet de générer autant de façon de paver le plan que nécéssaire.
    Nous avons fait le choix d’une méthode particulière, qui génère de beaux pavages, et en voici l’algorithme, en pseudo-code de type javascript, avec une gestion manuelle de la pile de récursion, pour éviter de la faire exploser à l’éxécution :

    // lvl donne le nombre de subdivisions
    penrose = function(lvl) {
    var Q = [100, 100];
    var R = [100, 500];
    var P = [716, 300];
    // lvl désigne la distance qui sépare le triangle de la subdivision maximale autorisée
    var root = Triangle(P, Q, R, "aigu", lvl);
    var stack = [];

    stack.push(root);
    // Tant que la pile de triangle non-subdivisés est non-vide :
    while (stack.length > 0) {
    var zde = stack.pop ();
    if (zde.prof <= 1) { // cas terminal
    zde.draw ();
    }
    else {
    // split renvoie le point S suivant la procédure décrite plus haut
    var S = zde.split ();
    if (zde.style === "aigu") {
    stack.push(Triangle(zde.R, S, zde.Q, "aigu", zde.prof-2));
    stack.push(Triangle(S, zde.P, zde.R, "obtus", zde.prof-1));
    }
    else {
    stack.push(Triangle(zde.R, zde.P, S, "aigu", zde.prof-1));
    stack.push(Triangle(S, zde.P, zde.Q, "obtus", zde.prof-2));
    }
    }
    }
    }

    Ce code termine puisqu’à chaque étape, on ne génère que des triangles dont la profondeur est strictement inférieure au triangle courant et que le cas terminal ne renvoie rien.

    Nous l’avons utilisé en javascript en dessinant un tel triangle découpé avec 16 niveaux de profondeurs :

    La démo est disponible ici :http://www.spacegoo.com/penrose