Archives par étiquette : navigation 3D

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 !

Lifting pour Spacegoo.com

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 :

frontoffice 3D pour wordpress

Nous avons créé une interface 3D pour un site vitrine ou un blog wordpress.

Les images d’arrière-plan, le contenu texte, le titre… sont tous facilement modifiables en passant par le backoffice wordpress. Les modèles sont également changeables.

Nous nous sommes basés sur Three.js, et nous avons également utilisé JQUERY et JQUERY-UI.

La démonstration est visible ici : Interface 3D pour wordpress

Application de tracking vidéo

En utilisant l’API getUserMedia pour récupérer le flux vidéo de la webcam, et webgl pour le traiter, nous avons développé une application de tracking vidéo.

Il s’agit d’un POC (Proof Of Concept) développé rapidement (en moins de 2 jours). Vous pouvez le tester en utilisant la dernière version de Chrome sur http://www.spacegoo.com/trackGL .

HTML5 Video tracking web application
Runtime
1:54
Compteur de vues
1,113

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