Cesium流体模拟：基于WebGL着色器实现三维地理动态可视化

最新推荐文章于 2026-08-15 12:18:40 发布
原创 最新推荐文章于 2026-08-15 12:18:40 发布 · 343 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测

这次我们来看一个在 Cesium 三维地球引擎中实现流体模拟效果的开源项目。项目核心是利用 WebGL 的 Primitive API 和 DrawCommand，将 Shadertoy 上成熟的流体模拟着色器代码移植到 Cesium 场景中，从而在三维地理空间里渲染出动态、逼真的流体效果，比如水流、烟雾或云层运动。

对于 Cesium 开发者来说，这个项目的价值在于它突破了传统 GIS 可视化中静态或简单动画的局限，将复杂的 GPU 计算（如基于 FFT 的海面模拟、体积云特效）直接集成到地理场景中。它不依赖外部模型或预渲染视频，而是通过着色器程序实时计算，性能开销可控，且能与 Cesium 的相机、地形、实体进行深度交互。

本文将带你快速了解这个项目的核心能力、部署门槛，并一步步完成从环境搭建、代码集成到效果验证的全过程。如果你正在寻找为 Cesium 项目添加高级动态视觉效果（如智慧水务的水流模拟、气象可视化、游戏化地形渲染）的方案，这篇文章可以直接收藏。

1. 核心能力速览

能力项 说明
项目类型 Cesium 插件/扩展，基于 WebGL 着色器的流体模拟渲染器。
核心技术 WebGL 2.0 (或 WebGL 1.0 with extensions)、Cesium Primitive API、GLSL 着色器编程。
主要功能 在 Cesium 球体或场景中实时渲染流体动态效果（如基于 FFT 的海面、体积云、烟雾扩散）。支持与地形、实体、相机交互。
渲染方式 使用 Cesium.Primitive 和 DrawCommand 直接向渲染管线提交自定义几何与着色器。
性能门槛 依赖客户端 GPU 和浏览器 WebGL 支持 。现代集成显卡（如 Intel Iris Xe）可运行基础效果，复杂模拟（如高分辨率 FFT）需要独立显卡以获得流畅帧率。
显存/内存占用 由模拟分辨率（如纹理大小）和计算复杂度决定。通常占用数十到数百 MB 的 GPU 内存。需在实际场景中监控。
启动/集成方式 作为 JavaScript 模块集成到现有 Cesium 项目中，无需额外服务端部署。
是否支持 API 是，提供 JavaScript 类接口，可通过参数（如时间、风速、波高）动态控制流体效果。
是否支持“批量”渲染 是，通过 Primitive API 可以高效管理多个流体实例或与其他 Cesium 图元合并渲染。
适合场景 地理信息系统的动态环境模拟（海洋、大气）、智慧城市可视化、教育演示、三维游戏或仿真场景增强。

2. 适用场景与使用边界

这个开源流体模拟方案主要适用于需要在三维地理信息场景中增加高级动态视觉效果的开发者。

它非常适合以下场景：

  • 智慧海洋与水务 ：可视化洋流、波浪、洪水淹没分析、港口水流动态。
  • 气象与环境可视化 ：展示体积云的运动、雾霾或污染物的扩散过程。
  • 应急仿真与演练 ：模拟火灾烟雾蔓延、化学品泄漏气体扩散的路径。
  • 游戏与虚拟现实 ：为基于地理的游戏或VR体验创建动态的水体、云海环境。
  • 科研与教育 ：用于流体力学、大气科学等学科的教学演示工具。

需要注意的使用边界：

  1. 性能依赖客户端 ：所有计算在用户浏览器中完成，效果流畅度直接取决于用户设备的 GPU 性能。在低端设备或移动端上，可能需要降低模拟分辨率或关闭效果。
  2. 浏览器兼容性 ：需要浏览器支持 WebGL 2.0 或相关的扩展（如 OES_texture_float ）。部分旧版浏览器或特殊环境（如某些嵌入式 Qt WebGL 环境）可能无法运行。
  3. 地理精度 vs 视觉效果 ：这是一个 视觉增强工具 ，而非高精度物理模拟引擎。其着色器算法（如来自 Shadertoy）通常为了视觉效果和实时性能做了简化，不能替代专业的计算流体动力学（CFD）软件进行定量分析。
  4. 与 Cesium 生态集成 ：效果需要与 Cesium 的地形、影像图层、实体模型协调。例如，流体表面与地形“挖洞”效果结合时，可能出现 Z-fighting（深度冲突）或对不齐的问题，需要额外的深度测试或渲染顺序调整。
  5. 版权与素材 ：项目本身是开源的，但如果你集成的具体着色器代码或使用的纹理有特定许可证，需要遵守。用于商业项目时，务必核实所有依赖组件的许可协议。

