开始使用 webgl

WebGL 是一种光栅化 API，通常在你的 GPU 上运行，使你能够快速绘制 2D 和 3D 图形。WebGL 还可用于对数据数组进行计算。

WebGL 是一个非常低级的 API。在基础级别，WebGL 是一个在 GPU 上运行 2 个用户提供的功能的引擎。一个函数称为顶点着色器。顶点着色器的工作是计算顶点位置。根据函数输出 WebGL 的位置，然后可以栅格化各种基元，包括点，线或三角形。当栅格化这些基元时，它调用第二个用户提供的函数，称为片段着色器。片段着色器的工作是为当前正在绘制的图元的每个像素计算颜色。

这些函数是用一种名为 GLSL 的语言编写的，它有点像 C / C++并且是严格类型的。

由程序员提供这些功能，使 WebGL 绘制 2d，3d 或计算某些东西。几乎每一个 WebGL 都是关于设置这两个函数然后向它们提供数据。

数据可以从 4 个来源提供。

• 制服

制服是着色器函数的输入，非常类似于函数参数或全局变量。它们在着色器执行之前设置一次，并在执行期间保持不变

• 属性

属性仅向顶点着色器提供数据。属性定义了如何从缓冲区中提取数据。例如，你可以将位置，法线和纹理坐标放入缓冲区。通过属性，你可以告诉 WebGL 如何从缓冲区中提取数据并将其提供给顶点着色器。通过调用 gl.drawArrays 或 gl.drawElements 并指定计数，顶点着色器被称为用户指定的次数。每次调用当前顶点着色器时，下一组数据将从用户指定的缓冲区中提取并放入属性中

• 纹理

纹理是 4 个通道的 2D 数据阵列。最常见的是，这 4 个通道是图像中的红色，绿色，蓝色和 alpha。WebGL 并不关心数据是什么。与属性和缓冲区不同，着色器可以通过随机访问从纹理中读取值。

• Varyings

变量是顶点着色器将数据传递到片段着色器的一种方式。当使用片段着色器对基元进行光栅化时，在顶点着色器输出的值之间插入变量