Fix qRF and collision debug for globe-to-mercator transition (internal-2594)

Co-authored-by: Danil Ilinykh <danil.ilinykh@mapbox.com>

Author: 2 people

src/render/draw_collision_debug.ts

@@ -1,21 +1,23 @@
 import DepthMode from '../gl/depth_mode';
 import StencilMode from '../gl/stencil_mode';
 import CullFaceMode from '../gl/cull_face_mode';
-import {collisionUniformValues, collisionCircleUniformValues} from './program/collision_program';
+import {collisionUniformValues, collisionCircleUniformValues, type CollisionDebugDefinesType} from './program/collision_program';
 import {QuadTriangleArray, CollisionCircleLayoutArray} from '../data/array_types';
 import {collisionCircleLayout} from '../data/bucket/symbol_attributes';
 import SegmentVector from '../data/segment';
 import {mat4} from 'gl-matrix';
 import {getCollisionDebugTileProjectionMatrix} from '../geo/projection/projection_util';
+import {globeToMercatorTransition} from '../geo/projection/globe_util';
+import {mercatorXfromLng, mercatorYfromLat} from '../geo/mercator_coordinate';
 
 import type VertexBuffer from '../gl/vertex_buffer';
 import type IndexBuffer from '../gl/index_buffer';
 import type Painter from './painter';
 import type SourceCache from '../source/source_cache';
-import type {TypedStyleLayer} from '../style/style_layer/typed_style_layer';
 import type {OverscaledTileID} from '../source/tile_id';
 import type SymbolBucket from '../data/bucket/symbol_bucket';
 import type Projection from '../geo/projection/projection';
+import type SymbolStyleLayer from '../style/style_layer/symbol_style_layer';
 
 export default drawCollisionDebug;
 
