WebGL leçon 0 : Débuter avec WebGL

| Giles Thomas | Alexandre Laurent |

Traducteur

Jérôme Marsaguet

La première étape dans l'expérimentation de WebGL est d'obtenir un navigateur qui le prend en charge. Apprenez-ici à installer un navigateur compatible WebGL.

Commentez

- Titre : WebGL leçon 0 : Débuter avec WebGL

- Auteurs : Giles Thomas, Alexandre Laurent

- Traducteur : Jérôme Marsaguet

- Parution : 25 avril 2013

- Mise à jour : 2 mai 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Giles Thomas. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Navigation

- II. Introduction

- III. Pour faire simple

- IV. La voie difficile

- V. Firefox

- VI. Exécution de Minefield avec le rendu logiciel sur Linux

- VII. Safari

- VIII. Chromium

- VIII-A. Pour Windows

- VIII-B. Pour Macintosh

- VIII-C. Pour Linux

- IX. Premiers exemples

- X. Dépannage

- X-A. Macs

- X-B. Windows

- X-C. Linux

- XI. Remerciements

- Navigation

Navigation

Sommaire

Tutoriel suivant : un triangle et un carré

II - Introduction

[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.

III - Pour faire simple

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 pour.

IV - La voie difficile

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 Firefox, soit Chrome, selon votre préférence - si cela ne fonctionne pas vérifiez le guide de dé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 WebKit, 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 Firefox ou Chrome. 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 Firefox ou Chrome,

- 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émentaires.

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

V - Firefox

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 WebGL.

VI - Exécution de Minefield avec le rendu logiciel sur Linux

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 WebGL.

VII - Safari

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 Firefox ou Chrome. (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 :

defaults write com.apple.Safari WebKitWebGLEnabled -bool YES

- lancer la toute nouvelle application.

Ensuite, cliquez ici pour essayer quelques pages WebGL.

VIII - Chromium

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 Windows, Macintosh et 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

- Allez dans la page d'intégration en continu, descendez pour trouver la version la plus récente (en bas), cliquez sur le lien et prenez chrome-win32.zip ;

- Décompressez le fichier dans un dossier approprié ;

- Dans ce dossier double-cliquez sur le fichier chrome.exe.

VIII-B - Pour Macintosh

- Allez dans la page d'intégration en continu, descendez pour trouver la version la plus récente (en bas), cliquez sur le lien et prenez chrome-mac.zip ;

- Décompressez le fichier dans un dossier approprié ;

- Ouvrez un terminal et allez dans le dossier chrome-mac que vous venez de décompresser ;

- Assurez-vous que Chrome n'est pas en train de fonctionner ;

- Exécutez la commande suivante :

./Chromium.app/Contents/MacOS/Chromium

- Une fois vérifié que cela fonctionne, vous pouvez automatiser les choses de sorte de ne pas avoir à taper la ligne de commande à chaque fois. Dans les commentaires, Julien Limoges a fourni un script shell utile pour gérer cela.

VIII-C - Pour Linux

- Allez dans les pages d'intégrations en continu 32 bits ou 64 bits, descendez pour trouver la version la plus récente (en bas), cliquez sur le lien et prenez chrome-linux.zip ;

- Décompressez le fichier dans un dossier approprié et allez dans ce même dossier dans un terminal ;

- Assurez-vous que vous Chrome n'est pas en train de fonctionner ;

- Exécutez la commande suivante :

./chrome

Ensuite, cliquez ici pour essayer quelques pages WebGL.

IX - Premiers exemples

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é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 - Dépannage

X-A - Macs

Je n'ai pas de conseil particulier pour faire fonctionner WebGL sur Mac car personne ne m'a jamais demandé de l'aide et je ne pense pas avoir vu de question dans les forums. Je ne peux que supposer que cela signifie que tout fonctionne sur Mac OS X…

X-B - Windows

Le problème le plus souvent rencontré par les utilisateurs Windows est de ne pas avoir installé le runtime DirectX - le téléchargement depuis le site de Microsoft est gratuit, il suffit d'essayer. Il pourrait aussi être intéressant de voir s'il existe des mises à jour pour les pilotes de votre carte graphique. Consultez Windows Update ou peut-être le site Web du fabricant de votre carte graphique. Si cela ne fonctionne pas, il se pourrait que votre pilote graphique soit sur une « liste noire ». Ceci arrive plus rarement sous Windows que sous Linux, mais cela s'est déjà produit. Voir les instructions concernant Linux ci-dessous pour quelques conseils.

X-C - Linux

La raison principale pour que WebGL ne fonctionne pas sous Linux vient de problèmes avec les pilotes graphiques. Toutes les implémentations de WebGL actuelles dans les navigateurs sous Linux sont basées sur OpenGL, et le support d'OpenGL est fourni par votre pilote graphique. WebGL nécessite au moins la version 2.0 d'OpenGL afin de fonctionner. En particulier ceux qui possèdent des cartes graphiques Intel ont des problèmes car Intel n'a pas fourni de pilotes qui supportent cette version. Si vous avez une carte graphique Intel, essayez d'utiliser le logiciel de rendu Mesa. Si cela ne marche toujours pas, laissez un commentaire ci-dessous et j'essayerai de vous aider.

Si vous possédez une carte ATI ou NVIDIA, commencez par vérifier la version d'OpenGL de votre machine. Pour cela lancez glxinfo et regardez la ligne intitulée « OpenGL version string ». Si vous voyez un numéro de version inférieur à 2.0, vous avez besoin de mettre à jour vos pilotes. Allez sur le site Web du fabricant de votre ordinateur / carte graphique et jetez un œil au gestionnaire de paquets de votre distribution.

Si cela n'a toujours aucun effet, cela peut provenir du fait que les développeurs de votre navigateur aient black-listé votre pilote ; car certains sont instables au point de causer un crash de votre machine, ce qui n'est certainement pas le comportement attendu par un navigateur…

En réponse à ce sujet, Nardon a commenté ceci, datant d'octobre 2011 « Google a black-listé tous les pilotes Linux, excepté les pilotes NVIDIA officiels… Firefox 6 et plus, et les récents pilotes ATI pour Linux, vous devriez donc pourvoir utiliser WebGL sur ce navigateur. ».

Si vous souhaitez tout de même risquer le crash et utiliser un pilote black-listé, vous pouvez démarrer Chrome avec l'option -ignore-gpu-blacklist et observer ce qui se passe (merci à Antunes da Silva pour cette astuce). Si cela ne résout pas les choses, c'est sûrement dû au fait qu'aucun bon pilote Linux OpenGL n'est disponible pour votre matériel graphique. La meilleure chose à faire est probablement d'utiliser un logiciel de rendu. Une fois de plus voici les instructions.

XI - Remerciements

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

Sommaire

Tutoriel suivant : un triangle et un carré