像素精灵元素GLSL - 15-绘制三角形 （temple）

绘制三角形

示例代码

#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 st 坐标点
*/
float triSDF(vec2 st){
    st = (st * 2.0 - 1.0) * 2.0;  // -2 2
    return max(abs(st.x) * 0.866025 + st.y * 0.5, -st.y * 0.5); //0.866025 = sin(120°)
}



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.y = 1.0 - st.y;  //翻转y值
    vec2 ts = vec2(st.x, 0.82 - st.y);

    color += fill(triSDF(st), 0.7);
    color += fill(triSDF(ts), 0.46);


    gl_FragColor = vec4(color, 1.0);
}

代码效果

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