Incorrect overlay with material

CesiumJS
1

Hi!
Can anybody help, please?

I have created rectangle and lines and I am trying to overlay them using another rectangle with image material. Image has transparent and semitransparent colors.

But overlay isn’t correct: lines don’t overlapped and bottom rectangle don’t overlapped incorrect too.

I have tried to use entities and primitives - result is the same.
I have tried to use plane graphic instead rectangle - result is the same.

I have tried to use different material options and tried to mix materials, but results are not good.

But if I use billboard - all looks good.

Screenshot_305
Screenshot_305563×507 56.5 KB

Correct overlay only if I use billboard

sandcastle example here:

Is it possible to create material or mix material to have the same effect as for billboards? How?

Thanks!

2

Hi there,

I’m having trouble getting the blending to work here as well. I’m tried:

  • disabling OIT by specifying orderIndependentTranslucency: false when creating the viewer
  • trying different blend modes via the render state
   renderState: {
        blending: Cesium.BlendingState.ALPHA_BLEND,
        },
   }

I think the “most correct” option here is the one rendered in the top left. However, it appears that this bug is preventing the lower rectangle from showing through. I’ll add this report to that issue.

3

@Gabby_Getz
Thank you very much for your answer!

With orderIndependentTranslucency it nor works correct even for billboards

With

renderState: {
    blending: Cesium.BlendingState.ALPHA_BLEND,
}

it works the same as top left primitive which used EllipsoidSurfaceAppearance with Material translucent: false

image
image462×649 38.5 KB

all incorrect, and lines fully overlapped
.
.
sandcastle demo:

Sorry, maybe I’m doing something’s wrong… Can you write please what is wrong?

Thanks