Archives de catégorie : le WebGL

La technologie webGL, binding d’openGL ES pour Javascript

Jeeliz : le deep-learning sur votre GPU, dans votre navigateur

Intelligence Artificielle

Je n’ai pas sorti de nouvelles démonstrations WebGL ces derniers mois pour une raison simple : je me consacre maintenant à plein temps à ma nouvelle startup, Jeeliz. L’idée est d’utiliser l’accélération matérielle accessible via WebGL pour implémenter de manière avantageuse des algorithmes de deep-learning.

Les premières applications concrètes de notre technologie seront dans l’analyse de flux vidéo en temps réel dans le navigateur, notamment pour l’essayage virtuel. Et bien d’autres suivront !

En attendant, Spacegoo n’est pas mort, mais mis en veille pour une durée indéterminée.

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

De l’avenir radieux de WebGL

Cet article a été écrit en réponse à un récent article paru sur developpez.com : Le WebGL a t-il un avenir.

ça commence mal…

Le ton du titre suscite déjà le doute quant à la partialité de l’auteur.

WebGL est la spécification d’une bibliothèque graphique 3D au même niveau que OpenGL ou Direct3D. Celle-ci repose sur OpenGL ES 2.0 (la spécification pour l’embarqué de OpenGL) et permet de créer des pages Internet intégrant du contenu 3D. Ainsi, à l’aide de HTML 5 et du Javascript vous pouvez afficher un rendu accéléré par la carte graphique et bénéficiant donc de la puissance du GPU.

WebGL n’est pas une bibliothèque graphique 3D. La bibliothèque 3D utilisée par WebGL est OpenGL ES2.0, et parfois les appels vers cette bibliothèques sont transcrits en DirectX via Angle, notamment sous Windows. WebGL est un binding, soit une liaison entre Javascript et OpenGL ES2. Il permet simplement d’utiliser OpenGL ES via javascript.

WebGL permet d’aller bien plus loin qu’afficher du contenu 3D sur des pages internet. En effet depuis le VRML de l’eau a coulé sous les ponts. WebGL permet de créer des applications interactives 3D dans le navigateur : des jeux, des configurateurs 3D, des interfaces de navigation, de la réalité augmentée, …

A l’aide d’HTML5 et de javascript il est effectivement possible d’afficher du rendu accéléré par la carte graphique : sur un navigateur moderne tout est accéléré par le GPU. Mais WebGL ne fait pas partie du standard HTML5. HTML5 est un standard normalisé par le W3C, consortium industriel spécialisé dans le web, tandis que WebGL est spécifié par le Khronos Group, consortium industriel spécialisé dans l’accélération matérielle, et pas moins légitime que le précédent (même si son nom est moins hype et fait moins branché que le World Wide Web Consortium).

 

Le support

Actuellement, les principaux navigateurs présents sur le marché disposent du support de WebGL :

Firefox (6 juillet 2010)
Google Chrome(3 février 2011)
Safari (20 juillet 2011)
Opera (14 juin 2012)
Internet Explorer (17 octobre 2013).
les versions mobiles de Firefox, Opera et du navigateur de Blackberry supportent également WebGL.

L’information est plutôt approximative. Pour des statistiques détaillées des support il vaut mieux se fier à caniuse.com/webgl. Il est nécessaire de préciser que bien que Safari ai implémenté WebGL précocement, il a fallu attendre la version 8 du navigateur pour que WebGL soit activé par défaut (sortie après IE11 dont l’activation est par défaut). WebGL sera également compatible avec la version 8 d’iOS Safari, et il l’est déjà avec les dernières moutures d’IE mobile.

 

La sécurité

 On notera aussi le possible second frein lorsque des failles de sécurité critiques ont été découvertes dans le standard même, entraînant notamment la vive réaction de la communauté et de Microsoft.

Lors des débuts de WebGL, Microsoft tentait d’imposer sa technologie propriétaire, Silverlight, d’où sa réticence face à WebGL. Depuis Internet Explorer a rapidement comblé son retard, implémenté WebGL depuis la version 11 et Microsoft soutient également le développement du moteur BabylonJS. Deux failles de sécurité ont été découvertes dans la foulée de la sortie de Firefox 4 avec WebGL activé par défaut, et ont été très rapidement corrigées. L’une permettait de récupérer des images normalement accessibles via un login (on peut voler des photos de Facebook waouuh !), et l’autre permettait de récupérer des contenus des tampons vidéos, pour certains GPU avec des pilotes non sécurisés.

Actuellement, WebGL est désactivé (du moins avec Chrome) si les pilotes GPU ne présentent pas les impératifs de sécurité nécessaires (même s’ils seraient en mesure de faire tourner WebGL). Les seuls failles restantes permettent de faire planter certains navigateurs, comme on pourrait le faire en javascript/action script en jouant sur les boucles infinies et la saturation mémoire.

 

