在本章中,我们将以一个示例来演示如何使用WebGL修改三角形的比例。
缩放比例
缩放不过是增加或减小对象的大小而已。例如,如果三角形的顶点的大小为[a,b,c],则顶点为[2a,2b,2c]的三角形将为其大小的两倍。因此,要缩放三角形,必须将每个顶点与缩放因子相乘。您还可以缩放特定的顶点。
要缩放三角形,请在程序的顶点着色器中创建一个统一矩阵,并将坐标值与该矩阵相乘。然后,我们传递一个在对角位置(最后一个对角位置1)具有x,y,z坐标比例因子的4×4对角矩阵。
必要步骤
创建WebGL应用程序以缩放三角形需要执行以下步骤。
步骤1-准备画布并获取WebGL渲染上下文
在此步骤中,我们使用getContext()获得WebGL Rendering上下文对象。
第2步-定义几何并将其存储在缓冲区对象中
由于绘制的是三角形,因此必须传递三角形的三个顶点,并将其存储在缓冲区中。
var vertices = [ -0.5,0.5,0.0, -0.5,-0.5,0.0, 0.5,-0.5,0.0, ];
步骤3-创建和编译着色器程序
在此步骤中,您需要编写顶点着色器和片段着色器程序,对其进行编译,并通过链接这两个程序来创建组合程序。
- 顶点着色器-在程序的顶点着色器中,我们定义了一个矢量属性来存储3D坐标。连同它一起,我们定义了一个统一的矩阵来存储比例因子,最后,我们将这两个值相乘并将其分配给gl_position,后者保留了顶点的最终位置。
var vertCode = 'attribute vec4 coordinates;' + 'uniform mat4 u_xformMatrix;' + 'void main(void) {' + ' gl_Position = u_xformMatrix * coordinates;' + '}';
- 片段着色器-在片段着色器中,我们只需将片段颜色分配给gl_FragColor变量即可。
var fragCode = 'void main(void) {' +' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +'}';
步骤4-将着色器程序与缓冲区对象相关联
在此步骤中,我们将缓冲区对象与着色器程序关联。
第5步-绘制所需的对象
由于我们使用索引来绘制三角形,因此我们使用了drawArrays()方法。对于此方法,我们必须传递要考虑的顶点/元素数。由于我们绘制的是三角形,因此我们将传递3作为参数。
gl.drawArrays(gl.TRIANGLES, 0, 3);
示例–缩放三角形
以下示例显示如何缩放三角形:
HTML
x
88
88
1
2
<html>
3
<body>
4
<canvas width = "300" height = "300" id = "my_Canvas"></canvas>
5
6
<script>
7
/*=================Creating a canvas=========================*/
8
var canvas = document.getElementById('my_Canvas');
9
gl = canvas.getContext('experimental-webgl');
10
11
/*===========Defining and storing the geometry==============*/
12
var vertices = [
13
-0.5,0.5,0.0,
14
-0.5,-0.5,0.0,
15
0.5,-0.5,0.0,
16
];
17
18
//Create an empty buffer object and store vertex data
19
20
var vertex_buffer = gl.createBuffer();
21
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
22
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
23
gl.bindBuffer(gl.ARRAY_BUFFER, null);
24
25
/*========================Shaders============================*/
26
27
//Vertex shader source code
28
var vertCode =
29
'attribute vec4 coordinates;' +
30
'uniform mat4 u_xformMatrix;' +
31
'void main(void) {' +
32
' gl_Position = u_xformMatrix * coordinates;' +
33
'}';
34
35
//Create a vertex shader program object and compile it
36
var vertShader = gl.createShader(gl.VERTEX_SHADER);
37
gl.shaderSource(vertShader, vertCode);
38
gl.compileShader(vertShader);
39
40
//fragment shader source code
41
var fragCode =
42
'void main(void) {' +
43
' gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' +
44
'}';
45
46
//Create a fragment shader program object and compile it
47
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
48
gl.shaderSource(fragShader, fragCode);
49
gl.compileShader(fragShader);
50
51
//Create and use combiened shader program
52
var shaderProgram = gl.createProgram();
53
gl.attachShader(shaderProgram, vertShader);
54
gl.attachShader(shaderProgram, fragShader);
55
gl.linkProgram(shaderProgram);
56
57
gl.useProgram(shaderProgram);
58
59
/*===================scaling==========================*/
60
61
var Sx = 1.0, Sy = 1.5, Sz = 1.0;
62
var xformMatrix = new Float32Array([
63
Sx, 0.0, 0.0, 0.0,
64
0.0, Sy, 0.0, 0.0,
65
0.0, 0.0, Sz, 0.0,
66
0.0, 0.0, 0.0, 1.0
67
]);
68
69
var u_xformMatrix = gl.getUniformLocation(shaderProgram, 'u_xformMatrix');
70
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
71
72
/* ===========Associating shaders to buffer objects============*/
73
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
74
75
var coordinatesVar = gl.getAttribLocation(shaderProgram, "coordinates");
76
gl.vertexAttribPointer(coordinatesVar, 3, gl.FLOAT, false, 0, 0);
77
gl.enableVertexAttribArray(coordinatesVar);
78
79
/*=================Drawing the Quad========================*/
80
gl.clearColor(0.5, 0.5, 0.5, 0.9);
81
gl.enable(gl.DEPTH_TEST);
82
83
gl.clear(gl.COLOR_BUFFER_BIT);
84
gl.viewport(0,0,canvas.width,canvas.height);
85
gl.drawArrays(gl.TRIANGLES, 0, 3);
86
</script>
87
</body>
88
</html>
阅读剩余 79%
作者:terry,如若转载,请注明出处:https://www.web176.com/webgl/791.html