WebGL：如何让片段着色器中的颜色随时间变化？

Question

我是 webgl 的新手：我想知道我将如何配置/设置片段着色器，以便它根据当前经过的时间改变颜色。

Answer 1

如果 GLSL（着色器代码）部分不清楚，最好先查看示例并在 GLSL Sandbox or Shader Toy.

中进行实验

它基本上只是设置着色器的输出，gl_FragColor 为一个取决于统一变量的值（统一意味着所有处理的片段都相同）。

可以通过 javascript 设置统一值，方法是首先检索统一变量的位置，然后将其设置为一个值，每次您想要更改它时（对您来说就是每次您画一个框）。该示例假设您已经有一个已编译和链接的 webgl 程序。

var program = yourProgram;
var uniformNameInShader = "time";
var location = gl.getUniformLocation( program, uniformNameInShader );

function drawLoop ( ) {
    gl.uniform1i( location, Date.now() );
    render();
}

但老实说，您可能想要 learn the fundamentals from a tutorial，因为...您知道...研究工作和东西...

WebGL：如何让片段着色器中的颜色随时间变化？

WebGL: How to get colour in fragment shader to change over time?

webgl