-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
77 lines (69 loc) · 3.16 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Robinson</title>
</head>
<body style="background-color: black;">
<!--<canvas id="character-canvas" style="display:none"></canvas>-->
<canvas id="character-canvas" style="display:none"></canvas>
<!--<canvas id="glyph-canvas" style="display:none"></canvas>-->
<canvas id="glyph-canvas" style="display:none"></canvas>
<canvas id="fg-canvas" style="display:none;"></canvas>
<canvas id="bg-canvas" style="display:none;"></canvas>
<canvas id="terminal-canvas" style=" display: block; margin: 0 auto;"></canvas>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D uFont, uGlyphs, uFg, uBg;
uniform vec2 fontSize, termDimensions, fontTextureDimensions, glyphTextureDimensions;
varying vec2 vTextureCoord;
void main(void) {
// gx = column
// gy = row
float gx = floor(vTextureCoord.x * termDimensions.x);
float gy = floor(vTextureCoord.y * termDimensions.y);
// row,column -> glyph texture uvs
float gu = gx / glyphTextureDimensions.x;
float gv = gy / glyphTextureDimensions.y;
// look up which glyph to use at [col, row]
vec2 g = texture2D(uGlyphs, vec2(gu, gv)).xy;
// That green and red channel mingling? Yeah that's because some
// mobile devices have less than 8 bits per channel
//float gp = floor(glyph.r * 256.0 + floor((glyph.g * 16.0) * 256.0)) / 16.0;
//float gy = 0.9375 - (floor(gp) / 16.0);
//float gx = gp - floor(gp);
// calc the position of the fragment relative to the cell
float cu = fract(vTextureCoord.x * termDimensions.x);
float cv = fract(vTextureCoord.y * termDimensions.y);
float fu = ((g.x * fontTextureDimensions.x) + cu) * fontSize.x / fontTextureDimensions.x;
float fv = (((g.y * fontTextureDimensions.y) + cv) * fontSize.y - 1.0)/ fontTextureDimensions.y;
vec4 fnt = texture2D(uFont, vec2(fu, fv));
vec4 fg = texture2D(uFg, vec2(gu, gv));
vec4 bg = texture2D(uBg, vec2(gu, gv));
//gl_FragColor = vec4(cu, cv, 0, 0);
//gl_FragColor = vec4(fu, fv, 0, 0);
//gl_FragColor = vec4(g.x, g.y, 0, 0);
//gl_FragColor = vec4(gu, gv, 0, 0);
//gl_FragColor = fnt;
//gl_FragColor = fg;
//gl_FragColor = mix(bg, fg, fnt.a);
gl_FragColor = mix(bg, fg, fnt.r);
//gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
//gl_FragColor = vec4(texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)).r, 1.0, 1.0, 1.0);
//gl_FragColor = vec4(vTextureCoord.s, vTextureCoord.t, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec2 vTextureCoord;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;
}
</script>
<script type="text/javascript" src="target/main.js"></script>
</body>
</html>