Question

如果你想了解内置变量gl_PointCoord表示的坐标含义，就需要了解WebGL绘制函数gl.drawArrays()的绘制模式参数gl.POINTS。

绘制函数gl.drawArrays()绘制模式参数设置为点渲染模式gl.POINTS，WebGL会把顶点渲染为一个方形区域，在顶点着色器代码中可以通过内置变量gl_PointSize设置顶点渲染的方向区域像素大小。

一个顶点渲染为一个方形区域，每个方形区域可以以方向区域的左上角建立一个直角坐标系，然后使用内置变量gl_PointCoord描述每个方形区域中像素或者说片元的坐标，比如方形区域的左上角坐标是(0.0,0.0),每个方形区域几何中心坐标是(0.5,0.5)，右下角坐标是(1.0,1.0)。

注意内置变量gl_PointCoord和gl_FragCoord表示的像素坐标含义不同,查看下图表示。

// 点绘制模式渲染10个顶点
gl.drawArrays(gl.POINTS,0,10);

顶点着色器中通过内置变量gl_PointSize设置点渲染的方形区域像素尺寸。

void main() {
  //点渲染的方形区域像素大小
  gl_PointSize = 20.0;
  ...
}

gl_PointCoord应用案例

gl.POINTS绘制模式点默认渲染效果是方形区域，通过下面片元着色器代码设置可以把默认渲染效果更改为圆形区域。

<!-- 片元着色器源码 -->
<script id="fragmentShader" type="x-shader/x-fragment">
  precision lowp float;// 所有float类型数据的精度是lowp
  void main() {
    // 计算方形区域每个片元距离方形几何中心的距离
    // gl.POINTS模式点渲染的方形区域,方形中心是0.5,0.5,左上角是坐标原点,右下角是1.0,1.0，
    float r = distance(gl_PointCoord, vec2(0.5, 0.5));
    //根据距离设置片元
    if(r < 0.5){
      // 方形区域片元距离几何中心半径小于0.5，像素颜色设置红色
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }else {
      // 方形区域距离几何中心半径不小于0.5的片元剪裁舍弃掉：
      discard;
    }
  }
</script>

通过gl_PointCoord返回的是片元纵横坐标vec2(x,y),自然通过xy分量gl_PointCoord.x、gl_PointCoord.y方式可以分别访问片元坐标的横坐标、纵坐标，