Les uniformes

Qu'est-ce ?

---

Maintenant on est capable de dessiner des objets à l'écran...
Pas mal ! Mais pour avoir des comportements plus intéressant on voudrait bien passer la posiion de la souris, le temps, une texture pour peindre l'objet...
Pour tout cela on utilise des variables uniformes.

Côté GLSL

Déclarer un uniforme est très simple pour cela il suffit de déclarer la variable avec le mot clef « uniform » dans le shader :

precision mediump float;

// Ici on va passer time depuis le code javascript
uniform float time;

#define NOIR = vec3(0.0, 0.0, 0.0)

bool est_dans_cercle(float x, float y, float x0, float y0, float r) {
    float xs = x - x0;
    float ys = y - y0;
    return xs*xs + ys*ys <= r * r;
}

void main() {
    
    //la coordonée du pixel
    vec2 point = gl_FragCoord.xy;

    vec3 colour NOIR;
    if (est_dans_cercle(point.x, point.y, 0.0, 0.0, 500.0)) {
        colour = vec3(sin(time)*0.5 + 0.5, 1.0, 0.0);
    }
    //gl_FragColor c'est la couleur que l'on donne à notre pixel
    gl_FragColor = vec4(colour, 1.0);
}

            

Côté javascript

---

En javascript on va simplement récupérer l'emplacement de notre uniform dans le shader et écrire le temps en seconde dedans.

function update() {
    const time = new Date().getTime() / 1000;

    render(time);
    requestAnimationFrame(update);
}
function render(time) {
    //ne pas oublier de charger le programme avant de mettre à jour le temps
    gl.useProgram(programId);
    //Récupère l'endroit où time est déclaré dans le fragshader.
    const timeUniform = gl.getUniformLocation(programId, "time");
    //Met à  jour la variable
    // On met modulo 2 PI à cause de la faible précision des flottants 
    // et du très grand nombres de secondes écoulées depuis 1970.
    gl.uniform1f(timeUniform, time % (2 * Math.PI));
}

            

De la sorte on a une couleur qui varie en fonction temps avec WebGL !

eof