在 https://thebookofshaders.com/ 上學(xué)習(xí) shader，記個(gè)筆記。

在最左邊畫一條線

#ifdef GL_ES
precision mediump float;
#endif

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

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    float borad = 0.02;
    float left_line = step(borad, st.x);
    vec3 color = vec3(left_line);
    gl_FragColor = vec4(color,1.0);
}

左邊的線

那如果要畫一條最下面的線，那么只需要把float left_line = step(borad, st.x); 里的st.x改成st.y即可。

下面的線

如果我要同時(shí)畫左邊和下面的。那就需要這樣

void main() {
    ...
    float left_line = step(borad, st.x);
    float bottom_line = step(borad, st.y);
    float lb = left_line * bottom_line;
    vec3 color = vec3(lb);
    ...
}

把結(jié)果相乘。

左下的線

為什么乘一下就可以得到兩條線？

在我的例子里，step的結(jié)果，如果小于 0.02 ，那么就是 0 ，否則是 1 。

• 符合left_line，符合bottom_line，結(jié)果是 0 * 0 = 0
• 符合left_line，不符合bottom_line，結(jié)果是 0 * 1 = 0
• 不符合left_line，符合bottom_line，結(jié)果是 1 * 0 = 0

上面這些結(jié)果相乘都為 0 。用在顏色里就是黑色。

• 不符合left_line，不符合bottom_line，結(jié)果是 1 * 1 = 1

上面的結(jié)果是白色。