Fix translucent picking

CHANGES.md

@@ -8,6 +8,7 @@ Change Log
 * Added `OpenCageGeocoderService`, which provides geocoding via [OpenCage](https://opencagedata.com/). [#7015](https://github.com/AnalyticalGraphicsInc/cesium/pull/7015)
 
 ##### Fixes :wrench:
+* Fixed picking for overlapping translucent primitives. [#7039](https://github.com/AnalyticalGraphicsInc/cesium/pull/7039)
 * Fixed an issue in the 3D Tiles traversal where external tilesets would not always traverse to their root tile. [#7035](https://github.com/AnalyticalGraphicsInc/cesium/pull/7035)
 * Fixed an issue in the 3D Tiles traversal where empty tiles would be selected instead of their nearest loaded ancestors. [#7011](https://github.com/AnalyticalGraphicsInc/cesium/pull/7011)
 * Fixed an issue where scaling near zero with an model animation could cause rendering to stop. [#6954](https://github.com/AnalyticalGraphicsInc/cesium/pull/6954)

Source/Scene/DerivedCommand.js

@@ -289,6 +289,7 @@ define([
         if (!defined(pickState)) {
             var rs = RenderState.getState(renderState);
             rs.blending.enabled = false;
+            rs.depthMask = true;
 
             pickState = RenderState.fromCache(rs);
             cache[renderState.id] = pickState;

Source/Scene/Scene.js

@@ -1841,14 +1841,19 @@ define([
         }
     }
 
-    function translucentCompare(a, b, position) {
+    function backToFront(a, b, position) {
         return b.boundingVolume.distanceSquaredTo(position) - a.boundingVolume.distanceSquaredTo(position);
     }
 
-    function executeTranslucentCommandsSorted(scene, executeFunction, passState, commands, invertClassification) {
+    function frontToBack(a, b, position) {
+        // When distances are equal equal favor sorting b before a. This gives render priority to commands later in the list.
+        return a.boundingVolume.distanceSquaredTo(position) - b.boundingVolume.distanceSquaredTo(position) + CesiumMath.EPSILON12;
+    }
+
+    function executeTranslucentCommandsBackToFront(scene, executeFunction, passState, commands, invertClassification) {
         var context = scene.context;
 
-        mergeSort(commands, translucentCompare, scene.camera.positionWC);
+        mergeSort(commands, backToFront, scene.camera.positionWC);
 
         if (defined(invertClassification)) {
             executeFunction(invertClassification.unclassifiedCommand, scene, context, passState);
@@ -1860,9 +1865,11 @@ define([
         }
     }
 
-    function executeTranslucentCommandsUnsorted(scene, executeFunction, passState, commands, invertClassification) {
+    function executeTranslucentCommandsFrontToBack(scene, executeFunction, passState, commands, invertClassification) {
         var context = scene.context;
 
+        mergeSort(commands, frontToBack, scene.camera.positionWC);
+
         if (defined(invertClassification)) {
             executeFunction(invertClassification.unclassifiedCommand, scene, context, passState);
         }
@@ -1975,9 +1982,9 @@ define([
             }
             executeTranslucentCommands = scene._executeOITFunction;
         } else if (passes.render) {
-            executeTranslucentCommands = executeTranslucentCommandsSorted;
+            executeTranslucentCommands = executeTranslucentCommandsBackToFront;
         } else {
-            executeTranslucentCommands = executeTranslucentCommandsUnsorted;
+            executeTranslucentCommands = executeTranslucentCommandsFrontToBack;
         }
 
         var clearGlobeDepth = environmentState.clearGlobeDepth;