是否可以将红色补间为蓝色？

Question

中写了一些代码

#ifdef GL_ES
precision mediump float;
#endif


uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float remap(float a, float b, float c, float d, float t) {
    return ((t - a) / (b - a)) * (d-c) + c;
}

float outline(vec2 st) {
    return smoothstep(0.99, 1.0, st.y) + smoothstep(0.99, 1.0, st.x) + smoothstep(0.01, 0.0, st.y) + smoothstep(0.01, 0.0, st.x);
}

float mouseFoo(vec2 scaledSt, vec2 u_mouse, float scaleVal) {
    vec2 scaledMouse = u_mouse * scaleVal;
    if(scaledSt.x < ceil(scaledMouse.x) && scaledSt.x > floor(scaledMouse.x) && scaledSt.y < ceil(scaledMouse.y) && scaledSt.y > floor(scaledMouse.y)) {
    // if(u_mouse.x < 100.0) {
        return 1.0;
    } else {
        return 0.0;         
    }

}

void main(){    
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color = vec3(0.03,0.07,0.15);
    vec3 redColor = vec3(1.0, 0.0, 0.0);
    vec3 outlineColor = vec3(1.0);
    float floorSt;
    float scaleVal = 5.0;
    vec2 scaledSt = st * scaleVal;

    // tile
    st *= scaleVal;
    floorSt = floor(st.x);
    st = fract(st);

    // inner color
    color = mix(color, redColor, mouseFoo(scaledSt, u_mouse/u_resolution.xy, scaleVal));

    // outline
    color = mix(color, outlineColor, outline(st));

    gl_FragColor = vec4(color, 1.0 );
}

我想知道当框悬停时是否可以将红色补间为蓝色？我想如果我要将数据写入纹理并进行查找，我可能会知道如何去做，但即便如此我也不确定。

Answer 1

使用`mix`

使用mix在红色和蓝色之间进行插值。您需要另一个从 0-1 转换的变量来进行混合，这是 mix 的第三个参数。

ShaderToy example:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    vec3 red = vec3(1,0,0);
    vec3 blue = vec3(0,0,1);

    // Output to screen
    fragColor = vec4(mix(red, blue, uv.x),1.0);
}

产生：

在您的情况下，您需要在鼠标进入悬停区域后的一段时间内（例如 .2 秒）驱动第三个参数（alpha 或 lerp 参数）。您需要执行以下操作之一：

检测上层进入的悬停，然后统一传入鼠标按下时间
直接从 uniform 驱动第三个参数

是否可以将红色补间为蓝色？

Is it possible to tween the red color to blue?

glsl

fragment-shader

使用`mix`

是否可以将红色补间为蓝色？

Is it possible to tween the red color to blue?

glsl

fragment-shader

使用mix

使用`mix`