Le mouton noir du Khronos Group ?

Il ne faut pas non plus oublier que l’accélération graphique dans WebGL est disponible uniquement que si la carte graphique implémente correctement la spécification. Cela a aussi provoqué une certaine lenteur dans l’évolution du support d’OpenGL, notamment sous Linux où il était peu présent. Maintenant, nous pouvons dire que ces soucis sont globalement résolus.

Nous ne l’oublions pas. Les fabricants de cartes graphiques sont présents dans le Khronos Group (ATI, NVIDIA, AMD). WebGL nécessite pour eux de produire des drivers présentant des meilleurs impératifs de sécurité. Il s’agit d’un progrès. Depuis 2 ans n’importe que ordinateur, même le plus bas de gamme, est compatible WebGL sans avoir à réaliser de quelconque manipulation (changement de pilote, de paramètres du navigateur).

C’est totalement gratuit d’affirmer que WebGL a ralenti l’évolution d’OpenGL. OpenGL continue d’avancer, indépendamment de WebGL. OpenGL ES également. WebGL est basé sur OpenGL ES2, et OpenGL ES 3 est sorti. OpenGL est à la pointe, approximativement OpenGL ES suit OpenGL avec une dizaine d’années de retard, et WebGL suit OpenGL ES avec 2 ans de retard.

Sous Linux les problèmes proviennent souvent des fabricants de cartes graphiques qui livrent des pilotes peu aboutis pour ce système d’exploitation. Avec Nvidia il n’y a pas de problème, mais avec ATI l’installation des pilotes est parfois plus difficile.

 

WebGL a un avenir radieux !

Après un paragraphe louant le WebGL, l’auteur émets quelques objections :

WebGL a toutefois quelques limitations :

absence de tampon de sélection ;
absence de textures 3D ;
absence de geometry shader.

Ces trois fonctionnalités ne sont pas présentes dans OpenGL ES2.0 . Il est donc impossible qu’elles soient présentes dans WebGL. Le tampon de sélection peut tout de même être émulé pour faire du picking cheap.

L’auteur semble s’être abondamment inspiré de l’article Wikipédia sur WebGL. Les défauts reprochés sont les mêmes, et les petites imprécisions quant à sa compatibilité aussi.

 

 Finalement, il n’y a toujours pas d’application phare pour cette technologie. De plus, pour les jeux vidéo et les applications intensives le JavaScript et la surcouche apportée par le navigateur peut être aussi un facteur décisif et ainsi empêcher l’adoption de ce standard.

 

WebGL commence tout juste à avoir un taux de compatibilité sur desktop permettant d’envisager des applications commerciales (66% d’après http://caniuse.com/#feat=webgl ). Peu de développeurs sont actuellement formés à cette technologie, et les projets importants nécessitent encore du temps. Les décideurs sont souvent peu au courant de ce que permet cette technologie.

Les jeux vidéos et les applications intensives resteront évidemment natives. COD ou Solidworks ne passeront jamais dans le navigateur. Les joueurs et les ingénieurs CAO ont des machines puissantes, sont prêts à acheter les licences, à télécharger le produit. Ils recherchent la performance avant tout.

WebGL est uniquement un binding, et ne joue pas sur le même tableau que Unity qui propose un workflow de création 3D remarquable, et depuis peu il est possible d’exporter des applications Unity en WebGL. WebGL ne sera pas non plus aussi optimisé et contiendra moins de fonctionnalités que des technologies propriétaires et tournant sur un nombre limité de plateformes comme Metal.

Le Khronos Group est notamment constitué de développeurs de navigateurs : Google, la Fondation Mozilla, Opera, …, de concepteur de système d’exploitation: Apple, Canonical, … de fabricants de matériel : AMD, Nvidia, … et d’Universités parmi les plus reconnues. C’est compliqué et cela prend du temps de mettre tout le monde d’accord sur un standard. Et même si au final ce dernier à des défauts, sa portabilité est imbattable.

 

WebGL sera intéressant, voire incontournable pour :

  • le casual gaming,
  • les configurateurs produit,
  • les interfaces de navigation 3D (avec la prise en compte des NUI notamment),
  • de nouvelles expériences Web (ex : http://www.chromeexperiments.com/detail/graffiti-general/?f= ),
  • la recherche en algo 3D et les simulations (WebGL permet de partager le code très simplement, sans nécessiter d’OS/de librairie particuler ),
  • des applications dont on n’a pas encore l’idée !

En bref, c’est un grand OUI, WebGL a un avenir !

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
349

 

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