La première scène que nous allons réaliser permettra tout simplement de dessiner une ligne puis on étendra le code pour afficher un ensemble de lignes.
Afin de pouvoir afficher une toute première ligne, il faut déjà pouvoir transmettre au processeur de la carte graphique, les coordonnées 3D des extrêmités (« vertex« ) et la couleur de cette ligne.
La transmission de ces données est réalisée grâce à l’utilisation de « buffers« .
Comme les GPU modernes sont programmables, à travers le système des « shaders« , les buffers transmettent aussi les données nécessaires à l’execution des shaders.
La programmation des shaders est un vaste sujet, nous aurons l’occasion de revenir plusieurs fois sur celui-ci. Pour l’instant, il est surtout important de retenir qu’il existe deux types de shaders :

vertex shader assurant entre autre le positionnement 3D des géométries

fragment shader pour les opérations de coloration des pixels

Le fragment shader est executé logiquement après le vertex shader. Il est à noter que les données contenues dans les buffers sont transmises comme des listes à une seule dimension. Ainsi, les coordonnées sont transmises par exemple les unes après les autres (à noter que l’utilisation des textures permet d’utiliser des tableaux à plusieurs dimensions).
De plus, il est possible d’affecter à chaque vertex d’une géométrie une couleur (ou toute autre donnée d’ailleurs…), le fragment shader interpolera cette couleur (ou donnée) à l’ensemble des points contenus dans la zone déterminée par les vertex. Si, par exemple, on a spécifié que l’on dessine un triangle, le fragment shader interpolera linéairement les données dites « varying » provenant des vertex.
Dans la spécification WebGl, le code source de ces fameux shaders est directement écrit dans le code HTML de la page :
Dans le framework PhiloGL, l’inclusion des codes shaders.