3. 环境准备与前置条件

在开始集成流体模拟之前，请确保你的开发环境满足以下要求。

3.1 基础开发环境

  • 操作系统 ：Windows 10/11, macOS, 或 Linux。项目是 Web 前端，与操作系统无强绑定。
  • 代码编辑器 ：VS Code, WebStorm 等。
  • Node.js 与 npm ：用于构建和可能管理依赖。推荐安装 LTS 版本（如 Node.js 18+）。
  • 现代浏览器 ：Chrome/Edge 90+, Firefox 85+, Safari 15+。务必 开启 WebGL 支持 。可以在浏览器地址栏输入 chrome://flags 或 about:config 中搜索 WebGL 确保启用。

3.2 Cesium 项目基础

  • CesiumJS 库 ：需要一个已创建并能正常运行的 Cesium 项目。你可以通过 npm install cesium 安装，或直接引用 CDN。
  • Cesium 访问令牌 ：如果你使用 Cesium Ion 的默认底图或地形，需要注册并配置 Cesium.Ion.defaultAccessToken 。
  • 基本的 Cesium 知识 ：了解如何初始化 Viewer 、添加 Entity 、使用 Primitive 等概念。

3.3 显卡与驱动

  • GPU ：支持 WebGL 2.0 的独立显卡或性能较好的集成显卡。NVIDIA GTX 1050 / AMD RX 560 或更高型号能获得更好体验。
  • 驱动程序 ：更新显卡驱动至最新版本，以确保最佳的 WebGL 兼容性和性能。

3.4 获取流体模拟项目代码 通常这类项目会托管在 GitHub 上。你需要克隆或下载项目仓库。假设项目结构如下： 

cesium-fluid-simulation/
├── src/
│   ├── FluidSimulationPrimitive.js  // 核心 Primitive 类
│   ├── shaders/                     // GLSL 着色器文件
│   │   ├── fluidSimulationVS.glsl
│   │   └── fluidSimulationFS.glsl
│   └── ...
├── examples/
│   └── index.html                   // 示例文件
└── README.md

4. 安装部署与集成方式

这类项目通常不涉及复杂的服务端安装，核心是将其作为前端库集成到你的 Cesium 应用中。

4.1 方式一：作为 ES 模块引入（推荐） 如果你的项目使用 Webpack、Vite 等现代构建工具，可以将流体模拟的源代码作为本地模块引入。

  1. 复制源码 ：将 src/ 目录下的核心文件（如 FluidSimulationPrimitive.js 和 shaders/ 文件夹）复制到你项目的合适位置（例如 ./lib/cesium-fluid/ ）。
  2. 在组件中引入 ： 
    // 在你的 Vue/React 组件或主 JS 文件中
import { Viewer } from 'cesium';
import { FluidSimulationPrimitive } from './lib/cesium-fluid/FluidSimulationPrimitive.js';

// 初始化 Cesium Viewer
const viewer = new Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(),
});

// 创建流体模拟实例
const fluidPrimitive = new FluidSimulationPrimitive({
    resolution: 512, // 模拟纹理分辨率
    animationSpeed: 1.0,
    // ... 其他参数
});

// 添加到场景的图元集合
viewer.scene.primitives.add(fluidPrimitive);

4.2 方式二：通过 Script 标签直接引用 如果项目提供了打包好的 UMD 格式文件（如 dist/cesium-fluid-simulation.js ），可以直接在 HTML 中引用。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="./Build/Cesium/Cesium.js"></script>
    <link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <!-- 引入流体模拟库 -->
    <script src="./lib/cesium-fluid-simulation.js"></script>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = 'YOUR_ION_ACCESS_TOKEN';
        const viewer = new Cesium.Viewer('cesiumContainer');

        // 此时全局变量 Cesium 上可能挂载了扩展类
        const fluidPrimitive = new Cesium.FluidSimulationPrimitive({
            // ... 配置参数
        });
        viewer.scene.primitives.add(fluidPrimitive);
    </script>
</body>
</html>

4.3 方式三：在已有 Primitive 基础上改造 如果你对 Cesium 的 Primitive 和 DrawCommand 有深入了解，也可以参考项目的着色器代码，直接将其融入到自己自定义的 Primitive 中。这种方式最灵活，但难度也最高。

5. 功能测试与效果验证

集成成功后，我们需要验证流体效果是否正常渲染，并测试其核心功能。

