I try to code in WebGL #2

 

Premièrement avant de mettre le nez dedant,

je vais déjà commencer par définir ce qu’est un shader.

 

Les shaders c'est comme des petits programmes qui gèrent la couleur et l'apparence des trucs qu'on dessine sur l'écran, genre des formes ou des images.
En gros, on a d’abord un petit programme “vertex shader” qui s'occupe de placer les points de la plane à l'écran. Et pour définir la couleur, on utilise un “fragment shader”, qui gère la couleur de chaque pixel.

 

Ensuite c'est la carte graphique qui interprète directement le code des shaders.

 

Et voici une petite vidéo pour imager le fonctionnement du GPU par rapport au CPU :

Donc, pour reprendre sur ma première mission, je me suis dit : "Pourquoi pas commencer simple ?". J’ai donc décidé une plane basique. Mais je me suis dit qu'on allait pas la laisser toute terne, on va lui donner du style, du rouge vif !
Alors, j’ai commencé par décrire notre plane, pour ça on lui dit comment se dessiner à l'aide d'un vertex shader. 



 

Ainsi on a juste dit à ce fragment shader : 


- "Yo mec, fais tout en rouge, ok ?".

Et la carte graphique répond :


- “Ouais, t'inquiète gros, j’mets tout en rouge !”


Au final, voici à quoi ressemblait notre code :

gl_FragColor est une variable réservée qui représente la couleur finale du pixel à afficher à l'écran.

Et après ça donne ceci :

C’est simple, non ?


 

Maintenant on va essayé de faire un truc avec différentes couleurs, une seule couleur c’est un peu monotone...


On va mettre une variable uniforme u_resolution, c'est la taille de l'écran qu'on donne, depuis le JavaScript, au shader pour qu'il sache dans quel espace il travaille.



 

Et voici le code correspond :

 

Ici on utilisé des uniforms définis dans le JS. Un uniform c'est comme une info fixe que tu donnes à ton shader une fois pour tout le rendu, genre une couleur ou une matrice de transformation. C'est le même pour tous les trucs que tu dessines, compris ?

Ensuite, dans la fonction main(), on calcule uv, qui représente les coordonnées normalisées du pixel actuel par rapport à la taille de l'écran (gl_FragCoord.xy/u_resolution). C'est comme si on disait au shader "Hey mec, trouve où t'es dans l'écran, ok ?".
Enfin, on utilise ces coordonnées uv pour définir la couleur du pixel avec gl_FragColor = vec4(uv, 0.0, 1.0). En gros, on dit au shader "prends ces coordonnées que t'as trouvées et mets-les en couleur, t'as capté ?". Et là, on lui dit de prendre les coordonnées uv pour la couleur, avec un peu de transparence (0.0) et d'opacité (1.0). Voilà mec, c'est tout simple !