Pour autant que je puisse en comprendre
En fait, WebGL consiste simplement à exécuter un programme utilisant
l'API OpenGL ES 2 écrit en Javascript dans un élément canvas.
Nous allons donc nous intéresser au fonctionnement de OpenGL (car OpenGL ES n'est
qu'une version amoindrie de OpenGL 2). À noter que l'architecture de OpenGL
a été récemment modifié par la publication des versions 3.0, 3.1, 3.2, 3.3,
4.0 et 4.1 depuis mi-2008 afin d'accompagner ou précéder les évolutions respectives
des GPU et de DirectX (version 10 en mars 2008 et 11 en juillet 2009).
Les objets à afficher sont stockés sous forme de points dans l'espace qui forment
des facettes triangulaires. Chacun de ses points va passer dans le pipeline
qui ne se traduit pas ici par oléoduc mais plutôt par
chemin de données
afin de produire une image telle qu'elle serait vue par une caméra filmant la scène.
On peut ensuite appliquer un traitement spécifique sur chacun des pixels composant cette
image afin de parvenir à rendre divers effets (brouillard, flou de vitesse, etc).
Voyons chacun de ces points plus précisément grâce à ce schéma descriptif :
Bon ce n'est sans doute par le schéma le plus adapté, essayons plutôt celui-ci,
issu d'un cours sur le
graphisme en temps réel
Ces deux schémas manquent de couleurs…
Et en voilà même un en français et en format vectoriel…
Partie géométrique (en vert)
La géométrie se composent donc d'un ensemble de points vertex
et de leur
regroupement par paquet de trois pour former une face triangulaire. Ces informations
sont souvent stockés dans un fichier puis chargées en mémoire sous formes de tableaux
les données brutes
.
La tessellation, technique consistant à diviser un maillage complexe en polygones plus simples, est un processus complexe qui n'est disponible que dans les dernières versions de DirectX et OpenGL donc pas en WebGL. L'étape suivante consiste à projeter tous les attributs d'un vertex sur un espace à deux dimensions. Cela concerne évidemment sa position mais aussi des informations sur sa couleur (qui dépend de la position relative des sources lumineuses et des propriétés du matériau dont est censé être composé l'objet que l'on veut afficher) ou ses coordonnées de texture. Cette partie est autrefois effectuée sans contrôle par l'API mais pour des raisons de souplesse, elle est de plus en plus souvent à la charge du programmeur et ce de façon obligatoire en WebGL.
Une fois les points et les faces positionnés dans un plan, on peut éliminer tous ceux qui ne seront pas directement visible et ainsi accélérer les traitements ultérieurs.
Partie affichage (en bleu)
La première opération consiste à récupérer toutes les informations sur les points et les faces associées pour les transformer en pixel à afficher sur l'écran en interpolant les valeurs entre points sur la surface de chaque triangle ainsi constitué. On peut ensuite modifier le résultat de ces calculs grâce à un pixel shader, une sorte de programme en assembleur pour le processeur graphique (qui est généralement écrit dans un langage de plus haut niveau comme le GLSL, HLSL ou Cg). On peut ainsi affecter le canal alpha de chaque pixel ce qui permet des effets de transparence.
Enfin la couleur de chaque pixel peut-être modifiée par la présence d'un brouillard ou d'un pixel plus ou moins transparent situé devant lui (car on a conservé des informations sur la profondeur lors de la projection).
Plus d'informations
Comme cela ne constitue manifestement qu'une présentation très sommaire d'un domaine bien plus vaste et passionnant, vous pouvez aussi consulter :
- l'article de Wikipedia.
- Un autre cours de Standford.
- Un tutoriel sur OpenGL.
- Ce n'est pas exactement la même chose, mais ça reste intéressant Une présentation de Silverlight 3D.