在本章中,我们将以一个示例来演示如何使用WebGL旋转三角形。
示例–旋转三角形
以下程序显示了如何使用WebGL旋转三角形。
HTML
x
141
141
1
2
<html>
3
<body>
4
<canvas width = "400" height = "400" 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
13
var vertices = [ -1,-1,-1, 1,-1,-1, 1, 1,-1 ];
14
var colors = [ 1,1,1, 1,1,1, 1,1,1 ];
15
var indices = [ 0,1,2 ];
16
17
//Create and store data into vertex buffer
18
var vertex_buffer = gl.createBuffer ();
19
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
20
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
21
22
//Create and store data into color buffer
23
var color_buffer = gl.createBuffer ();
24
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
25
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
26
27
//Create and store data into index buffer
28
var index_buffer = gl.createBuffer ();
29
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
30
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
31
32
/*==========================Shaders=========================*/
33
34
var vertCode = 'attribute vec3 position;'+
35
'uniform mat4 Pmatrix;'+
36
'uniform mat4 Vmatrix;'+
37
'uniform mat4 Mmatrix;'+
38
'attribute vec3 color;'+//the color of the point
39
'varying vec3 vColor;'+
40
41
'void main(void) { '+//pre-built function
42
'gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);'+
43
'vColor = color;'+
44
'}';
45
46
var fragCode = 'precision mediump float;'+
47
'varying vec3 vColor;'+
48
'void main(void) {'+
49
'gl_FragColor = vec4(vColor, 1.);'+
50
'}';
51
52
var vertShader = gl.createShader(gl.VERTEX_SHADER);
53
gl.shaderSource(vertShader, vertCode);
54
gl.compileShader(vertShader);
55
56
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
57
gl.shaderSource(fragShader, fragCode);
58
gl.compileShader(fragShader);
59
60
var shaderProgram = gl.createProgram();
61
gl.attachShader(shaderProgram, vertShader);
62
gl.attachShader(shaderProgram, fragShader);
63
gl.linkProgram(shaderProgram);
64
65
/*===========associating attributes to vertex shader ============*/
66
67
var Pmatrix = gl.getUniformLocation(shaderProgram, "Pmatrix");
68
var Vmatrix = gl.getUniformLocation(shaderProgram, "Vmatrix");
69
var Mmatrix = gl.getUniformLocation(shaderProgram, "Mmatrix");
70
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
71
72
var position = gl.getAttribLocation(shaderProgram, "position");
73
gl.vertexAttribPointer(position, 3, gl.FLOAT, false,0,0) ; //position
74
gl.enableVertexAttribArray(position);
75
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
76
77
var color = gl.getAttribLocation(shaderProgram, "color");
78
gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ; //color
79
gl.enableVertexAttribArray(color);
80
gl.useProgram(shaderProgram);
81
82
/*========================= MATRIX ========================= */
83
84
function get_projection(angle, a, zMin, zMax) {
85
var ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
86
return [
87
0.5/ang, 0 , 0, 0,
88
0, 0.5*a/ang, 0, 0,
89
0, 0, -(zMax+zMin)/(zMax-zMin), -1,
90
0, 0, (-2*zMax*zMin)/(zMax-zMin), 0
91
];
92
}
93
94
var proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100);
95
var mov_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
96
var view_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
97
98
//translating z
99
view_matrix[14] = view_matrix[14]-6; //zoom
100
101
/*=======================rotation========================*/
102
function rotateZ(m, angle) {
103
var c = Math.cos(angle);
104
var s = Math.sin(angle);
105
var mv0 = m[0], mv4 = m[4], mv8 = m[8];
106
107
m[0] = c*m[0]-s*m[1];
108
m[4] = c*m[4]-s*m[5];
109
m[8] = c*m[8]-s*m[9];
110
m[1] = c*m[1]+s*mv0;
111
m[5] = c*m[5]+s*mv4;
112
m[9] = c*m[9]+s*mv8;
113
}
114
115
/*=================Drawing===========================*/
116
117
var time_old = 0;
118
var animate = function(time) {
119
var dt = time-time_old;
120
rotateZ(mov_matrix, dt*0.002);
121
time_old = time;
122
123
gl.enable(gl.DEPTH_TEST);
124
gl.depthFunc(gl.LEQUAL);
125
gl.clearColor(0.5, 0.5, 0.5, 0.9);
126
gl.clearDepth(1.0);
127
gl.viewport(0.0, 0.0, canvas.width, canvas.height);
128
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
129
130
gl.uniformMatrix4fv(Pmatrix, false, proj_matrix);
131
gl.uniformMatrix4fv(Vmatrix, false, view_matrix);
132
gl.uniformMatrix4fv(Mmatrix, false, mov_matrix);
133
134
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
135
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
136
window.requestAnimationFrame(animate);
137
}
138
animate(0);
139
</script>
140
</body>
141
</html>
阅读剩余 82%
作者:terry,如若转载,请注明出处:https://www.web176.com/webgl/788.html