-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (123 loc) · 3.36 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
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GLtoy</title>
<script src="index.js"></script>
<style>
#shaders, #data, #buttons {
display: inline-block;
}
</style>
</head>
<body>
<canvas id="main-canvas" width="720" height="720"></canvas>
<div id="shaders">
Vertex shader<br>
<textarea id="vshader-source" rows="23" cols="70">
attribute vec3 aVertexPosition;
attribute float which;
uniform float time;
varying vec4 bary;
mat3 rot(float theta) {
return mat3(cos(theta), 0, -sin(theta),
0, 1, 0,
sin(theta), 0, cos(theta));
}
void main(void) {
gl_Position = vec4(rot(time) * aVertexPosition, 1.0);
gl_Position.w = (gl_Position.z + 3.) / 2.;
bary = vec4(0);
if (which == 0.) bary.x = 1.;
else if (which == 1.) bary.y = 1.;
else if (which == 2.) bary.z = 1.;
else bary.w = 1.;
}
</textarea>
<br><br>
Fragment shader<br>
<textarea id="fshader-source" rows="23" cols="70">
precision highp float;
varying vec4 bary;
void main(void) {
int count = 0;
if (bary.x > 0.05) count++;
if (bary.y > 0.05) count++;
if (bary.z > 0.05) count++;
if (bary.w > 0.05) count++;
if (count < 3) gl_FragColor = vec4(1, 0, 0, 1);
else gl_FragColor = vec4(1);
}
</textarea>
</div>
<div id="data">
Vertices<br>
<textarea id="vertices" rows="14" cols="60">
/*
* Put JS code for the body of a function here.
* It will be called on each reload.
* Return an object with keys "attributes" and "data",
* or a promise resolving to such an object.
* "attributes" should be a list of pairs of attribute
* names and sizes.
* "data" should be a one-dimensional array of floats
* of consecutively packed vertex attributes.
*/
return {
attributes: [
["aVertexPosition", 3], ["which", 1]],
data: [
0.0, 0, -0.577, 0,
-0.5, 0, 0.288, 1,
0.5, 0, 0.288, 2,
0.0, 0.816, 0.0, 3,
]};
</textarea>
<br><br>
Triangles<br>
<textarea id="triangles" rows="14" cols="60">
/*
* Put JS code for the body of a function here.
* It will be called on each reload.
* Return a one-dimensional array of vertex indices,
* three per triangle, or a promise resolving to such
* an array.
*/
return [
0, 1, 2,
0, 1, 3,
1, 2, 3,
2, 0, 3,
];
</textarea>
<br><br>
Uniforms<br>
<textarea id="uniforms" rows="14" cols="60">
/*
* Put JS code for the body of a function here.
* It will be called on each reload.
* Return an object whose keys are uniform names
* and whose values are values for those uniforms,
* or a promise resolving to such an object.
* Possible kinds of value are:
* - A float (for GLSL float)
* - An array of floats (for GLSL vectors)
* - An array of arrays of floats
* (for square GLSL matrices) (column-major)
* - A zero-arg function returning one of the above, to be
* called for the uniform's value each frame
* - A string containing the URL of an image or video
* usable in an <img> or <video> tag (for GLSL sampler2D)
*/
return {time: () => performance.now() / 1000};
</textarea>
</div>
<div id="buttons">
<button id="load">Load Gist (ctrl+O)</button>
<br>
<button id="save">Save anonymous Gist (ctrl+S)</button>
<br>
<button id="reload">Reload (ctrl+Enter)</button>
</div>
</body>
</html>