前言

cesium中提供了postProceSsstagge接口,能在三维场景中添加后期渲染效果。处理对包括模型描边、黑白图、明亮度调整、夜视效果、环境光遮蔽。

原理篇:https://www.cnblogs.com/webgl-angela/p/9272810.html

后期处理

原理图

后期处理的过程有点类似于照片的PS。生活中拍摄了一张自拍照,看到照片后发现它太暗了,于是我们增加亮度得到了一张新的照片。在增加亮度后发现脸上的痘痘清晰可见,这可不是我们希望的效果,于是再进行一次美肤效果处理。在这之后可能还会进行n次别的操作,直到满足我们的要求。上述这个过程和三维里面的后期处理流程非常类似:拍的原始照片相当于三维场景中实际渲染得到的效果,在此基础上进行物体描边、夜视效果、环境光遮蔽等后期处理,最后渲染到场景中的图片相当于定版的最终照片。

总结 : 后期处理其实是一个叠加修改的过程,通过不同步骤的加工,最后得到想要的结果

处理流程:

PostProcessStage主要相关接口:

PostProcessStage:对应于某个具体的后期处理效果,它的输入为场景渲染图或者上一个后期处理的结果图,输出结果是一张处理后的图片。

PostProcessStageComposite:一个集合对象,存储类型为PostProcessStage或者PostProcessStageComposite的元素。

PostProcessStageLibrary:负责创建具体的后期处理效果,包括SilhouetteBloomAmbientOcclusion等,创建返回的结果是PostProcessStageComposite或者PostProcessStage类型。

PostProcessStageCollection:是一个集合类型的类,负责管理和维护放到集合中的元素 ,元素的类型是PostProcessStage或者PostProcessStageComposite

添加后期效果流程:

1 通过PostProcessStageLibrary创建一个或者多个后处理效果对象,得到多个PostProcessStage或者PostProcessStageComposite。2 将他们加入到PostProcessStageCollection对象中。这样PostProcessStageCollection对象就会按照加入的顺序进行屏幕后期处理,在所有的效果都处理完毕后,执行FXAA,3 绘制到屏幕上。

示例

添加场景亮度

添加片段着色器,调整纹理颜色放大系数实现亮度调整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var fs =
'uniform sampler2D colorTexture;\n' +
'varying vec2 v_textureCoordinates;\n' +
'uniform float scale;\n' +
'uniform vec3 offset;\n' +
'void main() {\n' +
' vec4 color = texture2D(colorTexture, v_textureCoordinates);\n' + //获取片段颜色
' gl_FragColor = vec4(color.rgb * scale + offset, 10.0);\n' +
'}\n'; //放大片段颜色系数

viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
fragmentShader: fs,
uniforms: {
scale: 1.1,
offset: function () {
// return new Cesium.Cartesian3(0.1, 0.2, 0.3);
return new Cesium.Cartesian3(0.01, 0.02, 0.03);
}
}
}));

效果

添加雾气粒子效果:csdn博客

添加一个动态扩散圆:csdn博客