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é (couleur) circulaire autour d'un point central
  • Utiliser les fonctions sinus et cosinus sur les UV pour générer des couleurs

Textures et image

  • Ces coordonnées uv peuvent permettre d'afficher une image
  • la fonction texture2D(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