在本章中,我们将以一个示例来演示如何使用WebGL绘制旋转的3D立方体。
示例–绘制旋转3D立方体
以下程序显示了如何绘制旋转的3D立方体:
HTML
x
202
202
1
2
<html>
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
<title>WebGL-多维数据集旋转 - web176教程网|web176.com</title>
7
</head>
8
<body>
9
<canvas width = "570" height = "570" id = "my_Canvas"></canvas>
10
11
<script>
12
/*============= Creating a canvas =================*/
13
var canvas = document.getElementById('my_Canvas');
14
gl = canvas.getContext('experimental-webgl');
15
16
/*============ Defining and storing the geometry =========*/
17
18
var vertices = [
19
-1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1,
20
-1,-1, 1, 1,-1, 1, 1, 1, 1, -1, 1, 1,
21
-1,-1,-1, -1, 1,-1, -1, 1, 1, -1,-1, 1,
22
1,-1,-1, 1, 1,-1, 1, 1, 1, 1,-1, 1,
23
-1,-1,-1, -1,-1, 1, 1,-1, 1, 1,-1,-1,
24
-1, 1,-1, -1, 1, 1, 1, 1, 1, 1, 1,-1,
25
];
26
27
var colors = [
28
5,3,7, 5,3,7, 5,3,7, 5,3,7,
29
1,1,3, 1,1,3, 1,1,3, 1,1,3,
30
0,0,1, 0,0,1, 0,0,1, 0,0,1,
31
1,0,0, 1,0,0, 1,0,0, 1,0,0,
32
1,1,0, 1,1,0, 1,1,0, 1,1,0,
33
0,1,0, 0,1,0, 0,1,0, 0,1,0
34
];
35
36
var indices = [
37
0,1,2, 0,2,3, 4,5,6, 4,6,7,
38
8,9,10, 8,10,11, 12,13,14, 12,14,15,
39
16,17,18, 16,18,19, 20,21,22, 20,22,23
40
];
41
42
// Create and store data into vertex buffer
43
var vertex_buffer = gl.createBuffer ();
44
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
45
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
46
47
// Create and store data into color buffer
48
var color_buffer = gl.createBuffer ();
49
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
50
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
51
52
// Create and store data into index buffer
53
var index_buffer = gl.createBuffer ();
54
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
55
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
56
57
/*=================== Shaders =========================*/
58
59
var vertCode = 'attribute vec3 position;'+
60
'uniform mat4 Pmatrix;'+
61
'uniform mat4 Vmatrix;'+
62
'uniform mat4 Mmatrix;'+
63
'attribute vec3 color;'+//the color of the point
64
'varying vec3 vColor;'+
65
66
'void main(void) { '+//pre-built function
67
'gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);'+
68
'vColor = color;'+
69
'}';
70
71
var fragCode = 'precision mediump float;'+
72
'varying vec3 vColor;'+
73
'void main(void) {'+
74
'gl_FragColor = vec4(vColor, 1.);'+
75
'}';
76
77
var vertShader = gl.createShader(gl.VERTEX_SHADER);
78
gl.shaderSource(vertShader, vertCode);
79
gl.compileShader(vertShader);
80
81
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
82
gl.shaderSource(fragShader, fragCode);
83
gl.compileShader(fragShader);
84
85
var shaderProgram = gl.createProgram();
86
gl.attachShader(shaderProgram, vertShader);
87
gl.attachShader(shaderProgram, fragShader);
88
gl.linkProgram(shaderProgram);
89
90
/* ====== Associating attributes to vertex shader =====*/
91
var Pmatrix = gl.getUniformLocation(shaderProgram, "Pmatrix");
92
var Vmatrix = gl.getUniformLocation(shaderProgram, "Vmatrix");
93
var Mmatrix = gl.getUniformLocation(shaderProgram, "Mmatrix");
94
95
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
96
var position = gl.getAttribLocation(shaderProgram, "position");
97
gl.vertexAttribPointer(position, 3, gl.FLOAT, false,0,0) ;
98
99
// Position
100
gl.enableVertexAttribArray(position);
101
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
102
var color = gl.getAttribLocation(shaderProgram, "color");
103
gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ;
104
105
// Color
106
gl.enableVertexAttribArray(color);
107
gl.useProgram(shaderProgram);
108
109
/*==================== MATRIX =====================*/
110
111
function get_projection(angle, a, zMin, zMax) {
112
var ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
113
return [
114
0.5/ang, 0 , 0, 0,
115
0, 0.5*a/ang, 0, 0,
116
0, 0, -(zMax+zMin)/(zMax-zMin), -1,
117
0, 0, (-2*zMax*zMin)/(zMax-zMin), 0
118
];
119
}
120
121
var proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100);
122
123
var mov_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
124
var view_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
125
126
// translating z
127
view_matrix[14] = view_matrix[14]-6;//zoom
128
129
/*==================== Rotation ====================*/
130
131
function rotateZ(m, angle) {
132
var c = Math.cos(angle);
133
var s = Math.sin(angle);
134
var mv0 = m[0], mv4 = m[4], mv8 = m[8];
135
136
m[0] = c*m[0]-s*m[1];
137
m[4] = c*m[4]-s*m[5];
138
m[8] = c*m[8]-s*m[9];
139
140
m[1]=c*m[1]+s*mv0;
141
m[5]=c*m[5]+s*mv4;
142
m[9]=c*m[9]+s*mv8;
143
}
144
145
function rotateX(m, angle) {
146
var c = Math.cos(angle);
147
var s = Math.sin(angle);
148
var mv1 = m[1], mv5 = m[5], mv9 = m[9];
149
150
m[1] = m[1]*c-m[2]*s;
151
m[5] = m[5]*c-m[6]*s;
152
m[9] = m[9]*c-m[10]*s;
153
154
m[2] = m[2]*c+mv1*s;
155
m[6] = m[6]*c+mv5*s;
156
m[10] = m[10]*c+mv9*s;
157
}
158
159
function rotateY(m, angle) {
160
var c = Math.cos(angle);
161
var s = Math.sin(angle);
162
var mv0 = m[0], mv4 = m[4], mv8 = m[8];
163
164
m[0] = c*m[0]+s*m[2];
165
m[4] = c*m[4]+s*m[6];
166
m[8] = c*m[8]+s*m[10];
167
168
m[2] = c*m[2]-s*mv0;
169
m[6] = c*m[6]-s*mv4;
170
m[10] = c*m[10]-s*mv8;
171
}
172
173
/*================= Drawing ===========================*/
174
var time_old = 0;
175
176
var animate = function(time) {
177
178
var dt = time-time_old;
179
rotateZ(mov_matrix, dt*0.005);//time
180
rotateY(mov_matrix, dt*0.002);
181
rotateX(mov_matrix, dt*0.003);
182
time_old = time;
183
184
gl.enable(gl.DEPTH_TEST);
185
gl.depthFunc(gl.LEQUAL);
186
gl.clearColor(0.5, 0.5, 0.5, 0.9);
187
gl.clearDepth(1.0);
188
189
gl.viewport(0.0, 0.0, canvas.width, canvas.height);
190
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
191
gl.uniformMatrix4fv(Pmatrix, false, proj_matrix);
192
gl.uniformMatrix4fv(Vmatrix, false, view_matrix);
193
gl.uniformMatrix4fv(Mmatrix, false, mov_matrix);
194
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
195
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
196
197
window.requestAnimationFrame(animate);
198
}
199
animate(0);
200
</script>
201
</body>
202
</html>
大家运行看下效果。
阅读剩余 87%
作者:terry,如若转载,请注明出处:https://www.web176.com/webgl/782.html