Comment définir un temps uniforme dans webgl

Question

Je suis nouveau à webgl. J'essaie de définir un temps uniforme, donc je peux changer la sortie de mon fragment shader au fil du temps. Je pensais que ce serait assez simple à mettre en œuvre, mais je me bats. Je suis conscient que ces deux méthodes sont probablement impliqués:

• https://developer.mozilla.org/en-US/docs/Web/API/WebGLUniformLocation

• https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/uniform

est une sorte de boucle le rendu nécessaire?

Toute aide ici serait vraiment appréciée, merci.

Answer 1

Voici ma solution actuelle ...

Dans mon fichier WebGL JS créer un uniforme de temps, puis définissez chaque cadre d'animation avec une valeur actualisée.

// create time uniform 
var timeLocation = context.getUniformLocation(program, "u_time"); 

function renderLoop(timeStamp) { 

    // set time uniform 
    gl.uniform1f(timeLocation, timeStamp/1000.0); 

    gl.drawArrays(...); 

    // recursive invocation 
    window.requestAnimationFrame(renderLoop); 
} 

// start the loop 
window.requestAnimationFrame(renderLoop); 

Puis dans mon shader fragment:

precision mediump float; 

uniform float u_time; 

void main() { 
    gl_FragColor = vec4(abs(sin(u_time)),0.0,0.0,1.0); 
}