如何在webgl中设置时间统一

Question

我是 webgl 新手。我正在尝试设置时间统一，这样我就可以随着时间的推移更改片段着色器的输出。我认为这实施起来相当简单，但我很挣扎。我知道可能涉及这两种方法：

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

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

是否需要某种渲染循环？

任何帮助都将非常感激，谢谢。

Answer 1

这是我目前的解决方案...

在我的 webgl JS 文件中，我创建了一个时间统一，然后为每个动画帧设置更新的值。

// 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);

然后在我的片段着色器中：

precision mediump float;

uniform float u_time;

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