Primitve draws transparent objects, which affects the effect of other objects

CesiumJS
1

How to avoid this situation? I want the effect of the entity to always be white, rather than a mixture of yellow and white.

example

2

It is not clear whether there was a deeper intention behind that, but it is a side effect of disabling the depth test…

Cesium Depth Test

3

How was it achieved? I tried but it didn’t work. By the way, if deep test must be disabled, is there any way to eliminate this negative effect?thank you

4

Just to confirm: Even when you comment out the line that says
enabled: false // shut off depth test
you still see the yellow text - did I undestand that correctly?

But when you need that special depth test, then I’m not sure how this can be combined with the label. When there is no depth test, then the yellow object will always be painted. Maybe someone else has an idea here.

5

yes

6

Now, I’m a bit curious: When you set
scale: 2.5,
for the label, is it still shown in yellow?
(I guess that for the small label, with scale: 0.5,, it may be hard to distinguish whether it’s white or yellow, due to aliasing)

But of course, all this won’t help you when you have to disable depth tests. So hopefully, someone else can chime in with better ideas here.

7

I don’t know if that is a bub or just how it works.

It seems that a primitive is always renderd above an entity.

What might help is setting a DepthFailAppearance and make it transparent:

grafik
grafik422×138 24.2 KB

You have to enable the depth test for that to work, but maybe that works for your case together with the depthFailMaterial.

 appearance: new Cesium.MaterialAppearance({
      material: new Cesium.Material({
        fabric: {
          type: 'Color',
          uniforms: {
            color: new Cesium.Color(1.0, 1.0, 0.0, 0.9)
          }
        }
      }),
      renderState: {
        depthTest: {
          enabled: true  // turn on depth test!
        },
      }
    }),
    depthFailAppearance: new Cesium.MaterialAppearance({
       material: new Cesium.Material({
        fabric: {
          type: 'Color',
          uniforms: {
            color: new Cesium.Color(0.0, 0.0, 0.0, 0.0)
          }
        }
      }),
    }),

See adapted sandcastle.

1 Like