着色器是什么？

HelloPoint1.js是本书中使用着色器的第一个WebGL程序，我们之前说过，要使用WebGL进行绘图就必须使用着色器。在代码中，着色器程序是以字符串的形式“嵌入”在JavaScript文件中的，在程序真正开始运行前它就已经设置好了。这么说可能有些复杂，我们一步一步来解释。

WebGL需要两种着色器，见第2行和第9行。

●顶点着色器（Vertex shader）：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。顶点（vertex）是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。

●片元着色器（Fragment shader）：进行逐片元处理过程如光照（见第8章“光照”）

的程序。片元（fragment）是一个WebGL术语，你可以将其理解为像素（图像的单元）。在本书中后续部分我们将仔细地研究着色器。简单地说，在三维场景中，仅仅用线条和颜色把图形画出来是远远不够的。你必须考虑，比如，光线照上去之后，或者观察者的视角发生变化，对场景会有些什么影响。着色器可以高度灵活地完成这些工作，提供各种渲染效果。这也就是当今计算机制作出的三维场景如此逼真和令人震撼的原因。

JavaScript读取了着色器的相关信息，然后存在WebGL系统中以供调用。图2.10显示了程序的执行流程：从执行JavaScript，到在WebGL系统中使用着色器在浏览器上绘制图形。

图2.10　从执行JavaScript程序到在浏览器中显示结果的过程

图的左侧是两个浏览器窗口。它们是同一个窗口，上面一个是执行JavaScript程序之前的窗口，下面一个是执行之后的。程序执行的流程大概是：首先运行JavaScript程序，调用了WebGL的相关方法，然后顶点着色器和片元着色器就会执行，在颜色缓冲区内进行绘制，这时就清空了绘图区（图2.8中的HelloCanvas示例中的第2步到第4步）；最后，颜色缓冲区中的内容会自动在浏览器的＜canvas＞上显示出来。

在阅读本书的时候，你可能会经常看到这幅图。所以我们使用一个简化的版本来节省空间，如图2.11所示。注意，程序流程是从左到右的，最右边是颜色缓冲区而不是浏览器，因为颜色缓冲区的内容会自动显示在浏览器中。

图2.11　图2.9的简化版

示例程序的任务是，在屏幕上绘制一个10像素大小的点，它用到两个着色器：

●顶点着色器指定了点的位置和尺寸。本例中，点的位置是（0.0，0.0，0.0），尺寸是10.0像素。

●片元着色器指定了点的颜色。本例中，点的颜色是红色（1.0，0.0，0.0，1.0）。