CustomShaderTranslucencyMode

CustomShaderTranslucencyMode 是 CesiumJS 中一种自定义着色器的半透明模式，可以通过代码实现深度排序和半透明效果，对于需要多个图层叠加时非常有用。

使用方法

在创建图层时，需要指定 translucency 属性为 new Cesium.CustomShaderTranslucency()，并通过调用 setShaderFunction() 来设置自定义的着色器函数，下面是一个示例代码：

const primitive = new Cesium.Primitive({
  geometryInstances : ...,
  appearance : new Cesium.MaterialAppearance({
    material : ...
  }),
  translucency: new Cesium.CustomShaderTranslucency()
});

primitive.translucency.setShaderFunction(`
  void main()
  {
     ...
  }
`);

在自定义的着色器函数中，需要定义 depth、color 和 alpha 变量，并根据实体的深度进行深度排序，例如：

// 定义变量
varying float depth;
varying vec4 color;
varying float alpha;

void main()
{
  depth = ...;
  color = ...;
  alpha = ...;
  
  // 进行深度排序
  gl_Position = czm_modelViewProjection * vec4(position, 1.0 + depth * 0.0001);
}

参数说明

setShaderFunction(shader)

• shader : String - 自定义的着色器函数代码。

设置自定义的着色器函数代码。

示例

const primitive = new Cesium.Primitive({
  geometryInstances : ...,
  appearance : new Cesium.MaterialAppearance({
    material : ...
  }),
  translucency: new Cesium.CustomShaderTranslucency()
});

primitive.translucency.setShaderFunction(`
  varying float depth;
  varying vec4 color;
  varying float alpha;

  void main()
  {
    depth = czm_depth;
    color = czm_modelViewRelativeToEye * vec4(color.rgb, 1.0);
    alpha = 1.0 - czm_morphTime;

    gl_Position = czm_modelViewProjection * vec4(position, 1.0 + depth * 0.0001);
  }
`);

参考链接

• CustomShaderTranslucencyMode