像素精灵元素GLSL - 05-温和的曲线

绘制曲线

示例代码一

#ifdef GL_ES
precision mediump float;
#endif

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

const float PI = 3.1415926535897932384626433832795;
/**
* @param {float } x 坐标点
* @param {float } s 划线的位置
* @param {float } w 现对与屏幕宽度的线宽
*/
float stroke(float x, float s, float w){
    float d = step(s, x + w * 0.5) - step(s, x - w * 0.5);
    return clamp(d, 0.0, 1.0);
}

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

    float offset = cos(st.y * PI) * 0.15;    

    color += stroke(st.x, 0.28 + offset, 0.1);
    

    gl_FragColor = vec4(color, 1.0);
}

代码效果一

示例代码二

#ifdef GL_ES
precision mediump float;
#endif

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

const float PI = 3.1415926535897932384626433832795;
/**
* @param {float } x 坐标点
* @param {float } s 划线的位置
* @param {float } w 现对与屏幕宽度的线宽
*/
float stroke(float x, float s, float w){
    float d = step(s, x + w * 0.5) - step(s, x - w * 0.5);
    return clamp(d, 0.0, 1.0);
}

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

    float offset = cos(st.y * PI) * 0.15;    

    color += stroke(st.x, 0.28 + offset, 0.1);
    color += stroke(st.x, 0.5 + offset, 0.1);
    color += stroke(st.x, 0.72 + offset, 0.1);

    gl_FragColor = vec4(color, 1.0);
}

代码效果二

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