-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebgl-louver.html
140 lines (133 loc) · 4.52 KB
/
webgl-louver.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
<!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>
<style>
html,
body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
body::after {
content: '';
display: block;
width: 1px;
height: 500px;
background-color: aqua;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body::before {
content: '';
display: block;
width: 500px;
height: 1px;
background-color: darkviolet;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<canvas id="draw1" width="400" height="400" style="background: pink;">浏览器不支持canvas</canvas>
</body>
</html>
<script type="module">
const draw1 = document.getElementById('draw1');
const gl = draw1.getContext('webgl');
const VERTEX_SHADER_SOURCE = `
attribute vec4 aPosition;
varying vec4 vPosition;
void main(){
vPosition=aPosition;
gl_Position=aPosition;
gl_PointSize=10.0;
}
`; //顶点
const FRAGMENT_SHADER_SOURCE = `
precision lowp float;
uniform float uHeight;
varying vec4 vPosition;
uniform float list[5];
void main(){
// if(vPosition.y < 1.0 && vPosition.y>0.5){
// if(vPosition.y > uHeight){
// gl_FragColor=vec4(1.0,1.0,0.0,1.0);
// }else{
// gl_FragColor=vec4(1.0,1.0,0.0,0.0);
// }
// };
// if(vPosition.y < 0.5 && vPosition.y>0.0){
// if(vPosition.y > uHeight-0.5){
// gl_FragColor=vec4(1.0,0.0,0.0,1.0);
// }else{
// gl_FragColor=vec4(1.0,0.0,0.0,0.0);
// }
// };
// if(vPosition.y < 0.0 && vPosition.y>-0.5){
// if(vPosition.y > uHeight-1.0){
// gl_FragColor=vec4(1.0,1.0,0.0,1.0);
// }else{
// gl_FragColor=vec4(1.0,1.0,0.0,0.0);
// }
// };
for(int i=0; i<5; i++){
if(vPosition.y < list[i]){
// && vPosition.y > list[i + 1]
if(vPosition.y > uHeight - float(i) * 0.5){
gl_FragColor=vec4(1.0,1.0,0.0,1.0);
};
};
}
}
`;//片元
const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);
const aPosition = gl.getAttribLocation(program, 'aPosition');//第二个参数是源码里attribute声明的变量名
const uHeight = gl.getUniformLocation(program, 'uHeight');
const uList = gl.getUniformLocation(program, 'list');
// gl.uniform1fv(uList, [0.8, 0.5, 0.0, -0.5, -0.8]);
gl.uniform1fv(uList, [1.0, 0.5, 0.0, -0.5, -1.0]);
//用类型化数组创建顶点数据，合并顶点location和size
const points = new Float32Array([
// -0.5, -0.5,
// 0.5, -0.5,
// -0.5, 0.5,
// 0.5, 0.5,
// -0.8, -0.8,
// 0.8, -0.8,
// -0.8, 0.8,
// 0.8, 0.8,
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
1.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, 2, gl.FLOAT, false, 0, 0);
void gl.enableVertexAttribArray(aPosition);
let heightValue = 1;
function animation() {
heightValue -= 0.01;
gl.uniform1f(uHeight, heightValue);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
requestAnimationFrame(animation);
}
animation();
</script>