5.1 基础渲染测试

  • 测试目的 ：确认流体模拟能正确初始化并显示在场景中。
  • 操作步骤 ：
    1. 按照上述方式集成代码。
    2. 在浏览器中打开你的示例页面。
    3. 等待 Cesium 地球和地形加载完毕。
  • 预期结果 ：你应该能在场景中看到动态的流体效果。根据着色器不同，可能是波光粼粼的海面、流动的云层或扩散的烟雾。
  • 判断成功 ：效果动态变化（不是静态图片），并且随着相机移动，效果能正确贴合地球曲面或指定位置。
  • 常见失败原因 ：
    • 控制台报错 WebGL 相关 ：浏览器不支持 WebGL 2.0 或所需扩展。检查浏览器控制台（F12）的错误信息。
    • 黑屏或白屏 ：着色器编译失败。检查网络是否成功加载了 .glsl 文件，或着色器代码中是否有语法错误。
    • 效果位置错误 ：Primitive 的几何位置或坐标系统设置不正确。检查传入的 boundingVolume 或 modelMatrix 参数。

5.2 参数动态调整测试

  • 测试目的 ：验证通过 API 可以实时控制流体外观和行为。
  • 操作步骤 ：
    1. 在代码中获取 fluidPrimitive 实例。
    2. 添加一些 UI 控件（如 dat.GUI 或 HTML slider）。
    3. 将控件绑定到 Primitive 的公开属性上，例如 fluidPrimitive.uniforms.u_speed 、 fluidPrimitive.uniforms.u_waveHeight 。
  • 输入示例 ： 
    // 假设 fluidPrimitive 有一个 updateUniforms 方法
const gui = new dat.GUI();
const params = {
    speed: 1.0,
    waveHeight: 0.5,
    color: [0.1, 0.3, 0.8]
};
gui.add(params, 'speed', 0.0, 5.0).onChange(v => {
    fluidPrimitive.updateUniforms({ u_speed: v });
});
gui.add(params, 'waveHeight', 0.0, 2.0).onChange(v => {
    fluidPrimitive.updateUniforms({ u_waveHeight: v });
});
  • 预期结果 ：拖动滑块时，流体的运动速度、波浪高度或颜色实时发生变化。
  • 判断成功 ：视觉反馈即时且符合预期。

5.3 与 Cesium 场景交互测试

  • 测试目的 ：验证流体效果能与 Cesium 的地形、实体、相机等正确交互。
  • 测试用例 1：地形适配
    • 开启 Cesium.createWorldTerrain() 。
    • 观察流体表面是否与山地、河谷等地形特征有合理的视觉关系（例如，水似乎在山谷中流动）。
    • 可能的问题 ：流体表面与地形穿插（Z-fighting）。解决方案是在着色器中精细调整深度计算，或使用 Cesium.Primitive 的 depthTest 相关属性。
  • 测试用例 2：相机交互
    • 缩放、平移、旋转地球。
    • 预期结果 ：流体效果应能正确跟随视角变化，透视和细节层次（LOD）过渡自然。
  • 测试用例 3：与其他图元共存
    • 在场景中添加一些 Entity （如 3D 模型、点、线）。
    • 预期结果 ：流体效果与这些实体同时显示，渲染顺序正确，不会相互遮挡异常。

5.4 性能与压力测试

  • 测试目的 ：评估在不同硬件和复杂场景下的性能表现。
  • 操作步骤 ：
    1. 打开浏览器的开发者工具，进入 Performance 或 Rendering 面板。
    2. 开启帧率（FPS）监控。
    3. 在复杂地形区域或添加多个流体实例的场景中操作相机。
  • 观察指标 ：
    • 帧率 (FPS) ：保持在 30-60 FPS 为流畅。如果低于 24 FPS，体验会卡顿。
    • GPU 内存 ：在 Chrome 的 Memory 面板或 about:gp 页面可以观察 GPU 内存使用情况。
    • 着色器编译时间 ：首次加载时，观察控制台是否有长时间停顿。
  • 优化方向 ：如果性能不佳，尝试降低 resolution （如从 1024 降到 512），简化着色器计算，或减少同时活动的流体图元数量。

6. 接口 API 与动态控制

一个设计良好的流体模拟 Primitive 会暴露出一组 API，用于在运行时控制其状态。虽然具体 API 因项目而异，但通常包括以下模式：

6.1 初始化配置 在构造函数中传入配置对象，这些参数通常在初始化后难以更改。 

