企业官网建设流程全解析

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是给瓦片前后加几层重叠体素，边缘采样不出缝，代价是多占一点内存。

形状决定网格怎么映射到三维空间，支持三种：

仓库在 Specs/Data/Cesium3DTiles/Voxel 放了 box、ellipsoid、cylinder、多属性四组现成样例，packages/sandcastle/gallery/voxels 是可切换形状的交互演示，拿来看结构最快。

最小路径

从磁盘到屏幕，数据中间经历了什么？三步：provider 逐瓦片要数据，VoxelPrimitive 把它送上 GPU，shader 按光线采样合成。

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