Z-Ordering of entity collection

[tfili]

It would be nice to be able to change the render order of entities. Right now we have to tweak the eyeOffset which needs to change based on camera distance.

[hpinkos]

This is probably one of the most frequently requested things on the forum.
Also requested in #53

[pjcozzi]

CC #3647

[shunter]

cc AnalyticalGraphicsInc/czml-writer#20

[hpinkos]

Related: #4878 #4695

[hpinkos]

Also reported here: https://groups.google.com/forum/?hl=en#!topic/cesium-dev/iyNHsibp2eI

[smills2929]

+1. I'd love to see this!

[hpinkos]

Also requested here: https://groups.google.com/forum/?hl=en#!topic/cesium-dev/p_TufXEFwTA

[emackey]

Thinking about a possible implementation for billboards: https://groups.google.com/d/msg/cesium-dev/7CHDGRyJvwc/S55fUJ8XCAAJ

[schitzN]

push

Seems like this is still an issue. We have the same problem with labels drawn underneath polylines.

[hpinkos]

Hi @schitzN, this hasn't been addressed yet. But stay tuned! We're starting work on this in the next month

[ggetz]

@hpinkos Will these changes also apply to billboard/lablel/polyline collections?

See on the forum: https://groups.google.com/forum/#!topic/cesium-dev/ywyFR5GSi_c

[hpinkos]

@ggetz the changes I'm working on this round are specifically to address z-ordering in 3D, so I won't be making changes to billboards/labels because they are ordered spatially by their 3D position. We will have support for ordering polylines on the earth surface.

[erezy]

@ggetz Thanks!
@hpinkos changing the order of the primitives collections in 2D worked in the past (V 1.21)
I don't know why it stopped working.
Do you know when the issue will be resolved?

[hpinkos]

Thanks @erezy, I didn't realize this was a regression. I've opened a separate issue so we can look into fixing it: #6569

[eatjhuapl]

Will these changes also apply to rendering GeoJsonDataSource ?

[hpinkos]

@eatapl we haven't hooked this up to GeoJson because I couldn't find anything in the GeoJSON spec that can be used to specify polygon ordering. Does GeoJSON have a property used for ordering that I missed? Thanks!

[killroy42]

Is there a workaround currently for at least drawing polylines below billboards? I'm implementing my own z-ordering where I can, but I don't know how to interact with the render pipeline for the parts of a single entity.

[hpinkos]

@ladislavhorky Could you put together a Sandcastle example to reproduce that?

[ladislavhorky]

@hpinkos here it is. You only need to turn it a bit to get some label in the town square to cross transparent polyline.

[hpinkos]

@ladislavhorky The lines are drawing on top of the labels because you set a depthFailMaterial. That is working as designed. The depthFailMaterial colors the line when it fails the depth test, so it will always draw on top of the label when the label is in front of the line spatially. The lines look like they are rendering below the labels if I remove depthFailMaterial

[ladislavhorky]

@hpinkos I see, that makes sense. But then, is there some way to make the polylines visible through the terrain/3D tiles without setting depthFailMaterial and thus interfering with labels? Like maybe splitting labels and lines into separate datasources? The intended behavior is to make both labels and lines visible through the mesh with correct z-ordering much like in Zpeugh's example.

My best workaround so far is to use distanceDisplayCondition for labels to minimize the crosses and some transparency for polylines to make the crosses less visible.

[hpinkos]

I'm sorry @ladislavhorky, I don't have any workaround at this time

[ladislavhorky]

@hpinkos Thanks for your time anyway. I'll do with the transparency for now.

[Maarondesigns]

Was there ever a resolution found for this issue? I am getting different behavior depending on the alpha channel of polygon material as well. If the material has any transparency, the labels appear behind. If alpha is 1.0, label appears in front, but always behind polylines (GeoJsonDataSource stroke). See image on the left, green color has 1.0 alpha while other colors have less.

Also, in an unrelated issue, the individual letters of label text appear wonky/not-aligned if the text is smaller than about 17px (right image)

[jony89]

@hpinkos , what is the roadmap regard this feature?

it is extremely needed, and it seems there is no workaround at the moment?

[OmarShehata]

@Maarondesigns thanks for pointing these out. These are potentially separate issues. The small font issue seems to have been working as of CesiumJS 1.62. I opened an issue for this here: #8474

For the outline ordering issue, I'm unable to reproduce this. Here's the Sandcastle I tried. You can toggle the material alpha = 1 vs alpha = 0.8 with the buttons. It seems that the stroke is always on top regardless. Are you able to share a Sandcastle example that reproduces it?

@jony89 there may be a workaround depending on what exactly you're trying to achieve. Feel free to open a Cesium forum discussion thread describing your use case.

[Maarondesigns]

I've circled back to this issue on a separate project. It seems like polylines render randomly above or below polygons and corridors with alpha less than 1.0. I am creating everything using the Primitive API. The project is my own version of the game RISK if you're interested: github

//country fill
let polygonPrimitive = new Cesium.Primitive({
        show: dontShow ? false : true,
        releaseGeometryInstances: false,
        geometryInstances: new Cesium.GeometryInstance({
          id: id + "_polygon",
          geometry: Cesium.PolygonGeometry.createGeometry(
            new Cesium.PolygonGeometry({
              polygonHierarchy: cartesian,
              height
            })
          )
        }),
        appearance: new Cesium.MaterialAppearance({
          material: new Cesium.Material.fromType("Color", {
            color: new Cesium.Color(
              fillColor[0],
              fillColor[1],
              fillColor[2],
              fillOpacity
            )
          })
        }),
        asynchronous: false
      });
