像素精灵元素GLSL - 14-绘制一个鱼泡形状的图形（hope）

绘制一个鱼泡形状的图形

示例代码

#ifdef GL_ES
precision mediump float;
#endif

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

/** 填充一个区域
* @param x 坐标点
* @param size 大小 
*/
float fill(float x, float size){
    return 1.0 - step(size,x);
}

/** 绘制线条
* @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);
}

/** 绘制一个矩形
* @param st 坐标值
* @param s 区域大小
*/
float rectSDF(vec2 st, vec2 s){
    st = st * 2.0 -1.0;
    return max(abs(st.x / s.x), abs(st.y / s.y));
}

/** 图形混合
* @param v 坐标值
* @param pct 十字大小
*/
float flip(float v, float pct){
    return mix(v, 1.0 - v, pct);
}


/** 绘制一个圆
* @param st 坐标点
*/
float circleSDF(vec2 st){
    return length(st-0.5) * 2.0;
}

/** 绘制一个鱼泡形状
* @param st 坐标点
* @param w 水泡的椭圆度
*/
float vesicaSDF(vec2 st, float w){
    vec2 offset = vec2(w * 0.5, 0.0);
    return max(circleSDF(st - offset), circleSDF(st + offset));
}

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

    float sdf = vesicaSDF(st, 0.2);

    color +=vec3(fill(sdf, 0.5));

    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;

/** 填充一个区域
* @param x 坐标点
* @param size 大小 
*/
float fill(float x, float size){
    return 1.0 - step(size,x);
}

/** 绘制线条
* @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);
}

/** 绘制一个矩形
* @param st 坐标值
* @param s 区域大小
*/
float rectSDF(vec2 st, vec2 s){
    st = st * 2.0 -1.0;
    return max(abs(st.x / s.x), abs(st.y / s.y));
}

/** 图形混合
* @param v 坐标值
* @param pct 十字大小
*/
float flip(float v, float pct){
    return mix(v, 1.0 - v, pct);
}


/** 绘制一个圆
* @param st 坐标点
*/
float circleSDF(vec2 st){
    return length(st-0.5) * 2.0;
}

/** 绘制一个鱼泡形状
* @param st 坐标点
* @param w 水泡的椭圆度
*/
float vesicaSDF(vec2 st, float w){
    vec2 offset = vec2(w * 0.5, 0.0);
    return max(circleSDF(st - offset), circleSDF(st + offset));
}

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

    float sdf = vesicaSDF(st, 0.2);

    //color +=vec3(fill(sdf, 0.5));
   
    color += flip(fill(sdf, 0.5), step((st.x + st.y) * 0.5, 0.5));

    gl_FragColor = vec4(color, 1.0);
}

代码效果

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