-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (125 loc) · 3.91 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
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html>
<head>
<link rel="manifest" href="manifest.json">
<!--<script type="application/ecmascript" src="js/adapter.js"></script>!-->
<script type="application/ecmascript" src="js/rs.js"></script>
<style>
body {
background-color: linen;
margin: 0;
}
#rsCanvasdiv {
height: 100vh;
width: 100vw;
max-height: 75vw;
max-width: 133.33vh;
margin: 0 100;
}
#rsCanvas {
position: absolute;
width: inherit;
height: inherit;
max-height: inherit;
max-width: inherit;
margin: 0 100;
}
#overlay {
position: absolute;
z-index: 10;
width: inherit;
height: inherit;
max-height: inherit;
max-width: inherit;
}
</style>
</head>
<body>
<div id="rsCanvasDiv">
<canvas id="rsCanvas"></canvas>
<canvas id="overlay"></canvas>
</div>
</body>
<script id="shader-fs" type="x-shader/x-fragment">
varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
varying highp vec2 vTextureCoord;
void main(void) {
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
vTextureCoord = aTextureCoord;
}
</script>
<script id="shader-head-mask-fs2" type="x-shader/x-fragment">
precision highp float;
varying highp vec2 vTextureCoord;
uniform bool uUseMask;
uniform sampler2D uMask;
uniform sampler2D uBank1;
uniform sampler2D uBank2;
uniform vec2 uBankSize;
uniform vec2 uDepositSize;
uniform float uNumX;
uniform float uNumY;
//uniform vec2 uVPSize;
uniform float uTime;
void main(void) {
// How many tiles per bank
float capacity = uNumX * uNumY;
float delay = texture2D(uMask, vec2(vTextureCoord.s, vTextureCoord.t)).r * 2.0 * capacity;
</script>
<script id="shader-head-dir-fs2" type="x-shader/x-fragment">
precision highp float;
varying highp vec2 vTextureCoord;
uniform vec2 uDelayDir;
uniform float uDelayOffset;
uniform sampler2D uBank1;
uniform sampler2D uBank2;
uniform vec2 uBankSize;
uniform float uNumX;
uniform float uNumY;
uniform vec2 uDepositSize;
uniform float uTime;
void main(void) {
// How many tiles per bank
float capacity = uNumX * uNumY;
float delay = (dot(vTextureCoord, uDelayDir) + uDelayOffset) * 2.0 * capacity;
</script>
<script id="shader-tail-fs2" type="x-shader/x-fragment">
// The frame needed - accuracy isn't needed here
float bankNo = mod(uTime - ceil(delay) + 0.5, 2.0 * capacity) - 0.5;
// Calculate the frame's position, floors and '+ 0.1's to guarantee integer arithmetic
float x = floor(mod(bankNo + 0.1, uNumX));
float y = floor((bankNo - x) / uNumX + 0.1);
// Might be better to remove conditional expression and just do both texture lookups then interpolate
// Tried both, seem to be similar speeds, might be that doing both is basically equivalent to branching,
// in which case it is probably best to keep it as a conditional and then let the compiler decide what's best.
//vec4 bank1value = texture2D(uBank1, vec2(x + vTextureCoord.s, y + vTextureCoord.t) * uDepositSize / uBankSize);
//y -= uNumY;
//vec4 bank2value = texture2D(uBank2, vec2(x + vTextureCoord.s, y + vTextureCoord.t) * uDepositSize / uBankSize);
//float t = step(capacity, bankNo);
//gl_FragColor = t * bank2value + (1. - t) * bank1value;
if (bankNo < capacity) {
gl_FragColor = texture2D(uBank1, vec2(x + vTextureCoord.s, y + vTextureCoord.t) * uDepositSize / uBankSize);
} else {
y -= uNumY;
gl_FragColor = texture2D(uBank2, vec2(x + vTextureCoord.s, y + vTextureCoord.t) * uDepositSize / uBankSize);
}
}
</script>
<script id="shader-vs2" type="x-shader/x-vertex">
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
varying highp vec2 vTextureCoord;
void main(void) {
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
vTextureCoord = aTextureCoord;
}
</script>
</html>