-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
131 lines (116 loc) · 4.16 KB
/
main.js
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
function initApp() {
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2');
if (!gl) {
throw new Error('WebGL2 not supported');
}
document.body.appendChild(canvas);
const app = {
canvas,
gl,
glSize: { w: 0, h: 0 },
dpr: Math.min(window.devicePixelRatio, 2),
updateSize() {
const w = window.innerWidth;
const h = window.innerHeight;
this.glSize = { w: w * this.dpr, h: h * this.dpr };
this.canvas.width = this.glSize.w;
this.canvas.height = this.glSize.h;
this.canvas.style.width = `${w}px`;
this.canvas.style.height = `${h}px`;
this.gl.viewport(0, 0, this.glSize.w, this.glSize.h);
},
createShader(type, source) {
const shader = this.gl.createShader(type);
if (!shader) {
console.error('Failed to create shader');
return null;
}
this.gl.shaderSource(shader, source);
this.gl.compileShader(shader);
if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
console.error('Shader compile error:', this.gl.getShaderInfoLog(shader));
this.gl.deleteShader(shader);
return null;
}
return shader;
},
createProgram(vertexShader, fragmentShader) {
const program = this.gl.createProgram();
if (!program) {
console.error('Failed to create program');
return null;
}
this.gl.attachShader(program, vertexShader);
this.gl.attachShader(program, fragmentShader);
this.gl.linkProgram(program);
if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
console.error('Program link error:', this.gl.getProgramInfoLog(program));
this.gl.deleteProgram(program);
return null;
}
return program;
},
initShaders() {
const vertexShaderSource = `#version 300 es
in vec4 a_position;
out vec4 pos;
void main() {
gl_Position = a_position;
pos = gl_Position;
}
`;
const fragmentShaderSource = `#version 300 es
#ifdef GL_ES
precision mediump float;
#endif
uniform float u_time;
in vec4 pos;
out vec4 fragColor;
void main() {
float x = 1.0;
x = (sin(u_time)+1.0)/2.0;
if(sqrt(pos.y*pos.y+pos.x*pos.x) > (x-0.002) && sqrt(pos.y*pos.y+pos.x*pos.x) < x){
fragColor = vec4(1, .0, .0, 1.0);
}else{
fragColor = vec4(x-sin(u_time)*sqrt(pos.y*pos.y+pos.x*pos.x), .0, .0, 1.0);
}
if(sqrt(pos.y*pos.y+pos.x*pos.x) > x){
fragColor = vec4(.0, .0, .0, 1.0);
}
}
`;
const vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentShaderSource);
if (!vertexShader || !fragmentShader) {
throw new Error('Failed to create shaders');
}
this.program = this.createProgram(vertexShader, fragmentShader);
if (!this.program) {
throw new Error('Failed to create program');
}
this.gl.useProgram(this.program);
const positions = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
const positionBuffer = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.STATIC_DRAW);
const positionAttributeLocation = this.gl.getAttribLocation(this.program, 'a_position');
this.gl.enableVertexAttribArray(positionAttributeLocation);
this.gl.vertexAttribPointer(positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);
this.timeUniformLocation = this.gl.getUniformLocation(this.program, 'u_time');
},
render(time) {
if (this.timeUniformLocation) {
this.gl.uniform1f(this.timeUniformLocation, time * 0.001);
}
this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
requestAnimationFrame(this.render.bind(this));
},
};
app.updateSize();
window.addEventListener('resize', app.updateSize.bind(app));
app.initShaders();
requestAnimationFrame(app.render.bind(app));
return app;
}
const app = initApp();