@pirireis/webglobeplugins 0.10.10-alpha → 0.10.11-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/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 +0 -2
- package/util/heatwavedatamanager/index.js +1 -2
- 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/package.json
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { PointHeatmapFlow } from "./point-to-heat-map-flow";
|
|
2
|
-
// import { webworkerStr } from "../util/interpolation/timetrack/web-worker-str"; // TODO: Delete When this plugin is tested on production
|
|
3
2
|
import { createWorker } from "../util/interpolation/timetrack/index";
|
|
4
3
|
import { createTexture, getColorRampModed } from "../util";
|
|
5
4
|
import { opacityCheck, constraintFloat } from "../util/check/typecheck";
|
|
@@ -15,8 +14,6 @@ class PointHeatmapPlugin {
|
|
|
15
14
|
this._legendTexture = null;
|
|
16
15
|
this._throttleListener = null;
|
|
17
16
|
this._timeTracksAreSet = false;
|
|
18
|
-
// const blob = new Blob([webworkerStr], { type: 'application/javascript' });
|
|
19
|
-
// this.timeTrackInterpolationWorker = new Worker(URL.createObjectURL(blob), { type: 'module' });
|
|
20
17
|
this.timeTrackInterpolationWorker = createWorker();
|
|
21
18
|
this.timeTrackInterpolationWorker.onmessage = (e) => {
|
|
22
19
|
if (e.data.error) {
|
|
@@ -161,19 +161,9 @@ export class BufferManager extends BufferOffsetManager {
|
|
|
161
161
|
gl.bindVertexArray(null);
|
|
162
162
|
}
|
|
163
163
|
}
|
|
164
|
-
__centerMapMethod(rings, paddingAngles) {
|
|
165
|
-
return new Map([
|
|
166
|
-
["rings", rings],
|
|
167
|
-
["paddingAngles", paddingAngles]
|
|
168
|
-
]);
|
|
169
|
-
}
|
|
170
164
|
bindPaddingVAO() {
|
|
171
165
|
this.gl.bindVertexArray(this.vao);
|
|
172
166
|
}
|
|
173
|
-
//TODO: implement this
|
|
174
|
-
// insertBulk is gone. no update feature
|
|
175
|
-
// addBulk is added.
|
|
176
|
-
// deletes old centers given
|
|
177
167
|
insertBulk(data) {
|
|
178
168
|
const { gl, buffer } = this;
|
|
179
169
|
const deleteCentersList = [];
|
|
@@ -233,7 +223,6 @@ export class BufferManager extends BufferOffsetManager {
|
|
|
233
223
|
}
|
|
234
224
|
gl.bindBuffer(gl.ARRAY_BUFFER, null);
|
|
235
225
|
}
|
|
236
|
-
//TODO: test
|
|
237
226
|
updateCentersHide(data) {
|
|
238
227
|
const { gl, buffer } = this;
|
|
239
228
|
const items = [];
|
|
@@ -275,14 +264,6 @@ export class BufferManager extends BufferOffsetManager {
|
|
|
275
264
|
}
|
|
276
265
|
this._updatePartial(items, 4, gl, buffer);
|
|
277
266
|
}
|
|
278
|
-
__requiredSpaceForBulk(data) {
|
|
279
|
-
let space = 0;
|
|
280
|
-
for (const { paddingAngles, rings } of data) {
|
|
281
|
-
space += paddingAngles.length * rings.length;
|
|
282
|
-
}
|
|
283
|
-
return space;
|
|
284
|
-
}
|
|
285
|
-
// TODO: TEST IT WITH INSERT
|
|
286
267
|
removeCenters(centerIDs) {
|
|
287
268
|
const keys = [];
|
|
288
269
|
for (const centerID of centerIDs) {
|
|
@@ -300,6 +281,19 @@ export class BufferManager extends BufferOffsetManager {
|
|
|
300
281
|
}
|
|
301
282
|
this._removeFromBuffer(keys);
|
|
302
283
|
}
|
|
284
|
+
__requiredSpaceForBulk(data) {
|
|
285
|
+
let space = 0;
|
|
286
|
+
for (const { paddingAngles, rings } of data) {
|
|
287
|
+
space += paddingAngles.length * rings.length;
|
|
288
|
+
}
|
|
289
|
+
return space;
|
|
290
|
+
}
|
|
291
|
+
__centerMapMethod(rings, paddingAngles) {
|
|
292
|
+
return new Map([
|
|
293
|
+
["rings", rings],
|
|
294
|
+
["paddingAngles", paddingAngles]
|
|
295
|
+
]);
|
|
296
|
+
}
|
|
303
297
|
}
|
|
304
298
|
const offsetMapKey = (centerID, ringID, paddingAngle) => `${centerID}_${ringID}_${paddingAngle}`;
|
|
305
299
|
/**
|
package/timetracks/index.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import TimeTracks from './plugin';
|
|
2
|
-
import { Adaptor, fillSliceOfFloat32Array, createFloat32Array } from './adaptors';
|
|
3
1
|
import TimeTracksLineStrip from './plugin-line-strip';
|
|
4
2
|
import { addCuttingPointLineStrip, featuresToLineStringData, fillSliceOfFloat32ArrayLineStrip, latLongToPixelXY } from './adaptors-line-strip';
|
|
5
3
|
export { Adaptor, fillSliceOfFloat32Array, createFloat32Array, TimeTracks, TimeTracksLineStrip, addCuttingPointLineStrip, featuresToLineStringData, fillSliceOfFloat32ArrayLineStrip, latLongToPixelXY };
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
import PointCoordinatesDataCalculator1 from "./pointcoordinatesdatacalculator1";
|
|
2
1
|
import HeatWaveDataManager from "./datamanager";
|
|
3
|
-
export { HeatWaveDataManager
|
|
2
|
+
export { HeatWaveDataManager };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
// angle radius, rgba, dashRatio, rgbaMode
|
|
2
|
-
import { createProgram } from "../../util";
|
|
3
|
-
import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
|
|
4
|
-
import { longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYToGLPosition, circleLimpFromLongLatRadCenterCartesian3D, circleLimpFromLongLatRadCenterMercatorCompass, circleLimpFromLongLatRadCenterMercatorRealDistance, POLE } from "../../util/shaderfunctions/geometrytransformations";
|
|
5
|
-
import { noRegisterGlobeProgramCache } from "../programcache";
|
|
6
|
-
const EDGE_COUNT_ON_SPHERE = 50;
|
|
7
|
-
const vertexShaderSource = `#version 300 es
|
|
8
|
-
precision highp float;
|
|
9
|
-
|
|
10
|
-
${CameraUniformBlockString}
|
|
11
|
-
${longLatRadToMercator}
|
|
12
|
-
${longLatRadToCartesian3D}
|
|
13
|
-
${cartesian3DToGLPosition}
|
|
14
|
-
${mercatorXYToGLPosition}
|
|
15
|
-
${circleLimpFromLongLatRadCenterCartesian3D}
|
|
16
|
-
${circleLimpFromLongLatRadCenterMercatorCompass}
|
|
17
|
-
${circleLimpFromLongLatRadCenterMercatorRealDistance}
|
|
18
|
-
|
|
19
|
-
in vec2 center_point;
|
|
20
|
-
in float angle;
|
|
21
|
-
in float radius;
|
|
22
|
-
in vec4 rgba;
|
|
23
|
-
in float dash_ratio;
|
|
24
|
-
in float dash_opacity;
|
|
25
|
-
|
|
26
|
-
out vec4 v_color;
|
|
27
|
-
out float v_dash_ratio;
|
|
28
|
-
out float interpolation;
|
|
29
|
-
out float v_dash_opacity;
|
|
30
|
-
out vec2 v_limp;
|
|
31
|
-
// TODO: Draw World Boundaries
|
|
32
|
-
void main() {
|
|
33
|
-
if ( is3D ) {
|
|
34
|
-
interpolation = float( gl_VertexID ) / ${EDGE_COUNT_ON_SPHERE - 1}.0;
|
|
35
|
-
float radius_ = radius* interpolation;
|
|
36
|
-
vec3 position = circleLimpFromLongLatRadCenterCartesian3D( center_point, radius_, angle);
|
|
37
|
-
gl_Position = cartesian3DToGLPosition( position);
|
|
38
|
-
v_limp = vec2(0.0, 0.0);
|
|
39
|
-
} else {
|
|
40
|
-
interpolation = float( gl_VertexID );
|
|
41
|
-
float radius_ = radius * interpolation;
|
|
42
|
-
vec2 position = circleLimpFromLongLatRadCenterMercatorRealDistance( center_point, radius_, angle);
|
|
43
|
-
v_limp = position;
|
|
44
|
-
gl_Position = mercatorXYToGLPosition( position);
|
|
45
|
-
}
|
|
46
|
-
v_dash_opacity = dash_opacity;
|
|
47
|
-
v_color = rgba;
|
|
48
|
-
v_dash_ratio = dash_ratio;
|
|
49
|
-
}`;
|
|
50
|
-
const fragmentShaderSource = `#version 300 es
|
|
51
|
-
${POLE}
|
|
52
|
-
precision highp float;
|
|
53
|
-
|
|
54
|
-
uniform float opacity;
|
|
55
|
-
in vec4 v_color;
|
|
56
|
-
in float v_dash_ratio;
|
|
57
|
-
in float v_dash_opacity;
|
|
58
|
-
in float interpolation;
|
|
59
|
-
in vec2 v_limp;
|
|
60
|
-
out vec4 color;
|
|
61
|
-
|
|
62
|
-
void main() {
|
|
63
|
-
if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ color = vec4(0.0,0.0,0.0,0.0); return; }
|
|
64
|
-
color = vec4(v_color.rgb, v_color.a * opacity);
|
|
65
|
-
if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5 ) {
|
|
66
|
-
color.a *= v_dash_opacity;
|
|
67
|
-
}
|
|
68
|
-
}`;
|
|
69
|
-
class Logic {
|
|
70
|
-
constructor(globe) {
|
|
71
|
-
this.globe = globe;
|
|
72
|
-
this.gl = globe.gl;
|
|
73
|
-
this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
|
|
74
|
-
this._lastOpacity = 1;
|
|
75
|
-
const { gl, program } = this;
|
|
76
|
-
{ // assign attribute locations
|
|
77
|
-
gl.bindAttribLocation(program, 0, "center_point");
|
|
78
|
-
gl.bindAttribLocation(program, 1, "angle");
|
|
79
|
-
gl.bindAttribLocation(program, 2, "radius");
|
|
80
|
-
gl.bindAttribLocation(program, 3, "rgba");
|
|
81
|
-
gl.bindAttribLocation(program, 4, "dash_ratio");
|
|
82
|
-
gl.bindAttribLocation(program, 5, "dash_opacity");
|
|
83
|
-
}
|
|
84
|
-
{
|
|
85
|
-
this._opacityLocation = gl.getUniformLocation(program, "opacity");
|
|
86
|
-
const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
87
|
-
gl.useProgram(program);
|
|
88
|
-
gl.uniform1f(this._opacityLocation, this._lastOpacity);
|
|
89
|
-
gl.useProgram(currentProgram);
|
|
90
|
-
}
|
|
91
|
-
this.cameraBlockBindingPoint = 0;
|
|
92
|
-
const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
|
|
93
|
-
this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
|
|
94
|
-
gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBindingPoint);
|
|
95
|
-
}
|
|
96
|
-
draw(vao, length, opacity) {
|
|
97
|
-
const { gl, program, globe, cameraBlockTotem, cameraBlockBindingPoint } = this;
|
|
98
|
-
gl.useProgram(program);
|
|
99
|
-
if (opacity !== this._lastOpacity) {
|
|
100
|
-
gl.uniform1f(this._opacityLocation, opacity);
|
|
101
|
-
this._lastOpacity = opacity;
|
|
102
|
-
}
|
|
103
|
-
const drawCount = globe.api_GetCurrentGeometry() === 0 ? EDGE_COUNT_ON_SPHERE : 2;
|
|
104
|
-
gl.bindVertexArray(vao);
|
|
105
|
-
cameraBlockTotem.bind(cameraBlockBindingPoint);
|
|
106
|
-
// gl.disable(gl.DEPTH_TEST);
|
|
107
|
-
gl.drawArraysInstanced(gl.LINE_STRIP, 0, drawCount, length);
|
|
108
|
-
gl.bindVertexArray(null);
|
|
109
|
-
cameraBlockTotem.unbind(cameraBlockBindingPoint);
|
|
110
|
-
// gl.enable(gl.DEPTH_TEST);
|
|
111
|
-
}
|
|
112
|
-
createVAO(centerCoords, angle, radius, rgba, dashRatio, dashOpacity) {
|
|
113
|
-
const { gl } = this;
|
|
114
|
-
const vao = gl.createVertexArray();
|
|
115
|
-
gl.bindVertexArray(vao);
|
|
116
|
-
{
|
|
117
|
-
const { buffer, stride = 0, offset = 0 } = centerCoords;
|
|
118
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
119
|
-
gl.enableVertexAttribArray(0);
|
|
120
|
-
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, stride, offset);
|
|
121
|
-
gl.vertexAttribDivisor(0, 1);
|
|
122
|
-
}
|
|
123
|
-
{
|
|
124
|
-
const { buffer, stride = 0, offset = 0 } = angle;
|
|
125
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
126
|
-
gl.enableVertexAttribArray(1);
|
|
127
|
-
gl.vertexAttribPointer(1, 1, gl.FLOAT, false, stride, offset);
|
|
128
|
-
gl.vertexAttribDivisor(1, 1);
|
|
129
|
-
}
|
|
130
|
-
{
|
|
131
|
-
const { buffer, stride = 0, offset = 0 } = radius;
|
|
132
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
133
|
-
gl.enableVertexAttribArray(2);
|
|
134
|
-
gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, offset);
|
|
135
|
-
gl.vertexAttribDivisor(2, 1);
|
|
136
|
-
}
|
|
137
|
-
{
|
|
138
|
-
const { buffer, stride = 0, offset = 0 } = rgba;
|
|
139
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
140
|
-
gl.enableVertexAttribArray(3);
|
|
141
|
-
gl.vertexAttribPointer(3, 4, gl.FLOAT, false, stride, offset);
|
|
142
|
-
gl.vertexAttribDivisor(3, 1);
|
|
143
|
-
}
|
|
144
|
-
{
|
|
145
|
-
const { buffer, stride = 0, offset = 0 } = dashRatio;
|
|
146
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
147
|
-
gl.enableVertexAttribArray(4);
|
|
148
|
-
gl.vertexAttribPointer(4, 1, gl.FLOAT, false, stride, offset);
|
|
149
|
-
gl.vertexAttribDivisor(4, 1);
|
|
150
|
-
}
|
|
151
|
-
{
|
|
152
|
-
const { buffer, stride = 0, offset = 0 } = dashOpacity;
|
|
153
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
154
|
-
gl.enableVertexAttribArray(5);
|
|
155
|
-
gl.vertexAttribPointer(5, 1, gl.FLOAT, false, stride, offset);
|
|
156
|
-
gl.vertexAttribDivisor(5, 1);
|
|
157
|
-
}
|
|
158
|
-
gl.bindVertexArray(null);
|
|
159
|
-
return vao;
|
|
160
|
-
}
|
|
161
|
-
free() {
|
|
162
|
-
if (this.isFreed)
|
|
163
|
-
return;
|
|
164
|
-
CameraUniformBlockTotemCache.release(this.globe);
|
|
165
|
-
this.cameraBlockTotem = null;
|
|
166
|
-
this.gl.deleteProgram(this.program);
|
|
167
|
-
this.isFreed = true;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
export const AngledLineProgramCache = Object.freeze({
|
|
171
|
-
get: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic); },
|
|
172
|
-
release: (globe) => { return noRegisterGlobeProgramCache.releaseProgram(globe, Logic); }
|
|
173
|
-
});
|
package/timetracks/adaptors.js
DELETED
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
import { latLongToPixelXY } from "../util";
|
|
2
|
-
const _latLongToPixelXY = latLongToPixelXY;
|
|
3
|
-
class Adaptor {
|
|
4
|
-
/**
|
|
5
|
-
* @param {Object.<string, Color>} groupColorMap
|
|
6
|
-
* @typedef {Array} Color | [r, g, b] | between 0-1
|
|
7
|
-
*/
|
|
8
|
-
constructor(groupColorMap) {
|
|
9
|
-
this._groupColorMap = groupColorMap;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* @param {Object} geojsonObject
|
|
13
|
-
* @param {number} startTime
|
|
14
|
-
* @param {string} timePropertyName
|
|
15
|
-
* @param {string} styleGroupPropertyName
|
|
16
|
-
* @returns {lineData} lineData for Plugin
|
|
17
|
-
*/
|
|
18
|
-
fromGeoJson(geojsonObject, startTime, timePropertyName = "messageTime", styleGroupPropertyName = "styleGroup") {
|
|
19
|
-
const features = geojsonObject.features.filter(feature => feature.geometry.coordinates.length > 1);
|
|
20
|
-
const buffer = createFloat32Array(features.map(feature => feature.geometry.coordinates));
|
|
21
|
-
let offset = 0;
|
|
22
|
-
for (let feature of features) {
|
|
23
|
-
const coordinates = feature.geometry.coordinates;
|
|
24
|
-
const timestamps = feature.properties[timePropertyName].map((time) => (time - startTime) / 1000);
|
|
25
|
-
const styleGroupNameArray = feature.properties[styleGroupPropertyName];
|
|
26
|
-
offset = fillSliceOfFloat32Array(coordinates, timestamps, styleGroupNameArray, this._groupColorMap, buffer, offset);
|
|
27
|
-
}
|
|
28
|
-
return buffer;
|
|
29
|
-
}
|
|
30
|
-
/**
|
|
31
|
-
* Inputs are lists of tracks. Each track is a list of coordinates, timestamps and styleGroupNames.
|
|
32
|
-
* @param {Array.<Array.<Array.<number>>>} coordinatesList | [ [ [lon, lat, z], [lon, lat, z], ...], ...
|
|
33
|
-
* @param {Array.<Array.<number>>} timestampsList | [ [time, time, ...], ...
|
|
34
|
-
* @param {Array.<Array.<String>>} colorGroupList | [ [styleGroupName, styleGroupName, ...], ...
|
|
35
|
-
* @param {number} startTime | epoch time
|
|
36
|
-
* @returns {lineData} lineData for Plugin
|
|
37
|
-
*/
|
|
38
|
-
fromLists(coordinatesList, timestampsList, colorGroupList, startTime) {
|
|
39
|
-
const buffer = createFloat32Array(coordinatesList);
|
|
40
|
-
let offset = 0;
|
|
41
|
-
for (let i = 0; i < coordinatesList.length; i++) {
|
|
42
|
-
const coordinates = coordinatesList[i];
|
|
43
|
-
const timestamps = timestampsList[i].map((time) => (time - startTime) / 1000);
|
|
44
|
-
const styleGroupNameArray = colorGroupList[i];
|
|
45
|
-
offset = fillSliceOfFloat32Array(coordinates, timestamps, styleGroupNameArray, this._groupColorMap, buffer, offset);
|
|
46
|
-
}
|
|
47
|
-
return buffer;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
/**
|
|
51
|
-
* @param {Array.<Array.<number>>} coordinates
|
|
52
|
-
* @param {Array.<number>} timestamps
|
|
53
|
-
* @param {Array.<String>} styleGroupNameArray
|
|
54
|
-
* @param {Object.<string, TrackStyleGroup>} _groupColorMap
|
|
55
|
-
* @param {Float32Array} floatArray
|
|
56
|
-
* @param {number} offset
|
|
57
|
-
*
|
|
58
|
-
* create floatArray with createFloat32Array before calling this function.
|
|
59
|
-
* start offset from 0.
|
|
60
|
-
* feed the floatArray with a track data and offset that is returned from the previous call.
|
|
61
|
-
*/
|
|
62
|
-
function fillSliceOfFloat32Array(coordinates, timestamps, styleGroupNameArray, _groupColorMap, floatArray, offset) {
|
|
63
|
-
if (coordinates[0].length === 2) {
|
|
64
|
-
const startTime = timestamps[0];
|
|
65
|
-
const endTime = timestamps[timestamps.length - 1];
|
|
66
|
-
let prevPointData = null;
|
|
67
|
-
{ // first point
|
|
68
|
-
const { x, y } = _latLongToPixelXY(coordinates[0][1], coordinates[0][0]);
|
|
69
|
-
prevPointData = [x, y, 0, timestamps[0], ..._groupColorMap[styleGroupNameArray[0]]];
|
|
70
|
-
}
|
|
71
|
-
{ // middle points until end
|
|
72
|
-
for (let i = 1; i < coordinates.length; i++) {
|
|
73
|
-
const time = timestamps[i];
|
|
74
|
-
const coord = coordinates[i];
|
|
75
|
-
const { x, y } = _latLongToPixelXY(coord[1], coord[0]);
|
|
76
|
-
floatArray.set([...prevPointData, startTime, endTime, x, y, 0, time, ..._groupColorMap[styleGroupNameArray[i]], startTime, endTime], offset);
|
|
77
|
-
prevPointData = [x, y, 0, time, ..._groupColorMap[styleGroupNameArray[i]]];
|
|
78
|
-
offset += 18;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
else {
|
|
83
|
-
const startTime = timestamps[0];
|
|
84
|
-
const endTime = timestamps[timestamps.length - 1];
|
|
85
|
-
let prevPointData = null;
|
|
86
|
-
{ // first point
|
|
87
|
-
const { x, y } = _latLongToPixelXY(coordinates[0][1], coordinates[0][0]);
|
|
88
|
-
prevPointData = [x, y, coordinates[0][2] / 1000.0, timestamps[0], ..._groupColorMap[styleGroupNameArray[0]]];
|
|
89
|
-
}
|
|
90
|
-
{ // middle points until end
|
|
91
|
-
for (let i = 1; i < coordinates.length; i++) {
|
|
92
|
-
const time = timestamps[i];
|
|
93
|
-
const coord = coordinates[i];
|
|
94
|
-
const { x, y } = _latLongToPixelXY(coord[1], coord[0]);
|
|
95
|
-
floatArray.set([...prevPointData, startTime, endTime, x, y, coord[2] / 1000.0, time, ..._groupColorMap[styleGroupNameArray[i]], startTime, endTime], offset);
|
|
96
|
-
prevPointData = [x, y, coord[2] / 1000.0, time, ..._groupColorMap[styleGroupNameArray[i]]];
|
|
97
|
-
offset += 18;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
return offset;
|
|
102
|
-
}
|
|
103
|
-
/**
|
|
104
|
-
*
|
|
105
|
-
* @param {*} coordinatesArray
|
|
106
|
-
* @returns Float32Array
|
|
107
|
-
* Coordinates array is needed to calculate the size of the buffer.
|
|
108
|
-
*/
|
|
109
|
-
function createFloat32Array(coordinatesArray) {
|
|
110
|
-
let filteredSize = 0;
|
|
111
|
-
for (let coordinates of coordinatesArray) {
|
|
112
|
-
filteredSize += coordinates.length * 2 - 2;
|
|
113
|
-
}
|
|
114
|
-
const array = new Float32Array(filteredSize * 9);
|
|
115
|
-
return array;
|
|
116
|
-
}
|
|
117
|
-
export { Adaptor, fillSliceOfFloat32Array, createFloat32Array };
|
package/timetracks/plugin.js
DELETED
|
@@ -1,248 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Author: Toprak Nihat Deniz Ozturk
|
|
3
|
-
*/
|
|
4
|
-
import TrackGlowLineProgram from './program';
|
|
5
|
-
import PointProgram from './programpoint';
|
|
6
|
-
/**
|
|
7
|
-
* @typedef {Float32Array} TimeTrackMultiColorData | A linestring is representation, let A{a1, a2, a3}, B{b1, b2} be the points of the line.
|
|
8
|
-
* TimeTrackMultiColorData is [
|
|
9
|
-
* a1x, a1y, a1z, a1time, a1r, a1g, a1b, a1time, a3time, a2x, a2y, a2z, a2time, a2r, a2g, a2b, a1time, a3time,
|
|
10
|
-
* a2x, a2y, a2z, a2time, a2r, a2g, a2b, a1time, a3time, a3x, a3y, a3z, a3time, a3r, a3g, a3b, a1time, a3time,
|
|
11
|
-
* b1x, b1y, b1z, b1time, b1r, b1g, b1b, b1time, b2time, b2x, b2y, b2z, b2time, b2r, b2g, b2b, BstartTime, BendTime
|
|
12
|
-
* ]
|
|
13
|
-
* As you can see, the middle points of a line is repeated.
|
|
14
|
-
* Start Time is the first time of the line, End Time is the last time of the line.
|
|
15
|
-
* startTime of A = a1time, endTime time of A = a3time
|
|
16
|
-
* Check Adaptor to create TimeTrackMultiColorData. import {Adaptor} from '.';
|
|
17
|
-
*/
|
|
18
|
-
/**
|
|
19
|
-
* Access following methods through `plugin.program.` :
|
|
20
|
-
* * setGamma
|
|
21
|
-
* * setExposure
|
|
22
|
-
* * setAlphaThreshold
|
|
23
|
-
* * setWeights
|
|
24
|
-
* * setHeadPercentage
|
|
25
|
-
* * setRouteAlpha
|
|
26
|
-
* * setFinalAlphaRatio
|
|
27
|
-
|
|
28
|
-
uses float32array in a * {@link TimeTrackMultiColorData} format
|
|
29
|
-
|
|
30
|
-
*/
|
|
31
|
-
export default class TimeTrackMultiColorPlugin {
|
|
32
|
-
/**
|
|
33
|
-
* @param {String} id
|
|
34
|
-
* @param {Object} options
|
|
35
|
-
* @param {TimeTrackMultiColorData} options.data {@link TimeTrackMultiColorData}
|
|
36
|
-
* @param {number} options.headPercentage 0 ~ 1
|
|
37
|
-
* @param {number} options.routeAlpha 0 ~ 1
|
|
38
|
-
* @param {Array.<Number>} options.weights [w1, w2, w3, w4, w5]
|
|
39
|
-
* @param {number} options.alphaThreshold 0 ~ 1
|
|
40
|
-
* @param {number} options.exposure 0 ~ inf
|
|
41
|
-
* @param {number} options.gamma 0 ~ inf
|
|
42
|
-
* @param {number} options.finalAlphaRatio 0 ~ 1
|
|
43
|
-
* @param {number} pointOptions.opacity 0 ~ 1
|
|
44
|
-
* @param {number} pointOptions.pointSize 0 ~ inf
|
|
45
|
-
* @param {boolean} pointOptions.isOn true | false
|
|
46
|
-
*/
|
|
47
|
-
constructor(id, options = {}, { opacity = 1.0, pointSize = 1, isOn = false } = {}) {
|
|
48
|
-
this.id = id;
|
|
49
|
-
this.globe = null;
|
|
50
|
-
this.gl = null;
|
|
51
|
-
this.program = null;
|
|
52
|
-
this._headTime = 0;
|
|
53
|
-
this._tailTime = 0;
|
|
54
|
-
this._data = options.data || null;
|
|
55
|
-
this._options = options;
|
|
56
|
-
this._pointOptions = { opacity, pointSize, isOn };
|
|
57
|
-
this.program = null;
|
|
58
|
-
this._transporArr = new Float32Array(3);
|
|
59
|
-
this._ready = false;
|
|
60
|
-
this.pointProgram = null;
|
|
61
|
-
this._attrBuffer = null;
|
|
62
|
-
}
|
|
63
|
-
// ----------------------------------
|
|
64
|
-
// --- user methods ---
|
|
65
|
-
// ----------------------------------
|
|
66
|
-
setHeadAndTailTime(headTime, tailTime) {
|
|
67
|
-
this._headTime = headTime;
|
|
68
|
-
this._tailTime = tailTime;
|
|
69
|
-
this.pointProgram?.setHeadTime(headTime);
|
|
70
|
-
this.globe.DrawRender();
|
|
71
|
-
}
|
|
72
|
-
setGlow(isGlow) {
|
|
73
|
-
this.program.setGlow(isGlow);
|
|
74
|
-
this.globe.DrawRender();
|
|
75
|
-
}
|
|
76
|
-
setPremultipliedAlpha(isPremultiplied) {
|
|
77
|
-
this.program.setPremultipliedAlpha(isPremultiplied);
|
|
78
|
-
this.globe.DrawRender();
|
|
79
|
-
}
|
|
80
|
-
setBlurWeights(weights) {
|
|
81
|
-
this.program.setBlurWeights(weights);
|
|
82
|
-
this.globe.DrawRender();
|
|
83
|
-
}
|
|
84
|
-
setHeadPercentage(headPercentage) {
|
|
85
|
-
this.program.setHeadPercentage(headPercentage);
|
|
86
|
-
this.globe.DrawRender();
|
|
87
|
-
}
|
|
88
|
-
setRouteAlpha(routeAlpha) {
|
|
89
|
-
this.program.setRouteAlpha(routeAlpha);
|
|
90
|
-
this.globe.DrawRender();
|
|
91
|
-
}
|
|
92
|
-
setFinalAlphaRatio(finalAlphaRatio) {
|
|
93
|
-
this.program.setFinalAlphaRatio(finalAlphaRatio);
|
|
94
|
-
this.globe.DrawRender();
|
|
95
|
-
}
|
|
96
|
-
setGamma(gamma) {
|
|
97
|
-
this.program.setGamma(gamma);
|
|
98
|
-
this.globe.DrawRender();
|
|
99
|
-
}
|
|
100
|
-
setExposure(exposure) {
|
|
101
|
-
this.program.setExposure(exposure);
|
|
102
|
-
this.globe.DrawRender();
|
|
103
|
-
}
|
|
104
|
-
setBlurRepetition(repetition) {
|
|
105
|
-
this.program.setBlurRepetition(repetition);
|
|
106
|
-
this.globe.DrawRender();
|
|
107
|
-
}
|
|
108
|
-
setAlphaThreshold(alphaThreshold) {
|
|
109
|
-
this.program.setAlphaThreshold(alphaThreshold);
|
|
110
|
-
this.globe.DrawRender();
|
|
111
|
-
}
|
|
112
|
-
// ---------------point program setters-------------------
|
|
113
|
-
setPointOpacity(opacity) {
|
|
114
|
-
this._pointOptions.opacity = opacity;
|
|
115
|
-
if (this.pointProgram) {
|
|
116
|
-
this.pointProgram.setOpacity(opacity);
|
|
117
|
-
this.globe.DrawRender();
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
setPointSize(size) {
|
|
121
|
-
this._pointOptions.pointSize = size;
|
|
122
|
-
if (this.pointProgram) {
|
|
123
|
-
this.pointProgram.setPointSize(size);
|
|
124
|
-
this.globe.DrawRender();
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
pointSwitch(isOn) {
|
|
128
|
-
if (isOn && !this.pointProgram) {
|
|
129
|
-
this.pointProgram = this._createPointProgram();
|
|
130
|
-
}
|
|
131
|
-
else {
|
|
132
|
-
this._deletePointProgram();
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
// ------------------------------------------------------------
|
|
136
|
-
_createPointProgram() {
|
|
137
|
-
const { gl } = this;
|
|
138
|
-
const program = new PointProgram(gl, this.globe, this._attrBuffer, this._pointOptions);
|
|
139
|
-
program.setDrawCount(this._totalSize / 2);
|
|
140
|
-
return program;
|
|
141
|
-
}
|
|
142
|
-
_deletePointProgram() {
|
|
143
|
-
if (this.pointProgram)
|
|
144
|
-
this.pointProgram.free();
|
|
145
|
-
this.pointProgram = null;
|
|
146
|
-
}
|
|
147
|
-
// -------------------------------------------------------------
|
|
148
|
-
isReady() {
|
|
149
|
-
return this._ready;
|
|
150
|
-
}
|
|
151
|
-
/**
|
|
152
|
-
* @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
|
|
153
|
-
* Check Class constructor
|
|
154
|
-
*/
|
|
155
|
-
setData(data) {
|
|
156
|
-
if (this.gl) {
|
|
157
|
-
this._ready = false;
|
|
158
|
-
this.setDataAsFloat32Array(data);
|
|
159
|
-
this._ready = true;
|
|
160
|
-
}
|
|
161
|
-
else {
|
|
162
|
-
this._data = data;
|
|
163
|
-
this._ready = false;
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
/**
|
|
167
|
-
* @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
|
|
168
|
-
* @param {number} totalSize | if not provided, it is calculated from float32Array.length / 9. Use if you want to draw first n points.
|
|
169
|
-
*/
|
|
170
|
-
setDataAsFloat32Array(data, totalSize = null) {
|
|
171
|
-
const { gl, _attrBuffer } = this;
|
|
172
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, _attrBuffer);
|
|
173
|
-
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
|
174
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, null);
|
|
175
|
-
// this.program.setInBuffer(data);
|
|
176
|
-
// this.pointProgram.setData(data);
|
|
177
|
-
if (totalSize) {
|
|
178
|
-
this._totalSize = totalSize;
|
|
179
|
-
}
|
|
180
|
-
else {
|
|
181
|
-
this._totalSize = data.length / 9;
|
|
182
|
-
}
|
|
183
|
-
this.program.setTotalLength(this._totalSize);
|
|
184
|
-
this.pointProgram?.setDrawCount(this._totalSize / 2);
|
|
185
|
-
this._ready = true;
|
|
186
|
-
}
|
|
187
|
-
// ------------------------------
|
|
188
|
-
// --- globe Methods ---
|
|
189
|
-
// ------------------------------
|
|
190
|
-
draw3D(projMatrix, modelviewMatrix, transPos) {
|
|
191
|
-
if (!this._ready)
|
|
192
|
-
return;
|
|
193
|
-
const { _headTime, _tailTime, program, _transporArr, globe } = this;
|
|
194
|
-
this.pointProgram?.draw();
|
|
195
|
-
_transporArr.set([transPos.x, transPos.y, transPos.z], 0);
|
|
196
|
-
const geomType = globe.api_GetCurrentGeometry();
|
|
197
|
-
if (geomType === 0) {
|
|
198
|
-
program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr);
|
|
199
|
-
}
|
|
200
|
-
else if (geomType === 1) {
|
|
201
|
-
const { width, height } = globe.api_GetCurrentWorldWH();
|
|
202
|
-
program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr, [width, height]);
|
|
203
|
-
}
|
|
204
|
-
else {
|
|
205
|
-
console.error("Unknown geometry type", geomType);
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
resize(width, height) {
|
|
209
|
-
const { program, globe } = this;
|
|
210
|
-
width = width || globe.api_ScrW();
|
|
211
|
-
height = height || globe.api_ScrH();
|
|
212
|
-
program.resize(width, height);
|
|
213
|
-
}
|
|
214
|
-
init(globe, gl) {
|
|
215
|
-
this.globe = globe;
|
|
216
|
-
this.gl = gl;
|
|
217
|
-
this._attrBuffer = gl.createBuffer();
|
|
218
|
-
this.program = new TrackGlowLineProgram(gl, this._attrBuffer, globe.api_ScrW(), globe.api_ScrH(), this._options);
|
|
219
|
-
if (this._pointOptions?.isOn)
|
|
220
|
-
this.pointProgram = new PointProgram(gl, globe, this._attrBuffer);
|
|
221
|
-
// this.pointProgram.setAttrBuffer(_attrBuffer);
|
|
222
|
-
this.setGeometry();
|
|
223
|
-
if (this._data) {
|
|
224
|
-
this._ready = true;
|
|
225
|
-
this.setDataAsFloat32Array(this._data);
|
|
226
|
-
this._data = null;
|
|
227
|
-
}
|
|
228
|
-
this.resize();
|
|
229
|
-
}
|
|
230
|
-
free() {
|
|
231
|
-
const { gl, _attrBuffer } = this;
|
|
232
|
-
this.program.free();
|
|
233
|
-
gl.deleteBuffer(_attrBuffer);
|
|
234
|
-
}
|
|
235
|
-
setGeometry() {
|
|
236
|
-
const { globe, program } = this;
|
|
237
|
-
program.setIs3D(globe.api_GetCurrentGeometry() === 0);
|
|
238
|
-
}
|
|
239
|
-
// ----------------------------------
|
|
240
|
-
// --- implicit methods ---
|
|
241
|
-
// ----------------------------------
|
|
242
|
-
_latLongToPixelXY(latitude, longitude) {
|
|
243
|
-
return {
|
|
244
|
-
x: (longitude + 180) / 360,
|
|
245
|
-
y: (90 - latitude) / 180
|
|
246
|
-
};
|
|
247
|
-
}
|
|
248
|
-
}
|