这是webgl基础知识的延续。在我们继续之前，我认为我们需要在基本层面讨论WebGL和GPU实际上做了什么。这个GPU的东西基本上有两个部分。第一部分处理顶点（或数据流）到剪辑空间顶点。第二部分基于第一部分绘制像素。
你打电话的时候
- var primitiveType = gl 。三角形;
- var offset = 0 ;
- var count = 9 ;
- gl 。drawArrays （primitiveType ，offset ，count ）;
那里的9意味着“处理9个顶点”，所以这里有9个顶点被处理。
左侧是您提供的数据。顶点着色器是您在GLSL中编写的函数。每个顶点都会调用一次。您可以进行一些数学运算，并gl_Position使用当前顶点的剪辑空间值设置特殊变量。GPU获取该值并在内部存储它。
假设您正在绘图TRIANGLES，每次第一部分生成3个顶点时，GPU都会使用它们来制作三角形。它计算出三角形的3个点对应的像素，然后光栅化三角形，这是一个奇特的单词“用像素绘制它”。对于每个像素，它将调用片段着色器，询问您制作该像素的颜色。片段着色器必须设置一个特殊变量gl_FragColor ，其中包含该像素所需的颜色。
这一切都非常有趣，但正如您在我们的示例中所看到的那样，片段着色器每个像素的信息非常少。幸运的是，我们可以传递更多信息。我们为要从顶点着色器传递到片段着色器的每个值定义“变化”。
举个简单的例子，让我们直接将我们直接从顶点着色器计算出的剪辑空间坐标传递给片段着色器。
我们将绘制一个简单的三角形。继续我们 之前的示例，让我们将矩形更改为三角形。
- //使用定义三角形的值填充缓冲区。
- function setGeometry （gl ）{
- gl 。bufferData （
- gl 。ARRAY_BUFFER ，
- 新Float32Array （[
- 0 ，- 100 ，
- 150 ，125 ，
- - 175 ，100 ]），
- gl 。STATIC_DRAW ）;
- }
而且我们只需绘制3个顶点。
- //绘制场景
- function drawScene （）{
- ...
- //绘制几何体。
- var primitiveType = gl 。三角形;
- var offset = 0 ;
- var count = 3 ;
- gl 。drawArrays （primitiveType ，offset ，count ）;
- }
然后在我们的顶点着色器中，我们声明一个变量来将数据传递给片段着色器。
- 变化的vec4 v_color ;
- ...
- void main （）{
- //用矩阵乘以位置。
- GL_POSITION = vec4 （（u_matrix * VEC3 （a_position ，1 ））。XY ，0 ，1 ）;
- //从剪贴空间转换为颜色空间。
- // Clipspace从-1.0到+1.0
- // Colorspace从0.0到1.0
- v_color = gl_Position * 0.5 + 0.5 ;
- }
然后我们在片段着色器中声明相同的变化。
- 精密介质浮子;
- 变化的vec4 v_color ;
- void main （）{
- gl_FragColor = v_color ;
- }
WebGL将顶点着色器中的变化连接到片段着色器中的相同名称和类型的变化。
