Skip to content

Commit

Permalink
fix(gl-core): arrow layer scale
Browse files Browse the repository at this point in the history
  • Loading branch information
@sakitam-fdd
sakitam-fdd committed Nov 19, 2023
1 parent 3dc99ba commit 846ad79
Show file tree
Hide file tree
Showing 7 changed files with 58 additions and 158 deletions.
7 changes: 6 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@ extension to show wind field。
- [x] 色斑图渲染，支持瓦片和单张。
- [x] 多数据源支持（geotiff、灰度图-可解析带 exif 信息、png-多通道浮点数压缩）。
- [x] TimelineSource（时序数据源）支持。
- [ ] 粒子渲染，支持瓦片和单张。
- [x] 粒子渲染，支持瓦片和单张。
- [x] 箭头图层，支持瓦片和单张（矢量数据：风或洋流）。
- [x] 图层拾取。
- [x] 图层掩膜。

https://github.com/sakitam-fdd/wind-layer/assets/19517451/b36b7eea-c647-42ed-91a4-e1f182d0343c

Expand All @@ -40,6 +43,8 @@ https://github.com/sakitam-fdd/wind-layer/assets/19517451/bf27d98e-68ed-4f9c-b1e

https://sakitam-fdd.github.io/wind-layer/particles.mp4

https://sakitam-fdd.github.io/wind-layer/arrow.mp4

https://github.com/sakitam-fdd/wind-layer/assets/19517451/064f0ea4-f72f-4e9a-80e7-7a0097f60013

