像素精灵元素GLSL - 27-六边形组合图（the bundle）

六边形组合图

示例代码

内部系数0.866025 是有Math.sin(120/ 180 * Math.PI)计算得来的

#ifdef GL_ES
precision mediump float;
#endif

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


/** 绘制线条
* @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 x 坐标点
* @param size 大小 
*/
float fill(float x, float size){
    return 1.0 - step(size,x);
}

float hexSDF(vec2 st){
    st = abs(st * 2.0 - 1.0);
    return max(abs(st.y),st.x * 0.866025 + st.y * 0.5);
}

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 = st.yx;

    color += stroke(hexSDF(st),0.6, 0.1); 
    color += fill(hexSDF(st - vec2(-0.06, -0.1)), 0.15);
    color += fill(hexSDF(st - vec2(-0.06, 0.1)), 0.15);
    color += fill(hexSDF(st - vec2(0.11, 0.0)), 0.15);

    gl_FragColor = vec4(color, 1.0);
}

代码效果

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