-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
101 lines (73 loc) · 3.65 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
<html>
<head>
<title>CAM6</title>
<link rel="stylesheet" type="text/css" href="jquery-pie/jquery-ui/themes/base/jquery.ui.all.css">
<link rel="stylesheet" type="text/css" href="jquery-pie/css/jquery-pie.css"/>
<link rel="stylesheet" type="text/css" href="css/CAM6.css">
<script type="text/javascript" src="jquery-pie/jquery-ui/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-pie/jquery-ui/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery-pie/jquery-ui/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery-pie/jquery-ui/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery-pie/jquery-ui/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="jquery-pie/jquery-ui/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="jquery-pie/jquery-ui/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="jquery-pie/jquery-ui/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="jquery-pie/jquery-ui/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="jquery-pie/javascript/jquery-pie.js"></script>
<script type="text/javascript" src="jquery-mousewheel/jquery.mousewheel.js"></script>
<script type="text/javascript" src="headtrackr/headtrackr.js"></script>
<script type="text/javascript" src="seedrandom/seedrandom.js"></script>
<script type="text/javascript" src="javascript/twgl-full.js"></script>
<script type="text/javascript" src="javascript/CAM6.js"></script>
<script>
$(function() {
window.cam6 = new CAM6({
});
window.cam6.startup();
});
</script>
</head>
<body class="cam6-body">
<script id="tileVertexShader" type="x-shader/x-vertex">
precision mediump float;
attribute vec3 a_position;
attribute vec2 a_screenTile;
varying vec2 v_screenTile;
void main() {
gl_Position = vec4(a_position, 1.0);
v_screenTile = a_screenTile;
}
</script>
<script id="tileFragmentShader" type="x-shader/x-fragment">
precision mediump float;
uniform vec2 u_tileSize;
uniform vec2 u_tilesSize;
uniform sampler2D u_tiles;
uniform vec2 u_cellsSize;
uniform sampler2D u_cells;
uniform int u_cellGutter;
varying vec2 v_screenTile;
void main() {
// Calculate the screen tile coordinate.
vec2 screenTileColRow = floor(v_screenTile);
vec2 screenTilePosition = v_screenTile - screenTileColRow;
// Map the screen tile coordinate to a cell, taking the gutter into consideration.
vec2 cellGutters = vec2(u_cellGutter, u_cellGutter);
vec2 cellsSizeInside = u_cellsSize - (2.0 * cellGutters);
vec2 cellColRow = mod(screenTileColRow, cellsSizeInside) + cellGutters;
vec2 cellUV = cellColRow / u_cellsSize;
// Read the cell value.
float cell = floor(texture2D(u_cells, cellUV).a * 255.0);
// Calculate the tile row and column from the cell value.
float tileRow = floor(cell * u_tileSize.x / u_tilesSize.x);
float tileCol = cell - (tileRow * u_tileSize.y / u_tilesSize.y);
// Calculate which pixel of the tile to sample.
vec2 tileCorner = vec2(tileCol, tileRow) * u_tileSize;
vec2 tilePixel = tileCorner + (screenTilePosition * u_tileSize);
vec2 uv = tilePixel / u_tilesSize;
// Sample the tile.
gl_FragColor = texture2D(u_tiles, uv);
}
</script>
</body>
</html>