//country border
let corridorPrimitive = new Cesium.Primitive({
          show: dontShow ? false : true,
          releaseGeometryInstances: false,
          geometryInstances: new Cesium.GeometryInstance({
            id: cid,
            geometry: Cesium.CorridorGeometry.createGeometry(
              new Cesium.CorridorGeometry({
                positions: p,
                width: 8000,
                extrudedHeight: height + 10000
              })
            )
          }),
          appearance: new Cesium.MaterialAppearance({
            material: new Cesium.Material.fromType("Color", {
              color: new Cesium.Color(
                strokeColor[0],
                strokeColor[1],
                strokeColor[2],
                strokeOpacity
              )
            })
          }),
          asynchronous: false
        });
//path
let path = new Cesium.Primitive({
      releaseGeometryInstances: false,
      geometryInstances: new Cesium.GeometryInstance({
        id: id?id:"path",
        geometry: Cesium.PolylineGeometry.createGeometry(
          new Cesium.PolylineGeometry({
            positions,
            width
          })
        )
      }),
      appearance: new Cesium.PolylineMaterialAppearance({
        material: new Cesium.Material.fromType("PolylineDash", {
          color
        })
      }),
      asynchronous: false
    });

Changing the camera angle makes the dashed polyline pop in front of or behind the countries. Same behavior when corridor alpha<1.0. In image below corridor alpha is 1.0.

[Maarondesigns]

@Maarondesigns thanks for pointing these out. These are potentially separate issues. The small font issue seems to have been working as of CesiumJS 1.62. I opened an issue for this here: #8474

For the outline ordering issue, I'm unable to reproduce this. Here's the Sandcastle I tried. You can toggle the material alpha = 1 vs alpha = 0.8 with the buttons. It seems that the stroke is always on top regardless. Are you able to share a Sandcastle example that reproduces it?

@jony89 there may be a workaround depending on what exactly you're trying to achieve. Feel free to open a Cesium forum discussion thread describing your use case.

I was able to reproduce in your sandcastle...This issue occurs when the polygon has extrudedHeight and then eyeOffset is used on the label to appear in front of it. SandCastle

It also occurs when you use a billboard with image: [ html canvas ], which I started doing to fix the alignment issue of the letters.

[dzungpng]

Another mention of this: https://community.cesium.com/t/on-2d-mode-polylines-are-always-on-top-of-labels/11451

[aldenpoole]

Is there still no good fix for this? Even setting an eyeOffset z value is a subpar solution. I am having such trouble getting my label entities to appear over my arcs. The arcs vary in height, and some of them get very high.

I should say - the labels are for other entities on the map and not related to the arcs at all.

Can there not be a flag to treat these label entities as such so that they are just rendered above everything else, regardless of height?

[ggetz]

Requested in #10861

[ggetz]

Also reported in #11097 and #11074.

[nikitakogan]

Hello ,

I found an issue where I cant use polyline collection cause its overlaps billboard and there is no way to control the heights .

Here an example :
https://sandcastle.cesium.com/#c=nVRbb9owFP4rVl4GgjoByigpRatopU3a1kpIe1n2YJwDWJg4sg0hq/rfd+wQSC/TpEV5OOfzd+7H5iozluwFFKDJDcmgIDMwYrelPzzWSgLu9ZnKLBMZ6CToPiUZIYZDBt9UCvHRYF4DdD67/37fv0uy5/Z1knEfIleylGhvXkZ5PMIzJSVwK1TWcjZJduJTlqatJ+JC5soIRzEkru1nTFuUWDagS622d7DSAOZWa1Z+BrFaW9P66UwJuRgNaS/qksGYDkfdXhR1a3xEoz7iV3Q4aOJXER06PppdvsJ7yO8P6eVHj/9q+6NCpHaNmQ28ZtaqiK3ewXNVz55pYvarO2bZHXDJNGAjkiBFPRZbtoIQTzuHrewmwfWJPhOaS8f8MOGVyA83SdCLkoDwspY0CkMnGKvVBlBbSMY3J+DCp4bwAKGlkBJFDSkq4ZR8OEd71LAUBx8NNbIHbbDbLgrtIRmTywxqa2vzOAyLoqDFgCq9CvtRFLn8a1J8wNFt3qX2xuNx6I8dGSlRfkCpPEl1rpeVuvZTPOvoPzY5467KXIMBvYckmDaqmO+WVRVJMHFJTZsNnVstshUensvtNBrdOTvwUwtDwjUwC8Susfd+5whkVtjy5PLeq1/cDCu/zRl3zkFdEv5OUe9A1KtdrVW92//Y7NabtWwf93KBc10optOYHF26z69W/CrN7vk8FweQc/EbOaOogTMpVhmktwdh4v9MyH1QwsNyacDGzUt/9tRCQ/wvnFll9Xx8NU7N8u8MzbXYYn/2x6adXof2X7r6smDHCrrBxNhSwrRO75PY5kpbstOyRWloYZtLHLUJFzu+AUu58e4dFRepYTpJxZ6I9Oadt5Hg2I27JMud9H3F3ZyEyH9jKhVLcSse8JZJVjraujf9WoGU0kmI6vuWVim5YPqV5z8

is there any way to solve it by code or its a bug?

@ggetz

[ggetz]

Also reported in #11925.