cesium 后期处理

创建一个自定义postProcessStage后期处理的代码如下

image.png

1，先实例化化一个PostProcessStages类，包含以下参数

image.png

（1）fragmentShader 自定义片元着色器
（2）uniforms 自定义uniform变量

（3）textureScale 纹理的缩放比例，如果为1表示纹理尺寸等于视口大小
（4）forcePowerOfTwo纹理尺寸是否为2的倍数
（5）sampleMode 配置纹理的采样方式
（6）pixelFormat 输出纹理的像素格式默认RGBA
（7）pixelDatatype 输出纹理的像素数据格式，默认无符号byte
（8）clearColor 输出纹理的清除颜色
（9）scissorRectangle 裁剪测试的矩形范围
（10）name 实例化后期处理的名称，名称不能重复，否则会抛出错误

2，更新posttProcessStage的过程
（1）先执行CesiumWidget类的startRenderLoop方法

image.png

（2）接着调用Scene的render方法

image.png

（3）在render方法中调用 scene.updateAndExecuteCommands方法

image.png

（4）在updateAndExecuteCommands调用executeCommandsInViewport方法

image.png

（5）在executeCommandsInViewport方法中，调用updateAndClearFramebuffers更新和清除帧缓冲区

image.png

（6）updateAndClearFramebuffers调用postProcess.update更新postProces集合

image.png

（7）在PostProcessStageCollection.prototype.update方法中先更新默认加载的postProcessStage例如faxx抗锯齿，bloom泛光等，然后更新自定义postProcessStage数组里的每项

image.png

（8）在PostProcessStage.prototype.update执行创建选中图元纹理，创建uniform变量，创建uniform纹理变量，创建渲染命令，配置采样器，获取帧缓冲区等操作

image.png

（9）createSelectedTexture创建选中纹理

image.png

这个方法要实现的大致就是从被选中的features数组依次取出单个feature的被拾取颜色塞到ids Uint8Array数组中，然后创建一张纹理储存ids数据
（10）createUniformMap方法的作用是将自定义的uniform变量和cesium提供默认的uniform进行合并

image.png

（11）updateUniformTextures 更新uniform纹理
（12）createDrawCommand 创建渲染命令

image.png

如果存在选中id纹理的话，会给片元着色器自动加上选中feature的方法“czm_selected”，接着调用context.createViewportQuadCommand创建视口内的渲染命令
（13）createSampler 配置采样器

image.png

3，执行posttProcessStage渲染命令

（1）在Scene render方法中更新和渲染primitive完成后会调用scene.resolveFramebuffers方法处理帧缓冲区

image.png

（2）在resolveFramebuffers方法内部执行postProces集合的渲染命令

image.png

（3）在PostProcessStageCollection.prototype.execute 中先渲染默认的postProcess然后再渲染自定义的postProcess

image.png

（4）在PostProcessStage.prototype.execute执行渲染命令

image.png

（5）PostProcessStage的顶点着色器,后期处理的顶点着色器比较简单，使用的是Context.prototype.createViewportQuadCommand默认的顶点着色器

#define OES_texture_float



#line 0

#line 0
attribute vec4 position;
attribute vec2 textureCoordinates;
varying vec2 v_textureCoordinates;
void main()
{
gl_Position = position;
v_textureCoordinates = textureCoordinates;
}

（6）PostProcessStage的片元着色器

    precision highp float;
#else
    precision mediump float;
    #define highp mediump
#endif

#define LOG_DEPTH
#define OES_texture_float_linear

#define OES_texture_float

uniform vec4 czm_viewport;
uniform float czm_pixelRatio;


#line 0

#line 0
uniform sampler2D colorTexture; 
varying vec2 v_textureCoordinates; 
const int KERNEL_WIDTH = 16; 
void main(void) 
{ 
    vec2 step = czm_pixelRatio / czm_viewport.zw; 
    vec2 integralPos = v_textureCoordinates - mod(v_textureCoordinates, 8.0 * step); 
    vec3 averageValue = vec3(0.0); 
    for (int i = 0; i < KERNEL_WIDTH; i++) 
    { 
        for (int j = 0; j < KERNEL_WIDTH; j++) 
        { 
            averageValue += texture2D(colorTexture, integralPos + step * vec2(i, j)).rgb; 
        } 
    } 
    averageValue /= float(KERNEL_WIDTH * KERNEL_WIDTH); 
    gl_FragColor = vec4(averageValue, 1.0); 
}