点击查看:最新Cesium可视化系统实战视频课程

2025020619154920afd5232bcfd5f92719f2691b30b241593在Cesium中,光晕(Lens Flare)是指当强光源(如太阳、灯光或其他光源)进入相机视野时,产生的一种视觉效果。这种效果常常用于模拟镜头中出现的光斑或眩光,增强场景的真实感。Cesium提供了强大的后处理特效功能,其中就包括了光晕效果的实现。

本文将详细讲解如何在Cesium中配置光晕特效,并通过代码示例说明如何通过图形用户界面(GUI)调整光晕的参数。

1. Cesium中的光晕设置

在Cesium中,光晕效果通常通过PostProcessStage(后处理阶段)来实现。后处理阶段是在渲染完成后对图像进行的额外处理,用于添加各种视觉效果。Cesium提供了一系列内置的后处理效果,其中之一就是Lens Flare(光晕)。

我们通过以下代码为Cesium的视图场景添加光晕效果:


const lensFlare = viewer.scene.postProcessStages.add(
  Cesium.PostProcessStageLibrary.createLensFlareStage()
)
console.log(lensFlare)

在上述代码中,createLensFlareStage()方法用于创建一个光晕后处理阶段,并将其添加到viewer.scene.postProcessStages中。这使得光晕效果被应用到整个视图场景中。然后,console.log(lensFlare)会打印出当前光晕的配置,帮助我们检查效果的状态。

2. 使用GUI控制光晕参数

为了方便调整光晕的各项参数,我们使用了一个图形用户界面(GUI)来动态控制这些设置。我们通过GUI为光晕的不同属性添加了控制面板,并绑定了每个属性的变化事件。

2.1 控制光晕的启用与禁用

首先,我们为光晕效果的启用与禁用设置了一个GUI控件:

javascript
gui.add(lensFlare, 'enabled', false, true).name('是否显示光晕')

在这个控件中,我们提供了一个布尔值(truefalse)来控制光晕的显示与隐藏。enabled属性控制光晕效果是否启用,用户可以通过GUI来打开或关闭光晕效果。

2.2 调整光晕的强度

光晕的强度决定了光晕效果的显著程度,通常通过一个浮动值来控制:


gui.add(lensFlare.uniforms, 'intensity', 0, 100, 0.01).name('光晕强度').onChange(
  (value) => {
    lensFlare.uniforms.intensity = Number(value)
  }
)

这里,intensity控制光晕的强度。通过滑动条,用户可以调整该值,值的范围为01000.01表示每次调整的步长。onChange事件用于在用户调整滑块时实时更新光晕强度的值。

2.3 调整光晕中镜头的污点数量

光晕效果中,镜头的污点(也称为“污点效果”)是指光晕中可能出现的亮点或模糊斑点,这些污点会使得光源的散射更为复杂。通过下面的代码,我们可以控制这种污点的数量:


gui.add(lensFlare.uniforms, 'dirtAmount', 0, 1, 0.1).name('光晕中镜头的污点数量').onChange(
  (value) => {
    lensFlare.uniforms.dirtAmount = Number(value)
  }
)

dirtAmount决定了光晕中污点的强度和数量。通过GUI调整,用户可以控制污点的多少,范围为01,步长为0.1。调整该值能够改变光晕的散射效果,增加或减少镜头中产生的污点。

2.4 控制光晕的虚影效果

光晕中的虚影(Ghost Dispersal)效果模拟了多个光晕图层的重叠,产生虚化的边缘或散射光点的效果:


gui.add(lensFlare.uniforms, 'ghostDispersal', 0, 1, 0.1).name('光晕的虚影').onChange(
  (value) => {
    lensFlare.uniforms.ghostDispersal = Number(value)
  }
)

ghostDispersal控制光晕中虚影的强度。值的范围也是01,步长为0.1。增加该值会增强光晕中虚影的效果,使得光源的散射更加复杂。

2.5 控制光晕的宽度

最后,我们可以控制光晕的宽度,即光晕在视场中的扩散程度。调整光晕的宽度可以改变视觉效果的尺度,使光晕看起来更宽或更窄:


gui.add(lensFlare.uniforms, 'haloWidth', 0, 1, 0.1).name('光晕的宽度').onChange(
  (value) => {
    lensFlare.uniforms.haloWidth = Number(value)
  }
)

haloWidth控制光晕的宽度,值的范围也是01,步长为0.1。通过调整该值,用户可以改变光晕的扩散范围,使其在视觉上变得更加柔和或更为明显。

3. 总结

在Cesium中,光晕效果是通过后处理阶段实现的,可以通过调整光晕的各种属性来实现不同的视觉效果。在本文中,我们使用GUI来动态调整光晕的多个参数,包括启用/禁用光晕、强度、污点数量、虚影效果以及光晕的宽度。

通过这种方式,用户能够实时地控制光晕效果,帮助在开发过程中精细调整场景中的光影效果,使得渲染结果更加真实和生动。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注