WebGL leçon 0 : Débuter avec WebGL

[Ce message a été modifié plusieurs fois pour suivre les quelques évolutions depuis sa publication en octobre 2009… à ma connaissance, à la date du 17 janvier 2012 les informations sont correctes.]

La première étape dans l'expérimentation de WebGL est d'obtenir un navigateur qui le prend en charge. La façon de faire dépend de si vous souhaitez développer vos propres démonstrations WebGL ou seulement en visionner.

Si vous souhaitez jeter un coup d'œil aux démonstrations WebGL mais que vous n'êtes pas intéressé par le développement ni de voir les tout derniers travaux qui pourraient ne pas fonctionner, en général je vous recommanderais :

• si vous êtes sous Windows, assurez-vous d'avoir installé le Microsoft DirectX runtime - téléchargeable gratuitement depuis le site de Microsoft ;
• ceci fait, d'avoir les toutes dernières versions des pilotes graphiques de votre carte ;
• ensuite, choisissez votre navigateur :
  • Firefox : vérifiez que vous disposez de la version 4 ou supérieure ,
  • Chrome : il suffit de l'installer, ou si vous l'utilisez de vérifier s'il s'est automatiquement mis à jour à la version 10 (sortie en mars 2011), par le biais de l'option « About Google Chrome » du menu des outils ,
  • Safari : sur Mac la version OS X 10.7 supporte WebGL, mais il est désactivé par défaut. Pour l'activer, allez dans le menu « développement » et cochez l'option « Enable WebGL ». (Merci à Blah pour ce renseignement.)

C'est tout ! Vous devriez être en mesure d'accéder aux démonstrations. Cliquez ici pourPremiers exemples.

Si vous développez sous WebGL ou avez besoin des dernières fonctionnalités, alors rien ne vaut de posséder le dernier navigateur en date. WebGL est pris en charge dans les versions de développement de tous les principaux navigateurs excepté Internet Explorer, donc il vous suffit de vous procurer la version adéquate pour votre ordinateur. La difficulté repose sur le type d'ordinateur que vous possédez :

