关注【三维网格3D】，分享更多3D心得

泛光（Bloom）是一种常用的后期处理特效，游戏中更是随处可见，这里直接上我们的效果图。

Cesium内置的bloom后期处理，是对全屏进行处理，还不能只针对选中的特定对象添加泛光效果，通过修改shader代码也可以实现。不过今天我们不做改进，而是引进three.js的UnrealBloomPass，在Cesium中实现一个新的泛光效果。

从UnrealBloomPass这个名字看，大概是说从Unreal Engine那里学来的吧，另外也是在名称上区别于辉光特效BloomPass，可以说UnrealBloomPass就是增强的辉光特效。感兴趣的可以看看UE4关于泛光的文档页面。

实现流程

泛光效果的技术并不复杂，大体分为三个步骤：

计算亮度，获得亮度纹理；
高斯模糊，对亮度纹理的根据不同分辨率和高斯核进行模糊处理，得到多个模糊纹理；
合并纹理，将模糊纹理按照不同权重叠加到原始场景。

由于上一篇《Cesium实现更实用的3D描边效果》已经详细介绍了Cesium后期处理技术并给出了基本示例，本文就只对Shader代码进行简单的注解，不贴出JavaScript部分的代码了。

计算亮度

亮度（Luminosity）的概念和计算方法可以参考维基百科词条Luminosity。

下面针对Cesium进行修改后的片元着色器(fragmentShader)代码:

uniform sampler2D colorTexture;
uniform vec3 defaultColor;
uniform float defaultOpacity;
uniform float luminosityThreshold;
uniform float smoothWidth;varying vec2 v_textureCoordinates;
void main() {vec4 texel = texture2D(colorTexture, v_textureCoordinates);#ifdef CZM_SELECTED_FEATUREif(!czm_selected()) {texel = vec4(0.);}#endifvec3 luma = vec3(0.299, 0.587, 0.114);float v = dot(texel.xyz, luma);vec4 outputColor = vec4(defaultColor.rgb, defaultOpacity);float alpha = smoothstep(luminosityThreshold, luminosityThreshold + smoothWidth, v);gl_FragColor = mix(outputColor, texel, alpha);
}

计算亮度的核心代码就是这两行：

vec3 luma = vec3(0.299, 0.587, 0.114);
float v = dot(texel.xyz, luma);

CZM_SELECTED_FEATURE是由Cesium自动定义的命令，指示当前后期处理节点是否设置selected属性，和czm_selected一起用于判断是否为选中对象。
这一步的效果图如下：

luminosityThreshold和smoothWidth两个参数可以对亮度计算结果进行微调。

高斯模糊

接下来我们需要对亮度纹理进行多次处理，得到不同平滑程度和尺寸的模糊纹理。每次处理的流程如下：

设置高斯核半径KERNEL_RADIUS;
降低目标纹理分辨率（用纹理缩放倍数表示）；
对亮度纹理进行纵向、横向两次高斯模糊处理。

高斯模糊的原理网上有很多优秀文章可以学习，感兴趣可以自行搜索，兴许这部分Shader代码会有更加深刻的理解。
下面这段代码实现一个方向的高斯模糊：

varying vec2 v_textureCoordinates;
uniform sampler2D colorTexture;
uniform vec2 colorTextureDimensions;
uniform vec2 direction;float gaussianPdf(in float x, in float sigma) {return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;
}
void main() {vec2 invSize = 1.0 / colorTextureDimensions;float fSigma = float(SIGMA);float weightSum = gaussianPdf(0.0, fSigma);vec3 diffuseSum = texture2D( colorTexture, v_textureCoordinates).rgb * weightSum;for( int i = 1; i < KERNEL_RADIUS; i ++ ) {float x = float(i);float w = gaussianPdf(x, fSigma);vec2 uvOffset = direction * invSize * x;vec3 sample1 = texture2D( colorTexture, v_textureCoordinates + uvOffset).rgb;vec3 sample2 = texture2D( colorTexture, v_textureCoordinates - uvOffset).rgb;diffuseSum += (sample1 + sample2) * w;weightSum += 2.0 * w;}gl_FragColor = vec4(diffuseSum/weightSum, 1.0);
}