const fluidPrimitive = new FluidSimulationPrimitive({
    resolution: 512, // 内部模拟纹理大小，影响质量和性能
    boundingVolume: new Cesium.BoundingSphere(), // 或指定一个矩形区域
    modelMatrix: Cesium.Matrix4.IDENTITY, // 模型变换矩阵
    // 着色器 uniform 变量初始值
    uniforms: {
        u_time: 0.0,
        u_windDirection: new Cesium.Cartesian2(1.0, 0.0),
        u_primaryColor: new Cesium.Color(0.1, 0.3, 0.8, 1.0),
        u_secondaryColor: new Cesium.Color(0.8, 0.9, 1.0, 1.0),
    }
});

6.2 运行时更新 提供方法或直接设置属性来更新效果。 

// 方式一：直接更新 uniform 值（如果设计为可写）
fluidPrimitive.uniforms.u_waveHeight = 2.0;

// 方式二：调用更新方法
fluidPrimitive.updateUniforms({
    u_speed: 0.5,
    u_color: [0.2, 0.5, 0.9]
});

// 方式三：响应 Cesium 时钟（实现动态动画）
viewer.clock.onTick.addEventListener(function(clock) {
    const currentTime = clock.currentTime.secondsOfDay;
    fluidPrimitive.updateUniforms({ u_time: currentTime });
});

6.3 销毁与资源释放 当不再需要时，应从场景中移除并释放 WebGL 资源，防止内存泄漏。 

// 从场景中移除
viewer.scene.primitives.remove(fluidPrimitive);
// 如果 Primitive 有 destroy 方法，调用它
if (fluidPrimitive && typeof fluidPrimitive.destroy === 'function') {
    fluidPrimitive.destroy();
}
fluidPrimitive = null;

7. 资源占用与性能观察

在 WebGL 应用中，性能监控至关重要。以下是观察和优化 Cesium 流体模拟性能的实用方法。

7.1 关键性能指标

  1. 帧时间 (Frame Time) ：使用 requestAnimationFrame 计算每帧耗时。目标是保持在 16ms（60FPS）或 33ms（30FPS）以内。 
    let lastTime = performance.now();
function monitorFrame() {
    const now = performance.now();
    const delta = now - lastTime;
    console.log(`Frame time: ${delta.toFixed(2)}ms`);
    lastTime = now;
    requestAnimationFrame(monitorFrame);
}
monitorFrame();
  2. DrawCall 数量 ：在 Cesium 中，每个 Primitive 可能包含多个 DrawCall。过多的 DrawCall 是性能瓶颈。使用 Cesium 的调试功能查看： 
    viewer.scene.debugShowFramesPerSecond = true; // 显示FPS
// 在浏览器控制台输入
viewer.scene._primitives.length // 查看图元数量（粗略估计）
  3. GPU 内存 ：通过 Chrome 的 开发者工具 -> More tools -> Rendering -> Frame rendering stats 可以查看纹理内存使用情况。大型的 resolution （如 2048x2048）的浮点纹理会占用大量显存。

7.2 性能优化策略

  • 降低分辨率 ：这是最有效的优化手段。将 resolution 从 1024 降至 512，性能提升可能超过 4 倍，视觉质量损失在可接受范围。
  • 简化着色器 ：审查从 Shadertoy 移植的 GLSL 代码。复杂的噪声函数、多次 FFT 迭代、高次采样会极大增加 GPU 负载。考虑使用查找表（LUT）或简化算法。
  • 利用 Cesium 的 LOD ：如果流体覆盖范围很大，可以实现基于视距的细节层次（LOD）系统，在远处使用低分辨率模拟。
  • 避免每帧更新所有 Uniforms ：如果某些参数不变，不要每帧都重新设置。
  • 合并图元 ：如果场景中有多个相似的流体区域，探索能否将它们合并到一个更大的 Primitive 中，减少 DrawCall。

7.3 内存泄漏排查 WebGL 资源（缓冲区、纹理、帧缓冲区）不会自动垃圾回收。确保：

  • 在 Primitive 的 destroy() 方法中，正确调用 gl.deleteBuffer() , gl.deleteTexture() , gl.deleteFramebuffer() 。
  • 当移除 Primitive 时，调用其 destroy 方法。
  • 使用 Chrome Memory 面板的 Heap snapshot 和 Allocation instrumentation on timeline 工具，检查 WebGLTexture , WebGLBuffer 等对象是否持续增长。

8. 常见问题与排查方法

