WebGL学习笔记 | 使用着色器绘制一个点

前一篇 《WebGL学习笔记 | 创建着色器程序》介绍了如何创建着色器程序，这次我们让着色器程序运行起来，并在屏幕上绘制一个点。

1. 顶点着色器程序

完整的着色器程序分为顶点着色器程序和片元着色器程序，我们先看下顶点着色器的程序代码，将它定义为一个JavaScript字符串：

//顶点着色器程序	
var VSHADER_SOURCE = `	
  void main() {	
    //设置一个坐标点	
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);	
    //设置点的大小	
    gl_PointSize = 4.0;                    	
  }	
`

顶点着色器是用来描述顶点特性比如：位置和大小，它是指二维或三维空间中的一个点，顶点着色器中有两个内置变量:

• gl_Position：表示顶点位置

• gl_PointSize：表示点的尺寸（像素，默认为1.0）

上面代码中 gl_Position 内置变量必须被赋值，否则着色器就不能正常工作，gl_PointSize 则不是必须的，它的默认值为1.0 。

注意我们给 gl_Position 赋值了一个矢量 vec4 它内部是由 4 个浮点数组成，但是这里只用了三个即：x、y、z，第四个分量设置为 1.0 在这里被称之为齐次坐标，因为它能够提高处理三维数据的效率，所以被三维图形系统大量使用。

当需要使用齐次坐标表示顶点坐标时，只需要将最后一个分量置为 1.0 即可。

齐次坐标：齐次坐标使用(x, y, z, w)表示，等价于三维坐标(x/w, y/w, z/w)，所以如果齐次坐标的第 4 个分量是 1，就可以将它当三维坐标使用。

2. 片元着色器程序

片元可以理解为逐像素处理过程，严格意义上说片元还包括：像素的位置、颜色和其它信息。

//片元着色器程序	
var FSHADER_SOURCE =`	
    void main() {	
        //设置点的颜色	
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);	
    }	
`;

gl_FragColor 是片元着色器中的唯一内置变量，它控制像素在