KERNEL_RADIUS是高斯核半径，单位是像素，在创建Cesium.PostProcessStage时在添加。
本文实现的效果总的进行了5次模糊处理，高斯核半径分别为：3, 5, 7, 9, 11；纹理缩放倍数分别为：1,0.5,0.25,0.125,0.0625。

合并纹理

最后我们将五次模糊处理的结果，按不同权重和颜色进行叠加，并预留一些参数供应用时按需进行调整。

varying vec2 v_textureCoordinates;
uniform sampler2D blurTexture1;
uniform sampler2D blurTexture2;
uniform sampler2D blurTexture3;
uniform sampler2D blurTexture4;
uniform sampler2D blurTexture5;
uniform sampler2D colorTexture;
uniform float bloomStrength;
uniform float bloomRadius;
uniform float bloomFactors[NUM_MIPS];
uniform vec3 bloomTintColors[NUM_MIPS];
uniform bool glowOnly;float lerpBloomFactor(const in float factor) {float mirrorFactor = 1.2 - factor;return mix(factor, mirrorFactor, bloomRadius);
}void main() {vec4 color = texture2D(colorTexture, v_textureCoordinates);vec4 bloomColor = bloomStrength * (lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.) * texture2D(blurTexture1, v_textureCoordinates) +lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.) * texture2D(blurTexture2, v_textureCoordinates) +lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.) * texture2D(blurTexture3, v_textureCoordinates) +lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.) * texture2D(blurTexture4, v_textureCoordinates) +lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.) * texture2D(blurTexture5, v_textureCoordinates));gl_FragColor = glowOnly ? bloomColor : bloomColor + color;
}

Cesium实现UnrealBloom泛光效果相关推荐

[cesium] 基于Cesium的动态泛光效果示例
抽空将之前的功能单独抽出来写成一个模块,方便单独调用,配合单个模块写了一些示例可以兼容各个基于cesium底层库的三方框架,引入即可. 效果模型光源模拟动态泛光墙泛光面城市泛光线建筑物调整 ...
cesium实现立体墙（垂直、水平）渐变泛光效果
文章目录 1.实现效果 2.实现方法 2.1材质文件 2.2代码调用 2.3其他类型 2.3.1立体向下 2.3.2水平逆时针 2.3.3水平顺时针 Cesium实战系列文章总目录: 传送门 1.实现 ...
Cesium 1.87+实现建筑泛光效果
Cesium 1.87+实现建筑泛光效果 Cesium 1.87+增加了customShader自定义着色器,实现建筑泛光效果示例代码如下: <!DOCTYPE html><meta ...
Cesium实现建筑物泛光特效，使用自定义shader实现源码
自从Cesium1.87以后的版本,提供了方便的自定义shader的接口,从而不用修改源码,就可以方便的实现很多自定义的特效,这对Cesium的从业人员来说是一个极大的好消息,所用到的接口是 Cesi ...
Cesium：实现卷帘效果
Cesium:实现卷帘效果卷帘效果简介 Cesium:卷帘效果实现 Cesium:实现思路示例代码卷帘效果简介先上一个简动画预演一下. 但是如何介绍"卷帘效果"呢? ...
Three.js 后期处理-泛光效果-BloomPass-相机分层渲染
Three.js 后期处理-泛光效果-BloomPass-相机分层渲染概述步骤概述本文介绍如何使用three.js的后期处理来制作处泛光效果,先来看效果图注意: **camera的默认lay ...
Cesium实现雷达扫描效果
Cesium实现雷达扫描效果效果: html: <div id="cesiumContainer"></div> <canvas id=" ...
Cesium雨雪雾天气效果
Cesium雨雪雾天气效果实现效果关键代码 //雪着色器getSnow_fs() {return 'uniform sampler2D colorTexture;\n' +'varying vec ...
Post Processing的Bloom泛光效果
Post Processing的Bloom泛光效果实现的效果方法一.Post-Process Volume 1. 下载资源包:Window -> Package Manager 2. 在摄像 ...

Cesium实现UnrealBloom泛光效果