跟我一起学glsl编程03 - 绘制一个圆

绘制一个圆

• 示例代码

 // 宏操作，判断运行的环境是否是基于OpenGL ES
#ifdef GL_ES
// 制定着色器的计算精度，主要包括lowp:低精度，mediump:中精度,highp:高精度
precision mediump float;
#endif
// 宏结束

// 定义统一变量 u_resolution，{x:画布的宽，y:画布的高}，外部传入，在顶点着色器与片元着色器中都可以访问到
uniform vec2 u_resolution;

/**
* 定义绘制圆的方法
* @params {vec2} position 像素点的位置
* @params {float} radius  半径
* 返回值 float 0 或者 1
*/
float circleshape(vec2 position, float radius){
    // 第二个参数小于或等于第一个参数返回 0，否则返回 1
    return step(radius, length(position - vec2(0.5)));
}

// 类似于C语言， 程序启动的主方法
void main(){
    // gl_FragCoord内部变量,获取屏幕点的位置, position得到的就是[0,1]之间的屏幕位置
    vec2 position = gl_FragCoord.xy / u_resolution;

    // 定义一个颜色
    vec3 color = vec3(0.0);

    // 通过函数返回position位置对于的值是0 还是 1
    float circle = circleshape(position,0.3);
     
     // 将获得圆的值作为颜色值
     color = vec3(circle);

     // gl_FragColor 系统变量，获得最终像素点的颜色  
     gl_FragColor = vec4(color,1.0);
}

• 代码效果