-
Notifications
You must be signed in to change notification settings - Fork 0
/
webgl-cube.html
281 lines (251 loc) · 9.98 KB
/
webgl-cube.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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立方体-光源-雾化</title>
<script src="./js/initShader.js"></script>
<script src="./js/matrix.js"></script>
<script src="./js/mathUtils.js"></script>
<style>
html,
body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<canvas id="draw1" width="400" height="400" style="background: skyblue;">浏览器不支持canvas</canvas>
</body>
</html>
<script type="module">
const draw1 = document.getElementById('draw1');
const gl = draw1.getContext('webgl');
//attribute只传递顶点数量
const VERTEX_SHADER_SOURCE = `
attribute vec4 aPosition;
attribute vec4 aNormal;
uniform mat4 mat;
// attribute vec4 aColor;
varying vec4 vColor;
varying float vDist;
void main(){
vec4 vertexPosition=mat*aPosition;
vec4 aColor = vec4(1.0,0.0,0.0,1.0);
//定义点光源：光源位置、发射方向，颜色
vec3 uPointLightColor=vec3(1.0,1.0,0.0);
vec3 uPointLightPosition =vec3(-10.0,-10.0,-10.0);
vec3 lightDirection=normalize(uPointLightPosition-vec3(vertexPosition));
//定义环境光源:
vec3 uAmbientLightColor=vec3(0.2,0.2,0.2);
//环境反射
vec3 ambient=uAmbientLightColor * vec3(aColor);
//漫反射: 计算入射角
float dotDeg=dot(lightDirection,vec3(aNormal));
//漫反射颜色
vec3 diffuseColor=uPointLightColor*vec3(aColor)*dotDeg;
gl_Position=vertexPosition;
// vColor=aColor;
vColor=vec4(ambient+diffuseColor,aColor.a);
vDist = gl_Position.w;
}
`; //顶点
const FRAGMENT_SHADER_SOURCE = `
precision lowp float;
varying vec4 vColor;
varying float vDist;
// 雾化颜色
uniform vec3 uFogColor;
// 起点到终点的距离 第一个参数是起点 第二个是终点
uniform vec2 uFogDist;
void main(){
// 计算雾化因子
float fogFactor = (uFogDist.y - vDist) / (uFogDist.y - uFogDist.x);
// 看到的颜色是什么 物体颜色*雾化因子+雾化颜色*（1-雾化因子）
// mix 线性混合计算 mix(x,y,a) => { x * (1-a) + y * a }
vec3 color = mix(uFogColor, vec3(vColor), fogFactor);
// gl_FragColor = vec4(color, vColor.a);
gl_FragColor = vec4(color, 0.5);
// gl_FragColor=vColor;
// gl_FragColor=vec4(1.0,0.0,0.0,1.0);
}
`;//片元
const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);
const aPosition = gl.getAttribLocation(program, 'aPosition');//第二个参数是源码里attribute声明的变量名
// const aColor = gl.getAttribLocation(program, 'aColor');
const aNormal = gl.getAttribLocation(program, 'aNormal');
const mat = gl.getUniformLocation(program, 'mat');
const normals = new Float32Array([
//法向量与顶点数量保持一致
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,//前
0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0,//后
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,//右
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,//左
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,//上
0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,//下
])
const normalsBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, normalsBuffer);
gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
gl.vertexAttribPointer(aNormal, 4, gl.FLOAT, false, 0, 0);
void gl.enableVertexAttribArray(aNormal);
//立方体8个顶点,每个面由两个三角形拼成
const v0 = [0, 0, 0];
const v1 = [-1, 0, 0];
const v2 = [-1, -1, 0];
const v3 = [0, -1, 0];
const v4 = [0, -1, -1];
const v5 = [0, 0, -1];
const v6 = [-1, 0, -1];
// const v0 = [1, 1, 1];
// const v1 = [-1, 1, 1];
// const v2 = [-1, -1, 1];
// const v3 = [1, -1, 1];
// const v4 = [1, -1, -1];
// const v5 = [1, 1, -1];
// const v6 = [-1, 1, -1];
const v7 = [-1, -1, -1];
// const points = new Float32Array([
// ...v1, ...v0, ...v3, ...v3, ...v2, ...v1,//前
// ...v6, ...v5, ...v4, ...v4, ...v7, ...v6,//后
// ...v1, ...v6, ...v7, ...v7, ...v2, ...v1,//左
// ...v0, ...v5, ...v4, ...v4, ...v3, ...v0,//右
// ...v6, ...v5, ...v0, ...v0, ...v1, ...v6,//上
// ...v7, ...v4, ...v3, ...v3, ...v2, ...v7,//下
// ])
//索引法，创建立方体顶点
const vertuces = new Float32Array([
// 0123
1, 1, 1,
-1, 1, 1,
-1, -1, 1,
1, -1, 1,
// 0345
1, 1, 1,
1, -1, 1,
1, -1, -1,
1, 1, -1,
// 0156
1, 1, 1,
1, 1, -1,
-1, 1, -1,
-1, 1, 1,
// 1267
-1, 1, 1,
-1, 1, -1,
-1, -1, -1,
-1, -1, 1,
// 2347
-1, -1, 1,
1, -1, 1,
1, -1, -1,
-1, -1, -1,
// 4567
1, -1, -1,
1, 1, -1,
-1, 1, -1,
-1, -1, -1,
])
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
gl.bufferData(gl.ARRAY_BUFFER, vertuces, gl.STATIC_DRAW);
// const BYTES = points.BYTES_PER_ELEMENT;
gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
void gl.enableVertexAttribArray(aPosition);
// const colorData = new Float32Array([
// 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
// 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
// 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
// 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
// 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
// 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1,
// ])
const colors = new Float32Array([
0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0,
0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4,
1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4,
1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4,
1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0,
])
const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
// gl.bufferData(gl.ARRAY_BUFFER, colorData, gl.STATIC_DRAW);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
// gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 0, 0);
// gl.enableVertexAttribArray(aColor)
// const indeces = new Uint8Array ([
// 1, 0, 3, 3, 2, 1,//前
// 6, 5, 4, 4, 7, 6,//后
// 1, 6, 7, 7, 2, 1,//左
// 0, 5, 4, 4, 3, 0,//右
// 6, 5, 0, 0, 1, 6,//上
// 7, 4, 3, 3, 2, 7,//下
// ]);
const indeces = new Uint8Array([
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,
])
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indeces, gl.STATIC_DRAW);
const start = 0;
const end = 200;
const fogColor = new Float32Array([0.0, 0.0, 0.0]);
const fogDist = new Float32Array([start, end]);
const uFogColor = gl.getUniformLocation(program, 'uFogColor');
const uFogDist = gl.getUniformLocation(program, 'uFogDist');
let eyex = 3;
let eyey = 3;
let eyez = 3;
let deg = 0;
function draw() {
fogDist[1] -= 1;
if (fogDist[1] < start) {
fogDist[1] = end;
}
gl.uniform2fv(uFogDist, fogDist);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
deg += 0.01;
const eye = [eyex, eyey, eyez];
const lookAt = [0.0, 0.0, 0.0];
const up = [0.0, 0.6, 0.0];
const roate = getRotateMatrix(deg);
const vm = getViewMatrix(...eye, ...lookAt, ...up);
const Perspective = getPerspective(30, draw1.width / draw1.height, 100, 1);
gl.enable(gl.BLEND);
//设置半透明物体
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
// gl.enable(gl.DEPTH_TEST);//开启隐藏面消除功能
// gl.uniformMatrix4fv(mat, false, mixMatrix(vm, Perspective));//最终转成透视矩阵
// gl.uniformMatrix4fv(mat, false, mixMatrix(Perspective, vm));//最终转成视图数据
gl.uniformMatrix4fv(mat, false, mixMatrix(mixMatrix(Perspective, vm), roate));//最终转成旋转数据
// gl.drawArrays(gl.TRIANGLES, 0, points.length / 3);
//索引绘制立方体
gl.drawElements(gl.TRIANGLES, indeces.length, gl.UNSIGNED_BYTE, 0);//(mode,count,type,offset)mode同gl.drawArrays,count顶点数，type顶点数据类型,offset索引数组开始绘制的位置
requestAnimationFrame(draw);
}
draw();
// document.onkeydown = function (e) {
// switch (e.keyCode) {
// case 37: eyex += 0.01; break;
// case 38: eyex -= 0.01; break;
// case 39: eyey += 0.01; break;
// case 40: eyey -= 0.01; break;
// }
// draw();
// }
</script>