@pirireis/webglobeplugins 0.10.10-alpha → 0.10.12-alpha
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Math/methods.js +45 -133
- package/Math/methods1.js +183 -0
- package/altitude-locator/plugin.js +11 -2
- package/package.json +1 -1
- package/point-heat-map/plugin-webworker.js +0 -3
- package/programs/rings/distancering/circlepaddingfreeangleprogram.js +13 -19
- package/timetracks/index.js +1 -5
- package/util/heatwavedatamanager/index.js +1 -2
- package/util/interpolation/timetrack/timetrack-interpolator.js +8 -4
- package/programs/globeshell/noise/noises.js +0 -1
- package/programs/line-on-globe/angled-line.js +0 -173
- package/timetracks/adaptors.js +0 -117
- package/timetracks/plugin.js +0 -248
- package/timetracks/program.js +0 -769
- package/timetracks/programpoint.js +0 -144
- package/util/heatwavedatamanager/pointcoordinatesdatacalculator1.js +0 -116
- package/util/interpolation/timetrack/web-worker-str.js +0 -180
package/timetracks/program.js
DELETED
|
@@ -1,769 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Author: Toprak Nihat Deniz Ozturk
|
|
3
|
-
*/
|
|
4
|
-
import { createProgram, defaultblendfunction, shaderfunctions } from "../util";
|
|
5
|
-
export default class TrackGlowLineProgram {
|
|
6
|
-
/**
|
|
7
|
-
* @param {WebGL2RenderingContext} gl
|
|
8
|
-
* @param {number} width
|
|
9
|
-
* @param {number} height
|
|
10
|
-
* @param {Object} options
|
|
11
|
-
* @param {number} options.headPercentage 0 ~ 1
|
|
12
|
-
* @param {number} options.routeAlpha 0 ~ 1
|
|
13
|
-
* @param {Array.<Number>} options.weights [w1, w2, w3, w4, w5]
|
|
14
|
-
* @param {number} options.alphaThreshold 0 ~ 1
|
|
15
|
-
* @param {number} options.exposure 0 ~ inf
|
|
16
|
-
* @param {number} options.gamma 0 ~ inf
|
|
17
|
-
* @param {number} options.finalAlphaRatio 0 ~ 1
|
|
18
|
-
* @param {+int} options.blurRepetition 1 ~ inf default 2
|
|
19
|
-
*/
|
|
20
|
-
constructor(gl, attrBuffer, width, height, options = {}) {
|
|
21
|
-
this.gl = gl;
|
|
22
|
-
this.program = null;
|
|
23
|
-
this._premultipliedAlpha = false;
|
|
24
|
-
// this._inBuffer = gl.createBuffer();
|
|
25
|
-
this._inBuffer = attrBuffer;
|
|
26
|
-
this._frameBuffer = gl.createFramebuffer();
|
|
27
|
-
this._lineProgram = this._createLineProgram();
|
|
28
|
-
this._blurProgram = this._createBlurProgram();
|
|
29
|
-
this._combineProgram = this._createCombineProgram();
|
|
30
|
-
this.resize(width, height);
|
|
31
|
-
this._middleTexture = null;
|
|
32
|
-
this._blurTextures = null;
|
|
33
|
-
this._createInnerTextures();
|
|
34
|
-
this._blurFrameBuffers = [gl.createFramebuffer(), gl.createFramebuffer()];
|
|
35
|
-
this._blurRepetition = options.blurRepetition || 1;
|
|
36
|
-
this._totalLength = 0;
|
|
37
|
-
this._initUniforms(options);
|
|
38
|
-
}
|
|
39
|
-
_createInnerTextures() {
|
|
40
|
-
this._middleTexture = this._createTextures();
|
|
41
|
-
this._blurTextures = [this._createTextures(), this._createTextures()];
|
|
42
|
-
}
|
|
43
|
-
_initUniforms(options = {}) {
|
|
44
|
-
const { gl, _lineProgram, _blurProgram, _combineProgram } = this;
|
|
45
|
-
const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
46
|
-
gl.useProgram(_lineProgram.program);
|
|
47
|
-
gl.uniform1f(_lineProgram.u_head_percentage, options.headPercentage || 1.0 / 30.0);
|
|
48
|
-
gl.uniform1f(_lineProgram.u_route_alpha, options.routeAlpha || 0.025);
|
|
49
|
-
gl.useProgram(_blurProgram.program);
|
|
50
|
-
gl.uniform1fv(_blurProgram.u_weight, options.weights || [1, 0.45045946, 0.2216216, 0.154054, 0.056216]);
|
|
51
|
-
gl.uniform1f(_blurProgram.u_alpha_threshold, options.alphaThreshold || 0.0);
|
|
52
|
-
gl.uniform1i(_blurProgram.u_glow, 1);
|
|
53
|
-
gl.useProgram(_combineProgram.program);
|
|
54
|
-
gl.uniform1f(_combineProgram.u_exposure, options.exposure || 1.0);
|
|
55
|
-
gl.uniform1f(_combineProgram.u_gamma, options.gamma || 1.0);
|
|
56
|
-
gl.uniform1f(_combineProgram.u_final_alpha_ratio, options.finalAlphaRatio || 1.0);
|
|
57
|
-
gl.useProgram(currentProgram);
|
|
58
|
-
}
|
|
59
|
-
setPremultipliedAlpha(boolean) {
|
|
60
|
-
if (typeof boolean !== 'boolean') {
|
|
61
|
-
console.warn("boolean should be a boolean value, but got", boolean);
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
this._premultipliedAlpha = boolean;
|
|
65
|
-
}
|
|
66
|
-
/**
|
|
67
|
-
* @param {number} alpha 0 ~ 1
|
|
68
|
-
* @returns
|
|
69
|
-
*/
|
|
70
|
-
setAlphaThreshold(alpha) {
|
|
71
|
-
if (alpha < 0 || alpha > 1) {
|
|
72
|
-
console.warn("alpha should be between 0 and 1, but got", alpha);
|
|
73
|
-
return;
|
|
74
|
-
}
|
|
75
|
-
const { gl, _blurProgram } = this;
|
|
76
|
-
const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
77
|
-
gl.useProgram(_blurProgram.program);
|
|
78
|
-
gl.uniform1f(_blurProgram.u_alpha_threshold, alpha);
|
|
79
|
-
gl.useProgram(currentProgram);
|
|
80
|
-
}
|
|
81
|
-
/**
|
|
82
|
-
* @param {number} gamma 0 ~ inf
|
|
83
|
-
*/
|
|
84
|
-
setGamma(gamma) {
|
|
85
|
-
if (gamma < 0) {
|
|
86
|
-
console.warn("gamma should be equal or greater than 0, but got", gamma);
|
|
87
|
-
return;
|
|
88
|
-
}
|
|
89
|
-
const { gl, _combineProgram } = this;
|
|
90
|
-
const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
91
|
-
gl.useProgram(_combineProgram.program);
|
|
92
|
-
gl.uniform1f(_combineProgram.u_gamma, gamma);
|
|
93
|
-
gl.useProgram(currentProgram);
|
|
94
|
-
}
|
|
95
|
-
/**
|
|
96
|
-
*
|
|
97
|
-
* @param {number} exposure 0 ~ inf
|
|
98
|
-
* @returns
|
|
99
|
-
*/
|
|
100
|
-
setExposure(exposure) {
|
|
101
|
-
if (exposure < 0) {
|
|
102
|
-
console.warn("exposure should be equal or greater than 0, but got", exposure);
|
|
103
|
-
return;
|
|
104
|
-
}
|
|
105
|
-
const { gl, _combineProgram } = this;
|
|
106
|
-
const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
107
|
-
gl.useProgram(_combineProgram.program);
|
|
108
|
-
gl.uniform1f(_combineProgram.u_exposure, exposure);
|
|
109
|
-
gl.useProgram(currentProgram);
|
|
110
|
-
}
|
|
111
|
-
/**
|
|
112
|
-
*
|
|
113
|
-
* @param {number} ratio 0 ~ 1
|
|
114
|
-
* @returns
|
|
115
|
-
*/
|
|
116
|
-
setFinalAlphaRatio(ratio) {
|
|
117
|
-
if (ratio < 0 || ratio > 1) {
|
|
118
|
-
console.warn("ratio should be between 0 and 1, but got", ratio);
|
|
119
|
-
return;
|
|
120
|
-
}
|
|
121
|
-
const { gl, _combineProgram } = this;
|
|
122
|
-
const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
123
|
-
gl.useProgram(_combineProgram.program);
|
|
124
|
-
gl.uniform1f(_combineProgram.u_final_alpha_ratio, ratio);
|
|
125
|
-
gl.useProgram(currentProgram);
|
|
126
|
-
}
|
|
127
|
-
/**
|
|
128
|
-
* @param {Array.<Number>} weight [w1, w2, w3, w4, w5]
|
|
129
|
-
*/
|
|
130
|
-
setBlurWeights(weights) {
|
|
131
|
-
if (weights.length !== 5) {
|
|
132
|
-
console.warn("weights should be an array of 5 numbers, but got", weights);
|
|
133
|
-
return;
|
|
134
|
-
}
|
|
135
|
-
const { gl, _blurProgram } = this;
|
|
136
|
-
const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
137
|
-
gl.useProgram(_blurProgram.program);
|
|
138
|
-
gl.uniform1fv(_blurProgram.u_weight, weights);
|
|
139
|
-
gl.useProgram(currentProgram);
|
|
140
|
-
}
|
|
141
|
-
/**
|
|
142
|
-
* @param {number} routeAlpha 0 ~ 1
|
|
143
|
-
*/
|
|
144
|
-
setRouteAlpha(routeAlpha) {
|
|
145
|
-
if (routeAlpha < 0 || routeAlpha > 1) {
|
|
146
|
-
console.warn("routeAlpha should be between 0 and 1, but got", routeAlpha);
|
|
147
|
-
return;
|
|
148
|
-
}
|
|
149
|
-
const { gl, _lineProgram } = this;
|
|
150
|
-
const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
151
|
-
gl.useProgram(_lineProgram.program);
|
|
152
|
-
gl.uniform1f(_lineProgram.u_route_alpha, routeAlpha);
|
|
153
|
-
gl.useProgram(currentProgram);
|
|
154
|
-
}
|
|
155
|
-
setGlow(boolean) {
|
|
156
|
-
if (typeof boolean !== 'boolean') {
|
|
157
|
-
console.warn("boolean should be a boolean value, but got", boolean);
|
|
158
|
-
return;
|
|
159
|
-
}
|
|
160
|
-
const { gl, _blurProgram } = this;
|
|
161
|
-
const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
162
|
-
gl.useProgram(_blurProgram.program);
|
|
163
|
-
gl.uniform1i(_blurProgram.u_glow, boolean);
|
|
164
|
-
gl.useProgram(currentProgram);
|
|
165
|
-
}
|
|
166
|
-
/**
|
|
167
|
-
* blur uses pingpong effect. This number decides how many times the blur will be applied.
|
|
168
|
-
* @param {+int} repetition
|
|
169
|
-
* @returns
|
|
170
|
-
*/
|
|
171
|
-
setBlurRepetition(repetition) {
|
|
172
|
-
if (repetition < 0 && repetition % 1 !== 0) {
|
|
173
|
-
console.warn("repetition should be an integer greater than 0, but got", repetition);
|
|
174
|
-
return;
|
|
175
|
-
}
|
|
176
|
-
this._blurRepetition = repetition;
|
|
177
|
-
}
|
|
178
|
-
/**
|
|
179
|
-
* Head Is colored as white. This number decides proportion of the head according to the total length of the line.
|
|
180
|
-
* @param {Number} percentage 0 ~ 1
|
|
181
|
-
*/
|
|
182
|
-
setHeadPercentage(percentage) {
|
|
183
|
-
if (percentage < 0 || 1 < percentage) {
|
|
184
|
-
console.warn("percentage should be between 0 and 1, but got", percentage);
|
|
185
|
-
return;
|
|
186
|
-
}
|
|
187
|
-
;
|
|
188
|
-
const { gl, _lineProgram } = this;
|
|
189
|
-
const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
190
|
-
gl.useProgram(_lineProgram.program);
|
|
191
|
-
gl.uniform1f(_lineProgram.u_head_percentage, percentage);
|
|
192
|
-
gl.useProgram(currentProgram);
|
|
193
|
-
}
|
|
194
|
-
_createCombineProgram() {
|
|
195
|
-
const gl = this.gl;
|
|
196
|
-
const vertexShader = `#version 300 es
|
|
197
|
-
precision lowp float;
|
|
198
|
-
|
|
199
|
-
in vec2 a_position;
|
|
200
|
-
|
|
201
|
-
out vec2 v_texcoord;
|
|
202
|
-
|
|
203
|
-
void main() {
|
|
204
|
-
gl_Position = vec4(a_position, 0.0, 1.0);
|
|
205
|
-
v_texcoord = a_position.xy * 0.5 + 0.5;
|
|
206
|
-
}
|
|
207
|
-
`;
|
|
208
|
-
const fragmentShader = `#version 300 es
|
|
209
|
-
precision lowp float;
|
|
210
|
-
|
|
211
|
-
in vec2 v_texcoord;
|
|
212
|
-
|
|
213
|
-
uniform sampler2D u_main_texture;
|
|
214
|
-
uniform sampler2D u_bloom_texture;
|
|
215
|
-
|
|
216
|
-
uniform float u_exposure;
|
|
217
|
-
uniform float u_gamma;
|
|
218
|
-
uniform float u_final_alpha_ratio;
|
|
219
|
-
|
|
220
|
-
out vec4 outColor;
|
|
221
|
-
|
|
222
|
-
void main() {
|
|
223
|
-
vec4 hdrColor = texture(u_main_texture, v_texcoord);
|
|
224
|
-
vec4 bloomColor = texture(u_bloom_texture, v_texcoord);
|
|
225
|
-
vec4 result;
|
|
226
|
-
if (bloomColor.a > 0.09){
|
|
227
|
-
result = bloomColor * u_exposure;
|
|
228
|
-
} else {
|
|
229
|
-
result = hdrColor + bloomColor * u_exposure;
|
|
230
|
-
}
|
|
231
|
-
result = pow(result, vec4(1.0 / u_gamma));
|
|
232
|
-
outColor = vec4(result.rgb, result.a * u_final_alpha_ratio);
|
|
233
|
-
}
|
|
234
|
-
`;
|
|
235
|
-
const program = createProgram(this.gl, vertexShader, fragmentShader);
|
|
236
|
-
const buffer = gl.createBuffer();
|
|
237
|
-
const a_position = gl.getAttribLocation(program, "a_position");
|
|
238
|
-
const vao = gl.createVertexArray();
|
|
239
|
-
gl.bindVertexArray(vao);
|
|
240
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
241
|
-
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
|
|
242
|
-
-1, -1,
|
|
243
|
-
1, -1,
|
|
244
|
-
1, 1,
|
|
245
|
-
-1, -1,
|
|
246
|
-
1, 1,
|
|
247
|
-
-1, 1,
|
|
248
|
-
]), gl.STATIC_DRAW);
|
|
249
|
-
gl.enableVertexAttribArray(a_position);
|
|
250
|
-
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
|
|
251
|
-
gl.bindVertexArray(null);
|
|
252
|
-
return {
|
|
253
|
-
program: program,
|
|
254
|
-
vao: vao,
|
|
255
|
-
u_main_texture: gl.getUniformLocation(program, "u_main_texture"),
|
|
256
|
-
u_bloom_texture: gl.getUniformLocation(program, "u_bloom_texture"),
|
|
257
|
-
u_exposure: gl.getUniformLocation(program, "u_exposure"),
|
|
258
|
-
u_gamma: gl.getUniformLocation(program, "u_gamma"),
|
|
259
|
-
u_final_alpha_ratio: gl.getUniformLocation(program, "u_final_alpha_ratio"),
|
|
260
|
-
};
|
|
261
|
-
}
|
|
262
|
-
_createBlurProgram() {
|
|
263
|
-
const gl = this.gl;
|
|
264
|
-
const vertexShader = `#version 300 es
|
|
265
|
-
precision highp float;
|
|
266
|
-
|
|
267
|
-
in vec2 a_position;
|
|
268
|
-
out vec2 v_texcoord;
|
|
269
|
-
|
|
270
|
-
void main() {
|
|
271
|
-
gl_Position = vec4(a_position, 0.0, 1.0);
|
|
272
|
-
v_texcoord = a_position.xy * 0.5 + 0.5;
|
|
273
|
-
}
|
|
274
|
-
`;
|
|
275
|
-
const fragmentShader = `#version 300 es
|
|
276
|
-
precision highp float;
|
|
277
|
-
|
|
278
|
-
in vec2 v_texcoord;
|
|
279
|
-
|
|
280
|
-
uniform sampler2D u_texture;
|
|
281
|
-
uniform bool u_horizontal;
|
|
282
|
-
uniform float u_weight[5];
|
|
283
|
-
uniform float u_alpha_threshold;
|
|
284
|
-
uniform bool u_glow;
|
|
285
|
-
out vec4 outColor;
|
|
286
|
-
|
|
287
|
-
void main()
|
|
288
|
-
{
|
|
289
|
-
vec2 tex_offset = vec2(
|
|
290
|
-
1.0 / float(textureSize(u_texture, 0).x),
|
|
291
|
-
1.0 / float(textureSize(u_texture, 0).y) ); // gets size of single texel
|
|
292
|
-
vec3 color = vec3(0.0);
|
|
293
|
-
float total_alpha = texture(u_texture, v_texcoord).a * u_weight[0];
|
|
294
|
-
if (total_alpha > 0.0){
|
|
295
|
-
color = texture(u_texture, v_texcoord).rgb;
|
|
296
|
-
}
|
|
297
|
-
vec2 offset = vec2(0.0);
|
|
298
|
-
float alpha;
|
|
299
|
-
float color_count = 0.0;
|
|
300
|
-
if (!u_glow){
|
|
301
|
-
if(u_horizontal){
|
|
302
|
-
for(int i = 1; i < 5; ++i)
|
|
303
|
-
{
|
|
304
|
-
offset = vec2(tex_offset.x * float(i), 0.0);
|
|
305
|
-
alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];
|
|
306
|
-
|
|
307
|
-
if (alpha > u_alpha_threshold){
|
|
308
|
-
// color = max( color, texture(u_texture, v_texcoord + offset).rgb);
|
|
309
|
-
color += texture(u_texture, v_texcoord + offset).rgb;
|
|
310
|
-
total_alpha += alpha;
|
|
311
|
-
color_count += 1.0;
|
|
312
|
-
}
|
|
313
|
-
alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
|
|
314
|
-
if (alpha > u_alpha_threshold){
|
|
315
|
-
// color = max( color, texture(u_texture, v_texcoord - offset).rgb);
|
|
316
|
-
color += texture(u_texture, v_texcoord - offset).rgb ;
|
|
317
|
-
total_alpha += alpha;
|
|
318
|
-
color_count += 1.0;
|
|
319
|
-
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
|
-
} else {
|
|
323
|
-
for(int i = 1; i < 5; ++i)
|
|
324
|
-
{
|
|
325
|
-
offset = vec2(0.0, tex_offset.y * float(i));
|
|
326
|
-
alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];
|
|
327
|
-
if (alpha > u_alpha_threshold){
|
|
328
|
-
// color = max( color , texture(u_texture, v_texcoord + offset).rgb);
|
|
329
|
-
color += texture(u_texture, v_texcoord + offset).rgb;
|
|
330
|
-
total_alpha += alpha;
|
|
331
|
-
color_count += 1.0;
|
|
332
|
-
|
|
333
|
-
}
|
|
334
|
-
alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
|
|
335
|
-
if (alpha > u_alpha_threshold){
|
|
336
|
-
// color = max( color, texture(u_texture, v_texcoord - offset).rgb );
|
|
337
|
-
color += texture(u_texture, v_texcoord - offset).rgb ;
|
|
338
|
-
total_alpha += alpha;
|
|
339
|
-
color_count += 1.0;
|
|
340
|
-
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
}
|
|
345
|
-
if (color_count > 0.0){
|
|
346
|
-
color /= color_count;
|
|
347
|
-
}
|
|
348
|
-
} else {
|
|
349
|
-
if(u_horizontal)
|
|
350
|
-
{
|
|
351
|
-
for(int i = 1; i < 5; ++i)
|
|
352
|
-
{
|
|
353
|
-
offset = vec2(tex_offset.x * float(i), 0.0);
|
|
354
|
-
alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];
|
|
355
|
-
|
|
356
|
-
if (alpha > u_alpha_threshold){
|
|
357
|
-
color = max( color, texture(u_texture, v_texcoord + offset).rgb);
|
|
358
|
-
total_alpha += alpha;
|
|
359
|
-
}
|
|
360
|
-
alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
|
|
361
|
-
if (alpha > u_alpha_threshold){
|
|
362
|
-
color = max( color, texture(u_texture, v_texcoord - offset).rgb);
|
|
363
|
-
|
|
364
|
-
total_alpha += alpha;
|
|
365
|
-
}
|
|
366
|
-
}
|
|
367
|
-
}
|
|
368
|
-
else
|
|
369
|
-
{
|
|
370
|
-
for(int i = 1; i < 5; ++i)
|
|
371
|
-
{
|
|
372
|
-
offset = vec2(0.0, tex_offset.y * float(i));
|
|
373
|
-
alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];
|
|
374
|
-
if (alpha > u_alpha_threshold){
|
|
375
|
-
color = max( color, texture(u_texture, v_texcoord + offset).rgb);
|
|
376
|
-
total_alpha += alpha;
|
|
377
|
-
}
|
|
378
|
-
alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
|
|
379
|
-
if (alpha > u_alpha_threshold){
|
|
380
|
-
color = max( color, texture(u_texture, v_texcoord - offset).rgb );
|
|
381
|
-
total_alpha += alpha;
|
|
382
|
-
}
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
|
-
outColor = vec4(color, total_alpha);
|
|
387
|
-
}
|
|
388
|
-
`;
|
|
389
|
-
const program = createProgram(this.gl, vertexShader, fragmentShader);
|
|
390
|
-
const buffer = gl.createBuffer();
|
|
391
|
-
const a_position = gl.getAttribLocation(program, "a_position");
|
|
392
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
393
|
-
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
|
|
394
|
-
-1, -1,
|
|
395
|
-
1, -1,
|
|
396
|
-
1, 1,
|
|
397
|
-
-1, -1,
|
|
398
|
-
1, 1,
|
|
399
|
-
-1, 1,
|
|
400
|
-
]), gl.STATIC_DRAW);
|
|
401
|
-
const vao = gl.createVertexArray();
|
|
402
|
-
gl.bindVertexArray(vao);
|
|
403
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
404
|
-
gl.enableVertexAttribArray(a_position);
|
|
405
|
-
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
|
|
406
|
-
gl.bindVertexArray(null);
|
|
407
|
-
return {
|
|
408
|
-
program: program,
|
|
409
|
-
vao: vao,
|
|
410
|
-
u_texture: gl.getUniformLocation(program, "u_texture"),
|
|
411
|
-
u_horizontal: gl.getUniformLocation(program, "u_horizontal"),
|
|
412
|
-
u_weight: gl.getUniformLocation(program, "u_weight"),
|
|
413
|
-
u_alpha_threshold: gl.getUniformLocation(program, "u_alpha_threshold"),
|
|
414
|
-
u_glow: gl.getUniformLocation(program, "u_glow"),
|
|
415
|
-
};
|
|
416
|
-
}
|
|
417
|
-
_createBlurProgramHOLD() {
|
|
418
|
-
const gl = this.gl;
|
|
419
|
-
const vertexShader = `#version 300 es
|
|
420
|
-
precision highp float;
|
|
421
|
-
|
|
422
|
-
in vec2 a_position;
|
|
423
|
-
out vec2 v_texcoord;
|
|
424
|
-
|
|
425
|
-
void main() {
|
|
426
|
-
gl_Position = vec4(a_position, 0.0, 1.0);
|
|
427
|
-
v_texcoord = a_position.xy * 0.5 + 0.5;
|
|
428
|
-
}
|
|
429
|
-
`;
|
|
430
|
-
const fragmentShader = `#version 300 es
|
|
431
|
-
precision highp float;
|
|
432
|
-
|
|
433
|
-
in vec2 v_texcoord;
|
|
434
|
-
|
|
435
|
-
uniform sampler2D u_texture;
|
|
436
|
-
uniform bool u_horizontal;
|
|
437
|
-
uniform float u_weight[5];
|
|
438
|
-
uniform float u_alpha_threshold;
|
|
439
|
-
|
|
440
|
-
out vec4 outColor;
|
|
441
|
-
|
|
442
|
-
void main()
|
|
443
|
-
{
|
|
444
|
-
vec2 tex_offset = vec2(1) / vec2(textureSize(u_texture, 0)); // gets size of single texel
|
|
445
|
-
vec3 color = vec3(0.0);
|
|
446
|
-
float total_alpha = texture(u_texture, v_texcoord).a * u_weight[0];
|
|
447
|
-
if (total_alpha > 0.0){
|
|
448
|
-
color = texture(u_texture, v_texcoord).rgb;
|
|
449
|
-
}
|
|
450
|
-
vec2 offset = vec2(0.0);
|
|
451
|
-
float alpha;
|
|
452
|
-
|
|
453
|
-
if(u_horizontal)
|
|
454
|
-
{
|
|
455
|
-
for(int i = 1; i < 5; ++i)
|
|
456
|
-
{
|
|
457
|
-
offset = vec2(tex_offset.x * float(i), 0.0);
|
|
458
|
-
alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];
|
|
459
|
-
|
|
460
|
-
if (alpha > u_alpha_threshold){
|
|
461
|
-
color = max( color, texture(u_texture, v_texcoord + offset).rgb);
|
|
462
|
-
total_alpha += alpha;
|
|
463
|
-
}
|
|
464
|
-
alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
|
|
465
|
-
if (alpha > u_alpha_threshold){
|
|
466
|
-
color = max( color, texture(u_texture, v_texcoord - offset).rgb);
|
|
467
|
-
total_alpha += alpha;
|
|
468
|
-
}
|
|
469
|
-
}
|
|
470
|
-
}
|
|
471
|
-
else
|
|
472
|
-
{
|
|
473
|
-
for(int i = 1; i < 5; ++i)
|
|
474
|
-
{
|
|
475
|
-
offset = vec2(0.0, tex_offset.y * float(i));
|
|
476
|
-
alpha = texture(u_texture, v_texcoord + offset).a * u_weight[i];
|
|
477
|
-
if (alpha > u_alpha_threshold){
|
|
478
|
-
color = max( color , texture(u_texture, v_texcoord + offset).rgb);
|
|
479
|
-
total_alpha += alpha;
|
|
480
|
-
}
|
|
481
|
-
alpha = texture(u_texture, v_texcoord - offset).a * u_weight[i];
|
|
482
|
-
if (alpha > u_alpha_threshold){
|
|
483
|
-
color = max( color, texture(u_texture, v_texcoord - offset).rgb );
|
|
484
|
-
total_alpha += alpha;
|
|
485
|
-
}
|
|
486
|
-
}
|
|
487
|
-
}
|
|
488
|
-
outColor = vec4(color, total_alpha);
|
|
489
|
-
}
|
|
490
|
-
`;
|
|
491
|
-
const program = createProgram(this.gl, vertexShader, fragmentShader);
|
|
492
|
-
const buffer = gl.createBuffer();
|
|
493
|
-
const a_position = gl.getAttribLocation(program, "a_position");
|
|
494
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
495
|
-
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
|
|
496
|
-
-1, -1,
|
|
497
|
-
1, -1,
|
|
498
|
-
1, 1,
|
|
499
|
-
-1, -1,
|
|
500
|
-
1, 1,
|
|
501
|
-
-1, 1,
|
|
502
|
-
]), gl.STATIC_DRAW);
|
|
503
|
-
const vao = gl.createVertexArray();
|
|
504
|
-
gl.bindVertexArray(vao);
|
|
505
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
506
|
-
gl.enableVertexAttribArray(a_position);
|
|
507
|
-
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
|
|
508
|
-
gl.bindVertexArray(null);
|
|
509
|
-
return {
|
|
510
|
-
program: program,
|
|
511
|
-
vao: vao,
|
|
512
|
-
u_texture: gl.getUniformLocation(program, "u_texture"),
|
|
513
|
-
u_horizontal: gl.getUniformLocation(program, "u_horizontal"),
|
|
514
|
-
u_weight: gl.getUniformLocation(program, "u_weight"),
|
|
515
|
-
u_alpha_threshold: gl.getUniformLocation(program, "u_alpha_threshold"),
|
|
516
|
-
};
|
|
517
|
-
}
|
|
518
|
-
resize(width, height) {
|
|
519
|
-
const { gl, _lineProgram } = this;
|
|
520
|
-
this._width = width;
|
|
521
|
-
this._height = height;
|
|
522
|
-
const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
523
|
-
this._createInnerTextures();
|
|
524
|
-
gl.useProgram(_lineProgram.program);
|
|
525
|
-
gl.uniform2fv(_lineProgram.u_scrWH, [width, height]);
|
|
526
|
-
gl.useProgram(currentProgram);
|
|
527
|
-
}
|
|
528
|
-
_createLineProgram() {
|
|
529
|
-
const gl = this.gl;
|
|
530
|
-
const vertexShader = `#version 300 es
|
|
531
|
-
precision highp float;
|
|
532
|
-
|
|
533
|
-
in vec3 a_position;
|
|
534
|
-
in float a_time;
|
|
535
|
-
in vec3 a_color;
|
|
536
|
-
in float a_track_start_time;
|
|
537
|
-
in float a_track_end_time;
|
|
538
|
-
|
|
539
|
-
uniform mat4 uModelViewMatrix;
|
|
540
|
-
uniform mat4 uProjectionMatrix;
|
|
541
|
-
uniform vec3 uTranslate;
|
|
542
|
-
|
|
543
|
-
uniform bool u_is_3d;
|
|
544
|
-
uniform vec2 u_mapWH;
|
|
545
|
-
uniform vec2 u_scrWH;
|
|
546
|
-
|
|
547
|
-
out float v_time;
|
|
548
|
-
out vec3 v_color;
|
|
549
|
-
out float v_track_start_time;
|
|
550
|
-
out float v_track_end_time;
|
|
551
|
-
|
|
552
|
-
${shaderfunctions.pixelXYToCartesian3DPoint}
|
|
553
|
-
${shaderfunctions.pixelXYToCartesian2DPoint}
|
|
554
|
-
|
|
555
|
-
void main() {
|
|
556
|
-
v_time = a_time;
|
|
557
|
-
v_color = a_color;
|
|
558
|
-
v_track_start_time = a_track_start_time;
|
|
559
|
-
v_track_end_time = a_track_end_time;
|
|
560
|
-
if (u_is_3d){
|
|
561
|
-
vec3 pos = pixelXYToCartesian3DPoint(a_position);
|
|
562
|
-
gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(pos - uTranslate, 1.0);
|
|
563
|
-
} else {
|
|
564
|
-
vec2 xy = pixelXYToCartesian2DPoint(a_position.xy, uTranslate.xy, u_mapWH, u_scrWH);
|
|
565
|
-
gl_Position = uProjectionMatrix * vec4(xy.x, xy.y, 0.0, 1.0);
|
|
566
|
-
|
|
567
|
-
}
|
|
568
|
-
gl_PointSize = 1.0;
|
|
569
|
-
}
|
|
570
|
-
`;
|
|
571
|
-
const fragmentShader = `#version 300 es
|
|
572
|
-
precision lowp float;
|
|
573
|
-
|
|
574
|
-
in float v_time;
|
|
575
|
-
in vec3 v_color;
|
|
576
|
-
in float v_track_start_time;
|
|
577
|
-
in float v_track_end_time;
|
|
578
|
-
|
|
579
|
-
uniform float u_head_time;
|
|
580
|
-
uniform float u_tail_time;
|
|
581
|
-
|
|
582
|
-
uniform float u_head_percentage;
|
|
583
|
-
uniform float u_route_alpha;
|
|
584
|
-
|
|
585
|
-
layout(location = 0) out vec4 outColor0;
|
|
586
|
-
layout(location = 1) out vec4 outColor1;
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
void main() {
|
|
590
|
-
if ( u_tail_time > v_track_end_time || u_head_time < v_track_start_time) discard;
|
|
591
|
-
// if ( v_time < u_tail_time || v_time > u_head_time) discard;
|
|
592
|
-
|
|
593
|
-
float gap = u_head_time - u_tail_time;
|
|
594
|
-
float head = gap * u_head_percentage;
|
|
595
|
-
float dist = u_head_time - v_time;
|
|
596
|
-
if ((v_time > u_head_time ) || (v_time < u_tail_time) ){
|
|
597
|
-
|
|
598
|
-
outColor0 = vec4(v_color , u_route_alpha);
|
|
599
|
-
} else if (dist < head) {
|
|
600
|
-
// white head
|
|
601
|
-
outColor0 = vec4(1.0, 1.0, 1.0, 0.77 + ( u_route_alpha * 0.23));
|
|
602
|
-
outColor1 = vec4(1.0, 1.0, 1.0, 0.77 + ( u_route_alpha * 0.23));
|
|
603
|
-
//
|
|
604
|
-
} else {
|
|
605
|
-
// colored body of lines
|
|
606
|
-
float alpha = ((gap - dist) / gap) / 2.0 + 0.5;
|
|
607
|
-
outColor0 = vec4(v_color , alpha );
|
|
608
|
-
outColor1 = vec4(v_color , alpha );
|
|
609
|
-
}
|
|
610
|
-
}
|
|
611
|
-
`;
|
|
612
|
-
const program = createProgram(this.gl, vertexShader, fragmentShader);
|
|
613
|
-
const a_position = gl.getAttribLocation(program, "a_position");
|
|
614
|
-
const a_time = gl.getAttribLocation(program, "a_time");
|
|
615
|
-
const a_track_start_time = gl.getAttribLocation(program, "a_track_start_time");
|
|
616
|
-
const a_track_end_time = gl.getAttribLocation(program, "a_track_end_time");
|
|
617
|
-
const a_color = gl.getAttribLocation(program, "a_color");
|
|
618
|
-
const vao = gl.createVertexArray();
|
|
619
|
-
gl.bindVertexArray(vao);
|
|
620
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, this._inBuffer);
|
|
621
|
-
gl.enableVertexAttribArray(a_position);
|
|
622
|
-
gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, 36, 0);
|
|
623
|
-
gl.enableVertexAttribArray(a_time);
|
|
624
|
-
gl.vertexAttribPointer(a_time, 1, gl.FLOAT, false, 36, 12);
|
|
625
|
-
gl.enableVertexAttribArray(a_color);
|
|
626
|
-
gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, 36, 16);
|
|
627
|
-
gl.enableVertexAttribArray(a_track_start_time);
|
|
628
|
-
gl.vertexAttribPointer(a_track_start_time, 1, gl.FLOAT, false, 36, 28);
|
|
629
|
-
gl.enableVertexAttribArray(a_track_end_time);
|
|
630
|
-
gl.vertexAttribPointer(a_track_end_time, 1, gl.FLOAT, false, 36, 32);
|
|
631
|
-
gl.bindVertexArray(null);
|
|
632
|
-
return {
|
|
633
|
-
program: program,
|
|
634
|
-
vao: vao,
|
|
635
|
-
u_head_time: gl.getUniformLocation(program, "u_head_time"),
|
|
636
|
-
u_tail_time: gl.getUniformLocation(program, "u_tail_time"),
|
|
637
|
-
uTranslate: gl.getUniformLocation(program, "uTranslate"),
|
|
638
|
-
uModelViewMatrix: gl.getUniformLocation(program, "uModelViewMatrix"),
|
|
639
|
-
uProjectionMatrix: gl.getUniformLocation(program, "uProjectionMatrix"),
|
|
640
|
-
u_is_3d: gl.getUniformLocation(program, "u_is_3d"),
|
|
641
|
-
u_mapWH: gl.getUniformLocation(program, "u_mapWH"),
|
|
642
|
-
u_scrWH: gl.getUniformLocation(program, "u_scrWH"),
|
|
643
|
-
u_head_percentage: gl.getUniformLocation(program, "u_head_percentage"),
|
|
644
|
-
u_route_alpha: gl.getUniformLocation(program, "u_route_alpha"),
|
|
645
|
-
};
|
|
646
|
-
}
|
|
647
|
-
/**
|
|
648
|
-
* @param { Float32Array} data // [x, y, z, time, x, y, z, time, ...]
|
|
649
|
-
*/
|
|
650
|
-
// setInBuffer(data) {
|
|
651
|
-
// const gl = this.gl;
|
|
652
|
-
// gl.bindBuffer(gl.ARRAY_BUFFER, this._inBuffer);
|
|
653
|
-
// gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
654
|
-
// }
|
|
655
|
-
setIs3D(is3d) {
|
|
656
|
-
const { gl, _lineProgram } = this;
|
|
657
|
-
const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
658
|
-
gl.useProgram(_lineProgram.program);
|
|
659
|
-
gl.uniform1i(_lineProgram.u_is_3d, is3d);
|
|
660
|
-
gl.useProgram(currentProgram);
|
|
661
|
-
}
|
|
662
|
-
setTotalLength(totalLength) {
|
|
663
|
-
this._totalLength = totalLength;
|
|
664
|
-
}
|
|
665
|
-
_createTextures() {
|
|
666
|
-
const { gl, _width, _height } = this;
|
|
667
|
-
const texture = gl.createTexture();
|
|
668
|
-
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
669
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); // UNSIGNED_BYTE
|
|
670
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
671
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
672
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
673
|
-
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
674
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
675
|
-
return texture;
|
|
676
|
-
}
|
|
677
|
-
_resetTexture() {
|
|
678
|
-
const { gl, _width, _height } = this;
|
|
679
|
-
gl.bindTexture(gl.TEXTURE_2D, this._middleTexture); // UNSIGNED_BYTE
|
|
680
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
|
|
681
|
-
gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[0]);
|
|
682
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
|
|
683
|
-
gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[1]);
|
|
684
|
-
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, _width, _height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
|
|
685
|
-
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
686
|
-
}
|
|
687
|
-
draw(u_head_time, u_tail_time, uProjectionMatrix, uModelViewMatrix, uTranslate, u_mapWH = null) {
|
|
688
|
-
const { gl, _lineProgram, _blurProgram, _blurRepetition, _premultipliedAlpha } = this;
|
|
689
|
-
this._resetTexture();
|
|
690
|
-
// if (_premultipliedAlpha) {
|
|
691
|
-
gl.enable(gl.BLEND);
|
|
692
|
-
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
|
693
|
-
// }
|
|
694
|
-
{ // draw lines
|
|
695
|
-
gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
|
|
696
|
-
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._middleTexture, 0);
|
|
697
|
-
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, this._blurTextures[0], 0);
|
|
698
|
-
gl.drawBuffers([
|
|
699
|
-
gl.COLOR_ATTACHMENT0,
|
|
700
|
-
gl.COLOR_ATTACHMENT1,
|
|
701
|
-
]);
|
|
702
|
-
gl.useProgram(_lineProgram.program);
|
|
703
|
-
gl.uniform1f(_lineProgram.u_head_time, u_head_time);
|
|
704
|
-
gl.uniform1f(_lineProgram.u_tail_time, u_tail_time);
|
|
705
|
-
gl.uniformMatrix4fv(_lineProgram.uProjectionMatrix, false, uProjectionMatrix);
|
|
706
|
-
if (u_mapWH) {
|
|
707
|
-
gl.uniform2fv(_lineProgram.u_mapWH, u_mapWH);
|
|
708
|
-
}
|
|
709
|
-
else {
|
|
710
|
-
gl.uniformMatrix4fv(_lineProgram.uModelViewMatrix, false, uModelViewMatrix);
|
|
711
|
-
}
|
|
712
|
-
gl.uniform3fv(_lineProgram.uTranslate, uTranslate);
|
|
713
|
-
gl.bindVertexArray(_lineProgram.vao);
|
|
714
|
-
gl.drawArrays(gl.LINES, 0, this._totalLength);
|
|
715
|
-
gl.drawBuffers([
|
|
716
|
-
gl.COLOR_ATTACHMENT0,
|
|
717
|
-
gl.NONE
|
|
718
|
-
]);
|
|
719
|
-
}
|
|
720
|
-
{ // blur ping pong
|
|
721
|
-
gl.useProgram(_blurProgram.program);
|
|
722
|
-
gl.bindVertexArray(_blurProgram.vao);
|
|
723
|
-
for (let i = 0; i < _blurRepetition * 2; i++) {
|
|
724
|
-
gl.bindFramebuffer(gl.FRAMEBUFFER, this._blurFrameBuffers[i % 2]);
|
|
725
|
-
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._blurTextures[(i + 1) % 2], 0);
|
|
726
|
-
gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[i % 2]);
|
|
727
|
-
gl.uniform1i(_blurProgram.u_texture, 0);
|
|
728
|
-
gl.uniform1f(_blurProgram.u_horizontal, i % 2 == 0);
|
|
729
|
-
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
|
730
|
-
}
|
|
731
|
-
}
|
|
732
|
-
if (!_premultipliedAlpha) {
|
|
733
|
-
defaultblendfunction(gl);
|
|
734
|
-
}
|
|
735
|
-
{ // combine
|
|
736
|
-
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
737
|
-
gl.useProgram(this._combineProgram.program);
|
|
738
|
-
gl.bindVertexArray(this._combineProgram.vao);
|
|
739
|
-
gl.activeTexture(gl.TEXTURE1);
|
|
740
|
-
gl.bindTexture(gl.TEXTURE_2D, this._blurTextures[1]);
|
|
741
|
-
gl.uniform1i(this._combineProgram.u_bloom_texture, 1);
|
|
742
|
-
gl.activeTexture(gl.TEXTURE0);
|
|
743
|
-
gl.bindTexture(gl.TEXTURE_2D, this._middleTexture);
|
|
744
|
-
gl.uniform1i(this._combineProgram.u_main_texture, 0);
|
|
745
|
-
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
|
746
|
-
}
|
|
747
|
-
gl.bindVertexArray(null);
|
|
748
|
-
if (_premultipliedAlpha) {
|
|
749
|
-
defaultblendfunction(gl);
|
|
750
|
-
}
|
|
751
|
-
}
|
|
752
|
-
free() {
|
|
753
|
-
const { gl, _lineProgram, _blurProgram, _combineProgram } = this;
|
|
754
|
-
gl.deleteBuffer(this._inBuffer);
|
|
755
|
-
gl.deleteFramebuffer(this._frameBuffer);
|
|
756
|
-
gl.deleteFramebuffer(this._blurFrameBuffers[0]);
|
|
757
|
-
gl.deleteFramebuffer(this._blurFrameBuffers[1]);
|
|
758
|
-
// gl.deleteBuffer(this._middleTexture);
|
|
759
|
-
gl.deleteTexture(this._middleTexture);
|
|
760
|
-
gl.deleteTexture(this._blurTextures[0]);
|
|
761
|
-
gl.deleteTexture(this._blurTextures[1]);
|
|
762
|
-
gl.deleteVertexArray(_lineProgram.vao);
|
|
763
|
-
gl.deleteVertexArray(_blurProgram.vao);
|
|
764
|
-
gl.deleteVertexArray(_combineProgram.vao);
|
|
765
|
-
gl.deleteProgram(_lineProgram.program);
|
|
766
|
-
gl.deleteProgram(_blurProgram.program);
|
|
767
|
-
gl.deleteProgram(_combineProgram.program);
|
|
768
|
-
}
|
|
769
|
-
}
|