【WebGL之巅】09-仿射变换之平移三角形

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

对应《WebGL编程指南》代码:10-TranslatedTriangle

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

目的

将一个三角形向上和向右平移0.5个单位

知识点

一、逐顶点操作

​ 为顶点坐标的每个分量加上一个常量就可以实现

二、矢量的加法

​ 方便的矢量相加运算是GLSL ES提供的特性之一

矢量
vec4 a_Position (x1, y1, z1, w1)
vec4 u_Translation (x2, y2, z2, w2)
answer (x1+x2, y1+y2, z1+z2, w1+w2)

​ 注意:这里的w2必须等于0.0,因为齐次坐标的最后一位为1.0,那么前三个分量才表示一个三维坐标

实例

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>set first 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="TranslatedTriangle.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
//TranslatedTriangle.js
//顶点着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;'+
'uniform vec4 u_Translations;\n' + // 接收平移变量
'void main(){\n'+
'gl_Position=a_Position + u_Translations;\n'+
'}\n';

//片元着色器程序
var FSHADER_SOURCE=
'void main(){'+
'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);'+
'}';

var Tx = 0.5, Ty = 0.5, Tz = 0.0;

function main() {
//获取canvas元素
var canvas = document.getElementById("webgl");
if(!canvas){
console.log("Failed to retrieve the <canvas> element");
return;
}

//获取WebGL绘图上下文
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 u_Translation = gl.getUniformLocation(gl.program, 'u_Translations');

gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0); // 第4分量必须是0.0


//指定清空<canvas>颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);

//清空<canvas>
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.