Skip to content

Commit 9edbaaf

Browse files
Nelariusunderoot
Nelarius
authored and
underoot
committed
[GLJS-727] Implement raster particle layer (internal-1248)
1 parent a3b8ac5 commit 9edbaaf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+1803
-58
lines changed

Diff for: ‎build/generate-struct-arrays.js

+5
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ function camelize (str: string) {
114114
115115
global.camelize = camelize;
116116
117+
import particleAttributes from '../src/data/particle_attributes.js';
117118
import posAttributes, {posAttributesGlobeExt} from '../src/data/pos_attributes.js';
118119
import boundsAttributes from '../src/data/bounds_attributes.js';
119120
@@ -237,6 +238,10 @@ createStructArrayType(`normal_layout`, normalAttributes);
237238
createStructArrayType(`instance_vertex`, instanceAttributes);
238239
createStructArrayType(`feature_vertex`, featureAttributes);
239240
241+
// particle vertex attribute
242+
243+
createStructArrayType('particle_vertex_layout', particleAttributes);
244+
240245
// paint vertex arrays
241246
242247
// used by SourceBinder for float properties

Diff for: ‎build/range-request-server.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ function formatLog (req, res) {
1010
return `[${res.statusCode} ${res.statusMessage}] ${req.method.toUpperCase()} ${req.url}`;
1111
}
1212

13-
const port = process.env.PORT || 9966;
13+
const port = process.env.PORT || 9967;
1414
const host = process.env.HOST || '0.0.0.0';
1515

1616
// This script implements a basic dev server roughly equivalent in behavior to
@@ -19,6 +19,7 @@ const host = process.env.HOST || '0.0.0.0';
1919
// should be consider a bug and should be fixed.
2020

2121
http.createServer((req, res) => {
22+
res.setHeader('Access-Control-Allow-Origin', '*');
2223
// Normalize the request URL and remove any trailing ../ which would allow
2324
// it to read contents outside the GL JS directory
2425
const unsafeUrl = normalize(req.url).replace(/^(\.\.(\/|\\|$))+/, '');
@@ -108,5 +109,5 @@ http.createServer((req, res) => {
108109
}
109110
});
110111
}).listen(port, host, () => {
111-
console.log(`Listening on http://${host}:${port}`);
112+
console.log(`Listening on http://${host}:${port} `);
112113
})

Diff for: ‎debug/raster-particle-layer.html

