Skip to content

概述

内置的后期处理往往满足不了我们的需求,所以可以尝试自定义后期处理,需要结合Shader着色器。

javascript
const blueTechStage = new Cesium.PostProcessStage({
  name: '蓝色科技感',
  fragmentShader: `
    uniform sampler2D colorTexture;
    in vec2 v_textureCoordinates;
    out vec4 fragColor;

    void main() {
        vec4 color = texture(colorTexture, v_textureCoordinates);

        // 先计算亮度或灰度
        float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));

        // 映射为蓝色科技感
        // vec3(R, G, B),保留亮度信息
        vec3 blueTech = vec3(gray * 0.2, gray * 0.4, gray * 1.0);

        fragColor = vec4(blueTech, color.a);
    }
  `
})

viewer.scene.postProcessStages.add(blueTechStage)
javascript
const rainStage = new Cesium.PostProcessStage({
  name: '下雨效果',
  fragmentShader: `
    uniform sampler2D colorTexture;
    in vec2 v_textureCoordinates;
    out vec4 fragColor;

    float hash(float x) {
        return fract(sin(x * 133.3) * 13.13);
    }

    void main(void) {
        float time = czm_frameNumber / 60.0;
        vec2 resolution = czm_viewport.zw;
        vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);
        vec3 c = vec3(.6, .7, .8);
        float a = -.4;
        float si = sin(a), co = cos(a);
        uv *= mat2(co, -si, si, co);
        uv *= length(uv + vec2(0, 4.9)) * .3 + 1.;
        float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);
        float b = clamp(abs(sin(20. * time * v + uv.y * (5. / (2. + v)))) - .95, 0., 1.) * 20.;
        c *= v * b;
        vec4 baseColor=texture(colorTexture, v_textureCoordinates);
        fragColor = mix(baseColor, vec4(c, 1), 0.25);
    }
  `,
})
viewer.scene.postProcessStages.add(rainStage)
/