points with large Z shown behind rectangle with smaller Z

CesiumJS
1

Hi

I want to plot points and rectangles in 3D way above earth. I have code that, if in 3D, all works decently but when I switch to 2D, the rectangle shows in front of the points (sandcastle code below).

Any idea what is going on?

var viewer = new Cesium.Viewer(‘cesiumContainer’,{
skyBox: false,
skyAtmosphere : false
});

/**/
var rectangle = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : new Cesium.RectangleGeometry({
rectangle : Cesium.Rectangle.fromDegrees(-120.0, 20.0, -60.0, 40.0),
//vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
height : 300000.0
})
}),
appearance : new Cesium.EllipsoidSurfaceAppearance({
aboveGround : true,
material: new Cesium.Material({
// translucent: true,
fabric : {
type : ‘Image’,
uniforms : {
image : ‘…/images/Cesium_Logo_Color.jpg’
}
}
})
})
}));

var points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());

points._rs = Cesium.RenderState.fromCache({
depthTest : {
enabled : true
},
depthMask : false,
blending : Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND
});

function randomPoint () {
var phi = Math.random() * 2 * Math.PI;
var rho = Math.random();
var x = Math.sqrt(rho) * Math.cos(phi);
var y = Math.sqrt(rho) * Math.sin(phi);
var xmin = -120;
var xmax = -60;
var dx = xmax - xmin;
var ymin = 20;
var ymax = 40;
var dy = ymax - ymin;
var centerx = xmin + dx * 0.5;
var centery = ymin + dy * 0.5;
var r = dx * 0.5;
var px = centerx + x * r;
var py = centery + y * r;
var pt = Cesium.Cartesian3.fromDegrees(px, py, 500000);
points.add({
position : pt,
color: new Cesium.Color(0.9, 0.01, 0.9, 0.9),
pixelSize : 2,
scaleByDistance : new Cesium.NearFarScalar(1.0e1, 4, 8.0e6, 2)
});
}

viewer.zoomTo(viewer.entities);

for (var i = 0; i < 500; i++) {
randomPoint();
}

``

2

Thanks for the great code example! That’s really helpful for us.
This looks like a bug in Cesium. I’ve filed an issue here: https://github.com/AnalyticalGraphicsInc/cesium/issues/3647

Thanks for reporting this! Hopefully someone will address it soon.

Best,

Hannah

3

ok good to know it’s a bug

i’d like for it to work with Cesium.BlendingState.ADDITIVE_BLEND applied to the points

the reason for this is that i’m using that blend for this map. notice the small “moon” west of Chile. our dataset has points in space and the moon and i want to be able to see them (in 2D as well as in 3D):

  • when in 2D, the points show up in that area which (i believe) is uninhabited
  • when in 3D, the height is taken into account and the points would separate from the surface to whatever z value was given (we don’t put the correct z value for “moon” because it would be too far to be useful to visualize)
    right now the points i am talking about are being plotted in the north atlantic:

if you switch to 3D you’ll see what i mean:

4

Oh cool, that’s a really neat app! The additive blend gives a really nice effect.
We like to feature different applications on the demos page of our website to showcase the wide variety of cool things people are doing with Cesium. Would you be interested in putting together a showcase?

Also, as a workaround for the rectangle overlap issue, you could use a SingleTileIMageryProvider to put your overlay on the globe. I modified your example to show how it works with a SingleTileImageryProvider:

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

viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : ‘…/images/Cesium_Logo_Color.jpg’,
rectangle : Cesium.Rectangle.fromDegrees(-120.0, 20.0, -60.0, 40.0)
}));

var points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());

points._rs = Cesium.RenderState.fromCache({
depthTest : {
enabled : true
},
depthMask : false,
blending : Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND
});

function randomPoint () {
var phi = Math.random() * 2 * Math.PI;
var rho = Math.random();
var x = Math.sqrt(rho) * Math.cos(phi);
var y = Math.sqrt(rho) * Math.sin(phi);
var xmin = -120;
var xmax = -60;
var dx = xmax - xmin;
var ymin = 20;
var ymax = 40;
var dy = ymax - ymin;
var centerx = xmin + dx * 0.5;
var centery = ymin + dy * 0.5;
var r = dx * 0.5;
var px = centerx + x * r;
var py = centery + y * r;
var pt = Cesium.Cartesian3.fromDegrees(px, py, 500000);
points.add({
position : pt,
color: new Cesium.Color(0.9, 0.01, 0.9, 0.9),
pixelSize : 2,
scaleByDistance : new Cesium.NearFarScalar(1.0e1, 4, 8.0e6, 2)
});
}

viewer.zoomTo(viewer.entities);

for (var i = 0; i < 500; i++) {
randomPoint();
}

``

Best,

Hannah

5

i did try the imageryprovider but wanted to be able to show the “floating” version when in 3D. i have no choice but to hide the moon in 3D now, as seen in the new version of the app.

i’ll guess i’ll show a floating outline ellipse with text instead.

looking forward to that bug fix!

we can definitely do a showcase of the app once it’s live!

6

Great! I’ve CCed Sarah on this message. She’ll get in touch with you about putting together a showcase =)

-Hannah