WebGL：在旧值和新值之间进行插值

Question

我已经连续第二天都在为这个问题苦苦挣扎了，这似乎是一个如此简单的任务，但我找不到正确的解决方案。

使用 p5.js 我正在创建一个 GL 实例并将制服发送到顶点着色器。现在我想更改统一的全局变量，并让着色器在旧值和新值之间进行插值。

在下面的例子中，点击按钮后，它不应该立即改变颜色，而是做小的增量以获得新颜色。

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 iResolution;
uniform float iTime;
uniform vec3 uSky;



void main()
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = gl_FragCoord.xy/iResolution.xy;
      uv -= 0.5;
    uv.x *= iResolution.x/iResolution.y;

    vec3 sky = uSky;
    //sky = mix(sky, uSky, 0.001);
                            // ^- This needs to be increment until 1 every time the uniform changes

    // Output to screen
    gl_FragColor = vec4(sky, 1.0);
}

https://glitch.com/~shader-prb

Answer 1

正如 Rabbid76 评论的那样。我无法更改着色器中的统一值。解决方案是从主机 lerp。

WebGL：在旧值和新值之间进行插值

WebGL: Interpolate between old and new value

shader

glsl

webgl

p5.js