https://sakitam-fdd.github.io/wind-layer/particles-poc.mp4
Expand Down
Binary file added docs/public/arrow.mp4
View file
Binary file not shown.
4 changes: 2 additions & 2 deletions examples/timeline-pattern.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<script src="https://registry.npmmirror.com/mapbox-gl/^3/files/dist/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://registry.npmmirror.com/mapbox-gl/^3/files/dist/mapbox-gl.css">
<script src="https://registry.npmmirror.com/mapbox-gl/^2/files/dist/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://registry.npmmirror.com/mapbox-gl/^2/files/dist/mapbox-gl.css">
<style>
body {
margin: 0;
Expand Down
132 changes: 39 additions & 93 deletions examples/wind-arrow.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,17 +53,17 @@
},
},
layers: [
// {
// id: 'carto',
// type: 'raster',
// source: 'carto',
// // minzoom: 1,
// // maxzoom: 22,
// paint: {
// // 'raster-resampling': 'nearest',
// // 'raster-fade-duration': 0,
// },
// },
{
id: 'carto',
type: 'raster',
source: 'carto',
// minzoom: 1,
// maxzoom: 22,
paint: {
// 'raster-resampling': 'nearest',
// 'raster-fade-duration': 0,
},
},
{
id: 'background',
type: 'background',
Expand Down Expand Up @@ -117,48 +117,6 @@
map.on('load', async function () {
const clip = await fetch('./data/china.geojson').then(res => res.json());
const interpolateColor = color.wind.reduce((result, item, key) => result.concat(item[0] - 0/*273.15*/, 'rgba(' + item[1].join(',') + ')'), []);
//
// map.addSource('tile-bbox', {
// type: 'geojson',
// data: {
// 'type': 'FeatureCollection',
// 'features': [],
// },
// });
//
// map.addLayer({
// type: 'line',
// source: 'tile-bbox',
// id: 'tile-bbox',
// paint: {
// 'line-color': 'red',
// 'line-width': 1,
// },
// layout: {
// 'line-cap': 'round',
// 'line-join': 'round',
// },
// });
//
// map.addLayer({
// type: 'symbol',
// source: 'tile-bbox',
// id: 'tile-bbox-label',
// 'layout': {
// // get the title name from the source's "title" property
// 'text-field': ['get', 'tile'],
// // 'text-font': [
// // 'Open Sans Semibold',
// // 'Arial Unicode MS Bold',
// // ],
// // 'text-offset': [0, 1.25],
// // 'text-anchor': 'top',
// },
// paint: {
// 'text-color': 'red'
// },
// 'filter': ['==', '$type', 'Point'],
// });

const imageSource = new mapboxWind.ImageSource('wind1', {
// tileSize: 256,
Expand All @@ -174,50 +132,38 @@
[-180, -85.051129],
],
url: 'http://localhost:5000/2023111700/2023111703/0/0/0/wind-surface.jpeg',
// coordinates: [
// [-78.120282611, 68.846393966],
// [132.453327310, 68.846393966],
// [132.453327310, -75.191804486],
// [-78.120282611, -75.191804486],
// ],
// url: 'http://localhost:5000/2023111700/2023111703/0/0/0/area.jpeg',
// coordinates: [
// [
// 0,
// 85.051129
// ],
// [
// 180,
// 85.051129
// ],
// [
// 180,
// -85.051129
// ],
// [
// 0,
// -85.051129
// ],
// ],
// url: 'http://localhost:5000/2023111700/2023111703/0/0/0/7.jpeg',
// dataRange: [-34.37186050415039, 46.51813888549805, -42.12305450439453, 49.66694259643555],
});

const tileSource = new mapboxWind.TileSource('wind', {
const source = new mapboxWind.TimelineSource('wind', {
sourceType: mapboxWind.LayerSourceType.tile,
tileSize: 256,
minZoom: 0,
maxZoom: 4,
maxZoom: 2,
roundZoom: true,
duration: 1,
endDelay: 0,
repeat: true,
autoplay: true,
decodeType: mapboxWind.DecodeType.imageWithExif,
wrapX: false,
// tileBounds: [-78.120282611, -75.191804486, 132.453327310, 68.846393966],
url: 'http://localhost:5000/2023111700/2023111703/{z}/{x}/{y}/wind-surface.jpeg',
intervals: [
'03',
'06',
'09',
'12',
'15',
'18',
'21',
].map((id, index) => ({
// url: `http://localhost:5000/processed/2023041700/20230417${index < 10 ? '0' + index.toString() : index.toString()}/{z}/{x}/{y}/wind-surface.jpeg`,
url: `http://localhost:5000/2023111700/20231117${id}/{z}/{x}/{y}/wind-surface.jpeg`
})),
wrapX: true,
});

window.imageSource = imageSource;
window.tileSource = tileSource;
window.tileSource = source;

const fill = new mapboxWind.Layer('fill', imageSource, {
const fill = new mapboxWind.Layer('fill', source, {
wireframe: true,
styleSpec: {
'fill-color': [
Expand Down Expand Up @@ -256,7 +202,7 @@
dropRateBump: 0.002,
}

const wind = new mapboxWind.Layer('wind', imageSource, {
const wind = new mapboxWind.Layer('wind', source, {
wireframe: false,
styleSpec: {
'fill-color': [
Expand Down Expand Up @@ -296,20 +242,20 @@
// }
});

const arrow = new mapboxWind.Layer('arrow', imageSource, {
const arrow = new mapboxWind.Layer('arrow', source, {
wireframe: false,
styleSpec: {
'fill-color': [
'interpolate',
['step', 1],
['get', 'value'],
...interpolateColor
// 0, '#fff',
// 104, '#fff',
// ...interpolateColor
0, '#fff',
104, '#fff',
],
'opacity': 1,
space: 20,
size: [30, 20],
size: [12, 10],
},
renderFrom: mapboxWind.RenderFrom.rg,
displayRange: [0, 104],
Expand Down
18 changes: 8 additions & 10 deletions packages/gl-core/src/renderer/pass/arrow/arrow.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,17 +188,15 @@ export default class ArrowPass extends Pass<ArrowPassOptions> {
'displayRange',
]);

// const zoom = rendererState.zoom;
const zoom = rendererState.zoom;
const dataBounds = rendererState.sharedState.u_data_bbox;
const pixelsToUnits = this.options.getPixelsToUnits();
const position = this.createTileVertexArray(tileSize, rendererState.symbolSpace);
const pos = new Float32Array(position.length);
for (let i = 0; i < tiles.length; i++) {
const tile = tiles[i];
const bounds = tile.getTileProjBounds();

if (!this.#cache.has(tile.tileKey)) {
const bounds = tile.getTileProjBounds();

for (let j = 0; j < position.length; j += 2) {
pos[j] = bounds.left + position[j] * (bounds.right - bounds.left);
pos[j + 1] = bounds.top + position[j + 1] * (bounds.bottom - bounds.top);
Expand Down Expand Up @@ -271,9 +269,12 @@ export default class ArrowPass extends Pass<ArrowPassOptions> {
//
// this.#mesh.updateGeometry(geometry);

// const scaleFactor = Math.pow(2, zoom - tile.overscaledZ);
const scaleFactor = Math.pow(2, zoom - tile.overscaledZ);

const max = Math.max(bounds.right - bounds.right, bounds.bottom - bounds.top);
const scale = 1 / max;

// const pixelToUnits = 1 / (tileSize * scaleFactor);
const pixelToUnits = 1 / (tileSize * scaleFactor) / scale;

Object.keys(uniforms).forEach((key) => {
if (uniforms[key] !== undefined) {
Expand All @@ -288,10 +289,7 @@ export default class ArrowPass extends Pass<ArrowPassOptions> {
);
this.#mesh.program.setUniform('u_fade_t', fade);
this.#mesh.program.setUniform('arrowSize', rendererState.symbolSize);
this.#mesh.program.setUniform(
'pixelsToProjUnit',
new Vector2(pixelsToUnits[0], pixelsToUnits[1]),
);
this.#mesh.program.setUniform('pixelsToProjUnit', new Vector2(pixelToUnits, pixelToUnits));
this.#mesh.program.setUniform('u_bbox', rendererState.extent);
this.#mesh.program.setUniform('u_data_bbox', dataBounds);
this.#mesh.program.setUniform('u_head', 0.1);
Expand Down
37 changes: 1 addition & 36 deletions packages/gl-core/src/shaders/arrow.vert.glsl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,7 @@ float getValue(vec2 rg) {
}

float getAngle(vec2 rg) {
float angle = atan(rg.x, rg.y);
angle -= PI / 2.0;

float angle = atan(rg.y, rg.x);
return angle;
}

Expand All @@ -82,43 +80,10 @@ void rotate2d(inout vec2 v, float a){
v = m * v;
}

//vec2 calc_offset(vec2 extrusion, float radius, float view_scale) {
// return extrusion * radius * u_extrude_scale * view_scale;
//}

//vec4 project_vertex(vec2 extrusion, vec4 world_center, float radius, float view_scale) {
// vec2 sample_offset = calc_offset(extrusion, radius, view_scale);
// return u_matrix * ( world_center + vec4(sample_offset, 0, 0) );
//}

void main () {
vUv = uv;
vec2 size = arrowSize * pixelsToProjUnit * u_devicePixelRatio;
vec2 halfSize = size / 2.0;
// vec4 worldPosition = vec4(coords, 0.0, 1.0) * modelMatrix;
//
// // unencode the extrusion vector that we snuck into the a_pos vector
// vec2 extrude = vec2(mod(a_pos, 2.0) * 2.0 - 1.0);
//
// // multiply a_pos by 0.5, since we had it * 2 in order to sneak
// // in extrusion data
// vec2 circle_center = floor(coords * 0.5);
//
// world_center = vec4(circle_center, 0.0, 1);
//
// vec4 projected_center = u_matrix * world_center;
//
// view_scale = projected_center.w / u_camera_to_center_distance;
//
// gl_Position = project_vertex(extrude, world_center, radius, view_scale);
//
// // This is a minimum blur distance that serves as a faux-antialiasing for
// // the circle. since blur is a ratio of the circle's size and the intent is
// // to keep the blur at roughly 1px, the two are inversely related.
// lowp float antialiasblur = 1.0 / u_device_pixel_ratio / radius;
//
// v_data = vec3(extrude.x, extrude.y, antialiasblur);

vec2 worldPosition = vec2(-halfSize.x, -halfSize.y);
if(position.x == 1.0) {
worldPosition.x = halfSize.x;
Expand Down
18 changes: 2 additions & 16 deletions packages/mapbox-gl/src/layer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,7 @@ import type { BaseLayerOptions, SourceType } from 'wind-gl-core';
import { BaseLayer, LayerSourceType, RenderType, TileID, polygon2buffer } from 'wind-gl-core';

import CameraSync from './utils/CameraSync';
import {
getCoordinatesCenterTileID,
pixelsInMercatorCoordinateUnits,
} from './utils/mercatorCoordinate';
import { getCoordinatesCenterTileID } from './utils/mercatorCoordinate';

import { expandTiles, getTileBounds, getTileProjBounds } from './utils/tile';

Expand Down Expand Up @@ -199,10 +196,6 @@ export default class Layer {
this.sync = new CameraSync(this.map, 'perspective', this.scene);
this.planeCamera = new OrthographicCamera(0, 1, 1, 0, 0, 1);

Math.abs(
(512 * (1 / Math.cos((latitude * Math.PI) / 180))) / ThreeboxConstants.EARTH_CIRCUMFERENCE,
);

this.layer = new BaseLayer(
this.source,
{
Expand Down Expand Up @@ -235,14 +228,7 @@ export default class Layer {
const left = mapboxgl.MercatorCoordinate.fromLngLat(m.unproject([x, y]));
const right = mapboxgl.MercatorCoordinate.fromLngLat(m.unproject([x + pixel, y + pixel]));

const v = [Math.abs(right.x - left.x), Math.abs(left.y - right.y)];

const pixelsPerMeter = (this.map as any)?.transform.pixelsPerMeter;

const m = pixelsInMercatorCoordinateUnits((this.map as any).getCenter().lat, pixelsPerMeter);

console.log(v, m);
return [m, m];
return [Math.abs(right.x - left.x), Math.abs(left.y - right.y)];
},
getPixelsToProjUnit: () => [
(this.map as any)?.transform.pixelsPerMeter,
Expand Down

0 comments on commit 846ad79

Please sign in to comment.