-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
67 lines (55 loc) · 2.05 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
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta name=viewport content='width=device-width, initial-scale=1'>
<title>01</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<canvas></canvas>
<script id=vert type=x-shader>
precision lowp float;
precision lowp int;
// Should match JavaScript RESOLUTION. The rendering resolution is fixed
// although the viewport may change and often exceeds the canvas.
const vec2 RESOLUTION = vec2(64, 64); // x, y (px)
// Must match JavaScript ATTRIB_LOCATION.
attribute vec2 uv; // x, y (0-1)
attribute vec4 texCoord; // x, y, w, h (px)
attribute vec2 scale; // x, y
// 0-255 (an integer is used for simple buffering).
attribute float minusAlpha;
attribute vec2 position; // x, y (px)
varying vec2 vTexCoord; // x, y (px)
varying float vMinusAlpha; // 0-1
void main() {
// Values are in pixel units. Compute the pixel position of the scaled
// subtexture.
vec2 px = uv * texCoord.zw * scale + position;
// Convert the pixels to clip space by taking them to be fraction of the
// total resolution, translating them to -1 to 1, and flipping the y
// -coordinate so positive y is downward.
vec2 clip = (2. * px / RESOLUTION - 1.) * vec2(1, -1);
gl_Position = vec4(clip, 0, 1);
// Output the computed sub-texture coordinate and -alpha.
vTexCoord = texCoord.xy + uv * texCoord.zw;
vMinusAlpha = minusAlpha / 255.;
}
</script>
<script id=frag type=x-shader>
precision lowp float;
precision lowp int;
precision lowp sampler2D;
uniform sampler2D sampler;
uniform vec2 atlasSize; // x, y (px)
varying vec2 vTexCoord;
varying float vMinusAlpha;
void main() {
vec4 color = texture2D(sampler, vTexCoord / atlasSize);
gl_FragColor = vec4(color.rgb, color.a - vMinusAlpha);
}
</script>
<script src="index.js"></script>
</body>
</html>