fix(mapbox): map pitch pixelsToUnits

examples/wind-arrow.html

@@ -217,6 +217,85 @@
     window.imageSource = imageSource;
     window.tileSource = tileSource;
 
+    const fill = new mapboxWind.Layer('fill', imageSource, {
+      wireframe: true,
+      styleSpec: {
+        'fill-color': [
+          'interpolate',
+          ['linear'],
+          ['get', 'value'],
+          ...interpolateColor
+        ],
+        'opacity': 1,
+      },
+      renderFrom: mapboxWind.RenderFrom.rg,
+      widthSegments: 1,
+      heightSegments: 1,
+      displayRange: [0, 104],
+      renderType: mapboxWind.RenderType.colorize,
+      picking: true,
+      // mask: {
+      //   data: clip,
+      //   // type: mapboxWind.MaskType.outside,
+      //   type: mapboxWind.MaskType.inside, // 默认是 inside，即只显示范围内的
+      // }
+    });
+
+    const particlesConfig = {
+      speedFactor: [
+        'interpolate',
+        ['exponential', 0.5],
+        ['zoom'],
+        0,
+        1,
+        15,
+        0.01
+      ],
+      fadeOpacity: 0.93,
+      dropRate: 0.003,
+      dropRateBump: 0.002,
+    }
+
+    const wind = new mapboxWind.Layer('wind', imageSource, {
+      wireframe: false,
+      styleSpec: {
+        'fill-color': [
+          'interpolate',
+          ['step', 1],
+          ['get', 'value'],
+          0, '#fff',
+          104, '#fff',
+        ],
+        'opacity': [
+          'interpolate',
+          ['exponential', 0.5],
+          ['zoom'],
+          1,
+          1,
+          2,
+          1
+        ],
+        numParticles: [
+          'interpolate',
+          ['exponential', 0.5],
+          ['zoom'],
+          0, // zoom
+          65535 / 8, // numParticles
+          8, // zoom
+          65535 / 16 // numParticles
+        ],
+        ...particlesConfig,
+      },
+      renderFrom: mapboxWind.RenderFrom.rg,
+      displayRange: [0, 104],
+      renderType: mapboxWind.RenderType.particles,
+      // mask: {
+      //   data: clip,
+      //   // type: mapboxWind.MaskType.outside,
+      //   type: mapboxWind.MaskType.inside, // 默认是 inside，即只显示范围内的
+      // }
+    });
+
     const arrow = new mapboxWind.Layer('arrow', imageSource, {
       wireframe: false,
       styleSpec: {
@@ -225,6 +304,8 @@
           ['step', 1],
           ['get', 'value'],
           ...interpolateColor
+          // 0, '#fff',
+          // 104, '#fff',
         ],
         'opacity': 1,
         space: 20,
@@ -247,6 +328,8 @@
       })
     })
 
+    map.addLayer(fill);
+    // map.addLayer(wind);
     map.addLayer(arrow);
   });
 </script>

packages/gl-core/src/renderer/index.ts

