像素精灵元素GLSL - 26-圆环拼接图（the empress）

圆环拼接图

示例代码

#ifdef GL_ES
precision mediump float;
#endif

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


float QTR_PI = 0.78539816339;                       // 四分之一PI
float HALF_PI = 1.5707963267948966192313216916398;  // 二分之一PI
float PI = 3.1415926535897932384626433832795;       // PI 
float TWO_PI = 6.2831853071795864769252867665590;  // 2PI
float TAU = 6.2831853071795864769252867665590;  // 2PI
float PHI = 1.618033988749894848204586834;  // 黄金分割率
float EPSILON = 0.0000001;


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



float polySDF(vec2 st, int V){
    st = st * 2.0 - 1.0;
    float a = atan(st.x, st.y) + PI;
    float r = length(st);
    float v= TAU / float(V);
    return cos(float(0.5 + a / v) * v - a) * r;

}

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

    vec3 color = vec3(0.0); 

    float d1 = polySDF(st, 5);
    vec2 ts = vec2(st.x, 1.0 - st.y);
    float d2 = polySDF(ts, 5);

    color += fill(d1, 0.75) * fill(fract(d1 * 5.0), 0.5);
    color -= fill(d1, 0.6) * fill(fract(d2 * 4.9), 0.45);

    gl_FragColor = vec4(color, 1.0);
}

代码效果

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