Découvrir ShaderToy
Christophe de Dinechin
AzurTech Winter 2024
C'est quoi, ShaderToy?
Un outil web pour explorer les shaders GPU
OK, mais c'est quoi, les shaders?
Des programmes qui s'exécutent sur le GPU
et qui souvent sont assez cool
Et on peut faire quoi avec?
Des animations 3D sophistiquées
Et quoi encore??
Des fonds d'écran calculés
pour des sites web différents
Et quoi encore??
Des fonds d'écran calculés
pour les grandes occasions
Et comment ça marche?
Le GPU calcule en parallèle chaque pixel (fragment)
et vos algorithms construisent l'image
Un peu de terminologie
- Fragment: Élement d'image (pixel)
- Vertex: Élement de géométrie (sommets)
- Texture: Élément de colorisation (images)
- Uniform: Paramètre partagé par les fragments
- GLSL: Langage de description (programme)
- Raytracing: Lancer de rayons simple
- Raymarching: Lancer de rayons adaptatif
ShaderToy ne s'intéresse pas aux vertex shaders
L'interface de ShaderToy
Notre premier shader
void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
// Output to screen
fragColor = vec4(col,1.0);
}
Il n'y a rien à faire, ShaderToy pré-remplit!
La technique du singe
Bidouillons les paramètres (Alt-Enter pour compiler)
Les vecteurs en GLSL
Opérations sur 2, 3 ou 4 valeurs simultanément
Couleurs et coordonnées
Couleur .rgba, Position .xyzw (quaternion)
Swizzling (agiter/mélanger)
Réarranger les coordonnées, .zyx, .bgr
Ajoutons une image
N'oubliez pas de choisir la texture pour iChannel0
Les textures sont des variables uniformes
Défilement
On change la coordonnée "uv" (mapping)
Déformation
Déformons le centre de l'image
Dépendance au temps
Animons la déformation
Créons une forme
Calcul de la couleur en fonction des coordonnées
Créons un "cercle"
Cercle en fonction de la distance au centre
Ajustons les coordonnées
Les résolutions X et Y ne sont pas égales
Ajustons les coordonnées
La dimension selon Y est plus grande
La fonction step
Pourquoi on obtient des couleurs Microsoft?
La fonction smoothstep
Création de transitions douces
Animons le cercle
Création de transitions douces
Un fonction cercle
Réutiliser des formes
Et les textures?
La couleur est calculée par pixel
Répétitions
Répéter une forme ne coûte rien
Répétitions
Répéter une forme ne coûte rien
À votre avis, combien de briques?
Combien de dalles y a-t-il au sol?
Dessiner un carré
On a une fonction de distance
Dessiner un carré arrondi
Une autre fonction de distance
Dessiner un quadrifolio
Encore une autre fonction de distance
Animations indépendantes
On peut déplacer indépendamment les éléments
Rotation
Bouger les objets en bougeant l'espace!!!
La même chose en 3D
Lancer de rayons: on déplace uv en 3D
Raymarching
Déplacement du rayon pas à pas
Textures procédurales
Les textures aussi sont calculées
Textures volumétriques
Photoréalisme
Photoréalisme
Photoréalisme
Photoréalisme
Photoréalisme
Photoréalisme
Photoréalisme
Photoréalisme
Enseigner la science
Visualiser la théorie de la relativité.
Merci!
Christophe - Fiction - Physique - Maths