像素精灵元素GLSL - 11-绘制扑克教皇（11-the-hierophant）

绘制一个十字对称图形

示例代码一

#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 st 坐标值
* @param s 十字大小
*/
float crossSDF(vec2 st, float s){
    vec2 size = vec2(0.25, s);
    return min(rectSDF(st, size.xy), rectSDF(st,size.yx));
}

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

    float rect = rectSDF(st, vec2(1.0));
    color +=fill(rect, 0.5);

     float cross = crossSDF(st, 1.0);
     color *=step(0.5, fract(cross * 4.0));
    gl_FragColor = vec4(color, 1.0);
}

代码效果一

上例中float cross = crossSDF(st, 1.0); 更改为float cross = crossSDF(st, 0.5);

示例代码二

#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 st 坐标值
* @param s 十字大小
*/
float crossSDF(vec2 st, float s){
    vec2 size = vec2(0.25, s);
    return min(rectSDF(st, size.xy), rectSDF(st,size.yx));
}

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

    float rect = rectSDF(st, vec2(1.0));
    color +=fill(rect, 0.5);

     float cross = crossSDF(st, 1.0);
     color *=step(0.5, fract(cross * 4.0));
     color *=step(1.0, cross);

    gl_FragColor = vec4(color, 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 rect = rectSDF(st, vec2(1.0));
    color +=fill(rect, 0.5);

     float cross = crossSDF(st, 1.0);
     color *=step(0.5, fract(cross * 4.0));
     color *=step(1.0, cross);
     color +=fill(cross, 0.5);


    gl_FragColor = vec4(color, 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 rect = rectSDF(st, vec2(1.0));
    color +=fill(rect, 0.5);

     float cross = crossSDF(st, 1.0);
     color *=step(0.5, fract(cross * 4.0));
     color *=step(1.0, cross);
     color +=fill(cross, 0.5);
     color += stroke(rect, 0.65, 0.05);
     color += stroke(rect, 0.75, 0.025);


    gl_FragColor = vec4(color, 1.0);
}

代码效果四

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