如何为Cesium中的Polygon同时设置颜色与纹理材质？

当你同时设置ImageMaterialProperty的image和color时，Cesium默认会直接使用图像的像素颜色（包括透明区域），颜色参数会被忽略。要实现图像与颜色的混合效果，需要使用自定义Shader材质来手动控制两者的叠加逻辑，以下是具体实现方案：

实现思路 #

通过Cesium.Material创建自定义材质，在片段着色器中：

1. 采样图像纹理的颜色值
2. 将图像颜色与指定的纯色进行混合（可根据需求选择相乘、叠加等混合模式）
3. 保留图像的透明通道信息

代码示例 #

// 创建自定义材质
const customMaterial = new Cesium.Material({
  fabric: {
    type: 'ImageColorBlend',
    uniforms: {
      image: 'path/to/your/transparent-image.png', // 你的透明图像路径
      color: Cesium.Color.RED.withAlpha(1.0), // 要叠加的颜色
      blendMode: 'multiply' // 可选：multiply/overlay/add等混合模式
    },
    source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
        czm_material material = czm_getDefaultMaterial(materialInput);
        vec2 st = materialInput.st;
        vec4 imageColor = texture2D(image, st);
        
        // 根据混合模式处理颜色
        vec4 blendedColor;
        if (blendMode == "multiply") {
          blendedColor = imageColor * color;
        } else if (blendMode == "overlay") {
          // 叠加模式实现（简化版）
          blendedColor.rgb = mix(
            2.0 * imageColor.rgb * color.rgb,
            1.0 - 2.0 * (1.0 - imageColor.rgb) * (1.0 - color.rgb),
            step(0.5, imageColor.rgb)
          );
          blendedColor.a = imageColor.a;
        } else if (blendMode == "add") {
          blendedColor = min(imageColor + color, vec4(1.0));
          blendedColor.a = imageColor.a;
        }
        
        // 保留图像的透明通道
        material.diffuse = blendedColor.rgb;
        material.alpha = blendedColor.a;
        return material;
      }
    `
  }
});

// 将自定义材质应用到多边形
const polygon = viewer.entities.add({
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([/* 你的多边形坐标 */]),
    material: customMaterial
  }
});

关键说明 #

• 混合模式选择：根据需求选择合适的混合模式，multiply（相乘）适合给图像着色，overlay（叠加）能保留图像细节同时叠加颜色，add（相加）适合提亮效果
• 透明通道处理：确保最终材质的alpha值使用图像的透明通道，这样图像的透明区域仍能保持透明
• uniforms参数：可以动态修改image和color值，比如通过customMaterial.uniforms.color = Cesium.Color.BLUE实时更新颜色

替代方案（简单场景） #

如果只需要给图像叠加纯色且不需要复杂混合，也可以先在图像处理工具（如PS）中给透明图像预添加颜色层，再导入Cesium使用，但这种方法无法动态修改颜色。

内容的提问来源于stack exchange，提问作者saadat ali