在本章中，我们将以一个示例来演示如何使用WebGL修改三角形的比例。

缩放比例

缩放不过是增加或减小对象的大小而已。例如，如果三角形的顶点的大小为[a，b，c]，则顶点为[2a，2b，2c]的三角形将是其大小的两倍。因此，要缩放三角形，必须将每个顶点与缩放因子相乘。您还可以缩放特定的顶点。

要缩放三角形，请在程序的顶点着色器中创建一个统一矩阵，并将坐标值与该矩阵相乘。然后，我们传递一个在对角位置（最后一个对角位置1）具有x，y，z坐标比例因子的4×4对角矩阵。

必要步骤

创建WebGL应用程序以缩放三角形需要执行以下步骤。

步骤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, ];

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

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

• 顶点着色器-在程序的顶点着色器中，我们定义了一个矢量属性来存储3D坐标。连同它一起，我们定义了一个统一的矩阵来存储比例因子，最后，我们将这两个值相乘，并将其分配给gl_position ，后者保留了顶点的最终位置。

var vertCode =
   'attribute vec4 coordinates;' +
   'uniform mat4 u_xformMatrix;' +
   'void main(void) {' +
      ' gl_Position = u_xformMatrix * coordinates;' +
   '}';

• 片段着色器-在片段着色器中，我们仅将片段颜色分配给gl_FragColor变量。

var fragCode = 'void main(void) {' +' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +'}';

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

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

第5步-绘制所需的对象

由于我们使用索引来绘制三角形，因此我们使用了drawArrays（）方法。对于此方法，我们必须传递要考虑的顶点/元素数。由于我们绘制的是三角形，因此我们将传递3作为参数。

gl.drawArrays(gl.TRIANGLES, 0, 3);

示例–缩放三角形

以下示例显示如何缩放三角形-

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