Hide glyphs behind the camera (#9229)

src/shaders/symbol_icon.vertex.glsl

@@ -87,6 +87,10 @@ void main() {
     vec4 projected_pos = u_label_plane_matrix * vec4(a_projected_pos.xy, 0.0, 1.0);
     gl_Position = u_coord_matrix * vec4(projected_pos.xy / projected_pos.w + rotation_matrix * (a_offset / 32.0 * max(a_minFontScale, fontScale) + a_pxoffset / 16.0), 0.0, 1.0);
 
+    // Symbols might end up being behind the camera. Modify z-value to be out of visible bounds
+    // if this is the case, otherwise ignore depth. -1.1 is safely out of the visible depth range [-1, 1]
+    gl_Position.z = mix(-1.1 * gl_Position.w, gl_Position.z, float(projected_pos.w > 0.0));
+
     v_tex = a_tex / u_texsize;
     vec2 fade_opacity = unpack_opacity(a_fade_opacity);
     float fade_change = fade_opacity[1] > 0.5 ? u_fade_change : -u_fade_change;

src/shaders/symbol_sdf.vertex.glsl

@@ -106,6 +106,10 @@ void main() {
     gl_Position = u_coord_matrix * vec4(projected_pos.xy / projected_pos.w + rotation_matrix * (a_offset / 32.0 * fontScale + a_pxoffset), 0.0, 1.0);
     float gamma_scale = gl_Position.w;
 
+    // Symbols might end up being behind the camera. Modify z-value to be out of visible bounds
+    // if this is the case, otherwise ignore depth. -1.1 is safely out of the visible depth range [-1, 1]
+    gl_Position.z = mix(-1.1 * gl_Position.w, gl_Position.z, float(projected_pos.w > 0.0));
+
     vec2 fade_opacity = unpack_opacity(a_fade_opacity);
     float fade_change = fade_opacity[1] > 0.5 ? u_fade_change : -u_fade_change;
     float interpolated_fade_opacity = max(0.0, min(1.0, fade_opacity[0] + fade_change));

src/symbol/projection.js

@@ -185,7 +185,15 @@ function updateLineLabels(bucket: SymbolBucket,
             fontSize / perspectiveRatio;
 
         const tileAnchorPoint = new Point(symbol.anchorX, symbol.anchorY);
-        const anchorPoint = project(tileAnchorPoint, labelPlaneMatrix).point;
+        const transformedTileAnchor = project(tileAnchorPoint, labelPlaneMatrix);
+
+        // Skip labels behind the camera
+        if (transformedTileAnchor.signedDistanceFromCamera <= 0.0) {
+            hideGlyphs(symbol.numGlyphs, dynamicLayoutVertexArray);
+            continue;
+        }
+
+        const anchorPoint = transformedTileAnchor.point;
         const projectionCache = {};
 
         const placeUnflipped: any = placeGlyphsAlongLine(symbol, pitchScaledFontSize, false /*unflipped*/, keepUpright, posMatrix, labelPlaneMatrix, glCoordMatrix,