问题现象 可能原因 排查方式 解决方案
页面白屏，控制台报 WebGL 错误 1. 浏览器不支持 WebGL。
2. 显卡驱动过旧或故障。
3. 着色器编译错误。 		1. 访问 WebGL Report 检查支持情况。
2. 查看浏览器控制台具体错误信息。 		1. 更新浏览器和显卡驱动。
2. 检查并修正 GLSL 语法错误。
3. 降级使用 WebGL 1.0 兼容模式（如果项目支持）。
流体效果不显示（黑屏）但地球正常 1. Primitive 未添加到场景。
2. 着色器未成功编译或链接。
3. 深度测试（Depth Test）导致被地形遮挡。 		1. 确认 viewer.scene.primitives.add() 已执行。
2. 检查控制台有无 WebGLProgram 错误。
3. 设置 primitive.appearance.material.translucent = true 或调整深度测试状态。 		1. 确保添加代码在 Viewer 创建后执行。
2. 使用 gl.getProgramInfoLog 获取着色器编译日志。
3. 调整 Primitive 的 depthTestAgainstTerrain 或 appearance 中的深度相关属性。
帧率极低，页面卡顿 1. 模拟分辨率 ( resolution ) 设置过高。
2. 着色器计算过于复杂。
3. 同时存在多个高负载 Primitive。 		1. 使用浏览器性能分析工具查看耗时最长的函数。
2. 逐步降低 resolution 观察帧率变化。 		1. 降低 resolution 。
2. 优化着色器，减少循环和复杂函数调用。
3. 实现按需渲染（如相机静止时降低更新频率）。
流体效果与地形穿插（Z-fighting） 流体表面与地形几何体深度值过于接近，导致渲染顺序闪烁。 观察相机移动时，流体与地形交界处是否出现闪烁的像素。 1. 在着色器中为流体表面深度值添加一个微小的偏移 ( gl_FragDepth = gl_FragCoord.z + 0.0001; )。
2. 调整 Primitive 的 depthTest 和 depthMask 状态。
3. 使用 Cesium.PolygonOffset 属性。
效果在特定视角或缩放级别消失 1. Primitive 的 boundingVolume 设置不正确，被视锥体裁剪。
2. 着色器中的计算在极端视角下溢出。 		1. 检查 Cesium 的 Debug 模式下的裁剪体。
2. 在着色器中添加边界检查或 clamp 函数。 		1. 确保 boundingVolume 能完全包含流体效果的范围。
2. 在着色器中限制数值范围，避免 NaN 或 Infinity 。
集成到 Vue/React 等框架后，效果异常或重复创建 1. 组件生命周期管理不当，导致多次创建/销毁。
2. Cesium Viewer 实例与框架状态不同步。 		1. 在 mounted / useEffect 中创建，在 beforeUnmount / cleanup 中销毁。
2. 使用 ref 持久化 Primitive 实例。 		1. 确保 Primitive 是单例，并在组件销毁时调用 destroy() 。
2. 将 Cesium 相关逻辑封装在独立的、受控的组件或 Hook 中。

9. 最佳实践与使用建议

  1. 从示例开始，逐步定制 ：不要一开始就修改核心着色器。先让官方示例在你的环境下跑通，然后只修改配置参数，最后再尝试改动 GLSL 代码。
  2. 建立性能基准 ：在集成前，记录你项目的基础帧率。集成流体效果后，对比帧率下降幅度，量化性能影响。
  3. 实现渐进增强 ：在用户设备性能未知的情况下，可以先以低分辨率模式启动，如果检测到高性能 GPU（通过 WEBGL_debug_renderer_info 等扩展），再动态切换到高质量模式。
  4. 优雅降级 ：在 try...catch 块中初始化 WebGL 复杂功能。如果失败（如不支持浮点纹理），可以回退到静态图片、简单颜色或直接隐藏该功能，并提供友好的提示。
  5. 资源管理 ：
    • 将着色器代码作为字符串常量嵌入 JS 文件，或使用构建工具（如 glslify）进行管理，避免网络请求 .glsl 文件。
    • 纹理贴图尽量使用压缩格式（如 .ktx2 ），并使用 Cesium.Resource 加载。
    • 在页面隐藏（ visibilitychange 事件）时，暂停流体模拟的更新循环以节省电量。
  6. 与 Cesium 生态结合 ：
    • 坐标转换 ：注意 Cesium.Cartesian3 、 Cesium.Cartographic 和着色器中模型/世界坐标的转换。使用 Cesium.Transforms 工具函数。
    • 时间同步 ：利用 viewer.clock 驱动动画，可以使流体模拟与 Cesium 的时间轴动画（如日照、阴影）同步。
    • 后期处理 ：考虑将流体效果与 Cesium 的后期处理（Post-Processing）栈结合，实现景深、泛光等特效，提升整体视觉冲击力。
  7. 版权与合规 ：确认从 Shadertoy 或其他来源移植的着色器代码的许可证（通常是 MIT 或 CC BY-NC-SA）。在商业项目中使用前，务必进行清理和合规审查。如果效果涉及特定品牌或受版权保护的设计，需获得授权。

