【WebGL之巅】10-仿射变换之旋转三角形

By yesmore on 2021-07-26
阅读时间 5 分钟
文章共 950
阅读量

对应《WebGL编程指南》代码:11-RotatedTriangle

要点:旋转变换、gl.uniform4f()、gl.getUniformLocation()、矢量的加法

步骤

目的:将三角形逆时针旋转90度

计算90度的正余弦值 → 传给顶点着色器uniform变量

知识点

一、正旋转

​ ①描述旋转操作:绕Z轴,逆时针旋转β角度。

​ ②关于“逆时针”的约定:如果β是正值,观察者在Z轴正半轴某处,视线沿着Z轴负方向观察,看到的物体是逆时针旋转的,称为为正旋转。同时满足右手法则旋转(右手握拳,大拇指指向旋转轴的正方向,其余手指的方向就是旋转的方向。)

二、角度计算

$x’ = xcosβ - ysinβ$

$y’ = xsinβ + ycosβ$

$z’ = z$

代码实现:

1
2
3
4
5
6
7
'uniform float u_CosB, u_SinB;\n' +
'void main() {\n' +
'gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;\n' +
'gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n' +
'gl_Position.z = a_Position.z;\n' +
'gl_Position.w = 1.0;\n' +
'}\n';

角度转弧度制(三角函数的计算一般是用弧度计算):弧度 = π*角度/180°,单位:rad

1
2
3
4
var radian = Math.PI * ANGLE / 180.0;   // 转为弧度制(πβ/180°)= π/2
var cosB = Math.cos(radian); // 0
var sinB = Math.sin(radian); // 1
console.log(cosB, sinB) // 6.123233995736766e-17 1
三、a_Position的分量访问

vec4 a_Position = (x, y, z, w)

可用 a_Position.x、a_Position.y来访问

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate triangle</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use the browser supporting "canvas".
</canvas>

<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="RotatedTriangle.js"></script>
</body>
</html>
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
106
107
108
109
110
111
/**
* Created by hushhw on 17/12/14.
*/
//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 float u_CosB, u_SinB;\n' +
'void main() {\n' +
'gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;\n' +
'gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n' +
'gl_Position.z = a_Position.z;\n' +
'gl_Position.w = 1.0;\n' +
'}\n';

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

// 旋转角度
var ANGLE = 90.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 radian = Math.PI * ANGLE / 180.0; // 转为弧度制(πβ/180°)
var cosB = Math.cos(radian);
var sinB = Math.sin(radian);

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

var u_SinB = gl.getUniformLocation(gl.program, 'u_SinB');
if(u_SinB < 0){
console.log("Failed to get the storage location of u_SinB");
return;
}
// 赋值给uniform变量
gl.uniform1f(u_CosB, cosB);
gl.uniform1f(u_SinB, sinB);

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.5, -0.5, -0.5, 0.5, -0.5]
);
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


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