@@ -29,11 +31,20 @@ type TileBatch = {
 
 let quadTriangles: QuadTriangleArray | null | undefined;
 
-function drawCollisionDebug(painter: Painter, sourceCache: SourceCache, layer: TypedStyleLayer, coords: Array<OverscaledTileID>, translate: [number, number], translateAnchor: 'map' | 'viewport', isText: boolean) {
+function drawCollisionDebug(painter: Painter, sourceCache: SourceCache, layer: SymbolStyleLayer, coords: Array<OverscaledTileID>, translate: [number, number], translateAnchor: 'map' | 'viewport', isText: boolean) {
     const context = painter.context;
     const gl = context.gl;
     const tr = painter.transform;
-    const program = painter.getOrCreateProgram('collisionBox');
+    const mercatorCenter: [number, number] = [
+        mercatorXfromLng(tr.center.lng),
+        mercatorYfromLat(tr.center.lat)
+    ];
+    const symbolPlacement = layer.layout.get('symbol-placement');
+    const textVariableAnchor = layer.layout.get('text-variable-anchor');
+    const iconRotateWithMap = layer.layout.get('icon-rotation-alignment') === 'map';
+    const textRotateWithMap = layer.layout.get('text-rotation-alignment') === 'map';
+
+    const alongLine = symbolPlacement !== 'point';
     const tileBatches: Array<TileBatch> = [];
     let circleCount = 0;
     let circleOffset = 0;
@@ -44,7 +55,26 @@ function drawCollisionDebug(painter: Painter, sourceCache: SourceCache, layer: T
         const bucket = tile.getBucket(layer) as SymbolBucket;
         if (!bucket) continue;
 
+        const invMatrix = bucket.getProjection().createInversionMatrix(tr, coord.canonical);
+        const defines: CollisionDebugDefinesType[] = [];
         const tileMatrix = getCollisionDebugTileProjectionMatrix(coord, bucket, tr);
+        const isIconPlacedAlongLine = !isText && iconRotateWithMap && alongLine;
+        const isTextPlacedAlongLine = isText && textRotateWithMap && alongLine;
+        const hasVariableAnchors = textVariableAnchor && bucket.hasTextData();
+        const updateIconTextFit = bucket.hasIconTextFit() && hasVariableAnchors && bucket.hasIconData();
+        const projectedPosOnLabelSpace = isIconPlacedAlongLine || isTextPlacedAlongLine || (isText && hasVariableAnchors) || updateIconTextFit;
+        const bucketIsGlobeProjection = bucket.projection.name === 'globe';
+        const globeToMercator = bucketIsGlobeProjection ? globeToMercatorTransition(tr.zoom) : 0.0;
+
+        if (bucketIsGlobeProjection) {
+            defines.push('PROJECTION_GLOBE_VIEW');
+
+            if (projectedPosOnLabelSpace) {
+                defines.push('PROJECTED_POS_ON_VIEWPORT');
+            }
+        }
+
+        const program = painter.getOrCreateProgram('collisionBox', {defines});
 
         let posMatrix = tileMatrix;
         if (translate[0] !== 0 || translate[1] !== 0) {
@@ -76,11 +106,12 @@ function drawCollisionDebug(painter: Painter, sourceCache: SourceCache, layer: T
         }
         if (!buffers) continue;
         if (painter.terrain) painter.terrain.setupElevationDraw(tile, program);
+        const tileId: [number, number, number] = bucketIsGlobeProjection ? [coord.canonical.x, coord.canonical.y, 1 << coord.canonical.z] : [0, 0, 0];
         program.draw(painter, gl.LINES,
             DepthMode.disabled, StencilMode.disabled,
             painter.colorModeForRenderPass(),
             CullFaceMode.disabled,
-            collisionUniformValues(posMatrix, tr, tile, bucket.getProjection()),
+            collisionUniformValues(posMatrix, invMatrix, tr, globeToMercator, mercatorCenter, tile, tileId, bucket.getProjection()),
             layer.id, buffers.layoutVertexBuffer, buffers.indexBuffer,
             buffers.segments, null, tr.zoom, null,
             [buffers.collisionVertexBuffer, buffers.collisionVertexBufferExt]);

src/render/draw_symbol.ts

@@ -4,7 +4,6 @@ import SegmentVector from '../data/segment';
 import * as symbolProjection from '../symbol/projection';
 import {mat4, vec3, vec4} from 'gl-matrix';
 import {clamp} from '../util/util';
-const identityMat4 = mat4.create();
 import StencilMode from '../gl/stencil_mode';
 import DepthMode from '../gl/depth_mode';
 import CullFaceMode from '../gl/cull_face_mode';
@@ -66,6 +65,8 @@ type SymbolTileRenderState = {
 
 type Alignment = 'auto' | 'map' | 'viewport';
 
+const identityMat4 = mat4.create();
+
 function drawSymbols(painter: Painter, sourceCache: SourceCache, layer: SymbolStyleLayer, coords: Array<OverscaledTileID>, variableOffsets: Partial<Record<CrossTileID, VariableOffset>>) {
     if (painter.renderPass !== 'translucent') return;
 

src/render/program/collision_program.ts

@@ -1,17 +1,25 @@
 import {Uniform1f, Uniform2f, UniformMatrix4f} from '../uniform_binding';
 import EXTENT from '../../style-spec/data/extent';
+import {Uniform3f, type UniformValues} from '../uniform_binding';
 
 import type {mat4} from 'gl-matrix';
 import type Context from '../../gl/context';
-import type {UniformValues} from '../uniform_binding';
 import type Transform from '../../geo/transform';
 import type Tile from '../../source/tile';
 import type Projection from '../../geo/projection/projection';
 
+export type CollisionDebugDefinesType =
+    | 'PROJECTION_GLOBE_VIEW'
+    | 'PROJECTED_POS_ON_VIEWPORT';
+
 export type CollisionUniformsType = {
     ['u_matrix']: UniformMatrix4f;
+    ['u_inv_rot_matrix']: UniformMatrix4f;
     ['u_camera_to_center_distance']: Uniform1f;
     ['u_extrude_scale']: Uniform2f;
+    ['u_zoom_transition']: Uniform1f
+    ['u_merc_center']: Uniform2f
+    ['u_tile_id']: Uniform3f
 };
 
 export type CollisionCircleUniformsType = {
@@ -23,8 +31,12 @@ export type CollisionCircleUniformsType = {
 
 const collisionUniforms = (context: Context): CollisionUniformsType => ({
     'u_matrix': new UniformMatrix4f(context),
+    'u_inv_rot_matrix': new UniformMatrix4f(context),
     'u_camera_to_center_distance': new Uniform1f(context),
-    'u_extrude_scale': new Uniform2f(context)
+    'u_extrude_scale': new Uniform2f(context),
+    'u_zoom_transition': new Uniform1f(context),
+    'u_merc_center': new Uniform2f(context),
+    'u_tile_id': new Uniform3f(context),
 });
 
 const collisionCircleUniforms = (context: Context): CollisionCircleUniformsType => ({
@@ -36,17 +48,25 @@ const collisionCircleUniforms = (context: Context): CollisionCircleUniformsType
 
 const collisionUniformValues = (
     matrix: mat4,
+    invMatrix: mat4,
     transform: Transform,
+    globeToMercator: number,
+    mercatorCenter: [number, number],
     tile: Tile,
+    tileId: [number, number, number],
     projection: Projection,
 ): UniformValues<CollisionUniformsType> => {
     const pixelRatio = EXTENT / tile.tileSize;
 
     return {
         'u_matrix': matrix as Float32Array,
+        'u_inv_rot_matrix': invMatrix as Float32Array,
         'u_camera_to_center_distance': transform.getCameraToCenterDistance(projection),
         'u_extrude_scale': [transform.pixelsToGLUnits[0] / pixelRatio,
-            transform.pixelsToGLUnits[1] / pixelRatio]
+            transform.pixelsToGLUnits[1] / pixelRatio],
+        'u_zoom_transition': globeToMercator,
+        'u_tile_id': tileId,
+        'u_merc_center': mercatorCenter
     };
 };
 

src/render/program/program_uniforms.ts

@@ -2,7 +2,7 @@ import {fillExtrusionDepthUniforms, fillExtrusionUniforms, fillExtrusionPatternU
 import {fillUniforms, fillPatternUniforms, fillOutlineUniforms, fillOutlinePatternUniforms, elevatedStructuresDepthUniforms, elevatedStructuresUniforms, elevatedStructuresDepthReconstructUniforms} from './fill_program';
 import {buildingUniforms, buildingBloomUniforms, buildingDepthUniforms, type BuildingDefinesType} from '../../../3d-style/render/program/building_program';
 import {circleUniforms} from './circle_program';
-import {collisionUniforms, collisionCircleUniforms} from './collision_program';
+import {collisionUniforms, collisionCircleUniforms, type CollisionDebugDefinesType} from './collision_program';
 import {debugUniforms} from './debug_program';
 import {clippingMaskUniforms} from './clipping_mask_program';
 import {heatmapUniforms, heatmapTextureUniforms} from './heatmap_program';
@@ -59,6 +59,7 @@ export type DynamicDefinesType =
     | GlobalDefinesType
     | CircleDefinesType
     | SymbolDefinesType
+    | CollisionDebugDefinesType
     | LineDefinesType
     | FillDefinesType
     | FillExtrusionDefinesType

src/shaders/collision_box.vertex.glsl

@@ -14,13 +14,28 @@ uniform mat4 u_matrix;
 uniform vec2 u_extrude_scale;
 uniform float u_camera_to_center_distance;
 
+#ifdef PROJECTION_GLOBE_VIEW
+uniform vec3 u_tile_id;
+uniform mat4 u_inv_rot_matrix;
+uniform vec2 u_merc_center;
+uniform float u_zoom_transition;
+#endif
+
 out float v_placed;
 out float v_notUsed;
 
 void main() {
     float feature_elevation = a_elevation_from_sea.x + a_auto_z_offset;
     float terrain_elevation = (a_elevation_from_sea.y == 1.0 ? 0.0 : elevation(a_anchor_pos));
-    vec4 projectedPoint = u_matrix * vec4(a_pos + elevationVector(a_anchor_pos) * (feature_elevation + terrain_elevation), 1);
+    vec3 proj_pos = a_pos + elevationVector(a_anchor_pos) * (feature_elevation + terrain_elevation);
+#ifdef PROJECTION_GLOBE_VIEW
+#ifndef PROJECTED_POS_ON_VIEWPORT
+    vec3 globe_pos = proj_pos;
+    vec3 mercator_pos = mercator_tile_position(u_inv_rot_matrix, a_anchor_pos, u_tile_id, u_merc_center);
+    proj_pos = mix_globe_mercator(globe_pos, mercator_pos, u_zoom_transition);
+#endif
+#endif
+    vec4 projectedPoint = u_matrix * vec4(proj_pos, 1);
 
     highp float camera_to_anchor_distance = projectedPoint.w;
     highp float collision_perspective_ratio = clamp(

src/style/query_geometry.ts

@@ -45,9 +45,9 @@ export class QueryGeometry {
 
     isAboveHorizon: boolean;
 
-    constructor(screenBounds: Point[], cameraPoint: Point, aboveHorizon: boolean, transform: Transform) {
+    constructor(screenBounds: Point[], aboveHorizon: boolean, transform: Transform) {
         this.screenBounds = screenBounds;
-        this.cameraPoint = cameraPoint;
+        this.cameraPoint = transform.getCameraPoint();
         this._screenRaycastCache = {};
         this._cameraRaycastCache = {};
         this.isAboveHorizon = aboveHorizon;
@@ -80,7 +80,7 @@ export class QueryGeometry {
             aboveHorizon = polygonizeBounds(tl, br).every((p) => transform.isPointAboveHorizon(p)) && transform.isPointAboveHorizon(center);
         }
 
-        return new QueryGeometry(screenGeometry, transform.getCameraPoint(), aboveHorizon, transform);
+        return new QueryGeometry(screenGeometry, aboveHorizon, transform);
     }
 
     /**

src/symbol/collision_index.ts

@@ -2,13 +2,16 @@ import Point from '@mapbox/point-geometry';
 import PathInterpolator from './path_interpolator';
 import * as intersectionTests from '../util/intersection_tests';
 import Grid from './grid_index';
-import {mat4, vec4} from 'gl-matrix';
+import {mat4, vec2, vec4} from 'gl-matrix';
 import ONE_EM from '../symbol/one_em';
 import {FOG_SYMBOL_CLIPPING_THRESHOLD, getFogOpacityAtTileCoord} from '../style/fog_helpers';
 import assert from 'assert';
 import * as symbolProjection from '../symbol/projection';
-import {degToRad} from '../util/util';
+import {degToRad, wrap} from '../util/util';
 import {clipLines} from '../util/line_clipping';
+import EXTENT from '../style-spec/data/extent';
+import {number as mix} from '../style-spec/util/interpolate';
+import {globeToMercatorTransition} from '../geo/projection/globe_util';
 
 import type {OverscaledTileID} from '../source/tile_id';
 import type {vec3} from 'gl-matrix';
@@ -92,6 +95,9 @@ class CollisionIndex {
         bucket: SymbolBucket,
         scale: number,
         collisionBox: SingleCollisionBox,
+        mercatorCenter: [number, number],
+        invMatrix: mat4,
+        projectedPosOnLabelSpace: boolean,
         shift: Point,
         allowOverlap: boolean,
         textPixelRatio: number,
@@ -101,9 +107,11 @@ class CollisionIndex {
     ): PlacedCollisionBox {
         assert(!this.transform.elevation || collisionBox.elevation !== undefined);
 
-        let anchorX = collisionBox.projectedAnchorX;
-        let anchorY = collisionBox.projectedAnchorY;
-        let anchorZ = collisionBox.projectedAnchorZ;
+        let projectedAnchorX = collisionBox.projectedAnchorX;
+        let projectedAnchorY = collisionBox.projectedAnchorY;
+        let projectedAnchorZ = collisionBox.projectedAnchorZ;
+        const anchorX = collisionBox.tileAnchorX;
+        const anchorY = collisionBox.tileAnchorY;
 
         // Apply elevation vector to the anchor point
         const elevation = collisionBox.elevation;
@@ -113,13 +121,36 @@ class CollisionIndex {
             const [ux, uy, uz] = projection.upVector(tileID.canonical, collisionBox.tileAnchorX, collisionBox.tileAnchorY);
             const upScale = projection.upVectorScale(tileID.canonical, this.transform.center.lat, this.transform.worldSize).metersToTile;
 
-            anchorX += ux * elevation * upScale;
-            anchorY += uy * elevation * upScale;
-            anchorZ += uz * elevation * upScale;
+            projectedAnchorX += ux * elevation * upScale;
+            projectedAnchorY += uy * elevation * upScale;
+            projectedAnchorZ += uz * elevation * upScale;
+        }
+
+        const bucketIsGlobeProjection = bucket.projection.name === 'globe';
+        const globeToMercator = bucket.projection.name === 'globe' ? globeToMercatorTransition(this.transform.zoom) : 0.0;
+        const isGlobeToMercatorTransition = globeToMercator < 1;
+
+        if (tileID && bucketIsGlobeProjection && isGlobeToMercatorTransition && !projectedPosOnLabelSpace) {
+            const tilesCount = 1 << tileID.canonical.z;
+            const mercator = vec2.fromValues(anchorX, anchorY);
+            vec2.scale(mercator, mercator, 1 / EXTENT);
+            vec2.add(mercator, mercator, vec2.fromValues(tileID.canonical.x, tileID.canonical.y));
+            vec2.scale(mercator, mercator, 1 / tilesCount);
+            vec2.sub(mercator, mercator, vec2.fromValues(mercatorCenter[0], mercatorCenter[1]));
+            mercator[0] = wrap(mercator[0], -0.5, 0.5);
+
+            vec2.scale(mercator, mercator, EXTENT);
+
+            const mercatorPosition = vec4.fromValues(mercator[0], mercator[1], EXTENT / (2.0 * Math.PI), 1.0);
+            vec4.transformMat4(mercatorPosition, mercatorPosition, invMatrix);
+
+            projectedAnchorX = mix(projectedAnchorX, mercatorPosition[0], globeToMercator);
+            projectedAnchorY = mix(projectedAnchorY, mercatorPosition[1], globeToMercator);
+            projectedAnchorZ = mix(projectedAnchorZ, mercatorPosition[2], globeToMercator);
         }
 
         const checkOcclusion = projection.name === 'globe' || !!elevation || this.transform.pitch > 0;
-        const projectedPoint = this.projectAndGetPerspectiveRatio(posMatrix, anchorX, anchorY, anchorZ, collisionBox.tileID, checkOcclusion, projection);
+        const projectedPoint = this.projectAndGetPerspectiveRatio(posMatrix, projectedAnchorX, projectedAnchorY, projectedAnchorZ, collisionBox.tileID, checkOcclusion, projection);
 
         const tileToViewport = textPixelRatio * projectedPoint.perspectiveRatio;
         const tlX = (collisionBox.x1 * scale + shift.x - collisionBox.padding) * tileToViewport + projectedPoint.point.x;