使用着色器的WebGL程序的结构

结合已学的知识，我们再来看一下HelloPoint.js（例2.5）：程序有40行，比HelloCanvas.js稍微长一些。如图2.12所示，代码包含三个部分。JavaScript中的main（）函数从第15行开始，着色器程序部分位于第2行到第13行。

顶点着色器程序位于第4行到第7行，片元着色器位于第11行到第13行。实际上，它们是以JavaScript字符串形式编写的着色器语言程序，这样主程序就可以将他们传给WebGL系统。

在第1章说过，着色器使用类似于C的OpenGL ES着色器语言（GLSL ES）来编写。GLSL ES终于登上了舞台！在第6章“OpenGL ES着色器语言（GLSL ES）”中，我们将会详细讨论它。而在早期的示例中，着色器的代码很简单，稍微熟悉一点C或JavaScript语言的人都能理解。

因为着色器程序代码必须预先处理成单个字符串的形式，所以我们用+号将多行字符串连成一个长字符串。每一行以\n结束，这是由于当着色器内部出错时，就能获取出错的行号，这对于检查源代码中的错误很有帮助。但是，\n并不是必须的，你自己编写着色器时，也可以不用它。

着色器程序代码作为字符串被存储在变量VSSHADER_SOURCE和FSHADER_SOURCE中（第3行和第10行）。

如果你对如何从文件中加载着色器程序感兴趣，可以参见附录F“从文件中加载着色器程序”。