Z-fighting with translucent rectangle underneath opaque one

CesiumJS
1

This issue is kind of related to the StackOverflow post here.

I have two layers that I’d like to display stacked on top of each other in Cesium. The bottom layer is a heat map (pulled from this repo); the upper layer consists of opaque polygons with a slightly higher height property than the heat map (think rectangles, ellipses, or polygons loaded from GeoJSON).

The heat map needs a couple of tweaks to show transparently over Cesium’s base tile set. Applying the relevant PR seems to introduce a bug where a translucent entity (heatmap) will occasionally “poke through” any opaque layers above it depending on the camera’s pitch / magnitude. I’ve created a gist so that you can see the bug in action (just copy/paste into sandcastle).

Am I using the translucenct property correctly? It seems like the fix suggested in the stack overflow article above won’t apply to this situation.

Here’s a handy-dandy .gif of what’s happening:

Any advice is greatly appreciated!

2

Hello,

Unfortunately, Cesium doesn’t currently have support for z-ordering. We have an issue written up on our GitHub here: https://github.com/AnalyticalGraphicsInc/cesium/issues/4108

I added a link to your forum post so we can track how many users are requesting this feature.

For now, you can either use an alpha that’s very close to 1 to make the polygons translucent, or you can try to add a small height to the polygons.

Best,

Hannah

3

Hello，how do you use the CesiumHeatMap？Can you give me an example about it? Thank you.

在 2017年2月9日星期四 UTC+8上午4:48:51，David Northern写道：

4

Hannah –

Thanks for the update! I’d take a shot at fixing render ordering, but there’s a pretty steep learning curve (and you probably wouldn’t want to see my code :P).

Rick –

To get your started, just add the Cesium + CesiumHeatmap script to your page, create the heatmap using a bounding box (NSEW lat / lon coordinates), then use one of the setData() methods to draw pixels on the canvas (hint: use setWGS84Data() for latitude / longitude data). If you need more help, I can work up an example later on today.

5

Thanks,I try it but failed.Here are my codes:

var instance = CesiumHeatmap.create(viewer, {
    north: 40,
    east: 72,
    south: 0,
    west: 116
});
var data = [{
    x: 100,
    y: 20,
    value: 30
}, {
    x: 80,
    y: 20,
    value: 40
}, {
    x: 97,
    y: 30,
    value: 90
}];
instance.setData(0, 1000, data);

but shows the error:

Please show me your example，thank you~

在 2017年2月9日星期四 UTC+8下午8:42:18，David Northern写道：

6

在 2017年2月9日星期四 UTC+8上午4:48:51，David Northern写道：

This issue is kind of related to the StackOverflow post here.

I have two layers that I'd like to display stacked on top of each other in Cesium. The bottom layer is a heat map (pulled from this repo); the upper layer consists of opaque polygons with a slightly higher height property than the heat map (think rectangles, ellipses, or polygons loaded from GeoJSON).

The heat map needs a couple of tweaks to show transparently over Cesium's base tile set. Applying the relevant PR seems to introduce a bug where a translucent entity (heatmap) will occasionally "poke through" any opaque layers above it depending on the camera's pitch / magnitude. I've created a gist so that you can see the bug in action (just copy/paste into sandcastle).

Am I using the translucenct property correctly? It seems like the fix suggested in the stack overflow article above won't apply to this situation.

Here's a handy-dandy .gif of what's happening:

Any advice is greatly appreciated!

Can you give some tips about how to develop your functions above gif