@@ -326,6 +326,7 @@ export default class BaseLayer {
       this.renderPipeline?.addPass(colorizePass);
     } else if (this.options.renderType === RenderType.particles) {
       const composePass = new ParticlesComposePass('ParticlesComposePass', this.renderer, {
+        id: utils.uid('ParticlesComposePass'),
         bandType,
         source: this.source,
         renderFrom: this.options.renderFrom ?? RenderFrom.r,
@@ -384,6 +385,7 @@ export default class BaseLayer {
       );
     } else if (this.options.renderType === RenderType.arrow) {
       const composePass = new ArrowComposePass('ArrowComposePass', this.renderer, {
+        id: utils.uid('ArrowComposePass'),
         bandType,
         source: this.source,
         renderFrom: this.options.renderFrom ?? RenderFrom.r,
@@ -397,6 +399,7 @@ export default class BaseLayer {
         textureNext: composePass.textures.next,
         getPixelsToUnits: this.options.getPixelsToUnits,
         getGridTiles: this.options.getGridTiles,
+        maskPass: this.#maskPass,
       });
       this.renderPipeline?.addPass(composePass);
       this.renderPipeline?.addPass(arrowPass);
@@ -694,6 +697,11 @@ export default class BaseLayer {
         if (particles) {
           particles.setMaskPass(this.#maskPass);
         }
+
+        const arrow = this.renderPipeline?.getPass('ArrowPass');
+        if (arrow) {
+          arrow.setMaskPass(this.#maskPass);
+        }
       }
 
       this.#maskPass.updateGeometry();

packages/gl-core/src/renderer/pass/arrow/arrow.ts

@@ -16,6 +16,7 @@ import * as shaderLib from '../../../shaders/shaderLib';
 import { BandType } from '../../../type';
 import { SourceType } from '../../../source';
 import TileID from '../../../tile/TileID';
+import MaskPass from '../mask';
 
 export interface ArrowPassOptions {
   source: SourceType;
@@ -24,6 +25,7 @@ export interface ArrowPassOptions {
   bandType: BandType;
   getPixelsToUnits: () => [number, number];
   getGridTiles: (tileSize: number) => TileID[];
+  maskPass?: MaskPass;
 }
 
 const TILE_EXTENT = 4096.0;
@@ -170,6 +172,12 @@ export default class ArrowPass extends Pass<ArrowPassOptions> {
     //   return mat2.scale(new Float32Array(4), transform.inverseAdjustmentMatrix, [s, s]);
     // }
 
+    let stencil;
+
+    if (this.maskPass) {
+      stencil = this.maskPass.render(rendererParams, rendererState);
+    }
+
     if (rendererState && this.#mesh && tiles && tiles.length > 0) {
       const uniforms = utils.pick(rendererState, [
         'opacity',
@@ -287,6 +295,7 @@ export default class ArrowPass extends Pass<ArrowPassOptions> {
         this.#mesh.program.setUniform('u_bbox', rendererState.extent);
         this.#mesh.program.setUniform('u_data_bbox', dataBounds);
         this.#mesh.program.setUniform('u_head', 0.1);
+        this.#mesh.program.setUniform('u_devicePixelRatio', attr.dpr);
 
         this.#mesh.updateMatrix();
         this.#mesh.worldMatrixNeedsUpdate = false;
@@ -297,6 +306,10 @@ export default class ArrowPass extends Pass<ArrowPassOptions> {
         });
       }
     }
+
+    if (!stencil) {
+      this.renderer.state.disable(this.renderer.gl.STENCIL_TEST);
+    }
   }
 
   destroy() {

packages/gl-core/src/renderer/pass/particles/compose.ts

@@ -9,6 +9,7 @@ import TileID from '../../../tile/TileID';
 import { SourceType } from '../../../source';
 
 export interface ParticlesComposePassOptions {
+  id: string;
   source: SourceType;
   bandType: BandType;
   renderFrom: RenderFrom;
@@ -39,7 +40,7 @@ export default class ParticlesComposePass extends Pass<ParticlesComposePassOptio
   ) {
     super(id, renderer, options);
 
-    this.#uid = utils.uid('ParticlesComposePass');
+    this.#uid = options.id;
 
     this.#program = new Program(renderer, {
       vertexShader: vert,

packages/gl-core/src/shaders/arraw.frag.glsl

@@ -118,15 +118,13 @@ void main() {
     }
 
     if (display) {
-        float d = arrow_stealth(pos.xy, v_body, v_head, v_linewidth, v_antialias);
-        gl_FragColor = filled(d, 0.15, 0.01, color);
-//        if (v_speed > 1.0) {
-//            float d = arrow_stealth(pos.xy, v_body, v_head, v_linewidth, v_antialias);
-//            gl_FragColor = filled(d, 0.15, 0.01, color);
-//        } else {
-//            float d = disc(pos, 0.15);
-//            gl_FragColor = filled(d, 0.01, 0.01, color);
-//        }
+        if (v_speed > 0.2) {
+            float d = arrow_stealth(pos.xy, v_body, v_head, v_linewidth, v_antialias);
+            gl_FragColor = filled(d, 0.15, 0.01, color);
+        } else {
+            float d = disc(pos, 0.15);
+            gl_FragColor = filled(d, 0.01, 0.01, color);
+        }
     } else {
         gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
     }

packages/gl-core/src/shaders/arrow.vert.glsl

@@ -8,6 +8,7 @@ uniform vec2 arrowSize;
 uniform float u_head;
 
 uniform vec2 resolution;
+uniform float u_devicePixelRatio;
 uniform vec2 pixelsToProjUnit;
 uniform vec3 cameraPosition;
 uniform mat4 viewMatrix;
@@ -92,7 +93,7 @@ void rotate2d(inout vec2 v, float a){
 
 void main () {
     vUv = uv;
-    vec2 size = arrowSize * pixelsToProjUnit;
+    vec2 size = arrowSize * pixelsToProjUnit * u_devicePixelRatio;
     vec2 halfSize = size / 2.0;
 //    vec4 worldPosition = vec4(coords, 0.0, 1.0) * modelMatrix;
 //
@@ -130,12 +131,9 @@ void main () {
     // 这里需要实现 anchor
     worldPosition += halfSize * vec2(1.0, 0);
 
-    vUv = vec2(uv.x, 1.0 - uv.y);
+    vUv = vec2(uv.x, uv.y);
 
     vec2 textureCoord = (coords.xy - u_data_bbox.xy) / (u_data_bbox.zw - u_data_bbox.xy);
-    #ifdef USE_WGS84
-    textureCoord = mercatorToWGS84(textureCoord);
-    #endif
 
     vec2 rg = bilinear(textureCoord);
     float value = getValue(rg);

packages/mapbox-gl/src/layer.ts

@@ -6,7 +6,10 @@ 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 } from './utils/mercatorCoordinate';
+import {
+  getCoordinatesCenterTileID,
+  pixelsInMercatorCoordinateUnits,
+} from './utils/mercatorCoordinate';
 
 import { expandTiles, getTileBounds, getTileProjBounds } from './utils/tile';
 
@@ -195,6 +198,11 @@ export default class Layer {
     this.scene = new Scene();
     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,
       {
@@ -227,7 +235,14 @@ export default class Layer {
           const left = mapboxgl.MercatorCoordinate.fromLngLat(m.unproject([x, y]));
           const right = mapboxgl.MercatorCoordinate.fromLngLat(m.unproject([x + pixel, y + pixel]));
 
-          return [Math.abs(right.x - left.x), Math.abs(left.y - right.y)];
+          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];
         },
         getPixelsToProjUnit: () => [
           (this.map as any)?.transform.pixelsPerMeter,

packages/mapbox-gl/src/utils/mercatorCoordinate.ts

@@ -60,6 +60,10 @@ export function meterInMercatorCoordinateUnits(y) {
   return (1 / earthCircumference) * mercatorScale(latFromMercatorY(y));
 }
 
+export function pixelsInMercatorCoordinateUnits(lat, pixelsPerMeter) {
+  return (1 / earthCircumference) * mercatorScale(lat) * pixelsPerMeter;
+}
+
 export const MAX_MERCATOR_LATITUDE = 85.051129;
 
 /**