基础概念

我们常说 WebGL 可以用来在 Web 端做炫酷的 3D 功能，实际上 WebGL 只是一个光栅化引擎。它只是根据代码去绘制点、线、三角形。

WebGL 在 GPU 上运行。所以，需要提供可在 GPU 上运行的代码。需要提供两个函数：Vertex shader（顶点着色器）和 Fragment shader（片段着色器）。它们是以严格类型的 C/C++ 语言编写的。

• Vertex shader：就像建筑蓝图一样，它定义了3D物体的几何形状。它接收每个顶点的位置和其他属性作为输入，然后计算它们的最终位置和一些额外的信息，最后输出这些信息。
• Fragment shader：就像调色板一样，它决定每个像素的颜色。它接收来自 vertex shader 的信息，然后根据这些信息计算每个像素的最终颜色。

几乎所有的 WebGL 的 API 都是关于设置这一对函数的运行状态。对于要绘制的每一个松子，都要设置一系列状态值，然后通过调用 gl.drawArrays 或 gl.drawElements 运行一个着色方法对，使着色器能在 GPU 上运行。

所有「你希望让这些函数可以有权限访问的数据」都必须提供给 GPU，有四种方法可以让着色器获取到这些数据：

1. Attributes and Buffers （属性和缓冲区）

Buffers 是上传到 GPU 的二进制数组。通常 Buffers 包含位置（positions）、法线（normals）、纹理坐标（texture coordinates）、顶点颜色（vertex colors）等信息，当然你也可以自由的放任何数据到 Buffers 中。

Attributes 用来指定如何从 Buffers 获取数据并加入到你的片段着色器中（vertex shader）。例如可以将位置放入缓冲区中，每个位置三个 32 位浮点数。你需要告诉特定属性从哪个缓冲区中提取位置、应该提取什么类型的数据（三个 32 位浮点数）、位置在缓冲区中的偏移量以及从其中获取多少字节到下一个位置。

Buffers 是不能随机访问的。相反，顶点着色器被执行指定的次数。每次执行时，都会从每个指定的缓冲区中提取下一个值并将其分配给属性。

2. Uniforms（全局变量）

Uniforms 实际上是在执行着色器程序之前设置的全局变量。

3. Textures（纹理）

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

4. Varyings（变量）

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

Hello World

效果