像素精灵元素GLSL - 25-方块画边组合图（the ripples）

方块画边组合图

示例代码

coord坐标加减可以实现图形的平移

#ifdef GL_ES
precision mediump float;
#endif

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


/** 旋转
* @param v 坐标值
* @param angle 旋转的弧度
*/
vec2  rotate(vec2 st, float angle){
    float cos_theta = cos(angle);
    float sin_theta = sin(angle);
    vec2 _st =  mat2(cos_theta, -sin_theta, sin_theta, cos_theta) * (st - 0.5);
    return _st + 0.5;
}

/** 绘制一个矩形
* @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));
}

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 = rotate(st, radians(-45.0))-0.08;
    
    for(int i=0;i<4;i++){
        float r = rectSDF(st, vec2(1.0));
        color += stroke(r, 0.19, 0.04);
        st += 0.05;
    }
    gl_FragColor = vec4(color, 1.0);
}

代码效果

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