-
Notifications
You must be signed in to change notification settings - Fork 108
/
lesson12.html
165 lines (142 loc) · 5.56 KB
/
lesson12.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>立方体</title>
<link rel="stylesheet" href="../css/common.css" />
</head>
<body>
<canvas id="canvas"></canvas>
<script type="shader-source" id="vertexShader">
//浮点数设置为中等精度
precision mediump float;
//接收 JavaScript 传递过来的点的坐标（X, Y, Z）
attribute vec3 a_Position;
// 接收顶点颜色
attribute vec4 a_Color;
varying vec4 v_Color;
uniform mat4 u_Matrix;
void main(){
gl_Position = u_Matrix * vec4(a_Position, 1);
// 将顶点颜色插值处理传递给片元着色器
v_Color = a_Color;
gl_PointSize = 5.0;
}
</script>
<script type="shader-source" id="fragmentShader">
//浮点数设置为中等精度
precision mediump float;
varying vec4 v_Color;
void main(){
// 点的最终颜色。
gl_FragColor = v_Color;
}
</script>
<script src="../utils/math.js"></script>
<script src="../utils/webgl-helper.js"></script>
<script src="../utils/vector3.js"></script>
<script src="../utils/webgl-matrix.js"></script>
<script>
//获取canvas
let canvas = getCanvas('#canvas');
//设置canvas尺寸为满屏
resizeCanvas(canvas);
//获取绘图上下文
let gl = getContext(canvas);
//创建着色器程序
let program = createSimpleProgramFromScript(gl, 'vertexShader', 'fragmentShader');
//使用该着色器程序
gl.useProgram(program);
let positions = [
-0.5, -0.5, 0.5, 1, 0, 0, 1,
0.5, -0.5, 0.5, 1, 0, 0, 1,
0.5, 0.5, 0.5, 1, 0, 0, 1,
-0.5, 0.5, 0.5, 1, 0, 0, 1,
-0.5, 0.5, 0.5, 0, 1, 0, 1,
-0.5, 0.5, -0.5, 0, 1, 0, 1,
-0.5, -0.5, -0.5, 0, 1, 0, 1,
-0.5, -0.5, 0.5, 0, 1, 0, 1,
0.5, 0.5, 0.5, 0, 0, 1, 1,
0.5, -0.5, 0.5, 0, 0, 1, 1,
0.5, -0.5, -0.5, 0, 0, 1, 1,
0.5, 0.5, -0.5, 0, 0, 1, 1,
0.5, 0.5, -0.5, 1, 0, 1, 1,
0.5, -0.5, -0.5, 1, 0, 1, 1,
-0.5, -0.5, -0.5, 1, 0, 1, 1,
-0.5, 0.5, -0.5, 1, 0, 1, 1,
-0.5, 0.5, 0.5, 1, 1, 0, 1,
0.5, 0.5, 0.5, 1, 1, 0, 1,
0.5, 0.5, -0.5, 1, 1, 0, 1,
-0.5, 0.5, -0.5, 1, 1, 0, 1,
-0.5, -0.5, 0.5, 0, 1, 1, 1,
-0.5, -0.5, -0.5, 0, 1, 1, 1,
0.5, -0.5, -0.5, 0, 1, 1, 1,
0.5, -0.5, 0.5, 0, 1, 1, 1,
]
let indices = [0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16,
18, 19, 20, 21, 22, 20, 22, 23
]
// 随机生成一个颜色。
let color = randomColor();
// 找到着色器中的全局变量 u_Color;
let u_Matrix = gl.getUniformLocation(program, 'u_Matrix');
let a_Position = gl.getAttribLocation(program, 'a_Position');
let a_Color = gl.getAttribLocation(program, 'a_Color');
gl.enableVertexAttribArray(a_Position);
gl.enableVertexAttribArray(a_Color);
// 创建缓冲区
let buffer = gl.createBuffer();
// 绑定缓冲区为当前缓冲
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// 设置 a_Position 属性从缓冲区读取数据方式
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 28, 0);
// 设置 a_Color 属性从缓冲区读取数据方式
gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 28, 12);
// 向缓冲区传递数据
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
//创建索引缓冲区
let indicesBuffer = gl.createBuffer();
//绑定索引缓冲区
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
//向索引缓冲区传递索引数据
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
//设置清屏颜色为黑色。
gl.clearColor(0, 0, 0, 1);
//隐藏背面
gl.enable(gl.CULL_FACE);
var aspect = canvas.width / canvas.height;
//计算正交投影矩阵
var projectionMatrix = matrix.ortho(-aspect * 4, aspect * 4, -4, 4, 100, -100);
var deg2radians = window.lib3d.math.deg2radians;
var dstMatrix = matrix.identity();
/*渲染*/
function render() {
xAngle +=1;
yAngle +=1;
//先绕 Y 轴旋转矩阵。
matrix.rotationY(deg2radians(yAngle), dstMatrix);
//再绕 X 轴旋转
matrix.multiply(dstMatrix, matrix.rotationX(deg2radians(xAngle), tmpMatrix), dstMatrix);
//模型投影矩阵。
matrix.multiply(projectionMatrix, dstMatrix, dstMatrix);
gl.uniformMatrix4fv(u_Matrix, false, dstMatrix);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
if(!playing){
return;
}
requestAnimationFrame(render);
}
var playing = false;
var xAngle =0;
var yAngle = 0;
var dstMatrix = matrix.identity();
var tmpMatrix = matrix.identity();
document.body.addEventListener('click',function(){
playing = !playing;
render();
})
render();
</script>
</body>
</html>