WebGL - 示例 绘制圆形点

之前绘制的点都是正方形的，类似一个像素点，那怎么才能把方点绘制成圆点，顶点着色器和片元着色器之间发生了光栅化过程，一个顶点被光栅化为了多个片元，每一个片元都会经过片元着色器处理，直接绘制就是方形的点，要绘制圆形的点就需要把多余的片元给削去;

将矩形削成圆形需要知道每个片元在光栅化过程中的坐标，在片元着色器中通过 **内置变量 gl_FragCoord**来访问片元的坐标，还可以通过另一个 **内置变量 gl_PointCoord**来访问片元在绘制的点内的坐标；

变量类型和名称	描述
vec4 gl_FragCoord	片元的窗口坐标
vec4 gl_PointCoord	片元在被绘制的点内的坐标(0.0, 1.0)

gl_PointCoord变量表示当前片元在所属的点内的坐标，坐标值的区间是0.0到1.0，因此为了将矩形削成圆形，需要将点的中心(0.5, 0.5)距离超过以0.5为半径范围外的片元剔除掉，在片元着色器中可以使用 discard来放弃当前片元

具体剔除片元的代码在片元着色器中实现

片元着色器代码

precision mediump float;
void main(){
    // 点的中心坐标
    float dist = distance(gl_PointCoord, vec2(0.5, 0.5));
    // 如果点的半径小于 0.5 则绘制，大于则放弃当前片元
    if(dist < 0.5) {
        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
    } else {
      discard;//放弃当前片元  
    }
}

顶点着色器代码

attribute fec4 a_Position;
void main(){
    gl_Position = a_Position;// 顶点位置
    gl_PointSize = 10.0;// 顶点大小
}

示例效果图

示例链接

示例：绘制圆形点