Archives par étiquette : demo webgl

le projet LIGNUM

Le projet principal sur lequel nous travaillons depuis 5 mois est un configurateur de maisons, LIGNUM. Du fait des développements de la démo de jeu d’échecs webgl/webrtc , de la démo Paris Bubbles ainsi que du petit jeu Teach me to fly,  le temps effectif passé sur le projet est plutôt de 4 mois.

LIGNUM est une application en ligne permettant de créer sa propre maison à partir d’un modèle prédéfini, en personnalisant le modèle. Nous visons dans un premier temps le marché français des maisons individuelles et plus particulièrement celui des maisons à ossature bois. Nous comptons commercialiser l’application en service as a software à compter de début septembre 2012.

Ce configurateur est conçu pour être utilisé soit par le prospect, à partir du site internet du fabricant ou d’un autre site agglomérant les offres, ou par un commercial devant le client. Il permettra de réduire la durée de la phase de conception en 3D de la maison, pendant laquelle un architecte dessine la future maison sans savoir encore si le client va signer le contrat. Il permettra aussi de présenter au client immédiatement un rendu. La plupart des maisons vendues étant proches de modèles sur catalogue, LIGNUM devrait pouvoir satisfaire à  terme ces demandes.

D’ici là, il reste une importante phase de débogage, de rajout de fonctionnalités spécifique demandées par les constructeurs, ainsi que l’ajout de modèles de maisons, de matériaux et d’objets 3D (fenêtres, mobilier, barrières, …).

Au niveau technique, le rendu et l’éditeur de terrain sont réalisés en utilisant la technologie webgl. Les phases de configuration 2D avec vue de dessus utilisent l’élément CANVAS 2D d’HTML5.

Accéder à la démonstration de LIGNUM

Marching cubes sandbox

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,269

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é!

    PARIS BUBBLES

    Le développement de cette démonstration webgl nous a fait revenir à l’objet initial qui nous a lancé dans la création de SPACEGOO, à savoir l’affichage de contenus multimédia, typiquement 2D, dans un contexte 3D. Ici le contexte 3D permet une expérience de navigation plus douce, qui n’est pas hachée par les clics sur les liens hypertextes.

    Le contraste entre la 2D et la 3D créé un effet intéressant, et met en valeur le contenu 2D par effet de perspective. Cette mise en valeur est enrichie par les transitions entre la couleur et le noir et blanc.

    Cette démonstration nous a pris 4 jours de développement à 2, et on est très satisfait du résultat produit. Par rapport à nos autres démonstrations nous introduisons des éléments nouveaux, notamment le positionnement d’éléments CSS en synchronisation avec la scène Webgl. Le déploiement du contenu est également innovant : au début il sort de la bulle où chaque contenu est emballé dans un carré, et ces carrés sont de tailles décroissantes et positionnés dans un rectangle dont le rapport hauteur/largeur vaut le nombre d’or ( vous trouverez plus d’informations sur cette disposition ici : http://en.wikipedia.org/wiki/Fibonacci_number ). Puis il se dispatche sur l’écran de sorte à ne pas trop se chevaucher.

    Cette présentation rend particulièrement bien avec un écran tactile de grande taille.

    Le lien vers la démo est ici : http://www.spacegoo.com/bubbles

    Pour les non compatibles, voici la démo :

    bubbles.ogv
    Runtime
    1:25
    Compteur de vues
    460

    New webgl demo : Tiananmen 1989

    En ces temps où le contrôle de la liberté d’expression est plus que jamais un sujet à la mode, notamment grâce aux révolutions arabes et aux dernières révélations de wikileaks sur les entreprises occidentales ayant vendu des technologies de surveillance électronique à des dictatures ( http://wikileaks.org/the-spyfiles.html ), nous dévoilons notre nouvelle démo webgl consistant en un espace dédié à la liberté d’expression.

    Avant d’aborder les aspects techniques de cette démonstration, je vais me permettre une rapide digression par rapport au sujet principal de ce blog, sur les évènements historiques l’ayant inspiré.

    A partir du 15 Septembre 1989, un important mouvement populaire se forme sur la place Tiananmen, à Pékin. Ce mouvement est mené essentiellement par des étudiants, des intellectuels et des ouvriers. Ces deniers demandent des réformes politiques et démocratiques. Bien que ce mouvement soit totalement pacifique, le gouvernement communiste chinois met en place la loi martiale le 20 mai. A partir du 4 Juin, l’armée populaire ouvre le feu sur la foule. Le nombre de morts n’a pas été évalué avec certitude, et oscille entre plusieurs centaines et quelque milliers.

    En Juin 1989, un manifestant  se place sur le chemin d’une colonne de chars, sur l’avenue Chang’An, qui borde la place Tiananmen au nord. Si l’identité de cet homme n’est pas connue, cette image est mondialement célèbre de par son puissant symbolisme.

    Actuellement, même si la Chine n’est plus celle de Mao, elle reste une dictature communiste où la liberté d’expression est contrôlée et où les médias sont censurés. Leur outil de censure de l’Internet, le GFW (pour the Greate FireWall )  ne cesse de se perfectionner : il filtre le contenu des paquets lisibles, bloque les proxies, effectue du DNS poisoning, relentit les connexions HTTPS et de nombreux VPN, ….

    Notre démonstration fige cet instant historique, et transforme ce symbole de la répression en un lieu de liberté d’expression. Tout internaute peut peindre et coller des images sur les chars, sur le sol ou sur le monument à la gloire des héros du communisme. Les modifications peuvent être sauvegardées sur le serveur de sorte à les partager.

    Au niveau technique, les maillages ont été exportés de Blender. Les intersections se font via un octree créé à l’exportation de Blender, et non plus au chargement en javascript comme dans notre précédente démo Cadillac Ranch . Le serveur recréé le processus de création effectué côté client avec GD, la librairie de gestion d’images de PHP.

    La démonstration est disponible ici : http://www.spacegoo.com/tiananmen

    Et la vidéo capture d’écran pour les non compatibles webgl (profitez de Noël pour changer de PC ) :

    Tiananmen 3D
    Runtime
    2:25
    Compteur de vues
    398

     

    Welcome to SPACEGOO BEACH

    A défaut de pouvoir partir sur une plage des tropiques pour contempler un océan bleu turquoise, nous avons recréé en partie ce genre de paradis sur spacegoo.com.
    Ainsi notre dernière démo webgl, SPACEGOO BEACH, est une simulation d’océan.

    La surface de l’eau est représentée par une surface maillée de façon plus resserrée au centre, sur laquelle sont appliquées deux textures : celle du ciel et la texture du fond. Pour calculer les coordonnées UV relatives à l’application de ces textures, nous utilisons les lois de Descartes dans les shaders via les fonctions refract et reflect.

    Les vagues sont représentées par une superposition de 10 ondes sinusoïdales. Leurs paramètres sont liées via des lois empiriques que l’on peut trouver sur cet article de wikipédia.

    Cliquez ici pour lancer la démo

    Pour les non compatibles webgl, qui n’ont pas profité des promotions de la rentrée pour s’acheter un nouvel ordinateur, voici la vidéo capture d’écran :

    SPACEGOO beach
    Runtime
    1:01
    Compteur de vues
    10,421