Informatique Graphique
ShaderToy
Découverte de GLSL
- Un navigateur (Firefox ou Chrome)
- Fragment shader - opérations par pixel
- Le site shadertoy
Pour débuter - de la 2D
- Une variable gl_FragCoord
- Contient la position du pixel (en nb de pixel) sur l'écran
- En divisant par la taille de la fenêtre (iResolution), on obtient des coordonnées uv entre 0 et 1
- Assignez a la variable gl_FragColor la valeur de uv .
- Que faire avec ces coordonnées uv ?
Des premiers exercices
- Afficher un dégradé horizontal du noir vers le blanc
- Afficher n lignes horizontales
- Afficher une quadrillage du type échiquier
Plus d'exercices
- Faire défiler votre quadrillage en utilisant la variable iTime
- Faire de même en utilisant les coordonnées de la souris iMouse
- Faire un dégradé circulaire autour d'un point central
- Faire un dégradé circulaire autour de la souris
- En utilisant la fonction step, affichez un cercle rouge autour de la souris
Un peu de couleurs
- Faire un dégradé (couleur) circulaire autour d'un point central
- Choisir un espace de couleur adapté (par exemple HSV)
- Ecrire une fonction qui converti le HSV en RGB
- Utiliser le produit scalaire (cf cours) pour générer les couleurs
- Créer un cercle qui grandit et se réduit (en utilisant iTime)
Textures et image
- Ces coordonnées uv peuvent permettre d'afficher une image
- la fonction texture(iChannel0,st) retourne une couleur correspondant a la couleur au point st de l'image iChannel0
- Assigner cette couleur comme couleur du pixel pour chaque pixel permet d'afficher l'image
Textures et image - Exercices
- Affichez l'image à l'envers
- Afficher une image avec un facteur de zoom afin d'obtenir :
- Une vue détaillée de l'image
- Une vue éloignée de l'image qui se répète
- Transformer une image couleur en noir et banc (intensité noir = 0.299r+0.57g+0.114b)
Textures et image - Plus d'exercices
- Affichez l'image en négatif
- Affichez une image en appliquant à la composante rouge la fonction pow (power puissance) en faisant varier l'exposant utilisé : que remarquez vous?
- Ajoutez une 2ième image en noir et blanc sur le canal ichannel1 et utilisez l'intensité de l'image n&b comme paramètre alpha de de l'affichage de la première image.
- En ajoutant une troisième image, vous pouvez melanger 2 images en fonction de la troisième.
- Rendre flou une image : mélangez les valeurs d'un pixel avec celle de 4 voisins (gauche, droite, haut et bas).
- Détectez les contours d'une image avec le filtre de Sobel