GLSL

docs

Types de shaders

Vertex shader : Modifier la position des sommets
Fragment shader : Modifier la couleur des pixels

Données (attributes, uniforms) -> Vertex shader -> Données (Data, varying) -> Fragment shader -> Pixel

https://mermaid.js.org/ (opens in a new tab)
JavaScript : Données de l'application
Vertex Shader : Position des vertex
Uniforms : Données constantes
Attributes : Données des sommets
Varying : Données transmises du vertex shader au fragment shader
Transformations : Déplacer, tourner, redimensionner les sommets (modèle, vue, projection)
Vertex Data : Données des sommets
Fragment shader : Couleur des pixels
Framebuffer : Image en mémoire
https://www.khronos.org/opengl/wiki/Framebuffer_Object (opens in a new tab)

Données accesibles

Attributs

• position (vec3) : • La position des sommets dans l’espace local de l’objet. • normal (vec3) : • Les normales des sommets, nécessaires pour les calculs d’éclairage. • uv (vec2) : • Les coordonnées de texture, utilisées pour le mapping des textures. • uv2 (vec2) : • Les secondes coordonnées de texture, si disponibles. • color (vec3) : • La couleur des sommets, si définie.

Uniformes

• modelViewMatrix (mat4) : • La matrice de modèle-vue, combinant les transformations du modèle et de la vue. • projectionMatrix (mat4) : • La matrice de projection, utilisée pour transformer les coordonnées des sommets en coordonnées de l’écran. • normalMatrix (mat3) : • La matrice de transformation des normales, dérivée de la matrice de modèle. • cameraPosition (vec3) : • La position de la caméra dans l’espace monde. • uvTransform (mat3) : • La matrice de transformation des coordonnées UV, si utilisée. • textures (sampler2D) : • Les échantillonneurs de texture, utilisés pour accéder aux textures dans les shaders.

Vertex Shader

uniform : Variable récupérée du code JS, constante attribute : Variable récupérée du code JS

Fragments Shader

precision mediump float; : Précision des calculs. Ratio performance/qualité

Variables récupérées

varying float vRandom : Variable récupérée du vertex shader uniform vec3 uColor : Variable récupérée du code JavaScript

Main

main() : Fonction principale. Obligatoire. Retourne la couleur du pixel

gl_FragColor : Couleur du fragment.

Calcul la couleur du fragment
est un vec4 (rgba)

Variables en GLSL

uniform : JS -> shader, globales pour tous les vertex ou fragments.
attribute : données spécifiques à chaque sommet, utilisé dans les vertex shaders.
varying : Interpolé entre les vertex shaders et les fragment shaders

Les Types

float : Nombre à virgule flottante.
int : Nombre entier.
bool : Valeur booléenne (true ou false).

Vecteurs

vec2 : Vecteur à 2 composantes (float).
vec3 : Vecteur à 3 composantes (float).
vec4 : Vecteur à 4 composantes (float).
ivec2 : Vecteur à 2 composantes (int).
ivec3 : Vecteur à 3 composantes (int).
ivec4 : Vecteur à 4 composantes (int).
bvec2 : Vecteur à 2 composantes (bool).
bvec3 : Vecteur à 3 composantes (bool).
bvec4 : Vecteur à 4 composantes (bool).

Matrices

mat2 : Matrice 2x2.
mat3 : Matrice 3x3.
mat4 : Matrice 4x4.
mat2x3 : Matrice 2x3.
mat2x4 : Matrice 2x4.
mat3x2 : Matrice 3x2.
mat3x4 : Matrice 3x4.
mat4x2 : Matrice 4x2.
mat4x3 : Matrice 4x3.

Samplers

sampler2D : Texture 2D.
samplerCube : Texture cubique.
sampler3D : Texture 3D.
sampler2DShadow : Texture 2D avec comparaison de profondeur.

Qualificateurs

const : Valeur constante, connue au moment de la compilation.
uniform : Valeur uniforme, partagée entre tous les sommets ou fragments.
attribute : Attribut de sommet, spécifique à chaque sommet (utilisé uniquement dans les vertex shaders).
varying : Valeur interpolée entre les vertex shaders et les fragment shaders.

Fonctions mathématiques

abs(x) : Valeur absolue de x.
sin(x) : Sinus de x (en radians).
cos(x) : Cosinus de x (en radians).
tan(x) : Tangente de x (en radians).
asin(x) : Arc sinus de x (en radians).
acos(x) : Arc cosinus de x (en radians).
atan(y, x) : Arc tangente de y/x (en radians).
pow(x, y) : x élevé à la puissance y.
exp(x) : Exponentielle de x.
log(x) : Logarithme naturel de x.
sqrt(x) : Racine carrée de x.
inversesqrt(x) : Inverse de la racine carrée de x.
mod(x, y) : Reste de la division de x par y.

Boucles et conditions

if : Conditionnelle.
```
if (condition) {
    // code
}
```

for : Boucle pour un nombre fixe d'itérations.

for (int i = 0; i < n; ++i) {
    // code
}

while : Boucle tant qu'une condition est vraie.
```
while (condition) {
    // code
}
```

Précision

highp : Haute précision.
mediump : Précision moyenne.
lowp : Basse précision.

La précision sert à optimiser les calculs en fonction de la qualité visuelle requise.

Exemple

uniform mat4 uModelViewMatrix; // Matrice de transformation du modèle et de la vue
uniform mat4 uProjectionMatrix; // Matrice de projection
 
attribute vec3 aVertexPosition; // Position des sommets
attribute vec2 aTextureCoord; // Coordonnées de texture
 
varying vec2 vTextureCoord; // Coordonnées de texture interpolées
 
void main() {
    vTextureCoord = aTextureCoord;
    gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);
}

15 Shaders 17 Shaders Codrops