Vibe Coding实践案例：油藏模型三维可视化系统

Vibe Coding实践案例：油藏模型三维可视化系统

基于 C++/OpenSceneGraph 桌面端 + WebAssembly/Three.js Web 端的双架构油藏数值模拟三维可视化平台，支持亿级以上网格模型的高效加载、渲染与交互分析。

目录

• 项目简介
• 系统架构
• 功能清单
• 技术栈
• 项目结构
• 快速开始
• 数据格式
• 编译指南
• 运行说明
• 性能基准
• 关键技术
• 近期修复记录
• 常见问题

项目简介

本项目是一个面向油藏数值模拟领域的三维可视化系统，旨在解决亿级网格（1.04亿+单元格）油藏模型的高效可视化问题。系统采用双架构设计：

核心能力

• 支持 HiSim 格式油藏数值模拟数据（静态/动态属性、井轨迹）
• 外表面提取与渲染、切片视图、等值面分析
• 时间步动画播放（150步动态属性）
• 多颜色映射方案（Rainbow/Jet/Viridis 等）
• LOD 多级细节管理、数据分块加载、L1/L2 两级缓存
• 数据导出（PLY/glTF/GLB 格式）

系统架构

整体架构

┌──────────────────────────────────────────────────────────────────┐
│ 表示层 (Presentation) │
│ ┌─────────────────────┐ ┌──────────────────────────────────┐ │
│ │ 桌面端 (OSG+ImGui) │ │ Web端 (Three.js+WASM) │ │
│ │ – 菜单栏/属性面板 │ │ – 侧边栏控制面板 │ │
│ │ – 时间轴/性能监控 │ │ – 文件上传/切片控制 │ │
│ │ – OpenGL 渲染器 │ │ – WebGL 渲染器 │ │
│ └──────────┬──────────┘ └──────────────┬───────────────────┘ │
└─────────────┼──────────────────────────────┼─────────────────────┘
│ │
┌─────────────▼──────────────────────────────▼─────────────────────┐
│ 数据处理层 (Data Layer) │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ BinReader (二进制读取) → Gross2Net 映射 → 属性数据 │ │
│ │ XCOORD/YCOORD/DEPTH 坐标系统 → 顶点构建 → 网格几何体 │ │
│ └────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────┘

数据流水线

HiSim 二进制文件 (_geom.bin / _stu.bin)
↓
BinReader (读取 + 解压 + Gross2Net 映射)
↓
属性数据 (net 顺序 → gross 顺序)
↓
坐标系统 (XCOORD / YCOORD / DEPTH + 不活跃单元线性插值)
↓
可视化引擎 (外表面 / 切片 / 等值面 / 属性着色)

功能清单

桌面端（C++/OSG）

Web端（WASM/Three.js）

技术栈

桌面端

Web端

项目结构

3DVisualizationOfReservoirsHisim/
├── include/ # C++ 头文件
│ ├── BinReader.h # 二进制数据读取
│ ├── HiSimParser.h # HiSim 格式解析
│ ├── SliceView.h # 切片视图
│ ├── Isosurface.h # 等值面提取
│ ├── PropertyVisualizer.h # 属性可视化
│ ├── AnimationManager.h # 时间动画管理
│ ├── WellTrajectory.h # 井轨迹渲染
│ ├── LODManager.h # LOD 管理
│ ├── DataCache.h # L1/L2 数据缓存
│ ├── SurfaceExtractor.h # 表面提取
│ ├── PlyExporter.h # PLY 导出
│ ├── GltfExporter.h # glTF 导出
│ └── … # 其他模块
├── src/ # C++ 源文件
│ ├── main.cpp # 主程序入口 (~4500行)
│ ├── BinReader.cpp # 数据读取实现
│ ├── SliceView.cpp # 切片视图实现
│ ├── Isosurface.cpp # 等值面实现
│ ├── HiSimParser.cpp # HiSim 解析实现
│ ├── SurfaceExtractor.cpp # 表面提取实现
│ └── … # 其他实现
├── wasm/ # WebAssembly 模块
│ ├── src/
│ │ ├── main.cpp # WASM 主入口（坐标加载/映射）
│ │ └── pre.js # WASM 预加载脚本
│ ├── dist/
│ │ ├── reservoir.js # 编译后的 JS 胶水代码
│ │ └── reservoir.wasm # 编译后的 WASM 二进制
│ ├── test/
│ │ ├── test.html # Web 可视化测试页面
│ │ ├── data/ # 测试数据
│ │ └── src/ # Web 端辅助模块
│ ├── test.html # Web 可视化页面（根目录）
│ └── build_wasm.bat # WASM 编译脚本
├── web_preview/ # 轻量级 Web 预览（glTF 加载）
│ ├── index.html # 预览页面
│ ├── viewer.js # Three.js 查看器
│ ├── three/ # Three.js 库文件
│ └── …
├── tests/ # 测试文件
├── docs/ # 设计文档与技术文档
├── doc/ # 截图与演示素材
├── build_nmake/ # CMake 构建输出
├── SUMMARY.md # WASM 修复总结
└── README.md # 本文件

