Add raster-particle-elevation property (internal-1457)

* Add raster-particle-elevation property * Update debug page * Add render tests for raster-particle-elevation * Render back face of elevated particle layers on globe * Add tileCoverLift getter for raster particle style layer to extend tile cover on globe * Fix clipping with globe tiles * Update target versions for raster-particle-elevation * Update expectations * Add tileSize dependency to minimum elevation * Update raster-particle/decoding expectation --------- Co-authored-by: Johann Muszynski <johann.muszynski@mapbox.com>
mapbox · Aug 14, 2024 · 23bb134 · 23bb134
1 parent 4909563
commit 23bb134
Show file tree

Hide file tree

Showing 12 changed files with 313 additions and 5 deletions.
diff --git a/debug/raster-particle-layer.html b/debug/raster-particle-layer.html
@@ -69,6 +69,7 @@
     resetRateFactor: 0.4,
     particleCount: 2048,
     bandIndex: 0,
+    elevation: 0,
 };
 
 const RASTERARRAY_LAYER = '10winds';
@@ -147,6 +148,11 @@
             map.setPaintProperty('wind-layer', 'raster-particle-array-band', bandList[value]);
         });
     });
+
+    const elevationSlider = gui.addInput(PARAMS, 'elevation', {min: 0, max: 1000000});
+    elevationSlider.on('change', (ev) => {
+        map.setPaintProperty('wind-layer', 'raster-particle-elevation', ev.value);
+    });
 };
 
 const map = new mapboxgl.Map({

diff --git a/src/render/draw_raster_particle.ts b/src/render/draw_raster_particle.ts
@@ -33,6 +33,8 @@ import Transform from '../geo/transform';
 import rasterFade from './raster_fade';
 import assert from 'assert';
 import {RGBAImage} from '../util/image';
+import {smoothstep} from '../util/util';
+import {GLOBE_ZOOM_THRESHOLD_MAX} from '../geo/projection/globe_constants';
 
 export default drawRasterParticle;
 
@@ -425,7 +427,10 @@ function renderTextureToMap(painter: Painter, sourceCache: SourceCache, layer: R
     const context = painter.context;
     const gl = context.gl;
 
-    const rasterElevation = 250.0;
+    // Add minimum elevation for globe zoom level to avoid clipping with globe tiles
+    const tileSize = sourceCache.getSource().tileSize;
+    const minLiftForZoom = (1.0 - smoothstep(GLOBE_ZOOM_THRESHOLD_MAX, GLOBE_ZOOM_THRESHOLD_MAX + 1.0, painter.transform.zoom)) * 5.0 * tileSize;
+    const rasterElevation = minLiftForZoom + layer.paint.get('raster-particle-elevation');
     const align = !painter.options.moving;
     const isGlobeProjection = painter.transform.projection.name === 'globe';
 
@@ -516,7 +521,7 @@ function renderTextureToMap(painter: Painter, sourceCache: SourceCache, layer: R
         painter.uploadCommonUniforms(context, program, unwrappedTileID);
 
         if (isGlobeProjection) {
-            const depthMode = new DepthMode(gl.LEQUAL, DepthMode.ReadWrite, painter.depthRangeFor3D);
+            const depthMode = new DepthMode(gl.LEQUAL, DepthMode.ReadOnly, painter.depthRangeFor3D);
             const skirtHeightValue = 0;
             const sharedBuffers = painter.globeSharedBuffers;
             if (sharedBuffers) {
@@ -525,7 +530,7 @@ function renderTextureToMap(painter: Painter, sourceCache: SourceCache, layer: R
                 assert(indexBuffer);
                 assert(segments);
                 // @ts-expect-error - TS2554 - Expected 12-16 arguments, but got 11.
-                program.draw(painter, gl.TRIANGLES, depthMode, stencilMode, ColorMode.alphaBlended, CullFaceMode.backCCW, uniformValues, layer.id, buffer, indexBuffer, segments);
+                program.draw(painter, gl.TRIANGLES, depthMode, stencilMode, ColorMode.alphaBlended, painter.renderElevatedRasterBackface ? CullFaceMode.frontCCW : CullFaceMode.backCCW, uniformValues, layer.id, buffer, indexBuffer, segments);
             }
         } else {
             const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);

diff --git a/src/render/painter.ts b/src/render/painter.ts
@@ -1129,7 +1129,7 @@ class Painter {
             this.currentLayer = 0;
             while (this.currentLayer < layerIds.length) {
                 const layer = orderedLayers[this.currentLayer];
-                if (layer.type === "raster") {
+                if (layer.type === "raster" || layer.type === "raster-particle") {
                     const sourceCache = style.getLayerSourceCache(layer);
                     // @ts-expect-error - TS2345 - Argument of type 'void | SourceCache' is not assignable to parameter of type 'SourceCache'. | TS2345 - Argument of type 'void | SourceCache' is not assignable to parameter of type 'SourceCache'.
                     this.renderLayer(this, sourceCache, layer, coordsForTranslucentLayer(layer, sourceCache));

diff --git a/src/style-spec/reference/v8.json b/src/style-spec/reference/v8.json
@@ -8210,6 +8210,27 @@
         }
       },
       "property-type": "data-constant"
+    },
+    "raster-particle-elevation": {
+      "type": "number",
+      "doc": "Specifies an uniform elevation from the ground, in meters.",
+      "default": 0,
+      "minimum": 0,
+      "transition": true,
+      "sdk-support": {
+        "basic functionality": {
+          "js": "3.7.0",
+          "android": "11.7.0",
+          "ios": "11.7.0"
+        }
+      },
+      "expression": {
+        "interpolated": true,
+        "parameters": [
+          "zoom"
+        ]
+      },
+      "property-type": "data-constant"
     }
   },
   "paint_hillshade": {

diff --git a/src/style-spec/types.ts b/src/style-spec/types.ts
@@ -793,7 +793,9 @@ export type RasterParticleLayerSpecification = {
         "raster-particle-speed-factor-transition"?: TransitionSpecification,
         "raster-particle-fade-opacity-factor"?: PropertyValueSpecification<number>,
         "raster-particle-fade-opacity-factor-transition"?: TransitionSpecification,
-        "raster-particle-reset-rate-factor"?: number
+        "raster-particle-reset-rate-factor"?: number,
+        "raster-particle-elevation"?: PropertyValueSpecification<number>,
+        "raster-particle-elevation-transition"?: TransitionSpecification
     }
 }
 

diff --git a/src/style/style_layer/raster_particle_style_layer.ts b/src/style/style_layer/raster_particle_style_layer.ts
@@ -101,6 +101,10 @@ class RasterParticleStyleLayer extends StyleLayer {
     _invalidateAnimationState() {
         this.lastInvalidatedAt = browser.now();
     }
+
+    tileCoverLift(): number {
+        return this.paint.get('raster-particle-elevation');
+    }
 }
 
 export {COLOR_RAMP_RES};

diff --git a/src/style/style_layer/raster_particle_style_layer_properties.ts b/src/style/style_layer/raster_particle_style_layer_properties.ts
@@ -32,6 +32,7 @@ export type PaintProps = {
     "raster-particle-speed-factor": DataConstantProperty<number>;
     "raster-particle-fade-opacity-factor": DataConstantProperty<number>;
     "raster-particle-reset-rate-factor": DataConstantProperty<number>;
+    "raster-particle-elevation": DataConstantProperty<number>;
 };
 
 let paint: Properties<PaintProps>;
@@ -43,4 +44,5 @@ export const getPaintProperties = (): Properties<PaintProps> => paint || (paint
     "raster-particle-speed-factor": new DataConstantProperty(styleSpec["paint_raster-particle"]["raster-particle-speed-factor"]),
     "raster-particle-fade-opacity-factor": new DataConstantProperty(styleSpec["paint_raster-particle"]["raster-particle-fade-opacity-factor"]),
     "raster-particle-reset-rate-factor": new DataConstantProperty(styleSpec["paint_raster-particle"]["raster-particle-reset-rate-factor"]),
+    "raster-particle-elevation": new DataConstantProperty(styleSpec["paint_raster-particle"]["raster-particle-elevation"]),
 }));
diff --git a/test/integration/render-tests/raster-particle/decoding/expected.png b/test/integration/render-tests/raster-particle/decoding/expected.png
diff --git a/test/integration/render-tests/raster-particle/elevation-globe/expected.png b/test/integration/render-tests/raster-particle/elevation-globe/expected.png
diff --git a/test/integration/render-tests/raster-particle/elevation-globe/style.json b/test/integration/render-tests/raster-particle/elevation-globe/style.json
@@ -0,0 +1,134 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 256,
+      "height": 256,
+      "allowed": 0.0003,
+      "operations": [
+        ["wait", 100]
+      ]
+    }
+  },
+  "center": [135.0, 36.0],
+  "zoom": 2,
+  "pitch": 30.0,
+  "transition": {"duration": 0},
+  "projection": { "name": "globe" },
+  "sources": {
+    "satellite": {
+      "type": "raster",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.satellite.png"
+      ],
+      "maxzoom": 17,
+      "tileSize": 256
+    },
+    "wind-512-source": {
+      "type": "raster-array",
+      "tiles": [ "local://tiles/{z}-{x}-{y}.wind-512.mrt" ],
+      "raster_layers": [
+        {
+          "fields": {
+            "range": [
+              -6.97,
+              37.27
+            ],
+            "name": "wind",
+            "units": "m/s",
+            "tilesize": 512,
+            "buffer": 1,
+            "bands": [
+              "1708300800",
+              "1708311600",
+              "1708322400",
+              "1708333200",
+              "1708344000",
+              "1708354800",
+              "1708365600",
+              "1708376400",
+              "1708387200",
+              "1708398000",
+              "1708408800",
+              "1708419600",
+              "1708430400",
+              "1708441200",
+              "1708452000",
+              "1708462800",
+              "1708473600",
+              "1708484400",
+              "1708495200",
+              "1708506000",
+              "1708516800",
+              "1708527600",
+              "1708538400",
+              "1708549200",
+              "1708560000",
+              "1708570800",
+              "1708581600"
+            ]
+          },
+          "id": "wind"
+        }
+      ]
+    }
+  },
+  "layers": [
+    {
+      "id": "satellite",
+      "type": "raster",
+      "source": "satellite",
+      "paint": {
+        "raster-fade-duration": 0
+      }
+    },
+    {
+      "id": "wind-animation",
+      "source": "wind-512-source",
+      "source-layer": "wind",
+      "type": "raster-particle",
+      "paint": {
+        "raster-particle-speed-factor": 0.0,
+        "raster-particle-reset-rate-factor": 0.0,
+        "raster-particle-fade-opacity-factor": 0.9,
+        "raster-particle-count": 1024,
+        "raster-particle-max-speed": 70,
+        "raster-particle-elevation": 1000000,
+        "raster-particle-color": [
+          "interpolate",
+          ["linear"],
+          ["raster-particle-speed"],
+          1.5, "rgba(134,163,171,256)",
+          2.5, "rgba(126,152,188,256)",
+          4.12, "rgba(110,143,208,256)",
+          4.63, "rgba(110,143,208,256)",
+          6.17, "rgba(15,147,167,256)",
+          7.72, "rgba(15,147,167,256)",
+          9.26, "rgba(57,163,57,256)",
+          10.29, "rgba(57,163,57,256)",
+          11.83, "rgba(194,134,62,256)",
+          13.37, "rgba(194,134,63,256)",
+          14.92, "rgba(200,66,13,256)",
+          16.46, "rgba(200,66,13,256)",
+          18.00, "rgba(210,0,50,256)",
+          20.06, "rgba(215,0,50,256)",
+          21.60, "rgba(175,80,136,256)",
+          23.66, "rgba(175,80,136,256)",
+          25.21, "rgba(117,74,147,256)",
+          27.78, "rgba(117,74,147,256)",
+          29.32, "rgba(68,105,141,256)",
+          31.89, "rgba(68,105,141,256)",
+          33.44, "rgba(194,251,119,256)",
+          42.18, "rgba(194,251,119,256)",
+          43.72, "rgba(241,255,109,256)",
+          48.87, "rgba(241,255,109,256)",
+          50.41, "rgba(256,256,256,256)",
+          57.61, "rgba(256,256,256,256)",
+          59.16, "rgba(0,256,256,256)",
+          68.93, "rgba(0,256,256,256)",
+          69.44, "rgba(256,37,256,256)"
+        ]
+      }
+    }
+  ]
+}
diff --git a/test/integration/render-tests/raster-particle/elevation-mercator/expected.png b/test/integration/render-tests/raster-particle/elevation-mercator/expected.png