Dynamic Distance Display Condition Not Working

[billwritescode]

Reported on the forum: https://groups.google.com/forum/#!topic/cesium-dev/N7vPMwXtiGg and https://groups.google.com/forum/#!topic/cesium-dev/zSXhiqaPt8k

Dynamic distance display conditions have a bug where the polygon is displayed even though the distance between it and the camera is greater than the distance display condition.

This is easier to reproduce when the camera is moved so that the entities are out of view. This is done upon initial load of the sandcastle.

Clicking on an entity will display (TOO FAR) if the polygon should not be visible by the distance display condition. This is only a problem in the case where the polygon is also displayed. The below screenshot is an example of a false positive by this (TOO FAR) test. Note how (TOO FAR) is displayed in the entity's description, but the polygon for Missouri is not visible on the map. In this case, it is safe to ignore the (TOO FAR) test.

It is the other cases that are troubling. If the (TOO FAR) test is coming up as (TOO FAR) when the polygon is displayed, Houston, we have a problem.

This is reproducible in the below sandcastle without too much trouble by slightly adjusting the zoom and camera position via the mouse after the camera movements have finished.

Sandcastle: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=59039e5c204b9fe673d1cbf1c4f2cc83

The below screenshot demonstrates the issue in Internet Explorer:

The below screenshot demonstrates the issue in Firefox:

In the below case, the (TOO FAR) test was not applied. However, the fact that the polygon and label for Kansas are both present at the same time raises suspicions. The fact that both the polygon and label for Texas are visible on the map is similarly suspicious.

The source for the (TOO FAR) test:

// CUSTOM CLICK HANDLER
var originalClickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
viewer.screenSpaceEventHandler.setInputAction(clickHandler, Cesium.ScreenSpaceEventType.LEFT_CLICK);


function clickHandler(payload) {    
    
    var picked = viewer.scene.drillPick(payload.position)[0];
    
    if (picked) {
        
        var pickedPos;
        pickedPos = picked.id.position._value;

        
        var cameraPos = viewer.scene.camera.position;
        var distance = Cesium.Cartesian3.distance(cameraPos, pickedPos);
        
        var far = picked.id.polygon.distanceDisplayCondition._callback()._far;
         
        var tooFar = far - distance <= 0 ? '  (TOO FAR, ' + far + ')' : '';
                
        picked.id.description = "Distance: " + distance + tooFar;   
    }    
    
    originalClickHandler(payload);
}

The source for the camera zooms:

// CAMERY FLY FUNCTIONS
function flyStart () {
    var start = {
        destination: Cesium.Cartesian3.fromDegrees(-121, 35, 800000.0)
    };
    viewer.camera.flyTo(start);
}


function flyHome () {
    var home = {
        destination: Cesium.Cartesian3.fromRadians(-1.6843483301420932, 0.47487287505729037, 4195873.061330347)
    };
    viewer.camera.flyTo(home);
}


function flyAway() {
    var away = {
        destination: Cesium.Cartesian3.fromDegrees(0.0, 0.0, 1000.0)
    };
    viewer.camera.flyTo(away);
}


setTimeout(flyStart, 300);
setTimeout(flyAway, 2000);
setTimeout(flyHome, 3500);

The code for the dynamic distance display condition, credit (and thanks!) to @bagnell in #4403 (comment):

// CODE FROM BAGNELL

function getDistance(entity, boundingSphere) {
  var ellipsoid = Cesium.Ellipsoid.WGS84;

  var center = boundingSphere.center;
  var radius = boundingSphere.radius;
  var eastNorthUp = Cesium.Transforms.eastNorthUpToFixedFrame(center, ellipsoid);
  var eastNorthUpRotation = Cesium.Matrix4.getRotation(eastNorthUp, new Cesium.Matrix3());
  var localX = Cesium.Matrix3.getColumn(eastNorthUpRotation, 0, new Cesium.Cartesian3());
  var localY = Cesium.Matrix3.getColumn(eastNorthUpRotation, 1, new Cesium.Cartesian3());
  var scaledX = Cesium.Cartesian3.multiplyByScalar(localX, radius, localX);
  var scaledY = Cesium.Cartesian3.multiplyByScalar(localY, radius, localY);

  var cartesianArray = new Array(4);
  cartesianArray[0] = Cesium.Cartesian3.add(center, scaledX, new Cesium.Cartesian3());
  cartesianArray[1] = Cesium.Cartesian3.add(center, Cesium.Cartesian3.negate(scaledX, scaledX), new Cesium
    .Cartesian3());
  cartesianArray[2] = Cesium.Cartesian3.add(center, scaledY, new Cesium.Cartesian3());
  cartesianArray[3] = Cesium.Cartesian3.add(center, Cesium.Cartesian3.negate(scaledY, scaledY), new Cesium
    .Cartesian3());

  var rectangle = Cesium.Rectangle.fromCartesianArray(cartesianArray, ellipsoid);
  var approxCameraPosition = viewer.scene.camera.getRectangleCameraCoordinates(rectangle);
  return Cesium.Cartesian3.magnitude(approxCameraPosition) - ellipsoid.maximumRadius;
}

