点击查看:最新Cesium可视化系统实战视频课程
在Cesium中,阴影(Shadows)是一种增强视觉效果的功能,通过显示物体与光源之间的遮挡关系,可以显著提高三维场景的真实感和深度感。在上述示例代码中,我们可以看到大量关于阴影相关的设置和配置。本文将从Cesium中阴影的基本概念、支持的阴影类型、关键API以及在项目中的应用方式等方面,详细讲解Cesium中的阴影处理。
一、Cesium中的阴影基础
Cesium中的阴影系统依赖于光源(通常是太阳)的位置,以及物体的几何形状。通过计算光线是否被物体遮挡,Cesium可以动态渲染物体投下的阴影。Cesium支持以下两种主要的阴影类别:
- 物体阴影(Entity Shadows):
-
- 用于描述实体(Entity)在其他物体或地形上的投影。
- 可以为具体的模型(例如飞机、车辆等)开启或关闭阴影。
- 地形阴影(Terrain Shadows):
-
- 用于描述地形之间的阴影投射,例如山脉对低谷的遮挡。
- 依赖于Cesium的地形服务,如
Cesium.WorldTerrain
。
Cesium的阴影渲染基于光源的方向计算,默认使用太阳的位置作为光源,阴影会随时间动态变化。
二、开启阴影的基本配置
在Cesium中,阴影功能需要在初始化Cesium.Viewer
时启用或通过后续代码进行配置。例如,在示例代码中,以下是初始化时对阴影相关参数的配置:
javascript
const viewer = new Cesium.Viewer("cesiumContainer", {
shadows: true, // 开启场景阴影
terrainShadows: Cesium.ShadowMode.ENABLED, // 启用地形阴影
shouldAnimate: true, // 动画启用,保证阴影动态变化
terrain: Cesium.Terrain.fromWorldTerrain(), // 使用全球地形
});
shadows: true:开启全局阴影效果。
terrainShadows: Cesium.ShadowMode.ENABLED:为地形启用阴影渲染。
shouldAnimate: true:允许时间动态变化(例如太阳位置变化)。
此外,还可以通过viewer.shadowMap
对象对阴影的具体参数进行细粒度控制(见后文详细介绍)。
三、阴影的关键类型和模式
1. Cesium.ShadowMode
Cesium.ShadowMode
是Cesium中用来控制阴影启用模式的核心枚举类型。以下是其主要选项:
Cesium.ShadowMode.ENABLED:
-
- 开启阴影渲染。
- 示例:物体和地形都会投射和接收阴影。
Cesium.ShadowMode.DISABLED:
-
- 禁用阴影渲染。
Cesium.ShadowMode.CAST_ONLY:
-
- 只投射阴影,不接收阴影。
- 适用于需要让物体有投影效果但本身不需要被遮挡的场景。
Cesium.ShadowMode.RECEIVE_ONLY:
-
- 只接收阴影,不投射阴影。
- 适用于地面、地形等需要显示阴影但不产生阴影的场景。
示例代码中为每个实体定义了不同的阴影模式。例如:
javascript
const boxEntity = viewer.entities.add({
name: "Box",
height: 10.0,
box: {
dimensions: new Cesium.Cartesian3(10.0, 10.0, 10.0),
material: Cesium.Color.RED,
shadows: Cesium.ShadowMode.ENABLED, // 开启阴影
},
});
此处设置了一个红色立方体,并启用了其阴影功能。通过将shadows
设置为Cesium.ShadowMode.ENABLED
,该实体会同时投射和接收阴影。
2. Soft Shadows(柔和阴影)
Cesium支持柔和阴影效果,可以通过shadowMap.softShadows
属性启用。柔和阴影会让阴影边缘更平滑,提升视觉质量,但可能会降低性能。
javascript
Sandcastle.addToggleButton(
"Soft Shadows",
shadowMap.softShadows,
function (checked) {
shadowMap.softShadows = checked;
},
);
在代码中通过Sandcastle工具为柔和阴影添加了一个切换按钮,用户可以动态开启或关闭柔和阴影。
四、阴影关键参数详解
1. shadowMap属性
viewer.shadowMap
对象包含了与阴影渲染相关的所有设置选项。以下是示例代码中对shadowMap
的主要配置:
javascript
const shadowMap = viewer.shadowMap;
shadowMap.maximumDistance = 10000.0; // 设置阴影的最大距离
maximumDistance:控制阴影投射的最大距离。较大的值会导致阴影渲染范围增大,但可能会影响性能。
此外,通过菜单可以动态调整阴影贴图的分辨率:
javascript
Sandcastle.addToolbarMenu([
{
text: "Size : 2048",
onselect: function () {
shadowMap.size = 2048; // 设置阴影贴图大小为2048
},
},
// 其他选项...
]);
阴影贴图尺寸越大,阴影的渲染精度越高,但对性能要求也会更高。
2. 地形阴影(Terrain Shadows)
地形阴影由viewer.terrainShadows
控制,其支持以下模式:
Cesium.ShadowMode.ENABLED:开启地形阴影。
Cesium.ShadowMode.DISABLED:关闭地形阴影。
在示例代码中,可以动态切换地形阴影的开启或关闭:
javascript
Sandcastle.addToggleButton(
"Terrain Shadows",
viewer.terrainShadows === Cesium.ShadowMode.ENABLED,
function (checked) {
viewer.terrainShadows = checked
? Cesium.ShadowMode.ENABLED
: Cesium.ShadowMode.DISABLED;
},
);
3. 实体阴影(Entity Shadows)
每个实体的阴影设置可以单独调整,例如开启或关闭实体的投射阴影功能。示例代码中,通过以下部分实现实体阴影的动态切换:
javascript
Sandcastle.addToggleButton("Entity Shadows", true, function (checked) {
const entityShadows = checked
? Cesium.ShadowMode.ENABLED
: Cesium.ShadowMode.DISABLED;
for (let i = 0; i < entitiesLength; ++i) {
const entity = entities[i];
const visual = entity.model || entity.box || entity.ellipsoid;
visual.shadows = entityShadows; // 动态调整阴影模式
}
});
javascript
此代码块遍历场景中的所有实体,并动态更改其阴影模式。
五、动态阴影与时间控制
Cesium的阴影可以随时间变化,这得益于Cesium.JulianDate
和viewer.clock
的结合使用。例如:
javascript
viewer.clock.currentTime = new Cesium.JulianDate(location.date);
viewer.clock.multiplier = 1.0; // 控制时间的变化速度
通过这种方式,可以模拟一天中阴影随太阳移动而变化的效果,增强场景的动态性和真实感。
六、总结
Cesium中的阴影功能提供了丰富的视觉增强选项,通过合理配置可以显著提升三维场景的真实感。在实际使用中,需要根据场景需求和硬件性能选择适当的阴影模式和参数。例如,在实时应用中可以适当降低阴影贴图分辨率和最大距离,以提升性能;而在高保真渲染中则可以开启柔和阴影和高分辨率贴图以保证视觉质量。
通过上述代码示例和讲解,开发者可以在项目中更好地利用Cesium的阴影功能,为场景增加更具沉浸感的效果。