WebGL - 缩放
-
简述
在本章中,我们将举例说明如何使用 WebGL 修改三角形的比例。 -
缩放
缩放只不过是增加或减小对象的大小。例如,如果一个三角形的顶点大小为 [a,b,c],那么顶点为 [2a, 2b, 2c] 的三角形将是其大小的两倍。因此,要缩放三角形,您必须将每个顶点乘以缩放因子。您还可以缩放特定顶点。为了缩放三角形,在程序的顶点着色器中,我们创建一个统一矩阵并将坐标值与该矩阵相乘。稍后,我们传递一个 4×4 对角矩阵,在对角位置(最后一个对角位置 1)具有 x、y、z 坐标的缩放因子。 -
所需步骤
创建 WebGL 应用程序以缩放三角形需要执行以下步骤。第 1 步 - 准备画布并获取 WebGL 渲染上下文在此步骤中,我们使用getContext()获取 WebGL 渲染上下文对象。第 2 步 - 定义几何并将其存储在缓冲区对象中由于我们正在绘制一个三角形,我们必须传递三角形的三个顶点,并将它们存储在缓冲区中。第 3 步 - 创建和编译着色器程序在这一步中,您需要编写顶点着色器和片段着色器程序,编译它们,并通过链接这两个程序来创建组合程序。-
Vertex Shader - 在程序的顶点着色器中,我们定义了一个向量属性来存储 3D 坐标。与此同时,我们定义了一个统一矩阵来存储缩放因子,最后,我们将这两个值相乘并将其分配给保存顶点最终位置的gl_position 。
-
片段着色器- 在片段着色器中,我们只需将片段颜色分配给gl_FragColor变量。
第 4 步 - 将着色器程序与缓冲区对象相关联在这一步中,我们将缓冲区对象与着色器程序相关联。第 5 步 - 绘制所需对象由于我们使用索引绘制三角形,因此我们使用drawArrays()方法。对于这种方法,我们必须传递要考虑的顶点/元素的数量。由于我们正在绘制三角形,因此我们将传递 3 作为参数。 -
-
示例——缩放一个三角形
以下示例显示了如何缩放三角形 -如果运行此示例,它将产生以下输出 -