Можно ли превратить красный цвет в синий? - PullRequest
1 голос
/ 22 октября 2019

У меня есть некоторый код, который я написал в редакторе книг шейдеров :

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

Мне интересно, возможно ли, чтобы красный цвет соответствовал синему цвету, когдакоробка зависла? Я думаю, что мог бы иметь представление о том, как это сделать, если бы мне пришлось записывать данные в текстуру и искать их, но даже тогда я не совсем уверен.

1 Ответ

2 голосов
/ 22 октября 2019

Используйте mix

Используйте mix для интерполяции между красным и синим. Вам нужна другая переменная, которая переходит от 0-1 к смешиванию, это третий параметр mix.

Пример ShaderToy :

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

, которыйпроизводит:

enter image description here

В вашем случае вы захотите, чтобы третий параметр (параметр альфа или lerp) управлялся в течение некоторого времени (скажем,.2 секунды) после того, как мышь вошла в область наведения. Вам нужно будет выполнить одно из следующих действий:

  • Определить указатель, введенный на более высоком уровне, а затем передать время простоя мыши в виде единого
  • Управлять 3-м параметром напрямуюиз униформы
...