【Shader】画线

在 https://thebookofshaders.com/ 上学习 shader，记个笔记。

在最左边画一条线

#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即可。

下面的线

如果我要同时画左边和下面的。那就需要这样

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

把结果相乘。

左下的线

为什么乘一下就可以得到两条线？

在我的例子里，step的结果，如果小于 0.02 ，那么就是 0 ，否则是 1 。

• 符合left_line，符合bottom_line，结果是 0 * 0 = 0
• 符合left_line，不符合bottom_line，结果是 0 * 1 = 0
• 不符合left_line，符合bottom_line，结果是 1 * 0 = 0

上面这些结果相乘都为 0 。用在颜色里就是黑色。

• 不符合left_line，不符合bottom_line，结果是 1 * 1 = 1

上面的结果是白色。