dataSource.entities.collectionChanged.addEventListener(function(collection, added, removed, changed) {
  var deffereds = [];
  var promises = [];

  var entities = added;
  var length = entities.length;
  for (var i = 0; i < length; ++i) {
    var entity = entities[i];
    var deffered = Cesium.when.defer();

    deffereds.push({
      deffered: deffered,
      entity: entity
    });
    promises.push(deffered.promise);
  }

  var removeEventListener = viewer.scene.postRender.addEventListener(function() {
    var length = deffereds.length;
    var defferedsToRemove = [];

    for (var i = 0; i < length; ++i) {
      var deffered = deffereds[i].deffered;
      var entity = deffereds[i].entity;

      var result = new Cesium.BoundingSphere();
      var status = viewer.dataSourceDisplay.getBoundingSphere(entity, true, result);
      if (status === Cesium.BoundingSphereState.DONE) {
        deffered.resolve({
          entity: entity,
          boundingSphere: result
        });
      } else if (status === Cesium.BoundingSphereState.FAILED) {
        deffered.reject();
      }

      if (status !== Cesium.BoundingSphereState.PENDING) {
        defferedsToRemove.push(deffereds[i]);
      }
    }

    for (var j = 0; j < defferedsToRemove.length; ++j) {
      deffereds.splice(deffereds.indexOf(defferedsToRemove[j]), 1);
    }
  });

  Cesium.when.all(promises).then(function(values) {
    var length = values.length;
    for (var i = 0; i < length; ++i) {
      var entity = values[i].entity;
      var boundingSphere = values[i].boundingSphere;

      entity.position = boundingSphere.center;
      entity.label = {
        show: new Cesium.CallbackProperty(function(time, result) {
          return dataSource.clustering.enabled;
        }, false),
        text: entity.properties.name,
        distanceDisplayCondition: new Cesium.CallbackProperty(function(time, result) {
          if (!Cesium.defined(result)) {
            result = new Cesium.DistanceDisplayCondition();
          }
          result.near = getDistance(entity, boundingSphere);
          return result;
        }, false)
      };
      entity.polygon.distanceDisplayCondition = new Cesium.CallbackProperty(function(time,
        result) {
        if (!Cesium.defined(result)) {
          result = new Cesium.DistanceDisplayCondition();
        }
        if (dataSource.clustering.enabled) {
          result.far = getDistance(entity, boundingSphere);
        } else {
          result.far = Number.MAX_VALUE;
        }
        return result;
      }, false);
    }

    removeEventListener();
  });
});

var url = '../../SampleData/ne_10m_us_states.topojson';
dataSource.load(url, {
  clampToGround: false
});
viewer.dataSources.add(dataSource);

var viewModel = {
  enabled: dataSource.clustering.enabled
};
Cesium.knockout.track(viewModel);

var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout.getObservable(viewModel, 'enabled').subscribe(
  function(newValue) {
    dataSource.clustering.enabled = newValue;
  }
);

[billwritescode]

Hello Cesium team! It would be super if you all were able to work this for the December 2015 code sprint!.

Thanks for all your hard work and enjoy the Poconos! I'm throwing this comment in here per the S.O.P. in https://groups.google.com/forum/#!topic/cesium-dev/zkekUUpM0u8.

[hpinkos]

Thanks for all of the information and screen shots @billwritescode! I'm not sure if we'll have a chance to look at this at the code sprint, but if not we'll try to put in some time shortly after. We have a few other open bug reports related to distance display conditions

[billwritescode]

Thanks for the reply @hpinkos! Looking forward to it.

[pjcozzi]

CC #4696

[bagnell]

This happens because the distance for polygons is the distance to it's bounding sphere. The other option was to use the distance to the center of the polygon, but there are different ways to pick a center and the position of the point/label could still be different. I could add an optional position property to a distance display condition so it could be the same as the point/label and fall back to the bounding sphere.

[pjcozzi]

@bagnell sounds like a good approach.

[billwritescode]

@bagnell

It seems like you could test that by dynamically making the distance display condition's far property set to a really low value (say, 1). That would make the distance display condition always (except in the case where you are zoomed in really close) exclude the polygon, because the distance calculated to the bounding sphere, it is likely greater than 1.

In that case, I would expect the polygon not to be displayed.

This sandcastle does that, but the polygon still appears: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=b64af30b9c8f3f8f868c3a59cb276a68

https://lh3.googleusercontent.com/-_a-pIEkXQHg/WD2yeQRbiQI/AAAAAAAABAc/63rLOYTD2zkoyH_UpisbPKqyV2DsTHxtQCLcB/s1600/persisting_polygons_ddc_2.gif

In that example, you have to first pan the map away from California and the entities, pan back, and then zoom out a couple of times in order to get the issue to appear.

Is something else going on?

[billwritescode]

So, since December, there have been some updates to how Cesium displays labels, so the above sandcastle doesn't show the cluster labels anymore on Cesium 1.32.

@pjcozzi @bagnell, just bumping this thread -- any thoughts on the above comments?

[bagnell]

@billwritescode I've been looking at your latest code example. I think there are multiple issues.

I still stand by my first comment. To get the correct distance for the 'TOO FAR' value you need to take the bounding sphere into account. The distance should be distance(cameraPos, pickedPos) - radius to get the distance to the bounding volume.

If I simplify your second example, everything starts to work fine, which makes me think there is more that one issue. I'm still looking into it.

[cesium-concierge]

Congratulations on closing the issue! I found these Cesium forum links in the comments above:

https://groups.google.com/forum/#!topic/cesium-dev/N7vPMwXtiGg
https://groups.google.com/forum/#!topic/cesium-dev/zSXhiqaPt8k
https://groups.google.com/forum/#!topic/cesium-dev/zkekUUpM0u8

If this issue affects any of these threads, please post a comment like the following:

The issue at #4714 has just been closed and may resolve your issue. Look for the change in the next stable release of Cesium or get it now in the master branch on GitHub https://github.com/AnalyticalGraphicsInc/cesium.

---

I am a bot who helps you make Cesium awesome! Contributions to my configuration are welcome.

🌍 🌎 🌏

[hpinkos]

@billwritescode I believe I fixed this in #6835. The fix will be included in the Cesium 1.48 release available on August 1st. If you still see this problem in 1.48 feel free to reopen this issue. Thanks!