Fix rendering of symbols behind the camera

mapbox · Nov 22, 2019 · ab728ff · ab728ff
1 parent 1579741
commit ab728ff
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/src/shaders/symbol_icon.vertex.glsl b/src/shaders/symbol_icon.vertex.glsl
@@ -82,7 +82,11 @@ void main() {
     mat2 rotation_matrix = mat2(angle_cos, -1.0 * angle_sin, angle_sin, angle_cos);
 
     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 * fontScale), 0.0, 1.0);
+    vec4 clip_pos = u_coord_matrix * vec4(projected_pos.xy / projected_pos.w + rotation_matrix * (a_offset / 32.0 * fontScale), 0.0, 1.0);
+
+    // Don't render symbols that are behind the camera (-w * 1.01 transforms into a depth value of -1.01 in NDC)
+    clip_pos.z = mix(-clip_pos.w * 1.01, clip_pos.z, float(projected_pos.w > 0.0));
+    gl_Position = clip_pos;
 
     v_tex = a_tex / u_texsize;
     vec2 fade_opacity = unpack_opacity(a_fade_opacity);

diff --git a/src/shaders/symbol_sdf.vertex.glsl b/src/shaders/symbol_sdf.vertex.glsl
@@ -101,7 +101,11 @@ void main() {
     mat2 rotation_matrix = mat2(angle_cos, -1.0 * angle_sin, angle_sin, angle_cos);
 
     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 * fontScale), 0.0, 1.0);
+    vec4 clip_pos = u_coord_matrix * vec4(projected_pos.xy / projected_pos.w + rotation_matrix * (a_offset / 32.0 * fontScale), 0.0, 1.0);
+
+    // Don't render symbols that are behind the camera (-w * 1.01 transforms into a depth value of -1.01 in NDC)
+    clip_pos.z = mix(-clip_pos.w * 1.01, clip_pos.z, float(projected_pos.w > 0.0));
+    gl_Position = clip_pos;
     float gamma_scale = gl_Position.w;
 
     vec2 tex = a_tex / u_texsize;

diff --git 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 glyphs that are 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,