• Windows : si vous ne l'avez pas déjà fait, assurez-vous d'avoir installé le DirectX runtime - téléchargeable gratuitement depuis le site de Microsoft. Cela fait, installez soit FirefoxFirefox, soit ChromeChromium, selon votre préférence - si cela ne fonctionne pas vérifiez le guide de dépannageDépannage. (Info presse : une version pré-bêta d'Opera sur Windows supportant WebGL est actuellement disponible ; elle est moins stable que les autres navigateurs, donc ne reposez pas uniquement votre implémentation sur cette version. Votre carte graphique doit aussi supporter OpenGL 2.0, ce qui pourrait être difficile à réaliser) ;
• Macintosh : si vous travaillez sous Snow Leopard (OS X 10.6), il ne devrait pas y avoir de problème ; je vous recommande d'utiliser la version développement de WebKitSafari, qui fonctionnera comme une version alternative de Safari. si vous travaillez sous Leopard (OS X 10.5), vous ne pourrez pas utiliser cette version de WebKit, mais vous pouvez utiliser FirefoxFirefox ou ChromeChromium. Bien sûr, Snow Leopard peut aussi utiliser Firefox ou Chrome. Si vous avez une version plus ancienne d'OS X, je ne sais malheureusement pas quel navigateur pour WebGL vous pouvez utiliser ;
• Linux : un assez grand nombre de pilotes graphiques Linux sont, malheureusement, pas assez bons pour travailler avec WebGL. Les mêmes sont utilisés sous Windows, mais les développeurs des navigateurs ont travaillé dessus en utilisant DirectX. Il n'y a malheureusement pas beaucoup d'échappatoires, voici ce que j'ai réussi à collecter :
  • si vous avez une carte graphique NVIDIA et des pilotes récents, alors les choses devraient parfaitement fonctionner avec FirefoxFirefox ou ChromeChromium,
  • si vous avez une carte graphique ATI, vous êtes probablement mieux avec Firefox,
  • si vous avez une carte graphique Intel, vous devrez probablement utiliser un logiciel de rendu lent, pas terrible, mais qui au moins vous permettra de voir certains travaux WebGL. Essayez Firefox ou Chrome, mais ils ne fonctionneront probablement pas avec les paramètres (de rendu matériel) par défaut. Pour utiliser le rendu logiciel sous Linux, vous devez vous assurer que Mesa est installé (vous devriez être en mesure d'obtenir la dernière version en utilisant le gestionnaire de paquets de votre distribution) vous pouvez alors utiliser Firefox moyennant quelques réglages supplémentairesExécution de Minefield avec le rendu logiciel sur Linux.

Vous trouverez plus de détails là-dessus dans la section dépannageDépannage ci-dessous.

La version « instable » de développement de Firefox se nomme Minefield. Elle est mise à jour chaque nuit et est actuellement plutôt robuste : je ne l'ai pas vue crasher récemment (et je l'utilise pour tout). Elle peut être installée tout en ayant une version ordinaire de Firefox, vous n'avez donc pas à vous soucier de sa désinstallation si vous n'en voulez plus ou si vous voulez juste revenir à la version normale pendant un temps.

Pour acquérir Minefield :

• allez à la page nightly et prenez la version appropriée pour votre machine. Attention ! Il peut y avoir plusieurs versions avec des noms comme firefox-10.0a1quelque chose ou firefox-10.0a2quelque chose. Vous voulez la version la plus récente, qui aura donc le plus grand nombre après le « a » (alpha) ou « b » (beta) ;
• installez-le (vous devrez fermer toutes les instances de Firefox durant l'installation) ;
• démarrez Minefield.

Une astuce utile : si vous souhaitez exécuter Minefield en parallèle avec votre version ordinaire de Firefox, ajoutez aux paramètres la ligne de commande suivante : -P Minefield -no-remote. Le premier paramètre permet de le faire fonctionner avec un profil différent (de sorte à garder les historiques des différents onglets actifs dans chaque navigateur) et le deuxième signifie que vous lancez Minefield alors que Firefox l'est déjà ; cela n'ouvrira pas juste une nouvel onglet au sein de celle de Firefox. Vous pouvez également ajouter -P default -no-remote aux paramètres afin de faire de même pour votre Firefox normal. Pour les utilisateurs de Windows : vous pouvez définir ces paramètres de ligne de commande pour chaque application par un clic droit sur l'icône de lancement, en sélectionnant « Propriétés » puis ajoutant les paramètres à la fin du champ « Cible ». Utilisateurs de Mac et Linux, je ne sais pas comment vous faites, mais vous le savez sans doute malgré tout. ;-)

Ensuite, cliquez ici pour essayer quelques pages WebGLPremiers exemples.

Si votre matériel graphique ou - plus vraisemblablement - pilote ne supporte pas la version OpenGL 2.0, alors actuellement la seule façon de faire fonctionner WebGL sur Linux est d'utiliser la bibliothèque Mesa. Fondamentalement, Mesa émule une carte graphique dans le logiciel, c'est donc un peu lent, mais mieux que rien. Il s'intègre à Minefield, la version « instable » de développement de Firefox et fait normalement partie de votre distribution Linux. Voici comment le faire fonctionner :

• téléchargez la dernière version de Minefield ;
• installez-la (vous devrez fermer toutes les instances de Firefox durant l'installation) ;
• avec le gestionnaire de paquets de votre distribution Linux, assurez-vous d'avoir installé la dernière version de Mesa ;
• démarrez Minefield ;
• allez à la page « about:config » ;
• appliquez le filtre pour « webgl » ;
• basculez la valeur « webgl.enabled_for_all_sites » à « true » ;
• basculez la valeur « webgl.software_rendering  » à « true » ;
• fixez le paramètre « webgl.osmesalib » à l'emplacement de votre bibliothèque partagée OSMesa (normalement quelque chose comme /usr/lib/libOSMesa.so).

Une fois tout ceci effectué, cela devrait fonctionner. Cliquez ici pour essayer quelques pages WebGLPremiers exemples.

Rappelez-vous, Safari ne supporte WebGL que sur les Macs qui fonctionnent sous Snow Leopard (OS X 10.6). Donc si vous êtes sous Leopard (10.5), Windows ou Linux, vous devrez utiliser FirefoxFirefox ou ChromeChromium. (Si vous êtes sur une version antérieure à OS/X, je ne sais pas quel navigateur vous pouvez utiliser).

Pour réussir à le faire fonctionner sous Snow Leopard, vous devez :

• vous assurer que vous avez au moins la version 4 de Safari ;
• télécharger et installer le WebkKit nightly ;
• démarrer un terminal et exécuter cette commande :
   

  Sélectionnez

  defaults write com.apple.Safari WebKitWebGLEnabled -bool YES

• lancer la toute nouvelle application.

Ensuite, cliquez ici pour essayer quelques pages WebGLPremiers exemples.

Si vous faites du développement WebGL, les développeurs de Chrome vous recommandent d'utiliser sa version nightly Chromium : le navigateur Open Source sur lequel Chrome est basé. La procédure est un peu différente sur chaque système d'exploitation ; voici les instructions pour WindowsPour Windows, MacintoshPour Macintosh et LinuxPour Linux. (Avertissement : je n'ai essayé que la version Windows, mais je me dis que les autres versions devraient aussi fonctionner. Laissez un commentaire si ce n'est pas le cas.)

VIII-A. Pour Windows▲

VIII-B. Pour Macintosh▲

VIII-C. Pour Linux▲

./chrome

Une fois votre navigateur installé, vous devriez être à même de voir le contenu de WebGL. Voici un premier test de cohérence ; un rapport WebGL qui donne des détails sur les caractéristiques WebGL actives sur votre navigateur. S'il vous dit que votre navigateur ne supporte pas WebGL, consultez le guide de dépannageDépannage ci-dessous.

Si cela a fonctionné, tout devrait être en place ! Malheureusement quelques récents changements de WebGL ont mis à mal plusieurs démonstrations, en voici plusieurs qui ont été mises à jour :

• une de mes démonstrations : Bouncing Mandelbrot Cubes ;
• de Google : une théière brillante (cliquez et faites glisser pour la faire tourner), « San Angeles » et anatomiquement incliné, le navigateur Google Body ;
• une utilisation de WebGL dans le monde réel : ChemDoodle 3D qui affiche des molécules dans des pages Web ;
• d'autres démonstrations dans le dépôt de Khronos et la section contributions des utilisateurs du Wiki de WebGL. Le site « Chrome Experiments » de Google a aussi une section WebGL ; la plupart des démonstrations fonctionnent aussi dans un autre navigateur ;
• enfin, pour voir les meilleures démonstrations WebGL de chaque semaine, abonnez-vous au blog ! Chaque jeudi, je poste un tour d'horizon des nouvelles WebGL que j'ai pu trouver durant les sept derniers jours, et il y a normalement un tas de nouvelles démonstrations.

Voilà pour mon premier article sur mes débuts avec WebGL. Si vous souhaitez aller plus loin et apprendre à créer vos propres pages WebGL, vous pouvez consulter ma première leçon de WebGL.

X-A. Macs▲

X-B. Windows▲

X-C. Linux▲

Merci à Vladimir Vukicevic, Mohamed Mansour, Ehsun Amanolahi et Chris Marrin pour les informations qui ont permis d'ériger cette page, et l'ensemble de ses nombreuses incarnations précédentes !

Merci à LittleWhite pour sa relecture attentive et zoom61 pour sa relecture orthographique.

Navigation▲