@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.
@@ -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
- }