10. 总结与下一步

这个基于 Cesium 和 WebGL 的流体模拟开源项目，为地理空间可视化开发者打开了一扇新的大门。它最大的优势在于将原本需要离线预渲染或依赖重型游戏引擎才能实现的复杂动态效果，通过客户端 GPU 实时计算带到了 Web 三维 GIS 中。

最值得尝试的点 是它的 可集成性和实时性 。你不需要部署额外的计算服务器，只需要一些前端代码，就能让静态的地球“活”起来。无论是模拟全球洋流，还是展示城市上空的云图变化，它都能提供强大的视觉表现力。

最先应该验证的功能 是基础渲染和参数调节。确保你能在本地跑通示例，并通过简单的 UI 滑块改变流体的速度、颜色或强度。这是后续所有高级定制的基础。

最容易踩的坑 主要集中在 WebGL 兼容性 、 着色器调试 和 性能优化 上。务必在多种设备和浏览器上进行测试，并熟练使用浏览器的开发者工具进行性能分析和着色器调试。

后续可以探索的方向 ：

  • 多效果复合 ：尝试将流体模拟与 Cesium 的其它特效结合，比如在流体表面反射动态光照（ cesium 动态光照 ），或者让流体在自定义的 cesium体渲染 体积内运动。
  • 数据驱动 ：将真实的科学数据（如风速、温度场）绑定到流体模拟的 uniform 变量上，实现数据可视化，而不仅仅是视觉特效。
  • 交互式编辑 ：开发一个编辑器，允许用户实时绘制力场、更改障碍物，并立即看到流体响应的变化。
  • 移动端适配 ：探索在移动端浏览器上通过降低精度和分辨率来运行简化版流体效果的可能性。

建议将项目代码和本文提到的排查方法收藏备用。当你需要在 Cesium 中创造令人印象深刻的动态环境时，这个技术方案会是一个强有力的起点。

