📜  WebGL-缩放

📅  最后修改于: 2020-10-17 05:34:51             🧑  作者: Mango


在本章中,我们将以一个示例来演示如何使用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);

示例–缩放三角形

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



      
   
      

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