+203
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Raster particle layer</title>
6+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
7+
<link rel='stylesheet' href='../dist/mapbox-gl.css' />
8+
<style>
9+
body { margin: 0; padding: 0 }
10+
html, body, #map { height: 100%; }
11+
12+
#checkboxes {
13+
position: absolute;
14+
top:0;
15+
left:0;
16+
padding:10px;
17+
}
18+
.dg.a {
19+
float: left !important;
20+
}
21+
22+
#elevationDebug {
23+
position: absolute;
24+
top:30px;
25+
right:30px;
26+
padding:5px;
27+
z-index: 99;
28+
}
29+
30+
#config {
31+
position: absolute;
32+
top:15px;
33+
left:15px;
34+
max-height: 95%;
35+
overflow-y:auto;
36+
z-index: 100;
37+
}
38+
#config::-webkit-scrollbar {
39+
width: 10px;
40+
height: 10px;
41+
}
42+
#config::-webkit-scrollbar-track {
43+
background: rgba(0, 0, 0, 0.2);
44+
border-radius: 10px;
45+
}
46+
#config::-webkit-scrollbar-thumb {
47+
background: rgba(110, 110, 110);
48+
border-radius: 10px;
49+
}
50+
#config::-webkit-scrollbar-thumb:hover {
51+
background-color: rgba(90, 90, 90);
52+
}
53+
</style>
54+
</head>
55+
<body>
56+
<div id="map"></div>
57+
<div id='config'></div>
58+
<script src='../dist/mapbox-gl-dev.js'></script>
59+
<script src='../debug/access_token_generated.js'></script>
60+
<script type='text/javascript' src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
61+
62+
<script>
63+
const SPEED_FACTOR_DEFAULT = 0.6;
64+
const RESET_RATE_FACTOR_DEFAULT = 0.4;
65+
const PARTICLE_COUNT_DEFAULT = 1024;
66+
67+
const PARAMS = {
68+
projection: 'globe',
69+
showTileBoundaries: false,
70+
fadeOpacityFactor: 0.98,
71+
speedFactor: SPEED_FACTOR_DEFAULT,
72+
maxSpeed: 70,
73+
resetRateFactor: RESET_RATE_FACTOR_DEFAULT,
74+
particleCount: PARTICLE_COUNT_DEFAULT,
75+
};
76+
77+
window.onload = function() {
78+
const gui = new Tweakpane.Pane({ // eslint-disable-line
79+
container: document.querySelector('#config'),
80+
title: 'Particle animation settings'
81+
});
82+
83+
const fillOptions = (styles) => {
84+
const options = {};
85+
86+
for (const style of styles) {
87+
options[style] = style;
88+
}
89+
90+
return options;
91+
};
92+
const projectionDropdown = gui.addInput(PARAMS, 'projection',
93+
{options: fillOptions([
94+
'mercator',
95+
'globe',
96+
])}
97+
);
98+
projectionDropdown.on('change', (ev) => {
99+
map.setProjection(ev.value);
100+
});
101+
102+
const showTileBoundaries = gui.addInput(PARAMS, 'showTileBoundaries');
103+
showTileBoundaries.on('change', (ev) => {
104+
map.showTileBoundaries = ev.value;
105+
});
106+
107+
const opacitySlider = gui.addInput(PARAMS, 'fadeOpacityFactor', {min: 0.0, max: 1.0});
108+
opacitySlider.on('change', (ev) => {
109+
map.setPaintProperty('wind-layer', 'raster-particle-fade-opacity-factor', ev.value);
110+
});
111+
112+
const speedFactorSlider = gui.addInput(PARAMS, 'speedFactor', {min: 0.0, max: 1.0});
113+
speedFactorSlider.on('change', (ev) => {
114+
map.setPaintProperty('wind-layer', 'raster-particle-speed-factor', ev.value);
115+
});
116+
117+
const maxSpeedSlider = gui.addInput(PARAMS, 'maxSpeed', {min: 1.0, max: 140.0});
118+
maxSpeedSlider.on('change', (ev) => {
119+
map.setPaintProperty('wind-layer', 'raster-particle-max-speed', ev.value);
120+
});
121+
122+
const dropRateSlider = gui.addInput(PARAMS, 'resetRateFactor', {min: 0.0, max: 1.0});
123+
dropRateSlider.on('change', (ev) => {
124+
map.setPaintProperty('wind-layer', 'raster-particle-reset-rate-factor', ev.value);
125+
});
126+
127+
const particleCountSlider = gui.addInput(PARAMS, 'particleCount', {min: 64, max: 2048});
128+
particleCountSlider.on('change', (ev) => {
129+
map.setPaintProperty('wind-layer', 'raster-particle-count', ev.value);
130+
});
131+
};
132+
133+
const map = new mapboxgl.Map({
134+
container: 'map',
135+
maxZoom: 8,
136+
minZoom: 2,
137+
zoom: 3,
138+
center: [138, 36],
139+
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
140+
style: 'mapbox://styles/mapbox/dark-v11'
141+
});
142+
143+
const tileSize = 512;
144+
const colors = ['red', 'green', 'blue'];
145+
const currentColor = colors[0];
146+
147+
map.on('load', () => {
148+
map.addSource('raster-array-source', {
149+
'type': 'raster-array',
150+
'url' : 'http://localhost:9967/debug/wind-512-mrt/tile.json'
151+
});
152+
153+
map.addLayer({
154+
'id': 'wind-layer',
155+
'type': 'raster-particle',
156+
'source': 'raster-array-source',
157+
'source-layer': 'wind',
158+
'paint': {
159+
'raster-particle-speed-factor': SPEED_FACTOR_DEFAULT,
160+
'raster-particle-reset-rate-factor': RESET_RATE_FACTOR_DEFAULT,
161+
'raster-particle-count': PARTICLE_COUNT_DEFAULT,
162+
'raster-particle-max-speed': 70,
163+
'raster-particle-color': [
164+
"interpolate",
165+
["linear"],
166+
["raster-particle-speed"],
167+
1.5, "rgba(134,163,171,256)",
168+
2.5, "rgba(126,152,188,256)",
169+
4.12, "rgba(110,143,208,256)",
170+
4.63, "rgba(110,143,208,256)",
171+
6.17, "rgba(15,147,167,256)",
172+
7.72, "rgba(15,147,167,256)",
173+
9.26, "rgba(57,163,57,256)",
174+
10.29, "rgba(57,163,57,256)",
175+
11.83, "rgba(194,134,62,256)",
176+
13.37, "rgba(194,134,63,256)",
177+
14.92, "rgba(200,66,13,256)",
178+
16.46, "rgba(200,66,13,256)",
179+
18.00, "rgba(210,0,50,256)",
180+
20.06, "rgba(215,0,50,256)",
181+
21.60, "rgba(175,80,136,256)",
182+
23.66, "rgba(175,80,136,256)",
183+
25.21, "rgba(117,74,147,256)",
184+
27.78, "rgba(117,74,147,256)",
185+
29.32, "rgba(68,105,141,256)",
186+
31.89, "rgba(68,105,141,256)",
187+
33.44, "rgba(194,251,119,256)",
188+
42.18, "rgba(194,251,119,256)",
189+
43.72, "rgba(241,255,109,256)",
190+
48.87, "rgba(241,255,109,256)",
191+
50.41, "rgba(256,256,256,256)",
192+
57.61, "rgba(256,256,256,256)",
193+
59.16, "rgba(0,256,256,256)",
194+
68.93, "rgba(0,256,256,256)",
195+
69.44, "rgba(256,37,256,256)"
196+
]
197+
}
198+
});
199+
});
200+
</script>
201+
202+
</body>
203+
</html>