快速开始

方式一：Web端运行（推荐快速体验）

前置条件：安装 Python 3.x 或 Node.js

# 1. 编译 WASM 模块（如需更新）
cd wasm
.\\build_wasm.bat

# 2. 启动 HTTP 服务器
cd ..
python –m http.server 8080

# 3. 浏览器访问
# http://localhost:8080/wasm/

使用流程：

方式二：桌面端运行（处理超大规模数据）

前置条件：Visual Studio 2019/2022 + OpenSceneGraph 3.6.5+

# 1. 编译项目
cd build_nmake
msbuild OilReservoirVisualization.sln /p:Configuration=Release /p:Platform=x64 /m

# 2. 运行
.\\bin\\Release\\OilReservoirVisualization.exe

使用流程：

数据格式

HiSim 二进制格式

关键数据结构

编译指南

WASM 模块编译

前置条件：安装 Emscripten SDK

cd wasm
.\\build_wasm.bat

编译产物输出到 wasm/dist/ 目录：

• reservoir.js – JS 胶水代码
• reservoir.wasm – WASM 二进制模块

桌面端编译

环境要求：

依赖安装：

编译步骤：

:: 方法1：Visual Studio IDE
:: 打开 build_nmake\\OilReservoirVisualization.sln → Release x64 → 编译

:: 方法2：命令行
cd build_nmake
msbuild OilReservoirVisualization.sln /p:Configuration=Release /p:Platform=x64 /m

运行说明

快捷键（桌面端）

Web端操作

性能基准

桌面端（data3 数据集，1.04亿网格）

Web端（data0 数据集，112万网格）

关键技术

1. Gross2Net 映射与坐标插值

油藏模型中并非所有网格单元都是活跃的。系统通过 Gross2Net 映射表区分活跃/不活跃单元：

• 活跃单元：直接从 XCOORD/YCOORD/DEPTH 数组读取坐标
• 不活跃单元：基于活跃单元的真实坐标范围进行线性插值，确保回退坐标与真实数据范围一致

// 不活跃单元线性插值（wasm/src/main.cpp）
cellX[grossIdx] = activeXMin + (double)i / (ni – 1) * xRange;
cellY[grossIdx] = activeYMin + (double)j / (nj – 1) * yRange;
cellZ[grossIdx] = activeZMin + (double)k / (nk – 1) * zRange;

2. 脏标记延迟计算（等值面）

等值面采用脏标记机制避免重复计算，仅在参数变化时重新计算：

void setIsovalue(double v) {
if (m_isovalue != v) { m_isovalue = v; m_dirty = true; }
}
void refresh() {
if (!m_dirty) return;
computeIsosurface();
m_dirty = false;
}

3. L1/L2 两级缓存

4. Web端渲染优化

• 抗锯齿：antialias: true + setPixelRatio(min(devicePixelRatio, 2))
• 色调映射：ACESFilmicToneMapping + toneMappingExposure = 1.2
• 光照系统：环境光 + 半球光 + 双方向光，增强立体感
• 侧边栏：CSS transform 过渡动画，支持显示/隐藏切换

近期修复记录

Web端（WASM/Three.js）

桌面端（C++/OSG）

常见问题

编译问题

Q：WASM 编译失败？ A：确保 Emscripten SDK 已正确安装并激活，运行 emsdk activate latest && emsdk_env.bat。

Q：桌面端 MSBuild Access Violation？ A：VS2022 环境问题，请在 VS2022 Developer Command Prompt 中手动编译。

Q：链接错误 LNK2019？ A：检查 OSG 的 lib 目录配置，确保使用 x64 版本。

运行时问题

Q：Web端加载数据后模型显示异常？ A：确保同时上传 _geom.bin 和 _stu.bin 文件，检查浏览器控制台日志中的坐标范围信息。

Q：桌面端切片显示 [0, 0]？ A：已修复，请使用最新代码编译。

Q：内存占用过高？ A：系统采用按需加载，未加载的属性不占内存。可通过采样因子降低渲染负载。