标签
#Cesium #WebGL #着色器
第20节：cesium 流动纹理示例-动态输油管道（含源码+视频）
qq_29384639的博客
06-06 2208
cesium 流动纹理示例-动态输油管道
2011 选择客栈
weixin_33672400的博客
05-02 488
选择客栈 题目描述 丽江河边有n 家很有特色的客栈，客栈按照其位置顺序从 1 到n 编号。每家客栈都按照某一种色调进行装饰（总共 k 种，用整数 0 ~ k-1 表示），且每家客栈都设有一家咖啡店，每家咖啡店均有各自的最低消费。 两位游客一起去丽江旅游，他们喜欢相同的色调，又想尝试两个不同的客栈，因此决定分别住在色调相同的两家客栈中。晚上，他们打算选择一...
NOIP 2011 Day1 T2 选择客栈
Ang_Eric_的博客
08-18 397
#include #include #include #include #include #include #include #include #include #include #include using namespace std; struct data{ int sd,xf; }; data co[200005]; int n,k,p,ans,cnt,minn=21000
【CSDN竞赛第33期】C++题解
openallzzz
03-03 699
两位游客一起去丽江旅游，他们喜欢相同的色调，又想尝试两个不同的客栈，因此决定分别住在色调相同的两家客栈中。贪心，假设当前客栈的的颜色为c，最低消费为d，如果d不大于题意中的最低消费p，那我们 记下当前位置idx（颜色为c的位置），接下来判断，如果idx不小于上一个颜色为c的位置，那么当前颜色的客栈我们可选的有之前出现颜色为c的客栈总数，接着答案加上当前颜色的可选数量（具体构造方案：咖啡店选择最后一个满足最低消费不大于p的，客栈也固定选择和咖啡相同的一家，另外一个客栈在相同的颜色的可选客栈中任选一个即可）。
【11NOIP提高组】选择客栈（信息学奥赛一本通 1546）（洛谷 1311）
anglanjing7414的博客
08-10 650
题目描述 丽江河边有nn家很有特色的客栈，客栈按照其位置顺序从11到nn编号。每家客栈都按照某一种色调进行装饰（总共kk种，用整数00~k-1k−1表示），且每家客栈都设有一家咖啡店，每家咖啡店均有各自的最低消费。 两位游客一起去丽江旅游，他们喜欢相同的色调，又想尝试两个不同的客栈，因此决定分别住在色调相同的两家客栈中。晚上，他们打算选择一家咖啡店喝咖啡，要求...
【组合数】[NOIP2011]选择客栈[c++]
weixin_30558305的博客
03-24 292
题目描述 丽江河边有n 家很有特色的客栈，客栈按照其位置顺序从 1 到n 编号。每家客栈都按照某一种色调进行装饰（总共 k 种，用整数 0 ~ k-1 表示），且每家客栈都设有一家咖啡店，每家咖啡店均有各自的最低消费。 两位游客一起去丽江旅游，他们喜欢相同的色调，又想尝试两个不同的客栈，因此决定分别住在色调相同的两家客栈中。晚上，他们打算选择一家咖啡店喝咖啡，要求咖啡店位于两人住的两...
从游戏引擎到地理可视化：Cesium流体模拟的技术跨界之旅
cake8的博客
02-03 792
本文探讨了如何将游戏引擎中的流体模拟技术跨界应用于Cesium地理可视化平台。通过对比不同流体模拟方法的适用性，详细介绍了基于高度图的实现方案和性能优化技巧，帮助开发者在GIS场景中实现真实感流体效果。文章重点解析了Cesium流体模拟的核心算法和着色器实现，为技术跨界提供了实践指导。
当流体动力学遇上WebGL：Cesium中基于粒子系统的创新水纹模拟
fern8的博客
02-03 965
本文探讨了Cesium中基于粒子系统的创新水纹模拟技术，结合流体动力学与WebGL实现高动态流体效果。通过对比传统流体模拟方法，详细解析了粒子系统在Cesium中的架构设计、着色器优化及性能提升策略，为GIS和三维可视化领域的开发者提供了实用解决方案。
基于Cesium的火箭飞行弹道动态模拟项目实战
weixin_26907223的博客
09-25 1093
Cesium 提供了强大的材质系统，允许开发者通过 JSON 配置或 GLSL 编写自定义外观效果。其核心是Material类，支持预设类型（如ImageColorStripe）及自定义着色器注入。例如，创建一个脉动光晕效果的材质：fabric: {speed: 2.0},source: `return m;},});参数说明：uniforms定义外部可配置参数；source是 GLSL 片元着色器代码片段；
三维特效制作秘籍：10种常见着色器效果实现详解
gitblog_01070的博客
05-13 877
在WebGL开发领域，Three.js和Cesium.js是创建震撼视觉效果的强大工具。本文将带您探索10种常见着色器效果的实现方法，帮助您快速掌握三维特效制作的核心技巧，让您的项目在视觉上脱颖而出。 ## 1. 基础发光效果：打造耀眼视觉焦点 发光效果是三维场景中最常用的特效之一，能瞬间吸引用户注意力。通过Three.js的后处理通道，我们可以轻松实现物体发光效果。 [![Three.js
Cesium三维GIS动态水体模拟：从着色器原理到水闸放水实战
leonard61306500的专栏
08-05 437
在三维GIS与数字孪生领域，动态水体模拟是提升场景真实感与交互性的关键技术挑战。其核心原理在于通过GPU着色器编程，实时计算水面网格变形、纹理流动与光照反射，而非依赖性能开销巨大的粒子系统。这项技术的工程价值在于，它能以较低的计算成本，在Web端三维地球引擎中实现逼真的水流视觉效果，广泛应用于智慧水利、城市内涝模拟、航道仿真等场景。本文聚焦于Cesium平台，深入探讨如何利用CustomShader与ClassificationPrimitive，结合多层法线贴图混合与后期处理技术，解决水闸放水过程中水位动
在Cesium中实现Shadertoy特效：从移植到优化的完整指南
redis7keeper的博客
02-25 653
本文详细介绍了如何将Shadertoy上的酷炫GLSL特效移植到Cesium三维地理可视化平台中。通过分析两者着色器环境的核心差异，提供从搭建后处理框架、坐标转换、特效混合到性能优化的完整实战指南，帮助开发者为专业地理信息应用增添动态视觉表现力。
基于Cesium与WebGPU实现浏览器端三维溢油扩散实时模拟
最新发布
weixin_34296641的博客
08-15 339
流体动力学模拟是环境科学、海洋工程与应急响应领域的核心技术，用于预测污染物在复杂环境中的运动轨迹。其原理通常基于粒子系统或网格法，通过求解物理方程来模拟物质的扩散、平流与衰减过程。该技术的核心价值在于能够将抽象的数据转化为直观、动态的可视化结果，为决策提供实时、科学的依据。在应用场景上，它广泛服务于海洋溢油应急、大气污染扩散预警、水质模拟及数字孪生流域构建。本文聚焦于如何利用Cesium三维地理可视化引擎与新一代WebGPU图形API，在浏览器端实现高性能的溢油扩散实时模拟。通过将复杂的粒子物理计算卸载到G
如何借助Cesium风场可视化打造沉浸式3D地理信息展示？
gitblog_00380的博客
11-09 862
探索Cesium风场可视化的魅力，发现气象数据三维呈现的全新可能。本文将带您深入了解这款强大插件的功能特性、应用场景及实践指南，助您轻松构建专业级GIS风场应用。 ## 一、Cesium风场插件有哪些核心功能？ Cesium风场可视化核心功能架构 **基础功能模块** - 🌬️ 风场数据实时渲染系统 - 🌍 三维地球表面风速风向可视化 - 📊 多源气象数据接入接口 - 🎨 自定义风场
一本通1546：NOIP2011 选择客栈（st算法+链表）
amazingee的博客
06-17 826
【题目描述】 丽江河边有 n 家很有特色的客栈，客栈按照其位置顺序从 1 到 n 编号。 每家客栈都按照某一种色调进行装饰（总共 k 种，用整数 0 k−1 表示），且每家客栈都设有一家咖啡店，每家咖啡店均有各自的最低消费。 两位游客一起去丽江旅游，他们喜欢相同的色调，又想尝试两个不同的客栈，因此决定分别住在色调相同的两家客栈中。 晚上，他们打算选择一家咖啡店喝咖啡，要求咖啡店位于两人住的两家客栈之间（包括他们住的客栈），且咖啡店的最低消费不超过 p 。 他们想知道总共有多少种选择住宿的方案，保证晚上可以找
【P1311】选择客栈
贺朝夫斯基
07-19 350
题目描述 丽江河边有n n家很有特色的客栈，客栈按照其位置顺序从 1 1到n n编号。每家客栈都按照某一种色调进行装饰（总共 kk 种，用整数 00 ~ k-1k−1 表示），且每家客栈都设有一家咖啡店，每家咖啡店均有各自的最低消费。 两位游客一起去丽江旅游，他们喜欢相同的色调，又想尝试两个不同的客栈，因此决定分别住在色调相同的两家客栈中。晚上，他们打算选择一家咖啡店喝咖啡，要求咖啡店位于两人住的...
[NOIP2011 提高组] 选择客栈
2201_75785857的博客
10-01 419
丽江河边有n家很有特色的客栈，客栈按照其位置顺序从1到n编号。每家客栈都按照某一种色调进行装饰（总共k种，用整数0∼k−1表示），且每家客栈都设有一家咖啡店，每家咖啡店均有各自的最低消费。两位游客一起去丽江旅游，他们喜欢相同的色调，又想尝试两个不同的客栈，因此决定分别住在色调相同的两家客栈中。晚上，他们打算选择一家咖啡店喝咖啡，要求咖啡店位于两人住的两家客栈之间（包括他们住的客栈），且咖啡店的最低消费不超过p。他们想知道总共有多少种选择住宿的方案，保证晚上可以找到一家最低消费不超过。
选择客栈(枚举 & 方案数)
m0_60593173的博客
02-07 497
丽江河边有n家很有特色的客栈，客栈按照其位置顺序从1到n编号。每家客栈都按照某一种色调进行装饰（总共k种，用整数0k−1表示），且每家客栈都设有一家咖啡店，每家咖啡店均有各自的最低消费。两位游客一起去丽江旅游，他们喜欢相同的色调，又想尝试两个不同的客栈，因此决定分别住在色调相同的两家客栈中。晚上，他们打算选择一家咖啡店喝咖啡，要求咖啡店位于两人住的两家客栈之间（包括他们住的客栈），且咖啡店的最低消费不超过p。他们想知道总共有多少种选择住宿的方案，保证晚上可以找到一家最低消费不超过p。
7-1 旅游规划
hello, coder~
11-28 2398
有了一张自驾旅游路线图，你会知道城市间的高速公路长度、以及该公路要收取的过路费。现在需要你写一个程序，帮助前来咨询的游客找一条出发地和目的地之间的最短路径。如果有若干条路径都是最短的，那么需要输出最便宜的一条路径。
【SSL】旅行
下一个路口
08-19 262
旅行 Description ACM队员们到Z镇游玩，Z镇是一个很特别的城镇，它有m+1条东西方向和n+1条南北方向的道路，划分成MN个区域。Z镇的名胜位于这些区域内，从上往下第i行，从左往右数第j列的区域记为D（i,j）。ACM队员们预先对这MN个区域打分V(i,j)(分数可正可负)。分数越高表示他们越想到那个地方，越低表示他们越不想去。为了方便集合，队员们只能在某一个范围内活动。我们可以用(m1,n1)与(m2,n2)(m1<=m2，n1<=n2)表示这样一个范围：它是这些区域的集合： ，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值