Archives par étiquette : paris

WebGL Paris 2015

webglSquare

WebGL Paris est un événement ouvert à tous, gratuit, francophone et framework agnostic consacré au WebGL sous toutes ses formes. Il aura lieu à le Lundi 12 Octobre 2015 sur toute la journée au Centre de Conférences de Microsoft à Issy les Moulineaux.

Les inscriptions sont déjà ouvertes, et si vous souhaitez participer nous vous conseillons de réserver votre place (pour l’édition précédente nous avions dû clore les inscriptions 3 semaines avant le jour J à cause de la capacité de la salle). Toutes les bonnes volontés pour présenter, participer à l’organisation, à des ateliers sont les bienvenues.

Plus d’informations sont disponibles sur le site internet du meetup : site officiel de WebGL Paris

Le lien direct vers les inscriptions : S’inscrire à WebGL Paris

Le programme et les vidéos de l’édition 2014 : WebGL Paris 2014

Effet d’eau pour webglparis.com

Un effet de simulation d’eau fait office d’arrière plan sur le site internet de WebGL Paris, http://www.webglparis.com . Pour réaliser cet effet nous simulons les équations de Saint Venant (Shallow Water Equations) en GPGPU dans le shader de fragments en utilisant une texture flottante de 512X512 pixels.

La simulation est réalisée 4 fois par image rendue, soit à un rythme de 4*60=240 pas par seconde pour un affichage à 60Hz.

Après le chargement de la page, les positions et les tailles de différents éléments de la page (ayant la classe CSS .obstacle) sont récupérées en javascript avec l’aide de JQuery. Un canvas2D est alors dessiné pour faire office de heightmap.

Une normal map est calculée côté GPU, après avoir préalablement appliqué un flou gaussien sur la heightmap.

Le rendu final est assez léger, peu perturbant pour l’oeil, et il répartit la teinte d’une façon intéressante sur la page. Seul bémol : pour les configuration n’ayant pas l’extension WebGL OES_TEXTURE_FLOAT, les vagues sont légèrement trop marquées.

Une vidéo de l’effet :

WebGL tiny background water effect
Runtime
0:37
Compteur de vues
353

 

WebGL Paris 2014

eiffel_tower_-_render_04WebGL Paris 2014 est un événement ouvert à tous, gratuit, francophone, framework agnostic consacré au WebGL sous toutes ses formes. Il aura lieu à le Lundi 13 Octobre 2014 de 13h à 22h à l’Institut des Systèmes Complexes, au 11 Place Nationale, dans le 13ème arrondissement de Paris.

Les inscriptions sont déjà ouvertes, accompagnées d’un petit questionnaire car cet événement sera ce que l’on en fera. Toutes les bonnes volontés pour donner des conférences, participer à l’organisation, à des ateliers sont les bienvenues.

Plus d’informations sont disponibles sur le site internet du meetup : http://www.webglparis.com

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