Search code examples
glslshaderwebglp5.js

WebGL: Interpolate between old and new value

I am struggling with this for the second day now and it seems like such a simple task, but I can not find the right solution.

With p5.js I am creating a GL instance and sending uniforms to the vertex shader. Now I want to change the global variable that is the uniform and have the shader interpolate between the old value to the new value.

In the example below, after the button is clicked, it should not change the color instantly, but do small increments to get to the new color.

#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

Solution

  • As Rabbid76 commented. I can not change the uniform value in the shader. The solution was to lerp from the host.