应用

在 Cesium 中，Shader 可以应用在 Primitive、PostProcessStage（后处理）以及部分Entity（Wall、Polyline）上。

Primitive 使用 Appearance（外观）系统，如 MaterialAppearance, EllipsoidSurfaceAppearance, 或自定义 ShaderProgram。

const geometry = new Cesium.RectangleGeometry({
  rectangle: Cesium.Rectangle.fromDegrees(100, 20, 110, 30),
});

const instance = new Cesium.GeometryInstance({
  geometry,
});

const primitive = new Cesium.Primitive({
  geometryInstances: instance,
  appearance: new Cesium.MaterialAppearance({
    material: new Cesium.Material({
      fabric: {
        type: "MyShader",
        uniforms: {
          color: Cesium.Color.YELLOW,
        },
        source: `
                    czm_material czm_getMaterial(czm_materialInput input)
                    {
                        czm_material m = czm_getDefaultMaterial(input);
                        m.diffuse = color.rgb;
                        m.alpha = 1.0;
                        return m;
                    }
                `,
      },
    }),
  }),
});

viewer.scene.primitives.add(primitive);

TIP

可以阅读@m-tech/gis-core中水体Water的实现。

在后处理PostProcessStage上的应用：

const blackAndWhiteStage = new Cesium.PostProcessStage({
  name: "czm_black_white",
  fragmentShader: `
        uniform sampler2D colorTexture;
        varying vec2 v_textureCoordinates;

        void main(void) {
            vec4 color = texture2D(colorTexture, v_textureCoordinates);
            float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114)); // 加权平均
            gl_FragColor = vec4(vec3(gray), color.a);
        }
    `,
});

// 添加到场景的后处理队列
viewer.scene.postProcessStages.add(blackAndWhiteStage);

TIP

下一章会介绍shader在后处理中的详细应用。

应用 ​

应用