Cesium黄昏效果：一键开关与滑块调节浓烈度

前言

我们曾分享过Cesium中通过后处理与粒子系统实现的下雪和雾气效果。今天将继续探讨天气特效系列——自定义黄昏日落氛围效果，看看如何让三维场景在黄昏时分更具沉浸感。

此次同样采用 PostProcessStage 后处理着色器，实现的功能包括：

• 一键开启或关闭黄昏效果。
• Slider 滑块实时调节黄昏浓烈程度。
• 远景分层暖雾渐变，让画面呈现日落层次感。

这套方案可直接应用于数字孪生、三维场景氛围美化、环境仿真等场景。

演示动态图示如下：

演示地址如下：

3d.xiazhi.tech/3d-demos/#/…

效果特点与视觉亮点

• 并非简单的全局色温偏移，而是基于屏幕竖向坐标进行分层渲染，天空远景的黄昏暖色更浓郁，近景地形与建筑则保留更多自然细节。
• 通过 uniform 对外暴露强度参数，支持滑块实时动态调节，实现沉浸感可调。

实现思路

原理实际上并不复杂：借助Cesium的后处理管线，自定义一个片元着色器。具体流程包括：

• 对原始场景纹理进行采样。
• 整体压暗画面，模拟傍晚光线逐渐减弱。
• 叠加暖橙色日落色调。
• 根据屏幕纵向坐标实现远景分层暖雾效果。
• 外部绑定滑块数值，动态控制黄昏混合强度。

完整代码

1. template 结构：

 复制代码<template>
    <div class="main">        
        <div class="content" ref="content" id="earth">div>        <div class="btn-border" v-if="isLoading">            <div class="slider-border" v-if="isDusk">
                <div class="slider-label">黄昏浓烈程度：{{ Number(duskStrength).toFixed(2) }}div>                
                <el-slider
                  class="dusk-slider"
                  v-model.number="duskStrength"
                  :min="0"
                  :max="0.4"
                  :step="0.01"
                  @input="updateDuskStrength"
                />
            div>            
            <el-button type="primary" size="default" class="btn" @click="flyTo">初始位置el-button>            
            <el-button type="primary" size="default" class="btn" @click="duskControl">
                {{ isDusk ? '关闭黄昏效果' : '开启黄昏效果' }}
            el-button>
        div>        
        <div class="loading" v-if="!isLoading">Loading...div>    div>
template>

2. script 代码：

 复制代码

3. css样式代码:

 复制代码* {
    margin: 0;
    padding: 0;
}.main {
    width: 100%;
    height: 100vh;
    position: relative;
}.content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}.loading {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: #000000;
}.btn-border {
    position: absolute;
    right: 24px;
    top: 24px;
    z-index: 2;
    display: flex;
    justify-content: start;
    align-items: stretch;
}.btn {
    margin-left: 20px;
    cursor: pointer;
}.slider-border {
    width: 260px;
    margin-right: 20px;
    position: relative;
    top: -9px;
}.slider-label {
    font-size: 14px;
}

核心逻辑说明

1. 分层黄昏原理

核心思路是屏幕 Y 轴分层混合：

• 画面上方（天空区域）：暖色雾效更浓，模拟黄昏时远处天边的暖色光晕。
• 画面下方（地形和建筑区域）：保留更多原始细节，使场景看起来更自然。

2. 动态强度调节

通过 duskStrength 参数统一控制三个维度：降低原始画面亮度以模拟傍晚光线衰减；控制暖色调的混合比例；调节远景暖色雾气的浓度。

拖动滑块即可实时预览不同程度的黄昏氛围，从微弱的暖意到浓郁的日落沉浸感，滑动间即可直观感受效果变化。这一设计让调试与场景适配变得非常直观。无论是用于数字孪生还是环境仿真，这套方案都能轻松营造出逼真的日落沉浸氛围。