-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebgl-projection.html
134 lines (122 loc) · 4.42 KB
/
webgl-projection.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
<!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 aColor;
varying vec4 vColor;
uniform mat4 mat;
void main(){
vColor=aColor;
gl_Position=mat*aPosition;
gl_PointSize=10.0;
}
`; //顶点
const FRAGMENT_SHADER_SOURCE = `
precision lowp float;
varying vec4 vColor;
void main(){
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');//第二个参数是源码里attribute声明的变量名
const mat = gl.getUniformLocation(program, 'mat');
// const points = new Float32Array([
// -0.9, 0.9, 0.0, 1.0, 0.0, 1.0,
// -0.9, -0.9, 0.0, 1.0, 0.0, 0.0,
// 0.9, 0.9, 0.0, 1.0, 1.0, 1.0,
// 0.9, -0.9, 0.0, 1.0, 1.0, 0.0,
// ]);
const points = new Float32Array([
0.75, 1.0, -0.6, 1.0, 0.0, 0.0,
0.25, -1.0, -0.6, 1.0, 0.0, 0.0,
1.0, -1.0, -0.6, 1.0, 0.0, 0.0,
0.75, 1.0, -0.5, 0.0, 1.0, 0.0,
0.25, -1.0, -0.5, 0.0, 1.0, 0.0,
1.0, -1.0, -0.5, 0.0, 1.0, 0.0,
0.75, 1.0, -0.4, 0.0, 0.0, 1.0,
0.25, -1.0, -0.4, 0.0, 0.0, 1.0,
1.0, -1.0, -0.4, 0.0, 0.0, 1.0,
-0.75, 1.0, -0.6, 1.0, 0.0, 0.0,
-0.25, -1.0, -0.6, 1.0, 0.0, 0.0,
-1.0, -1.0, -0.6, 1.0, 0.0, 0.0,
-0.75, 1.0, -0.5, 0.0, 1.0, 0.0,
-0.25, -1.0, -0.5, 0.0, 1.0, 0.0,
-1.0, -1.0, -0.5, 0.0, 1.0, 0.0,
-0.75, 1.0, -0.4, 0.0, 0.0, 1.0,
-0.25, -1.0, -0.4, 0.0, 0.0, 1.0,
-1.0, -1.0, -0.4, 0.0, 0.0, 1.0,
])
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
const BYTES = points.BYTES_PER_ELEMENT;
gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, BYTES * 6, 0);
void gl.enableVertexAttribArray(aPosition);
gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, BYTES * 6, BYTES * 3);
void gl.enableVertexAttribArray(aColor);
gl.drawArrays(gl.TRIANGLES, 0, 3 * 6);
let eyex = 0.0;
let eyey = -0.1;
let eyez = 0.2;
function draw() {
// eyey += 0.01;
// if (eyey > 1) {
// eyey = -0.1;
// }
const eye = [eyex, eyey, eyez];
const lookAt = [0.0, 0.0, 0.0];
const up = [0.0, 0.6, 0.0];
const vm = getViewMatrix(...eye, ...lookAt, ...up);
// const ortho=getOrtho(-1,1,-1,1,0,20);
const Perspective = getPerspective(150, draw1.width / draw1.height, 100, 1);
// gl.uniformMatrix4fv(mat, false, vm);
// gl.uniformMatrix4fv(mat, false, mixMatrix(vm,ortho));
gl.enable(gl.DEPTH_TEST);//深度缓冲区
gl.uniformMatrix4fv(mat, false, mixMatrix(vm, Perspective));
// gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
gl.drawArrays(gl.TRIANGLES, 0, 3 * 6);
// 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>