CesiumJS WebGL 体素渲染钻孔密度到屏幕只差 3 个配置项【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium地质团队拿到一批钻孔采样数据XYZ 是空间坐标每个样本带一个密度值领导要求周五前看到地下岩体的三维分布。CesiumJS 体素渲染属于 WebGL 体积渲染就是干这个的不画网格把数字直接渲染成看得透的实体。之前只做过二维图表那这个需求有点难接。它要解决的核心问题只有一个怎么把一个三维数组变成能旋转、能切片、能点选读数的图像。先搞清楚表面渲染只画皮体素渲染连肉也保留——体积里每个点都有数值想切哪就切哪。渲染全部发生在 GPU 上数据先上传成纹理存在显卡里的三维图像可随时采样屏幕上每个像素发一条光线用光线步进——沿着视线一步步穿过体积、每步采一次值——再把采到的颜色合成最终像素。浏览器里能跑得动是因为这个过程写在 shader 里直接跑在显卡上的 GLSL 代码几千条光线并行计算CPU 完全不插手。把数据喂进去体素数据可视化不是把裸数组直接怼进去而是走 3D Tiles 体素扩展组织tileset.json 的根瓦片声明扩展字段体素本体按 gltf 纹理打包分瓦片流式加载。{ root: { boundingVolume: { box: [0,0,0, 100,0,0, 0,100,0, 0,0,64] }, content: { uri: tiles/{level}/{x}/{y}/{z}.gltf, extensions: { 3DTILES_content_voxels: { class: voxel, // 对应 schema 里的类名 dimensions: [64, 64, 32], // 每瓦片的体素数 padding: { before: [1,1,1], after: [1,1,1] } } } }, implicitTiling: { subdivisionScheme: OCTREE } // 必填 } }几个要点class指向 schema.json 里的类名声明各属性的名称、类型与组件类型statistics 里的 min/max 让传输函数能自动归一化。implicitTiling必填fromUrl缺了它直接抛 RuntimeError。padding是给瓦片前后加几层重叠体素边缘采样不出缝代价是多占一点内存。形状决定网格怎么映射到三维空间支持三种VoxelShapeType对应 boundingVolume典型场景BOXbox钻孔网格、城区块ELLIPSOIDregion球面区域、大范围场CYLINDER3DTILES_bounding_volume_cylinder管道、井筒仓库在 Specs/Data/Cesium3DTiles/Voxel 放了 box、ellipsoid、cylinder、多属性四组现成样例packages/sandcastle/gallery/voxels 是可切换形状的交互演示拿来看结构最快。最小路径从磁盘到屏幕数据中间经历了什么三步provider 逐瓦片要数据VoxelPrimitive 把它送上 GPUshader 按光线采样合成。const provider await Cesium3DTilesVoxelProvider.fromUrl(tileset.json); const primitive new Cesium.VoxelPrimitive({ provider, customShader: transferFunction, // 唯一的 GLSL数据值映射成颜色 }); primitive.stepSize 0.5; // 光线步进步长按体素计 primitive.nearestSampling false; // false 线性插值采样 scene.primitives.add(primitive);真正要理解的配置就三项stepSize采样步长光线每步迈多大按体素计越大越快但会跳过薄结构。customShader传输函数把属性值映射成颜色和透明度的那段 GLSL不传就显示数据自带的颜色。光照不是独立开关在 shader 里加两行dot(法线, 光方向)乘进颜色体积感就有了。跑起来之后先调画质还是先调快调快与调美⚡ 快光线步进采样早停光线累计透明度够了就不再往下走传输函数里把高密度区的 alpha 调高引擎能更早结束这条光线。空空间跳过引擎预先算出哪些体素单元非空VoxelBoundsCollection光线不穿有效区域就不采样数据侧把空区压掉同样有效。步长是最直接的旋钮0.7 和 1.0 的帧时间肉眼可辨调试时开着debugShowFramesPerSecond边看边调。 美传输函数与光照线性映射看着平用 smoothstep 或幂函数把感兴趣的值域顶到高透明度statistics 的 min/max 就是归一化锚点。采样点法线和光方向做点积再乘进颜色薄壳立刻有体积感。多属性混色密度、温度两个通道各自归一化后再mix权重都写在 shader 里。交互分析渲染只是开始能做什么操作切片打开nearestSampling截面边缘变硬要切一刀用裁剪平面把体积剖开轴状、冠状、矢状面对比就是换平面法线的事。等值面提取引擎不产出网格但传输函数里只给阈值附近窄值域上透明度、其余透明屏幕上就浮出一层薄壳——思想同移动立方体只是永远不生成几何。测量scene.pickVoxel(屏幕坐标)返回命中的样本单元cell.getProperty(density)直接读出该点属性值voxel-picking 样例更进一步把选中单元高亮显示。别踩的坑画面出来了通常还不算完。纹理内存溢出dimensions × 属性数 × 4 字节就是一张瓦片128³ 三属性单瓦片就 12MB 往上。→ 看 GPU 占用减属性或换低精度 componentType。条纹、马赛克stepSize 太大光线直接跳过采样点。→ 调小步长或开线性插值。混色发脏量纲不同的两个属性直接 mix强的吃掉弱的。→ 各自按 min/max 归一化再混。首屏先空后填满subtree 和瓦片都是懒加载属正常每次进页面都重新下载才是问题看 devtools 是否走了 disk cache。形状不匹配fromUrl只认 box / region / cylinder 三种 boundingVolume别的直接抛错。→ 先看根瓦片的 boundingVolume 类型。往哪走WebGPU 的 compute shader 能做自适应步长和多 pass 渲染体素渲染帧时间还有下一档可降。数据规模上implicit tiling subtree 已经是 TB 级数据集的流式骨架重点压在瓦片尺寸与属性精度上。体积阴影、全局光照是美的下一站前提是纹理预算撑得住。时序数据暂时靠边站3D Tiles 路径目前不支持时间动态 keyframe气象这类 4D 数据先等规范。周五要交的那份钻孔数据路径已经清楚先用仓库里 Specs/Data/Cesium3DTiles/Voxel 的四组样例把fromUrl → VoxelPrimitive跑通再把 gltf 换成自己的数据、传输函数换成自己的色带。下次领导再要三维分布改个 URL 就行。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考