Ok.
Pour commencer, si tu ne sais absolument pas comment OpenGL marche, je ne saurais que te conseiller de lire un peu... Mais bon, c'est pas grave.
OpenGL (et WebGL, c'est pareil) fonctionne comme un pipeline qui va transformer les différentes informations en entrée (que tu lui donnes) en primitives graphiques 3D (des lignes, des polygones), puis ces primitives en pixels affichés sur le support que tu lui as alloué (la fenêtre pour une appli desktop, ton canvas pour ton WebGL).
Pour ce faire, il va y avoir plusieurs étapes intermédiaires, qui sont plus ou moins bien illustrées sur cette image:
http://duriansoftware.com/joe/media/gl1-pipeline-01.png
- La première étape (vertex shader) lui permet de transformer les données brutes que tu lui as fourni, en vertices représentant des points dans l'espace, et possédant un certain nombre d'attributs (la coordonnée du point dans l'espace, mais aussi la coordonnée de texture, ou n'importe quoi d'autre défini dans ton vertex shader).
- La seconde étape (triangle assembly, qui devrait s'apeller primitive assembly) consiste à grouper ces vertices pour former les primitives que tu lui as demandé de dessiner (c'est ton TRIANGLE_LIST de gl.drawArrays, qui pourrait être autre chose si tu veux grouper les vertices autrement).
- La troisième étape (rasterization) consiste à calculer l'interpolation des attributs des vertices composant une primitive sur chaque pixel ou elle va éventuellement être projetée.
- La quatrième étape (fragment shader) consiste, pour chaque fragment de primitive correspondant à un pixel potentielement touché, à calculer la couleur à appliquer au pixel à partir de la valeur interpolée des attributs de vertice.
- La dernière étape (testing and blending) consiste, à partir de tous les fragments calculés, de rejeter ceux qui ne sont pas visibles (masqués par d'autres fragments plus proches sur l'axe Z) ou ne modifiant pas un pixel, et de mélanger la couleur des autres suivant les règles de mélange (blending via la composante alpha, etc).
L'étape #1 est programmable, via un vertex shader que tu as dans ton .html. En entrée, il prend des attribute et il passe des varying en sortie (qui seront interpolés) pour les étapes suivantes. gl_Position est un varying spécial qui indique la position du vertex en sortie du vertex shader et qui sera utilisé par GL pour déterminer la position de la primitive à l'écran ensuite.
Chaque variable marquée "attribute" dans le vertex shader, va nécessiter que tu la binde à un buffer avec vertexAttribPointer pour que GL aille y lire la valeur de l'attribut pour chaque vertex. Le nombre de composant de chaque attribute est important et sera le nombre que tu vas passer au paramètre size de vertexAttribPointer.
Par exemple un vec2 a deux composantes, et il faudra donc faire vertexAttribPointer(<location de l'attribute>, 2, ...) avec un buffer contenant 2 * <nb vertex> valeurs. Pour chaque vertex à dessiner, GL lira les deux valeurs de l'index correspondant dans ton buffer et éxecutera le vertex shader pour déterminer les varying en sortie, pour créer des primitives.
Voilà pour un premier temps, dis moi si tu as compris quelque chose (auquel cas c'est pas la peine d'aller plus loin, j'essaierai déjà de clarifier cette introduction)
Edit: Virage du paragraphe sur Viewport qui n'est plus clair dans ma tête.