Setting the alpha value of a custom primitive

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I made a custom primitive that draws a red triangle. When I change the alpha value in the fragment shader, the alpha value is still set to 1. The triangle stays a solid color and does not become transparent.

I am modifying the alpha value by setting gl_FragColor[3].

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

Sand castle example

In line 6, the 4th argument should set the alpha value to 0. But it doesn’t.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I am making an animation of wave movements and I need to show the trails fade out for a custom primitive.

4. The Cesium version you’re using, your operating system and browser.

Cesium 1.50.0, Windows 10, Chrome

Thanks for your help

2

I also tried adding a render state to enable blending (line 97 SandCastle). But that didn’t fix it.

I am not sure if I am doing something wrong with setting up the custom primitive or if I need to enable something else for it to work.

3

The renderState you’re setting is actually undefined. You either need to do new Cesium.RenderState or Cesium.RenderState.fromCache.

The other thing is you should set the blending to the pre-built alpha blend:

this._drawCommand.renderState = Cesium.RenderState.fromCache({

blending : Cesium.BlendingState.ALPHA_BLEND

});

``

Then the polygon disappears. Although a value of 0.5 now makes it fully opaque. One thing I know needs to change is setting the pass to translucent:

this._drawCommand.pass = Cesium.Pass.TRANSLUCENT;

``

But that still doesn’t seem to get 0.5 alpha to work as expected. You might need to create a polygon with alpha using CesiumJS’s entity system, and then print out the drawCommand it generates to compare against your custom one.

4

Thank you so much Omar! You’ve been really helpful with my Cesium questions over the past year. It’s wonderful that there are experts like you who are available for help. I really appreciate it.

I was able make my primitive transparent by doing what you said. Using 0.5 as the alpha value to make if fully opaque works for what I am trying to do. Thanks.