如何在webgl中设置时间统一

Question

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

是否需要某种渲染循环？

如有任何帮助，我们将不胜感激，谢谢。

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

如何在webgl中设置时间统一

How to set a time uniform in webgl

webgl