Fix z-fighting for elevated raster layers.

Add paint property raster-elevation-reference to elevate raster layers
relative to ground instead of sea level.

GitOrigin-RevId: 8c8269d43c23ddc0647b26184123baa010556359

Author: stephanheigl

src/geo/projection/globe_util.ts

@@ -884,7 +884,7 @@ export class GlobeSharedBuffers {
         const poleVertices = GLOBE_VERTEX_GRID_SIZE + 2;
         this._poleSegments = [];
 
-        for (let zoom = 0, offset = 0; zoom < GLOBE_ZOOM_THRESHOLD_MIN; zoom++) {
+        for (let zoom = 0, offset = 0; zoom < GLOBE_ZOOM_THRESHOLD_MAX; zoom++) {
             const tiles = 1 << zoom;
             const endAngle = 360.0 / tiles;
 

src/render/draw_raster.ts

@@ -23,6 +23,7 @@ import {mercatorXfromLng, mercatorYfromLat} from '../geo/mercator_coordinate';
 import {COLOR_MIX_FACTOR} from '../style/style_layer/raster_style_layer';
 import RasterArrayTile from '../source/raster_array_tile';
 import RasterArrayTileSource from '../source/raster_array_tile_source';
+import ColorMode from '../gl/color_mode';
 
 import type Transform from '../geo/transform';
 import type {OverscaledTileID} from '../source/tile_id';
@@ -62,10 +63,16 @@ function adjustColorMix(colorMix: [number, number, number, number]): [number, nu
 
 function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterStyleLayer, tileIDs: Array<OverscaledTileID>, variableOffsets?: Partial<Record<CrossTileID, VariableOffset>>, isInitialLoad?: boolean) {
     if (painter.renderPass !== 'translucent') return;
-    if (layer.paint.get('raster-opacity') === 0) return;
+
+    const rasterOpacity = layer.paint.get('raster-opacity');
+    if (rasterOpacity === 0) return;
+
     const isGlobeProjection = painter.transform.projection.name === 'globe';
     const renderingWithElevation = layer.paint.get('raster-elevation') !== 0.0;
     const renderingElevatedOnGlobe = renderingWithElevation && isGlobeProjection;
+    const isElevationReferenceTerrainGroundLevel = painter.terrain && painter.terrain.exaggeration() > 0 && renderingWithElevation && layer.paint.get('raster-elevation-reference') === 'ground';
+    const renderingElevatedOnTerrain = !isGlobeProjection && isElevationReferenceTerrainGroundLevel;
+
     if (painter.renderElevatedRasterBackface && !renderingElevatedOnGlobe) {
         return;
     }
@@ -117,7 +124,10 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
         rasterConfig.defines.push("PROJECTION_GLOBE_VIEW");
     }
     if (renderingWithElevation) {
-        rasterConfig.defines.push("RENDER_CUTOFF");
+        rasterConfig.defines.push("RENDER_CUTOFF", "ELEVATED");
+    }
+    if (isElevationReferenceTerrainGroundLevel) {
+        rasterConfig.defines.push("ELEVATION_REFERENCE_GROUND");
     }
 
     const drawTiles = (tiles: Array<OverscaledTileID>, cullFaceMode: CullFaceMode, elevatedStencilMode?: StencilMode) => {
@@ -131,7 +141,7 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
             if (!textureDescriptor || !textureDescriptor.texture) continue;
             const {texture, mix: rasterColorMix, offset: rasterColorOffset, tileSize, buffer} = textureDescriptor;
 
-            let depthMode;
+            let depthMode: DepthMode;
             let projMatrix;
             if (renderingToTexture) {
                 depthMode = DepthMode.disabled;
@@ -143,7 +153,7 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
                 // Set the lower zoom level to sublayer 0, and higher zoom levels to higher sublayers
                 // Use gl.LESS to prevent double drawing in areas where tiles overlap.
                 depthMode = painter.depthModeForSublayer(coord.overscaledZ - minTileZ,
-                    layer.paint.get('raster-opacity') === 1 ? DepthMode.ReadWrite : DepthMode.ReadOnly, gl.LESS);
+                    rasterOpacity === 1 ? DepthMode.ReadWrite : DepthMode.ReadOnly, gl.LESS);
                 projMatrix = painter.transform.calculateProjMatrix(unwrappedTileID, align);
             }
 
@@ -229,6 +239,7 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
             }
 
             const uniformValues = rasterUniformValues(
+                painter,
                 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                 projMatrix,
                 normalizeMatrix,
@@ -263,7 +274,7 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
                 const elevatedGlobeIndexBuffer = source.elevatedGlobeIndexBuffer;
                 if (renderingToTexture || !isGlobeProjection) {
                     if (source.boundsBuffer && source.boundsSegments) program.draw(
-                        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+
                         painter, gl.TRIANGLES, depthMode, StencilMode.disabled, colorMode, CullFaceMode.disabled,
                         uniformValues, layer.id, source.boundsBuffer,
                         painter.quadTriangleIndexBuffer, source.boundsSegments);
@@ -273,7 +284,7 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
                         source.getSegmentsForLongitude(tr.center.lng);
                     if (segments) {
                         program.draw(
-                            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+
                             painter, gl.TRIANGLES, depthMode, StencilMode.disabled, colorMode, cullFaceMode,
                             uniformValues, layer.id, elevatedGlobeVertexBuffer,
                             elevatedGlobeIndexBuffer, segments);
@@ -283,17 +294,36 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
                 depthMode = new DepthMode(gl.LEQUAL, DepthMode.ReadOnly, painter.depthRangeFor3D);
                 const sharedBuffers = painter.globeSharedBuffers;
                 if (sharedBuffers) {
+                    if (isElevationReferenceTerrainGroundLevel) {
+                        painter.terrain.setupElevationDraw(tile, program);
+                        painter.uploadCommonUniforms(context, program, tile.tileID.toUnwrapped());
+                    }
                     const [buffer, indexBuffer, segments] = sharedBuffers.getGridBuffers(latitudinalLod, false);
                     assert(buffer);
                     assert(indexBuffer);
                     assert(segments);
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+
                     program.draw(painter, gl.TRIANGLES, depthMode, elevatedStencilMode || stencilMode, painter.colorModeForRenderPass(), cullFaceMode, uniformValues, layer.id, buffer, indexBuffer, segments);
                 }
+            } else if (renderingElevatedOnTerrain) {
+                depthMode = new DepthMode(gl.LEQUAL, DepthMode.ReadWrite, painter.depthRangeFor3D);
+                painter.terrain.setupElevationDraw(tile, program);
+                painter.uploadCommonUniforms(context, program, tile.tileID.toUnwrapped());
+
+                // 2-pass rendering in case layer is not fully opaque and we are looking at higher pitch angles
+                const pitchThresholdForTwoPassRendering = 20.0;
+                if (tr.pitch > pitchThresholdForTwoPassRendering) {
+                    program.draw(painter, gl.TRIANGLES, depthMode, StencilMode.disabled, ColorMode.disabled, CullFaceMode.frontCCW,
+                        uniformValues, layer.id, painter.terrain.gridBuffer,
+                        painter.terrain.gridIndexBuffer, painter.terrain.gridSegments);
+                }
+
+                program.draw(painter, gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.backCCW,
+                    uniformValues, layer.id, painter.terrain.gridBuffer,
+                    painter.terrain.gridIndexBuffer, painter.terrain.gridSegments);
             } else {
                 const {tileBoundsBuffer, tileBoundsIndexBuffer, tileBoundsSegments} = painter.getTileBoundsBuffers(tile);
 
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                 program.draw(painter, gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
                     uniformValues, layer.id, tileBoundsBuffer,
                     tileBoundsIndexBuffer, tileBoundsSegments);
@@ -395,7 +425,7 @@ function drawPole(isNorth: boolean, coord: OverscaledTileID | null | undefined,
     }
     const rasterColorMix = adjustColorMix(rasterConfig.mix);
 
-    const uniformValues = rasterPoleUniformValues(projMatrix, normalizeMatrix, globeMatrix as Float32Array, globeToMercatorTransition(painter.transform.zoom), fade, layer, [0, 0], elevation, RASTER_COLOR_TEXTURE_UNIT, rasterColorMix, rasterConfig.offset, rasterConfig.range, emissiveStrength);
+    const uniformValues = rasterPoleUniformValues(painter, projMatrix, normalizeMatrix, globeMatrix as Float32Array, globeToMercatorTransition(painter.transform.zoom), fade, layer, [0, 0], elevation, RASTER_COLOR_TEXTURE_UNIT, rasterColorMix, rasterConfig.offset, rasterConfig.range, emissiveStrength);
     const program = painter.getOrCreateProgram('raster', {defines});
 
     painter.uploadCommonUniforms(context, program, null);

src/render/program/raster_program.ts

@@ -9,12 +9,21 @@ import {
 } from '../uniform_binding';
 import {computeRasterColorMix, computeRasterColorOffset} from '../raster';
 import {COLOR_RAMP_RES} from '../../style/style_layer/raster_style_layer';
-import {contrastFactor, saturationFactor} from '../../util/util';
+import {contrastFactor, saturationFactor, clamp} from '../../util/util';
 
+import type Painter from '../painter';
 import type Context from '../../gl/context';
 import type {UniformValues} from '../uniform_binding';
 import type RasterStyleLayer from '../../style/style_layer/raster_style_layer';
 
+const lerp = (a: number, b: number, t: number) => { return (1 - t) * a + t * b; };
+
+function computeZBiasFactor(painter: Painter) {
+    const terrainExaggeration = Math.min(painter.terrain ? painter.terrain.exaggeration() : 0.0, 2.0);
+    const bias = painter.transform.pitch < 15.0 ? lerp(0.07, 0.7, clamp((14.0 - painter.transform.zoom) / (14.0 - 9.0), 0.0, 1.0)) : 0.07;
+    return bias * terrainExaggeration;
+}
+
 export type RasterUniformsType = {
     ['u_matrix']: UniformMatrix4f;
     ['u_normalize_matrix']: UniformMatrix4f;
@@ -43,9 +52,10 @@ export type RasterUniformsType = {
     ['u_texture_offset']: Uniform2f;
     ['u_texture_res']: Uniform2f;
     ['u_emissive_strength']: Uniform1f;
+    ['u_zbias_factor']: Uniform1f;
 };
 
-export type RasterDefinesType = 'RASTER_COLOR' | 'RENDER_CUTOFF' | 'RASTER_ARRAY' | 'RASTER_ARRAY_LINEAR';
+export type RasterDefinesType = 'RASTER_COLOR' | 'RENDER_CUTOFF' | 'RASTER_ARRAY' | 'RASTER_ARRAY_LINEAR' | 'ELEVATION_REFERENCE_GROUND';
 
 const rasterUniforms = (context: Context): RasterUniformsType => ({
     'u_matrix': new UniformMatrix4f(context),
@@ -74,10 +84,12 @@ const rasterUniforms = (context: Context): RasterUniformsType => ({
     'u_color_ramp': new Uniform1i(context),
     'u_texture_offset': new Uniform2f(context),
     'u_texture_res': new Uniform2f(context),
-    'u_emissive_strength': new Uniform1f(context)
+    'u_emissive_strength': new Uniform1f(context),
+    'u_zbias_factor': new Uniform1f(context)
 });
 
 const rasterUniformValues = (
+    painter: Painter,
     matrix: Float32Array,
     normalizeMatrix: Float32Array,
     globeMatrix: Float32Array,
@@ -136,10 +148,12 @@ const rasterUniformValues = (
         tileSize / (tileSize + 2 * buffer)
     ],
     'u_texture_res': [tileSize + 2 * buffer, tileSize + 2 * buffer],
-    'u_emissive_strength': emissiveStrength
+    'u_emissive_strength': emissiveStrength,
+    'u_zbias_factor': computeZBiasFactor(painter)
 });
 
 const rasterPoleUniformValues = (
+    painter: Painter,
     matrix: Float32Array,
     normalizeMatrix: Float32Array,
     globeMatrix: Float32Array,
@@ -157,6 +171,7 @@ const rasterPoleUniformValues = (
     colorRange: [number, number],
     emissiveStrength: number,
 ): UniformValues<RasterUniformsType> => (rasterUniformValues(
+    painter,
     matrix,
     normalizeMatrix,
     globeMatrix,

src/shaders/raster.vertex.glsl

@@ -1,4 +1,5 @@
 #include "_prelude_fog.vertex.glsl"
+#include "_prelude_terrain.vertex.glsl"
 
 uniform mat4 u_matrix;
 uniform mat4 u_normalize_matrix;
@@ -13,6 +14,10 @@ uniform float u_raster_elevation;
 uniform float u_zoom_transition;
 uniform vec2 u_merc_center;
 
+#ifdef ELEVATED
+uniform lowp float u_zbias_factor;
+#endif
+
 #define GLOBE_UPSCALE GLOBE_RADIUS / 6371008.8
 
 #ifdef GLOBE_POLES
@@ -34,9 +39,14 @@ void main() {
     vec2 uv;
 #ifdef GLOBE_POLES
     vec3 globe_pos = a_globe_pos;
-    globe_pos += normalize(globe_pos) * u_raster_elevation * GLOBE_UPSCALE;
-    gl_Position = u_matrix * u_globe_matrix * vec4(globe_pos    , 1.0);
     uv = a_uv;
+    float ele = u_raster_elevation;
+#ifdef ELEVATION_REFERENCE_GROUND
+    ele += elevation(uv * EXTENT);
+#endif
+    globe_pos += normalize(globe_pos) * ele * GLOBE_UPSCALE;
+    gl_Position = u_matrix * u_globe_matrix * vec4(globe_pos    , 1.0);
+
 #ifdef FOG
     v_fog_pos = fog_position((u_normalize_matrix * vec4(a_globe_pos, 1.0)).xyz);
 #endif // FOG
@@ -49,18 +59,31 @@ void main() {
     // so math for modifying either is consistent.
     uv = a_texture_pos / 8192.0;
 #ifdef PROJECTION_GLOBE_VIEW
+
     vec3 decomposed_pos_and_skirt = decomposeToPosAndSkirt(a_pos);
     vec3 latLng = u_grid_matrix * vec3(decomposed_pos_and_skirt.xy, 1.0);
-    vec3 globe_pos = latLngToECEF(latLng.xy);
-    globe_pos += normalize(globe_pos) * u_raster_elevation * GLOBE_UPSCALE;
-    vec4 globe_world_pos = u_globe_matrix * vec4(globe_pos, 1.0);
-    vec4 merc_world_pos = vec4(0.0);
     float mercatorY = mercatorYfromLat(latLng[0]);
-    float mercatorX = mercatorXfromLng(latLng[1]);    
+    float mercatorX = mercatorXfromLng(latLng[1]);  
+    
+    float tiles = u_grid_matrix[0][2];
+    if (tiles > 0.0) {
+        float idx = u_grid_matrix[1][2];
+        float idy = u_grid_matrix[2][2];
+        float uvY = mercatorY * tiles - idy;
+        float uvX = mercatorX * tiles - idx;
+        uv = vec2(uvX, uvY);
+    }
+
+    float ele = u_raster_elevation;
+#ifdef ELEVATION_REFERENCE_GROUND
+    ele += elevation(uv * EXTENT) - decomposed_pos_and_skirt.z;
+#endif
+
+    vec4 merc_world_pos = vec4(0.0);   
     v_split_fade = 0.0;
     if (u_zoom_transition > 0.0) {
         vec2 merc_pos = vec2(mercatorX, mercatorY);
-        merc_world_pos = vec4(merc_pos, u_raster_elevation, 1.0);
+        merc_world_pos = vec4(merc_pos, ele, 1.0);
         merc_world_pos.xy -= u_merc_center;
         merc_world_pos.x = wrap(merc_world_pos.x, -0.5, 0.5);
         merc_world_pos = u_merc_matrix * merc_world_pos;
@@ -72,15 +95,10 @@ void main() {
         v_split_fade = clamp(1.0 - v_split_fade, 0.0, 1.0);
         v_split_fade = max(smoothstep(1.0 - range, 1.0, dist_from_poles), max(smoothstep(1.0 - range, 1.0, v_split_fade), smoothstep(1.0 - range, 1.0, 1.0 - v_split_fade)));
     }
-
-    float tiles = u_grid_matrix[0][2];
-    if (tiles > 0.0) {
-        float idx = u_grid_matrix[1][2];
-        float idy = u_grid_matrix[2][2];
-        float uvY = mercatorY * tiles - idy;
-        float uvX = mercatorX * tiles - idx;
-        uv = vec2(uvX, uvY);
-    }
+    
+    vec3 globe_pos = latLngToECEF(latLng.xy);
+    globe_pos += normalize(globe_pos) * ele * GLOBE_UPSCALE;
+    vec4 globe_world_pos = u_globe_matrix * vec4(globe_pos, 1.0);
 
     vec4 interpolated_pos = vec4(mix(globe_world_pos.xyz, merc_world_pos.xyz, u_zoom_transition) * w, w);
 
@@ -89,9 +107,18 @@ void main() {
     v_fog_pos = fog_position((u_normalize_matrix * vec4(globe_pos, 1.0)).xyz);
 #endif // FOG
 #else // else PROJECTION_GLOBE_VIEW
-    gl_Position = u_matrix * vec4(a_pos * w, u_raster_elevation * w, w);
+    float ele = 0.0;
+    vec2 decodedPos = a_pos;
+#ifdef ELEVATION_REFERENCE_GROUND
+    vec3 decomposedPosAndSkirt = decomposeToPosAndSkirt(a_pos);
+    float skirt = decomposedPosAndSkirt.z;
+    decodedPos = decomposedPosAndSkirt.xy;
+    uv = decodedPos / 8192.0;
+    ele = elevation(decodedPos) - skirt;
+#endif // ELEVATION_REFERENCE_GROUND
+    gl_Position = u_matrix * vec4(decodedPos * w, (u_raster_elevation + ele) * w, w);
 #ifdef FOG
-    v_fog_pos = fog_position(a_pos);
+    v_fog_pos = fog_position(decodedPos);
 #endif // FOG
 #endif // else PROJECTION_GLOBE_VIEW
 #endif // else GLOBE_POLES
@@ -104,6 +131,12 @@ void main() {
     v_pos0 = u_texture_offset.x + u_texture_offset.y * v_pos0;
     v_pos1 = u_texture_offset.x + u_texture_offset.y * v_pos1;
 
+#ifdef ELEVATED
+    float z = clamp(gl_Position.z / gl_Position.w, 0.5, 1.0);
+    float zbias = max(0.00005, (pow(z, 0.8) - z) * u_zbias_factor);
+    gl_Position.z -= (gl_Position.w * zbias);
+#endif
+
 #ifdef RENDER_CUTOFF
     v_depth = gl_Position.z;
 #endif

src/source/source_cache.ts

@@ -52,6 +52,7 @@ class SourceCache extends Evented {
     _maxTileCacheSize?: number;
     _paused: boolean;
     _isRaster: boolean;
+    _isRasterElevatedOverTerrain: boolean;
     _shouldReloadOnResume: boolean;
     _coveredTiles: Partial<Record<number | string, boolean>>;
     transform: Transform;
@@ -114,6 +115,7 @@ class SourceCache extends Evented {
             this._source.type === 'raster-dem' || this._source.type === 'raster-array' ||
             // @ts-expect-error - TS2339 - Property '_dataType' does not exist on type 'VideoSource | ImageSource | CanvasSource | CustomSource<ImageBitmap | HTMLCanvasElement | HTMLImageElement | ImageData>'.
             (this._source.type === 'custom' && this._source._dataType === 'raster');
+        this._isRasterElevatedOverTerrain = false;
     }
 
     onAdd(map: MapboxMap) {