Rendering artifacts when using rectangle in 2D

CesiumJS
1

Testing the following code with sandcastle demonstrates a problem when rendering a rectangle. Position Africa so that it is approximately in the middle of the render area. A white rectangular region should be rendered to the right-most side of the render area. This rectangle will visibly change size (shrink/expand) as the map is panned left and right.

Is this a bug, and if so, is there a workaround for it?

code follows…

var viewer = new Cesium.Viewer(‘cesiumContainer’,
{
sceneMode: Cesium.SceneMode.SCENE2D,
mapProjection: new Cesium.WebMercatorProjection()
});

viewer.entities.add(
{
rectangle: {
coordinates:
Cesium.Rectangle.fromDegrees(150.000000,0.000000, 180, 51)
}});

2

Incidentally, I have tested the code above using 3D, and it works as expected.

3

Hi there,

I believe this is the same issue as Infinite scroll: buggy culling of primitive to the west of the IDL · Issue #10484 · CesiumGS/cesium · GitHub. I’ll add this report for awareness. Thanks!

4

I’ve been trying various things, and discovered that if I add an extrudedHeight propery of zero to the rectangle, then the “buggy culling” no longer occurs. However (and why is it there’s always a ‘however’ :melting_face:) adding the extrudedHeight causes the color issue that I recently reported here (https://community.cesium.com/t/colors-appearing-different-between-3d-and-2d/21634)

Perhaps this finding, if it hasn’t already been found by your team, will be helpful.

var viewer = new Cesium.Viewer('cesiumContainer',
{
sceneMode: Cesium.SceneMode.SCENE2D,
mapProjection: new Cesium.WebMercatorProjection()
});

viewer.entities.add(
{
rectangle: {
coordinates:
Cesium.Rectangle.fromDegrees(150.000000,0.000000, 180, 51),
  extrudedHeight: 0
}});