Diff for: ‎debug/wind-512-mrt/2/3/1.mrt

1.56 MB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/3/6/2.mrt

812 KB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/3/6/3.mrt

1.51 MB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/3/7/2.mrt

736 KB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/3/7/3.mrt

1.27 MB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/4/13/5.mrt

1.41 MB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/4/13/6.mrt

2.83 MB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/4/14/5.mrt

1.25 MB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/4/14/6.mrt

2.3 MB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/5/26/11.mrt

459 KB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/5/26/12.mrt

505 KB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/5/26/13.mrt

665 KB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/5/27/11.mrt

1.28 MB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/5/27/12.mrt

1.45 MB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/5/27/13.mrt

1.02 MB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/5/28/11.mrt

1.16 MB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/5/28/12.mrt

1.29 MB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/5/28/13.mrt

905 KB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/5/29/11.mrt

383 KB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/5/29/12.mrt

382 KB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/5/29/13.mrt

414 KB
Binary file not shown.

Diff for: ‎debug/wind-512-mrt/tile.json

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"tiles": [
3+
"http://localhost:9967/debug/wind-512-mrt/{z}/{x}/{y}.mrt"
4+
],
5+
"raster_layers": [
6+
{
7+
"fields": {
8+
"range": [
9+
-6.97,
10+
37.27
11+
],
12+
"name": "wind",
13+
"units": "m/s",
14+
"tilesize": 512,
15+
"buffer": 1,
16+
"bands": [
17+
"1708300800",
18+
"1708311600",
19+
"1708322400",
20+
"1708333200",
21+
"1708344000",
22+
"1708354800",
23+
"1708365600",
24+
"1708376400",
25+
"1708387200",
26+
"1708398000",
27+
"1708408800",
28+
"1708419600",
29+
"1708430400",
30+
"1708441200",
31+
"1708452000",
32+
"1708462800",
33+
"1708473600",
34+
"1708484400",
35+
"1708495200",
36+
"1708506000",
37+
"1708516800",
38+
"1708527600",
39+
"1708538400",
40+
"1708549200",
41+
"1708560000",
42+
"1708570800",
43+
"1708581600"
44+
]
45+
},
46+
"id": "wind"
47+
}
48+
]
49+
}

Diff for: ‎flow-typed/webgl2.js

+2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ declare class WebGL2RenderingContext extends WebGLRenderingContext {
2424
QUERY_RESULT: 0x8866;
2525
MIN: 0x8007;
2626
MAX: 0x8008;
27+
INTERLEAVED_ATTRIBS: 0x8C8C;
28+
SEPARATE_ATTRIBS: 0x8C8D;
2729

2830
createVertexArray: () => WebGLVertexArrayObject | null;
2931
deleteVertexArray: (vertexArray: WebGLVertexArrayObject | null) => void;

Diff for: ‎src/data/array_types.js

+1
Original file line numberDiff line numberDiff line change
@@ -1457,6 +1457,7 @@ export {
14571457
StructArrayLayout3f12 as NormalLayoutArray,
14581458
StructArrayLayout16f64 as InstanceVertexArray,
14591459
StructArrayLayout4ui3f20 as FeatureVertexArray,
1460+
StructArrayLayout3f12 as ParticleVertexLayoutArray,
14601461
StructArrayLayout1ub1 as FillExtrusionHiddenByLandmarkArray,
14611462
StructArrayLayout6i12 as CircleGlobeExtArray
14621463
};

Diff for: ‎src/data/particle_attributes.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// @flow
2+
3+
import {createLayout} from '../util/struct_array.js';
4+
import type {StructArrayLayout} from '../util/struct_array.js';
5+
6+
export default (createLayout([
7+
{name: 'a_pos', type: 'Float32', components: 3}
8+
]): StructArrayLayout);

Diff for: ‎src/gl/context.js

+2
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ class Context {
7878
extTimerQuery: any;
7979
extTextureFloatLinear: any;
8080
options: ContextOptions;
81+
maxPointSize: number;
8182

8283
constructor(gl: WebGL2RenderingContext, options?: ContextOptions) {
8384
this.gl = gl;
@@ -139,6 +140,7 @@ class Context {
139140

140141
this.extTimerQuery = gl.getExtension('EXT_disjoint_timer_query_webgl2');
141142
this.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
143+
this.maxPointSize = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE)[1];
142144
}
143145

144146
setDefault() {

Diff for: ‎src/gl/transform_feedback.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// @flow
2+
3+
import type VertexBuffer from './vertex_buffer.js';
4+
5+
export type BufferMode =
6+
| $PropertyType<WebGL2RenderingContext, 'INTERLEAVED_ATTRIBS'>
7+
| $PropertyType<WebGL2RenderingContext, 'SEPARATE_ATTRIBS'>;
8+
9+
export type TransformFeedbackConfiguration = {|
10+
shaderVaryings: [string],
11+
bufferMode: BufferMode
12+
|};
13+
14+
export type TransformFeedbackBuffer = {|
15+
buffer: VertexBuffer,
16+
targetIndex: number
17+
|};

0 commit comments

Comments
 (0)