Changing opacity of 3d tileset in 2d mode

CesiumJS
1

Hi, I have loaded a 3d point cloud as tileset on cesium viewer, applied custom shader, and tried to change opacity of the 3d point cloud.

It works fine in 3d mode, but not in 2d mode.

Here is my implementation:

      // To Load point cloud from tile service url.
      const tileset = await Cesium3DTileset.fromUrl(resource, {
        projectTo2D: true,
        
      });

      tileset.pointCloudShading = new PointCloudShading({
        geometricErrorScale: 1.0,
        baseResolution: 1.0,
        attenuation: true,
        eyeDomeLighting: true,
        eyeDomeLightingRadius: 0,
        eyeDomeLightingStrength: 0,
      });

        tileset.customShader = new CustomShader({
          lightingModel: LightingModel.UNLIT,
          translucencyMode: CustomShaderTranslucencyMode.OPAQUE,
          uniforms: {
            u_alpha: { type: UniformType.FLOAT, value: 1.0 }, // Opacity value
            u_pointSize: { type: UniformType.FLOAT, value: 5.0 }, // Point Size value
            u_shape: { type: UniformType.BOOL, value: false }, // Point shape: true for Square, false for Circle.
          },
          vertexShaderText: `
            void vertexMain(VertexInput vsIn, inout czm_modelVertexOutput vsOut) {
              vsOut.pointSize = u_pointSize;
            }
          `,
          fragmentShaderText: `
            void fragmentMain(FragmentInput fsIn, inout czm_modelMaterial material) {
              float distance = length(gl_PointCoord - 0.5);
              if (distance > 0.5) {
                if (u_shape) {
                  discard; // Comment this line for square point shape
                }
              }
              material.alpha = u_alpha; // Change opacity
            }
          `,
        });

In 3d mode:

image
image1315Ă—680 111 KB

In 2d mode, it looks like opacity is always 1.0:

Is there anyway to change opacity of 3d point cloud in 2d mode?

3

Hi @Xingjizh1007 ,

Interesting… lots going on here. One thing I notice off the bat is:

          translucencyMode: CustomShaderTranslucencyMode.OPAQUE,

Which is weird, because your opacity seems to “work” anyway. In fact, making this value TRANSLUCENT seems to really make the visualization worse, for some reason. However, in 2D mode, setting this to OPAQUE seems to prevent the point cloud from rendering at all.

Sandcastle demo I did my testing in.

Moreover, there is definitely weird interaction between translucency and eye dome lighting. I found this existing issue about it. And there’s a similar forum post as well.

Unfortunately, the best thing I can suggest right now is to plus-one that issue so it gets more attention, and, as always, you can consider contributing to Cesium yourself. We appreciate any and all contributions!

Best,
Matt

2 Likes