WebGL编程指南-32 绘制圆形的点

1.demo效果

如上图绘制了一个红色圆点

2.实现要点

2.1绘制原理

我们已经知道在绘制图形时有一个光栅化的过程，在光栅化的过程中可以在片元着色器中通过内置变量 gl_FragCoord 来访问片元的坐标，实际上片元着色器还提供了另一个内置变量来获取当前片元在所属点内的坐标，它就是 gl_PointCoord ，归纳一下这两个变量
片元着色器内置变量（输入）

变量类型名称	描述
vec4 gl_FragCoord	片元的窗口坐标
vec4 gl_PointCoord	当前片元在所属点内的坐标（从0.0到1.0）

上图用来说明通过内置变量 gl_PointCoord 绘制圆点的原理，上图中的所有小方块表示当前绘制点所有片元，为了将这个点削成圆形，从图上得知，该点的正中心的坐标为(0.5,0.5),我们只要削掉以这点为圆心，半径大于0.5的片元，就可以绘制成成一个圆点

2.2绘制实现

• 计算片元距离所属点中心的距离
  首先定义圆的中心点vec2(0.5, 0.5)，与内置变量gl_PointCoord计算距离，通过内置函数 distance() 实现

'  float d = distance(gl_PointCoord, vec2(0.5, 0.5));\n' + //计算像素距离中心点的距离

• 根据距离大小(是否大于0.5)判断是否舍弃像素
  上一步中已经计算出了片元片元到圆心的距离，这里我们只需要判断这个距离是否大于0.5，如果大于0.5则使用 discard 语句舍弃当前片元

'  if(d < 0.5) {\n' + //距离大于0.5放弃片元，小于0.5保留片元
'    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'  } else { discard; }\n' +

3.demo代码

// 顶点着色器程序
const VSHADER_SOURCE =
    `attribute vec4 a_Position;
    attribute float a_Size;
    void main() {
	gl_Position = a_Position;
	gl_PointSize = a_Size;
}`;

// 片元着色器程序
const FSHADER_SOURCE =
    `
    precision mediump float;

    void main() {
    float dist = distance(gl_PointCoord,vec2(0.5,0.5));
    if(dist<0.5) {
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }else {
        discard;
    }
}`;

const main = () => {
    //获取绘制dom
    const canvas = document.getElementById('webgl');

    //获取canvas上下文
    const gl = canvas.getContext('webgl');

    //初始化着色器
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        return console.log('Failed to initialize shaders.')
    }
    const aPosition = gl.getAttribLocation(gl.program, 'a_Position');
    const aSize = gl.getAttribLocation(gl.program, 'a_Size')
    console.log('aPosition', aPosition);

    gl.vertexAttrib3f(aPosition, 0.0, 0.3, 0.0)

    // setInterval(() => {
    //     count += 0.1
    //     console.log(count);
    //     gl.clear(gl.COLOR_BUFFER_BIT);
    //     gl.vertexAttrib3f(aPosition, 0.0, count, 0.0);
    //     gl.drawArrays(, 0, 1);
    //     gl.vertexAttrib3f(aPosition, 0.2, count, 0.0);
    //     //绘制一个点
    //     gl.drawArrays(gl.POINTS, 0, 1);
    // }, 1000)
    gl.vertexAttrib3f(aPosition, 0.0, 0.2, 0.0);
    gl.vertexAttrib1f(aSize, 15);
    //设置canvas的背景色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //清空canvas

    gl.clear(gl.COLOR_BUFFER_BIT);

    //绘制一个点
    gl.drawArrays(gl.POINTS, 0, 1);


}
main()