Archives par étiquette : graphique

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 !

Floating News

html2canvas est une librairie javascript permettant de rendre du code HTML avec des CSS dans un canvas. Elle est disponible ici : http://html2canvas.hertzen.com/ .

Afin de prendre en main cette librairie, voici une petite démonstration développée en quelques heures. Elle affiche le contenu de Google News ( http://news.google.com ) avec un effet ondulant. C’est essentiellement un exercice de style, cet effet ne facilitant pas trop la lecture… Techniquement, le canvas contenant le rendu de la page est récupéré par webgl, qui rajoute l’effet d’ondulation via le Fragment shader. Le canvas webgl contient l’attribut CSS pointer-events: none , qui a pour effet de rediriger tous les évènements souris et clavier vers la page web originale toujours affichée derrière. Grâce à cette astuce, les liens hypertextes de la page fonctionnent toujours.

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

Vidéo capture d’écran :

Floating news
Runtime
0:21
Compteur de vues
254

 

Mettre à jour ses pilotes graphiques

WebGL est une technologie récente. Toutes les configurations matérielles et logicielles ne permettent donc pas d’en tirer profit. Pour commencer, il faut avoir un navigateur compatible. Firefox 4, Chrome ou Safari en font partie.

Cependant, même avec un bon navigateur, il peut arriver qu’on ne puisse pas accéder à du contenu WebGL à cause de ses pilotes graphiques. Ceux-ci assurent en effet la communication entre le système d’exploitation et la carte graphique. En particulier, si vous travaillez sur Windows Vista ou sous linux, il est très probable que vous devrez faire cette manipulation. En théorie, sous Seven ou Xp, les pilotes devraient être naturellement de bonne qualité. Voici un petit tutoriel pour mettre à jour ses pilotes :

Windows

Pour commencer, voici la procédure la plus simple, garantie par Windows. Ouvrez le menu démarrer, puis faites un clic droit sur « ordinateur ». Ensuite cliquez sur « Propriétés » :

Cliquez ensuite sur « gestionnaire de périphériques » :

Faites alors un clic gauche sur « cartes graphiques » puis un clic droit sur votre carte, en l’occurrence une GeForce GTX470. Vous pouvez alors mettre à jour le pilote :

Si vous avez une carte NVIDIA, vous pouvez aussi directement télecharger le pilote sur le site officiel. L’intérêt est alors de disposer du pilote le plus récent, et qui assure donc les meilleures performances sur votre matériel. Vous devrez tout de même suivre la procédure précédente pour identifier le modèle de votre carte, si vous ne le connaissez pas déjà. Pour les cartes ATI, il faut aller ici.

Une fois téléchargé, le pilote s’installe comme un logiciel normal. Il provoque un scintillement de l’écran pendant l’installation, puisqu’il teste la configuration vidéo au cours de son exécution. Ceci est normal et il ne faut pas s’en soucier.

Ubuntu

Sous ubuntu, la procédure est très bien détaillée sur le forum français ubuntu. La procédure la plus simple consiste à installer l’utilitaire jockey-gtk, le lancer, et choisir d’activer le pilote propriétaire recommandé par ubuntu.

En effet les tout derniers pilotes (télechargés depuis le site NVIDIA) peuvent bugger avec les tout derniers noyaux linux.