WebGL实战：2D 拉伸、旋转与平移

2023-09-22 10:27:15

导语

大家好，欢迎来到WebGL第二十二课。在前面的课程中，我们已经学习了矩阵在WebGL中的应用。在本课中，我们将把这些知识应用到实际场景中，来实现2D图形的拉伸、旋转和平移操作。这些操作是2D图形编程的基础，掌握了它们，你将能够创建更复杂的图形效果。

WebGL简介

WebGL（Web Graphics Library）是一个JavaScript API，它允许你在网页中使用OpenGL ES 2.0进行3D图形编程。WebGL可以被用于创建各种各样的3D图形，包括模型、动画、游戏等等。

2D图形的变换矩阵

在WebGL中，我们可以使用变换矩阵来对图形进行各种操作，包括拉伸、旋转和平移。变换矩阵是一个4x4的矩阵，它可以将一个点从一个坐标系变换到另一个坐标系。

拉伸

拉伸操作可以改变图形的大小。要实现拉伸，我们需要使用一个缩放矩阵。缩放矩阵是一个对角线上的元素不为0，其他元素都为0的矩阵。缩放矩阵的公式如下：

[sx  0  0  0]
[0  sy  0  0]
[0  0  sz  0]
[0  0  0  1]

其中，sx、sy和sz分别表示x轴、y轴和z轴的缩放因子。

旋转

旋转操作可以改变图形的朝向。要实现旋转，我们需要使用一个旋转矩阵。旋转矩阵是一个正交矩阵，它的行列式为1。旋转矩阵的公式如下：

[cosθ  -sinθ  0  0]
[sinθ   cosθ  0  0]
[0        0   1  0]
[0        0   0  1]

其中，θ表示旋转的角度。

平移

平移操作可以改变图形的位置。要实现平移，我们需要使用一个平移矩阵。平移矩阵是一个单位矩阵，它的最后一行元素不为0，其他元素都为0。平移矩阵的公式如下：

[1  0  0  tx]
[0  1  0  ty]
[0  0  1  tz]
[0  0  0  1]

其中，tx、ty和tz分别表示x轴、y轴和z轴的平移量。

实例

现在，我们来使用WebGL来实现一个简单的2D图形的拉伸、旋转和平移操作。

首先，我们需要创建一个WebGL画布。

<canvas id="glcanvas" width="600" height="400"></canvas>

然后，我们需要获取WebGL上下文。

var canvas = document.getElementById("glcanvas");
var gl = canvas.getContext("webgl");

接下来，我们需要创建一个顶点着色器和一个片元着色器。

// 顶点着色器
var vertexShaderSource = `
attribute vec2 a_position;
uniform mat4 u_transformMatrix;
void main() {
  gl_Position = u_transformMatrix * vec4(a_position, 0.0, 1.0);
}
`;

// 片元着色器
var fragmentShaderSource = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

然后，我们需要创建一个程序对象。

var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

接下来，我们需要创建一个缓冲区对象。

var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5]), gl.STATIC_DRAW);

然后，我们需要获取顶点着色器中的位置属性和变换矩阵的uniform变量。

var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
var transformMatrixUniformLocation = gl.getUniformLocation(program, "u_transformMatrix");

接下来，我们需要设置视口。

gl.viewport(0, 0, canvas.width, canvas.height);

接下来，我们需要清除颜色缓冲区。

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

接下来，我们需要启用顶点属性数组。

gl.enableVertexAttribArray(positionAttributeLocation);

接下来，我们需要绑定缓冲区对象。

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

接下来，我们需要指定顶点属性数组的数据格式。

gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

接下来，我们需要使用程序对象。

gl.useProgram(program);

接下来，我们需要设置变换矩阵。

var transformMatrix = new Float32Array([
  1.0, 0.0, 0.0, 0.0,
  0.0, 1.0, 0.0, 0.0,
  0.0, 0.0, 1.0, 0.0,
  0.0, 0.0, 0.0, 1.0
]);
gl.uniformMatrix4fv(transformMatrixUniformLocation, false, transformMatrix);