-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (97 loc) · 2.87 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>OGL • Triangle Screen Shader</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="viewport"
content="width=device-width, minimal-ui, viewport-fit=cover, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>
<link
rel="icon"
type="image/png"
href="data:image/png;base64,iVBORw0KGgo="
/>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="Info">Triangle Screen Shader</div>
<script type="module">
import {
Renderer,
Program,
Color,
Mesh,
Triangle,
} from 'https://unpkg.com/ogl@0.0.92';
const vertex =
/* glsl */
` attribute vec2 uv;
attribute vec2 position;
varying vec2 vUv;
void main() {
vUv=uv;
gl_Position=vec4(position, 0, 1);
}
`;
const fragment =
/* glsl */
` precision highp float;
uniform float uTime;
uniform vec3 uColor;
varying vec2 vUv;
void main() {
gl_FragColor.rgb=0.5+0.3 * cos(vUv.xyx + uTime)+uColor;
gl_FragColor.a=1.0;
}
`;
{
const renderer = new Renderer();
const gl = renderer.gl;
document.body.appendChild(gl.canvas);
gl.clearColor(1, 1, 1, 1);
function resize() {
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', resize, false);
resize();
// Rather than using a plane (two triangles) to cover the viewport here is a
// triangle that includes -1 to 1 range for 'position', and 0 to 1 range for 'uv'.
// Excess will be out of the viewport.
// position uv
// (-1, 3) (0, 2)
// |\ |\
// |__\(1, 1) |__\(1, 1)
// |__|_\ |__|_\
// (-1, -1) (3, -1) (0, 0) (2, 0)
const geometry = new Triangle(gl);
const program = new Program(gl, {
vertex,
fragment,
uniforms: {
uTime: {
value: 0,
},
uColor: {
value: new Color(0.3, 0.2, 0.5),
},
},
});
const mesh = new Mesh(gl, {
geometry,
program,
});
requestAnimationFrame(update);
function update(t) {
requestAnimationFrame(update);
program.uniforms.uTime.value = t * 0.001;
// Don't need a camera if camera uniforms aren't required
renderer.render({
scene: mesh,
});
}
}
</script>
</body>
</html>