创建一个自定义postProcessStage后期处理的代码如下
1,先实例化化一个PostProcessStages类,包含以下参数
(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方法
(2)接着调用Scene的render方法
(3)在render方法中调用 scene.updateAndExecuteCommands方法
(4)在updateAndExecuteCommands调用executeCommandsInViewport方法
(5)在executeCommandsInViewport方法中,调用updateAndClearFramebuffers更新和清除帧缓冲区
(6)updateAndClearFramebuffers调用postProcess.update更新postProces集合
(7)在PostProcessStageCollection.prototype.update方法中先更新默认加载的postProcessStage例如faxx抗锯齿,bloom泛光等,然后更新自定义postProcessStage数组里的每项
(8)在PostProcessStage.prototype.update执行创建选中图元纹理,创建uniform变量,创建uniform纹理变量,创建渲染命令,配置采样器,获取帧缓冲区等操作
(9)createSelectedTexture创建选中纹理
这个方法要实现的大致就是从被选中的features数组依次取出单个feature的被拾取颜色塞到ids Uint8Array数组中,然后创建一张纹理储存ids数据
(10)createUniformMap方法的作用是将自定义的uniform变量和cesium提供默认的uniform进行合并
(11)updateUniformTextures 更新uniform纹理
(12)createDrawCommand 创建渲染命令
如果存在选中id纹理的话,会给片元着色器自动加上选中feature的方法“czm_selected”,接着调用context.createViewportQuadCommand创建视口内的渲染命令
(13)createSampler 配置采样器
3,执行posttProcessStage渲染命令
(1)在Scene render方法中更新和渲染primitive完成后会调用scene.resolveFramebuffers方法处理帧缓冲区
(2)在resolveFramebuffers方法内部执行postProces集合的渲染命令
(3)在PostProcessStageCollection.prototype.execute 中先渲染默认的postProcess然后再渲染自定义的postProcess
(4)在PostProcessStage.prototype.execute执行渲染命令
(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);
}