Appearance
概述
内置的后期处理往往满足不了我们的需求,所以可以尝试自定义后期处理,需要结合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)