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

20250206190923d3cc0a31594dc47c6106cec8aad51e58455在现代 3D 图形和地图可视化中,能够模拟不同的视觉效果(如夜视仪效果)是非常有趣且实用的。尤其是对于需要在低光环境下进行数据可视化和观察的应用,夜视效果提供了一种独特的方式来增强视觉体验。今天我们将通过一个简单的代码示例,来深入了解如何在 Cesium 中实现夜视仪效果,并对其实现过程和效果进行讲解。

1. Cesium简介

Cesium 是一个强大的开源 JavaScript 库,用于渲染三维地图和地球,尤其适用于大规模空间数据的展示和交互。它提供了丰富的功能和扩展,支持多种后处理效果(post-processing effects),包括夜视仪、亮度调节、模糊等视觉特效,增强了应用的表现力。

在本文中,我们将重点讲解如何在 Cesium 中实现夜视仪效果,并通过 GUI(图形用户界面)进行交互控制,进一步调整亮度效果。

2. 代码示例分析

下面的代码展示了如何在 Cesium 中添加夜视仪效果及亮度调节效果。


// 获取后处理阶段
const stages = viewer.scene.postProcessStages;

// 创建夜视仪效果
const nightVisionStage = stages.add(
  Cesium.PostProcessStageLibrary.createNightVisionStage()
);

// 初始状态设置为禁用
nightVisionStage.enabled = false;

// 在 GUI 中添加夜视仪开关
gui.add(nightVisionStage, 'enabled').name('夜视仪');

// 创建亮度调节效果
const brightnessStage = stages.add(
  Cesium.PostProcessStageLibrary.createBrightnessStage()
);

// 初始状态设置为禁用
brightnessStage.enabled = false;

// 在 GUI 中添加亮度开关
gui.add(brightnessStage, 'enabled').name('画面亮度');

// 设置初始亮度值
brightnessStage.uniforms.brightness = 0.1;

// 在 GUI 中添加亮度滑动条进行调节
gui.add(brightnessStage.uniforms, 'brightness', 0, 1).step(0.01).name('亮度').onChange((value) => {
  brightnessStage.uniforms.brightness = Number(value);
});

2.1 后处理阶段(Post-process Stages)

Cesium 提供了一个 PostProcessStage 系统,它允许在渲染场景后,对最终画面进行进一步处理。你可以通过将不同的后处理效果(如夜视仪、亮度调整、模糊效果等)加入到渲染管线中,来改变画面的最终表现。

  • viewer.scene.postProcessStages:这是 Cesium 中处理后期效果的容器,通过它可以访问和控制所有的后处理阶段。

2.2 夜视仪效果(Night Vision Effect)

夜视仪效果是一个常见的后处理效果,模拟的是通过夜视设备观察场景的效果。通过该效果,场景中的物体在低光环境下会变得更加可见,并通常会呈现绿色或类似红外线的效果。在代码中,夜视仪效果是通过 Cesium.PostProcessStageLibrary.createNightVisionStage() 方法创建的:


const nightVisionStage = stages.add(
  Cesium.PostProcessStageLibrary.createNightVisionStage()
);

默认情况下,夜视仪效果是禁用的,我们可以通过 GUI 控制是否启用它:


nightVisionStage.enabled = false;
gui.add(nightVisionStage, 'enabled').name('夜视仪');

通过这个设置,我们在界面上添加了一个开关,允许用户在实时渲染过程中启用或禁用夜视仪效果。

2.3 亮度调节效果(Brightness Adjustment)

在低光环境下,调节画面的亮度常常是非常重要的。为了能够在 Cesium 中控制亮度,我们使用 Cesium.PostProcessStageLibrary.createBrightnessStage() 来创建一个亮度调节的后处理效果:


const brightnessStage = stages.add(
  Cesium.PostProcessStageLibrary.createBrightnessStage()
);

同样,亮度调节默认是禁用的。我们通过 GUI 提供一个开关,让用户可以启用或禁用此效果:


brightnessStage.enabled = false;
gui.add(brightnessStage, 'enabled').name('画面亮度');

亮度的初始值设置为 0.1,即使画面整体亮度稍微昏暗:

javascript
brightnessStage.uniforms.brightness = 0.1;

同时,用户可以通过一个滑动条调节亮度值,范围是 [0, 1]


gui.add(brightnessStage.uniforms, 'brightness', 0, 1).step(0.01).name('亮度').onChange((value) => {
  brightnessStage.uniforms.brightness = Number(value);
});

3. 夜视仪效果的实际应用

夜视仪效果在许多应用中都有重要作用,尤其是在军事模拟、遥感分析、夜间航拍等领域。通过模拟夜视效果,可以让用户在低光条件下更清晰地查看场景,从而提高数据的可读性和应用的实用性。

例如,假设你正在开发一个飞行模拟器,在飞行过程中,飞机进入低光环境时,夜视仪效果会自动启动,让飞行员能够清楚地看见地面和其他物体。通过 Cesium 的夜视仪效果,你可以实现这一功能,同时还可以允许用户手动开关该效果,并调整亮度。

4. 扩展思路

除了夜视仪效果和亮度调节外,Cesium 还提供了许多其他的后处理效果,如:

  • 模糊效果(Blur Effect):可以用来模拟低清晰度视野。
  • 色调映射(Tone Mapping):对高动态范围图像(HDR)进行色调映射,以使图像在不同设备上的显示效果更佳。
  • 去噪效果(Denoising Effect):去除渲染过程中的噪点,提升图像质量。

这些效果可以与夜视仪效果配合使用,进一步增强视觉表现,提升用户体验。

5. 总结

通过本示例,我们了解了如何在 Cesium 中实现夜视仪效果,并通过 GUI 控制效果的开启和亮度调节。这种后处理效果对于模拟不同光照条件下的视觉体验非常有用,尤其在航天、军事、遥感等领域。借助 Cesium 提供的强大后处理功能,我们可以轻松地为应用增添更多的视觉特效,提升交互性和用户体验。

希望这篇文章能帮助你更好地理解如何使用 Cesium 实现夜视仪效果,并为你的项目提供灵感和技术参考。

发表回复

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