在前面的所有示例中，我们通过将所需的颜色值分配给gl_FragColor变量将颜色应用于对象。除此之外，我们可以为每个顶点定义颜色-就像顶点坐标和索引一样。本章以示例为例，说明如何使用WebGL将颜色应用于四边形。

应用颜色

要应用颜色，必须在JavaScript数组中使用RGB值为每个顶点定义颜色。您可以为所有顶点分配相同的值，以使对象具有唯一的颜色。定义颜色后，必须创建颜色缓冲区并将这些值存储在其中，并将其与顶点着色器属性关联。

在顶点着色器中，连同坐标属性（用于保存顶点的位置）一起，我们定义了一个属性和一个用于处理颜色的变量。

颜色属性保存每个顶点的色彩值，和不同的是，作为输入到片段着色器传递的变量。因此，我们必须将颜色值分配给变化。

在片段着色器，保持所述色彩值的变分配给gl_FragColor，保持该物体的最终颜色。

应用颜色的步骤

创建WebGL应用程序以绘制Quad并为其应用颜色需要执行以下步骤。

步骤1-准备画布并获取WebGL渲染上下文

在此步骤中，我们使用getContext（）获得WebGL Rendering上下文对象。

第2步-定义几何并将其存储在缓冲区对象中

可以使用两个三角形绘制一个正方形。因此，在此示例中，我们提供了两个三角形（具有一个公共边）和索引的顶点。由于我们要为其应用颜色，因此还定义了一个保留颜色值的变量，并为每个变量（红色，蓝色，绿色和粉红色）分配了颜色值。

var vertices = [
   -0.5,0.5,0.0,
   -0.5,-0.5,0.0, 
   0.5,-0.5,0.0,
   0.5,0.5,0.0 
];

var colors = [ 0,0,1, 1,0,0, 0,1,0, 1,0,1,];
indices = [3,2,1,3,1,0]; 

步骤3-创建和编译着色器程序

在此步骤中，您需要编写顶点着色器和片段着色器程序，对其进行编译，并通过链接这两个程序来创建组合程序。

• 顶点着色器-在程序的顶点着色器中，我们定义矢量属性以存储3D坐标（位置）以及每个顶点的颜色。甲varing变量声明为从顶点着色器对片段着色器传递的颜色值。最后，将存储在color属性中的值分配给variant 。

var vertCode = 'attribute vec3 coordinates;'+
   'attribute vec3 color;'+
   'varying vec3 vColor;'+
    
   'void main(void) {' +
      ' gl_Position = vec4(coordinates, 1.0);' +
      'vColor = color;'+
   '}';

• 片段着色器-在片段着色器，我们的变分配给gl_FragColor变量。

var fragCode = 'precision mediump float;'+
   'varying vec3 vColor;'+
   'void main(void) {'+
      'gl_FragColor = vec4(vColor, 1.);'+
   '}';

步骤4-将着色器程序与缓冲区对象相关联

在此步骤中，我们将缓冲区对象与着色器程序关联。

第5步-绘制所需的对象

由于我们使用索引绘制将形成一个四边形的两个三角形，因此我们将使用drawElements（）方法。对于此方法，我们必须传递索引数。 index.length的值表示索引数。

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

示例–应用颜色

以下程序演示了如何使用WebGL应用程序绘制四边形并为其施加颜色。

如果运行此示例，它将产生以下输出-