把体积数据变成浏览器里的三维画面CesiumJS 体素渲染实战教程【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium手上有 CT 扫描的 DICOM 数据、地下的地震勘探体或者一整个区域的大气温度场打开一看全是数。怎么把它变成能在浏览器里转着看的三维画面CesiumJS 的体素渲染Voxel Rendering就是干这件事的数据按体素组织GPU 沿光线采样颜色、透明、光照全在着色器里算。这篇教程带你从体素到底是什么讲起过一遍数据怎么组织、画面怎么生成最后给一份让画面又快又清的调优清单。先搞清楚体素和网格模型到底差在哪平时你在 Cesium 里加载的建筑、飞机、树木都是网格模型——只描述表面长什么样。而体素渲染处理的是内部也是实体的数据一个三维数组每个格子存着密度、温度、浓度这类标量值可以把它想象成把整个世界切成无数糖块每块糖贴了张写着数值的小纸条。这个区别决定了渲染方式的根本不同网格模型画的是面体素渲染画的是光线穿过去之后看到什么。所以体素渲染特别适合那些内部结构本身就是研究对象的数据——岩层、人体组织、云雾。CesiumJS 里承载它的核心类是VoxelPrimitive源码在 packages/engine/Source/Scene/VoxelPrimitive.js目前标记为实验性 API接口还可能调整。官方给了几个完整示例建议先跑起来再读代码packages/sandcastle/gallery/voxels/ 和 packages/sandcastle/gallery/voxels-in-3d-tiles/。数据怎么组织一个 Provider 说清四件事体素数据不是直接塞一个大数组就完事的。CesiumJS 用一个提供者Provider对象来描述整块体积你只需要回答四个问题1. 形状是什么。支持盒子BOX、圆柱CYLINDER、椭球ELLIPSOID三种由VoxelShapeType枚举指定。椭球常用于贴着地球表面铺开的数据圆柱适合管道、井筒这类结构。2. 边界和尺寸多大。minBounds/maxBounds定义体积在世界坐标中的包络dimensions是体素数组在三个方向上的格子数。比如8 × 8 × 8就是一个 512 个体素的小立方体。3. 每个格子存什么。属性走的是 CesiumJS 的元数据体系names是属性名列表types是格式如VEC4componentTypes是精度如FLOAT32。一个数据集完全可以同时带颜色 温度 湿度多组属性渲染时想用哪组用哪组。4. 数据怎么来。实现requestData(options)方法按tileLevel / tileX / tileY / tileZ返回对应瓦片的内容。大体积不是一次全给而是分块流式加载——这正是它和 3D Tiles 瓦片体系打通的原因。如果你的数据已经是 3D Tiles 体素扩展格式连 Provider 都不用写一行加载const provider await Cesium.Cesium3DTilesVoxelProvider.fromUrl(path/to/tileset.json); viewer.scene.primitives.add(new Cesium.VoxelPrimitive({ provider }));仓库里自带三套示例体素瓦片集分别对应盒子、圆柱、椭球位置在 Apps/SampleData/Cesium3DTiles/Voxel/拿来当起步数据最合适。画面是怎么画出来的让光线穿过体积体素渲染的核心是一段跑在 GPU 上的光线步进ray marching对屏幕上每个像素从相机出发沿视线向体积内部小步前进每走一步采样一次数据把颜色按前面遮挡后面的方式累加起来直到穿出体积或提前终止。两个细节值得注意透明度和厚度要联动。每步的透明度不能简单相加官方示例用指数衰减模拟光线散射看起来才有半透明实体的质感material.diffuse fsInput.metadata.color.rgb; float thickness fsInput.voxel.travelDistance / 1000000.0; material.alpha 1.0 - pow(1.0 - fsInput.metadata.color.a, thickness);travelDistance是引擎算好的。着色器里能直接拿到光线在本个体素中走过的距离写传输函数时不用自己积分。这套自定义着色器走的是 CesiumJS 通用的 CustomShader 机制VoxelPrimitive的customShader参数直接接收写法和其他模型定制完全一致参考 Documentation/CustomShaderGuide/。又快又清一份调优清单体素渲染吃 GPU 像素算力掉帧多半出在下面几处优先分瓦片别用单大瓦片。Provider 里availableLevels大于 1 时引擎会按视角距离取用合适层级的瓦片示例中的ProceduralMultiTileVoxelProvider展示了标准写法。相邻瓦片留 padding。paddingBefore/paddingAfter给瓦片四周多采样一圈重叠体素消除瓦片接缝处的条带。边界体素记得 clamp 到有效范围别越界读。粗看用最便宜的采样。voxelPrimitive.nearestSampling true用最近邻采样代替三次插值预览和数据量特别大时帧率立竿见影精细展示时再换回平滑采样。着色器里能提前终止就终止。透明度累积接近 1、或者命中空值区间时直接结束步进travelDistance也会随之变小两者是互相帮忙的。开着监控写代码。示例里两行就能开上viewer.scene.debugShowFramesPerSecond true看帧率viewer.extend(Cesium.viewerVoxelInspectorMixin)挂上体素检查器调传输函数时不用反复刷新页面。一个容易踩的坑椭球形状的数据如果minBounds.z和maxBounds.z没按场景改体积会被放在默认高度看起来像悬浮在空中。官方示例里特意写了provider.maxBounds.z 1000000.0这类调整新接手数据时先确认边界。让鼠标点进体积里体素不只是看还能查。scene.pick对体素原语同样有效命中后返回对应的体素单元就能读出该格子的属性值——点哪里报哪里的温度、深度测量工具就是这么来的。CesiumJS 仓库里的 packages/sandcastle/gallery/voxel-picking/ 示例演示了完整的拾取流程照着改几个变量就能接到自己的数据上。再往上加一层切片和等值面也都能做切片本质是把minBounds/maxBounds收窄到某个薄层等值面则可以在 GPU 上用颜色阶跃近似或者干脆在 CPU 侧跑一遍移动立方体算法提取成网格再走普通模型渲染两条路各有取舍。什么场景值得上体素渲染不是所有需求都该用体素。如果数据只有表面信息老老实实用网格模型更省。体素渲染的主场是内部即信息的场景地质勘探岩层、矿体的密度体直接可视化不用先做等值面医学影像CT/MRI 序列天然是三维标量数组和体素格式零摩擦对接气象与环境温度、湿度、污染浓度的空间分布配上时间轴就能做成动态场。上手路径建议先克隆仓库跑通 packages/sandcastle/gallery/voxels/ 这个纯程序化示例不需要外部数据文件再看 voxels-in-3d-tiles 走通 3D Tiles 加载然后打开 VoxelPrimitive.js 对着注释读一遍更新循环。接口还在实验期改动比较频繁升级 CesiumJS 版本时把体素相关代码单独过一遍回归是眼下最省心的习惯。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
