diff --git a/src/shaders/symbol_icon.vertex.glsl b/src/shaders/symbol_icon.vertex.glsl index 16ab111429c..dc1a1e53097 100644 --- a/src/shaders/symbol_icon.vertex.glsl +++ b/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; diff --git a/src/shaders/symbol_sdf.vertex.glsl b/src/shaders/symbol_sdf.vertex.glsl index 71ccf3c81d7..36a46a6bde2 100644 --- a/src/shaders/symbol_sdf.vertex.glsl +++ b/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)); diff --git a/src/symbol/projection.js b/src/symbol/projection.js index 894e7ff345f..92d840f1b1c 100644 --- a/src/symbol/projection.js +++ b/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,