ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

第20章:CesiumJS 从入门到精通20:滤镜魔法:PostProcessStage后期处理效果

第20章:CesiumJS 从入门到精通20:滤镜魔法:PostProcessStage后期处理效果 📌 专栏连载:本文为《CesiumJS 从入门到精通》第 20 篇,承接粒子系统、Primitive 渲染内容,讲解场景全屏后期滤镜,提升三维画面质感,适配数字孪生、BIM 可视化、仿真项目画面美化需求。写在前面前面章节完成三维模型、地形、粒子动态特效绘制,原始渲染画面偏平淡、缺乏层次感;PostProcessStage 全屏后期管线在场景渲染完成后,对整张画面做二次滤镜加工,实现泛光、描边、环境光遮蔽、自定义调色等影视级效果。 本章拆解后期管线底层架构、6 类官方内置滤镜、自定义 GLSL 滤镜、多滤镜组合、选中物体单独特效、性能优化全套方案,配套可直接运行完整代码。本章学习目标理解 PostProcessStageCollection 渲染管线执行逻辑,区分几何渲染与屏幕后处理差异熟练使用库内置 Bloom、Silhouette、AO、边缘检测、夜视、镜头光晕六大滤镜并调节参数编写自定义片元着色器实现灰度、复古调色、暗角、亮度调节等自定义滤镜,掌握 uniform 动态传参使用 PostProcessStageComposite 打包多滤镜处理链,统一开关、销毁整套组合效果掌握 selected 选择性后处理,实现点击物体单独高亮描边,区分全局 / 局部特效掌握分辨率缩放、按需启停、着色器合并等后期渲染性能优化手段一、后期处理核心概念与管线架构1.1 通俗类比基础三维渲染:相机拍摄原始实景(地形、建筑、粒子、模型)后期处理:拍完后的修图滤镜,统一调整整张画面色彩、光影、轮廓光晕,不改变三维几何体本身1.2 普通渲染 vs 后期处理对比维度普通三维渲染PostProcess 后期处理处理对象三维三角面、顶点几何体全屏二维帧缓冲纹理执行时机光栅化几何阶段整帧渲染完成后、输出屏幕前着色器顶点 + 片元双着色器仅片元着色器,无顶点运算性能影响和模型面数正相关和屏幕分辨率正相关,与几何体无关典型效果贴图、光照、材质、粒子泛光、描边、调色、模糊、暗角1.3 核心组件层级viewer.scene.postProcessStages (PostProcessStageCollection 总管线容器) ├─ PostProcessStage 单个滤镜单元(基础渲染阶段) ├─ PostProcessStageComposite 多滤镜打包组合容器 └─ PostProcessStageLibrary 官方内置滤镜工厂,开箱即用执行规则:按 add 添加顺序串行执行,前一个滤镜输出纹理作为后一个输入,顺序直接影响最终画面。二、六大官方内置滤镜(PostProcessStageLibrary)2.1 Bloom 泛光光晕高亮区域向外扩散柔和光晕,模拟强光曝光,适配夜景灯光、发光粒子、日出。const bloom = Cesium.PostProcessStageLibrary.createBloomStage(); viewer.scene.postProcessStages.add(bloom); bloom.uniforms.glowOnly = false; // false保留原图,true仅显示光晕2.2 Silhouette 外轮廓描边仅识别物体外部边缘绘制轮廓,用于选中物体高亮、卡通手绘风格。
返回列表