【WebGL之巅】13-使用Matrix4变换矩阵实现三角形复合变换

By 大Van家 on 2021-07-27
阅读时间 4 分钟
文章共 873
阅读量

对应《WebGL编程指南》代码:14-RotatedTranslatedTriangle

要点:矩阵变换库(cuon-matrix.js 本书专用)、Matrix4对象、复合变换

步骤

1.将三角形沿着X轴平移一段距离

2.旋转三角形

知识点

一、模型变换

建立下面的等式:

<“平移后旋转”后的坐标> = <旋转矩阵> X (<平移矩阵> X <原始坐标>)

这里,<旋转矩阵> X (<平移矩阵> X <原始坐标>) 等价于 (<旋转矩阵> X <平移矩阵>) X <原始坐标>,即可在JavaScript中计算(<旋转矩阵> X <平移矩阵>),然后将得到的结果传入顶点着色器,实现复合效果。

一个模型可能经过多次变换,将这些变换全部复合成一个等效的变换,就得到了模型变换,或称建模变换,相应地,模型变换的矩阵称为模型矩阵

二、Matrix4对象实现矩阵乘法
1
2
3
4
5
6
7
8
var modelMatrix = new Matrix4();

var ANGLE = 60.0;
var Tx = 0.5;
// 执行完后modelMatrix中包含了一个旋转矩阵
modelMatrix.setRotate(ANGLE, 0, 0, 1);
// 乘法:(<旋转矩阵> X <平移矩阵>)
modelMatrix.translate(Tx, 0, 0);

你可能会发现,“先平移后旋转”的顺序与代码中构造模型矩阵(<旋转矩阵> X <平移矩阵>)的顺序是相反的,这是因为变换矩阵最终要与三角形的三个顶点的原始坐标矢量相乘。

明白这个原理后,也可以尝试“先旋转后平移”:

1
2
modelMatrix.setTranslate(Tx, 0, 0);
modelMatrix.rotate(ANGLE, 0, 0, 1);

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
//RotatedTriangle.js
// 变换矩阵旋转

var VSHADER_SOURCE =
//x' = x cos b - y sin b
//y' = x sin b + y cosb
//z' = z
'attribute vec4 a_Position;\n' +
'uniform mat4 u_ModelMatrix;\n' +
'void main() {\n' +
'gl_Position = u_ModelMatrix * a_Position;\n' +
'}\n';

var FSHADER_SOURCE=
'void main(){'+
'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);'+
'}';

function main(){

var canvas = document.getElementById("webgl");
if(!canvas){
console.log("Failed to retrieve the <canvas> element");
return;
}

var gl = getWebGLContext(canvas);
if(!gl){
console.log("Failed to get the rendering context for WebGL");
return;
}

if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
console.log("Failed to initialize shaders.");
return;
}

//设置顶点位置
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}

var modelMatrix = new Matrix4();

var ANGLE = 60.0;
var Tx = 0.5;

// 先平移后旋转
// modelMatrix.setRotate(ANGLE, 0, 0, 1);
// modelMatrix.translate(Tx, 0, 0);
// 先旋转后平移
modelMatrix.setTranslate(Tx, 0, 0);
modelMatrix.rotate(ANGLE, 0, 0, 1);

var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
if(u_ModelMatrix < 0){
console.log("Failed to get the storage location of u_xformMatrix");
return;
}

gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);

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

gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.TRIANGLES, 0, n);
}

function initVertexBuffers(gl) {
var vertices = new Float32Array(
[0.0, 0.3, -0.3, -0.3, 0.3, -0.3]
);
var n=3; //点的个数

//创建缓冲区对象
var vertexBuffer = gl.createBuffer();
if(!vertexBuffer){
console.log("Failed to create thie buffer object");
return -1;
}

//将缓冲区对象保存到目标上
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

//向缓存对象写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if(a_Position < 0){
console.log("Failed to get the storage location of a_Position");
return -1;
}

//将缓冲区对象分配给a_Postion变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

//连接a_Postion变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Position);

return n;
}

效果

先平移后旋转

1

先旋转后平移

2

可以看到,两者的变换结果是不同的。


Tips: Please indicate the source and original author when reprinting or quoting this article.