A Pure-Shader Sunset Glow for Cesium with a Real-Time Intensity Slider
Cesium's `PostProcessStage` is the sanctioned extension point for screen-space effects, and this shader demonstrates the full recipe — multi-octave noise, masked regions, uniform-driven animation, and lifecycle-safe stage management — that any geospatial app can reuse for fog, storm fronts, or aurora overlays without pulling in a third-party library.
Six octaves of fractional Brownian motion noise, each with independent UV scaling and time offsets, generate irregular cloud textures that drift slowly across the scene. The shader blends an orange-red to golden-orange gradient based on local cloud density, and a smoothstep mask on the vertical texture coordinate keeps the effect strictly above the horizon — terrain and buildings remain untouched. A Vue 3 wrapper exposes a slider that pushes a `fireCloudStrength` uniform into the stage in real time, ranging from 0 to 0.8, and a toggle adds or removes the post-process stage from Cesium's pipeline without restarting the viewer. The animation loop runs on `requestAnimationFrame`, incrementing a time uniform to drive all three cloud layers at different speeds and directions.
The Y-axis mask is the detail that makes the effect usable in a real geospatial app — without it, the clouds would tint terrain and buildings, breaking the illusion.
Running three separate FBM evaluations with distinct UV scales and time offsets costs more GPU cycles than a single evaluation, but the visual payoff is cloud layers that move at different apparent depths, which a single noise field cannot fake.
Toggling the effect by adding and removing the `PostProcessStage` rather than setting a zero-strength uniform avoids wasting GPU time on a no-op shader pass.