绘制魔术环
示例代码
#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 {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 坐标点
*/
float circleSDF(vec2 st){
return length(st-0.5) * 2.0;
}
/**
* @param v 坐标值
* @param pct 十字大小
*/
float flip(float v, float pct){
return mix(v, 1.0 - v, pct);
}
/**
* @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));
}
vec3 bridge(vec3 c, float d, float s, float w){
c *= 1.0 - stroke(d, s, w * 2.0);
return c + stroke(d, s, w);
}
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);
st.x = flip(st.x, step(0.5, st.y));
vec2 offset = vec2(0.15, 0.0);
float left = circleSDF(st + offset);
float right = circleSDF(st - offset);
color += stroke(left, 0.4, 0.075);
color = bridge(color, right, 0.4, 0.075);
gl_FragColor = vec4(color, 1.0);
}
代码效果
《像素精灵元素GLSL》期待你的关注与点赞