像素精灵元素GLSL - 01-黑白分明

从这一篇开始《像素精灵元素GLSL》作为一个专题，我会带领大家再次学习glsl,并感受它的魅力，你准备好了吗？让我们开始吧

黑白分明

这一讲主要是通过一个step 内置函数来绘制一个平面的黑白两块，step(a,b) b如果小于等于a返回结果是0，否则就返回1

示例代码一 平方窗口

#ifdef GL_ES
precision mediump float;
#endif

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

void main(){
    vec2 st = gl_FragCoord.xy / u_resolution;
    vec3 color = vec3(0.0);
    
    //分隔位置
    float splitPos = 0.5;
    color += step(splitPos, st.x);

    gl_FragColor = vec4(color, 1.0);
}

代码效果一

不管窗口大小如何，黑白总是沿着X方向平方

示例代码二 根据比例划分窗口

#ifdef GL_ES
precision mediump float;
#endif

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

void main(){
    vec2 st = gl_FragCoord.xy / u_resolution;
    st.x *= u_resolution.x/u_resolution.y;
    vec3 color = vec3(0.0);

    float  splitPos = 0.5;
    color += step(splitPos, st.x);

    gl_FragColor = vec4(color, 1.0);
}

代码效果二

x方向的划分是根据窗口的总宽度与总高度比例计算划分的

《像素精灵元素GLSL》期待你的关注与点赞