【译】WebGL程序的基本结构

导读

WebGL编程首先需要对WebGL程序的基本结构有基本的了解，包括如何获取WebGL图形上下文，以及着色器程序的编译、链接、使用和删除等。本文对WebGL程序的基本结构进行了简单明了但又不乏细节的介绍，看完以后，相信你对WebGL编程会有更清晰的理解。

一. WebGL图形上下文

使用WebGL，第一步需要先得到一个WebGL图形上下文。WebGL图形上下文是一个JavaScript对象，它支持的方法是WebGL API在JavaScript端的实现。WebGL在HTML画布中绘制图像，这与2D API中的元素是相同的，比如一些二维地图、EChart图表等也都是采用进行绘制。

WebGL图形上下文与特定画布相关联，可以通过调用以下函数来获取。

这里的canvas是表示画布的DOM对象。一些浏览器（尤其是Internet Explorer和Edge）需要作为的参数，因此创建webgl上下文的代码通常如下所示：

这里，第一行代码假设web页面的HTML源包含一个的元素，例如

第二行则用来获取上下文，赋值给gl变量。如果web浏览器不支持将作为的参数，则将返回null；在这种情况下，将计算运算符的第二个操作数。因此，创建WebGL上下文的第二行相当于：

如果浏览器支持2D canvas API但不支持webgl，则也为空。此外，如果浏览器根本不支持，则代码将抛出异常。因此，可使用一个类似于下面的函数来初始化WebGL程序：

在这个函数中，和是全局变量。则是在其他地方定义的一个初始化函数，用于创建和装载shader函数。函数可以由网页元素的事件处理程序调用：

一旦创建了图形上下文gl，就可以使用它来调用Webgl API中的函数。例如，调用启用深度测试的命令在OpenGL中编写为，在WebGL中则变成请注意，API中的函数和常量都是通过WebGL图形上下文引用的。这里虽然采用代表图形上下文，但它也只是一个普通的JavaScript变量，其名称可以由程序员自行决定。

二. 着色器程序

使用WebGL绘制需要一个着色器程序，该程序由顶点着色器和片段着色器组成。着色器采用GLSL ES 1.0语言进行编写（the OpenGL Shader Language for Embedded Systems, version 1.0)。GLSL是一种基于C语言的编程语言。顶点着色器和片段着色器是独立的程序，每个程序都有自己的函数。这两个着色器分别编译，然后“链接”以生成完整的着色器程序。WebGL的JavaScript API包含用于编译着色器以及链接它们的函数。若要使用函数，着色器的源代码必须是JavaScript字符串。

创建顶点着色器需要三个步骤。

这里使用的函数是WebGL图形上下文的一部分，而是包含着色器源代码的字符串。源代码中的错误将导致编译自动失败。因此，使用之前需要通过调用以下函数来检查编译错误。

该函数将返回一个布尔值来指示编译是否成功。如果发生错误，可以使用以下函数获取错误消息。

该函数将返回包含编译结果的字符串。（WebGL标准未指定字符串的确切格式。这个字符串是人类可读的。）

片段着色器可以用同样的方法创建。有了这两个着色器，就可以创建和链接程序了。在链接之前，着色器需要“附加”到程序对象。代码采用以下形式：

即使着色器已成功编译，当它们链接到一个完整的程序中时也可能发生错误。例如，顶点和片段着色器可以共享某些类型的变量，如果这两个程序声明的变量名称相同但类型不同，则在链接时将发生错误。检查链接错误与检查着色器中的编译错误类似。

用于创建着色器程序的代码总是几乎相同的，因此可以方便地将其打包到可重用函数中。以下是用于本教程示例的函数：

三. 着色器的使用和切换

着色器编译成功后，还有一个步骤是必须告诉WebGL上下文使用该着色器程序。如果是上述函数返回的程序标识符，则可通过调用以下函数完成该步骤。

gl.useProgram(prog);

可以创建多个着色器程序，之后通过随时切换到其他的着色器程序，甚至在渲染图像的过程中也可以进行切换。(例如Three.js中就可以对每种类型的Material使用不同的着色器程序。）

建议在初始化过程中创建所需的所有着色器程序。尽管是一个快速的操作，但编译和链接都比较慢，所以在绘制图像的过程中最好避免创建新的程序。

四. 着色器的删除

可以使用函数和删除不再需要的着色器和程序，来释放它们消耗的资源。

参考文献：

《Introduction to Computer Graphics》／David J. Eck / http://math.hws.edu/graphicsbook/index.html

END

更多技术分享，欢迎关注研习书社——一个持续输出优质内容的角落！

相似文章推荐：

从js到gl，开启潘多拉的魔盒

点一下，代码无 Bug