着色器是什么?

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)。