WebGL 理论基础 - 基础概念 上 - 图1

WebGL 常被当作 3D API，人们总想“我可以使用 WebGL 做出炫酷的 3D 作品”。事实上 WebGL 仅仅是一个光栅化引擎，它可以根据你的代码绘制出点，线和三角形。想要利用 WebGL 完成更复杂的任务，就需要提供合适的代码，组合使用点，线和三角形代替实现。

着色器

WebGL 在电脑的 GPU 中运行。因此你需要使用能够在 GPU 上运行的代码。这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器( Vertex Shader )，另一个叫片段着色器 ( Fragment Shader )，并且使用一种和 C 或 C++ 类似的强类型的语言 GLSL (GL着色语言)。每一对组合起来可被编译为一个着色程序（ Shader Program ）。

顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置，WebGL 可以对点，线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片段着色器方法，片段着色器的作用是计算出当前绘制图元中每个像素的颜色值。

几乎所有的 WebGL API 都是关于如何设置这些成对方法的状态值以及运行它们。对于想要绘制的每一个对象，都需要先设置一系列状态值，然后通过调用 gl.drawArrays 或 gl.drawElements ( 这里仅指 WebGL 1.0 )运行一个着色方法对，使得你的着色程序能够在 GPU 上运行。

这些方法对所需的任何数据都需要发送到GPU，这里有着色器获取数据的4种方法。

  1. 属性（ Attribute ）和缓冲（ Buffer ）

缓冲是发送到 GPU 的一些二进制数据序列，通常情况下缓冲数据包括顶点位置，法向量，纹理坐标，颜色值等。你可以存储任何数据。

属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器。例如你可能在缓冲中用三个32位的浮点型数据存储一个位置值。对于一个确切的属性你需要告诉它从哪个缓冲中获取数据，获取什么类型的数据，起始偏移值是多少，到下一个位置的字节数是多少。

缓冲不是随意读取的。事实上顶点着色器运行的次数是一个指定的确切数字，每一次运行属性会从指定的缓冲中按照指定规则依次获取下一个值。

  1. 全局变量（ Uniform ）

全局变量在着色程序运行前赋值，在运行过程中全局有效。

  1. 纹理（ Texture ）

纹理是一个数据序列，可以在着色程序运行中随意读取其中的数据。大多数情况存放的是图像数据，但是纹理仅仅是数据序列，你也可以随意存放除了颜色数据以外的其它数据。

  1. 可变量（ Varying ）

可变量是一种顶点着色器给片段着色器传值的方式，依照渲染的图元是点，线还是三角形，顶点着色器中设置的可变量会在片断着色器中获取不同的插值。

译注

关于 “WebGL 理论基础” 系列教程版权，原文为开源教程 WebGL Fundamentals，这里是简体中文版译文。官方简体中文译者 PrincessGod 是本人，同时在知乎分享中文版教程已获得作者授权，若需转载须注明出处。