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); 
} 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容