CesiumJS 体素渲染指南：用光线步进把 3D 体积数据送上屏幕

CesiumJS 体素渲染指南：用光线步进把 3D 体积数据送上屏幕

【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium

CesiumJS 体素渲染把 CT、地质网格这类三维体积数据放进 WebGL 地球：加载 3D Tiles 体素扩展，用光线步进算出画面。本文按"数据侧 → 渲染侧 → 交互侧 → 落地侧"讲清原理、参数和示例，帮你快速搭起一套 CesiumJS 体素渲染教程级别的完整流程。

体素渲染和表面网格：先分清渲染对象

📦 传统三维管线渲染的是"壳"——三角面片加上贴到表面的纹理，比如一辆奶车的 glTF 模型：

体素渲染反过来，直接渲染"瓤"——一个规则的三维格子，每个格点存标量或向量场。两者差异可以列成表：

一句话：当你关心的是"里面长什么样"（岩层密度、器官组织、云层浓度），网格渲染只能给你一张皮，体素渲染才能把整个体积画出来。

数据侧：体素数据格式怎么组织

CesiumJS 用 3D Tiles 扩展3DTILES_content_voxels描述体素。tileset.json 里，content.extensions声明格子尺寸dimensions和数据类名class，体块内容本身用 glTF 携带（EXT_primitive_voxels扩展），层级组织走标准 3D Tiles 的 octree 隐式分块。仓库里的真实样例可直接参考：Apps/SampleData/Cesium3DTiles/Voxel/。

精简后的 tileset 结构如下：

{ "asset": { "version": "1.1" }, "root": { "boundingVolume": { "box": [0,0,0, 1,0,0, 0,1,0, 0,0,0, 0,0,1] }, "refine": "REPLACE", "content": { "uri": "tiles/{level}/{x}/{y}/{z}.gltf", "extensions": { "3DTILES_content_voxels": { "dimensions": [128, 128, 64], "class": "voxel" } } } } }

几个字段的作用：

• dimensions：该瓦片内体素的三向数量，决定网格分辨率；
• class：对应 schema 里的数据类（如voxel），每个体素存哪些属性（密度、温度、RGBA 颜色等）由schemaUri指向的 schema 定义；
• boundingVolume.box+refine：沿用 3D Tiles 的可见性裁剪和细化策略，看不见的分支直接跳过。

体素网格在形状上不必是长方体。引擎用VoxelShapeType支持三种网格到 3D 空间的映射（见 VoxelShapeType.js）：

选圆柱或椭球网格的意义在于：数据天然呈轴对称时，可以按真实几何存值，不用把大量空体素塞进长方体里浪费带宽。

渲染侧：光线步进怎么工作，管线调哪几个参数

原理一句话：对每个屏幕像素，从相机出发沿视线穿过体块，按固定间隔采样场值，用传输函数（Transfer Function）把值映射成颜色和透明度，逐点累加得到最终颜色。这就是光线步进（ray marching）体素渲染，所有合成都在 GPU 片元阶段完成，天然并行。

CesiumJS 侧的入口是VoxelPrimitive：给它一个实现了VoxelProvider接口的 provider（3D Tiles 场景下用Cesium3DTilesVoxelProvider.fromUrl(...)），加入场景即可。需要注意两点硬性前提：体素渲染要求 WebGL2 上下文，且contextOptions里不能开requestWebGl1。

影响画面与帧率的参数主要是三类：

1. 采样密度与步长：步长越小细节越好、片元越贵。VoxelPrimitive上的nearestSampling开关控制采样插值方式（最近邻还是双线性），近邻更快但边缘有颗粒感。
2. 传输函数：值域 → 颜色/透明度的映射曲线。它不是一张静态表，而是写进片元着色器的函数，多峰阈值、伪彩色都靠它实现（CT 里把骨骼、软组织分开就是典型用法）。
3. 光照模型：体素有"体积感"依赖光照。引擎在步进中沿光线方向估计法线方向做漫反射/明暗计算，自定义着色器里可以调整强度与方向。

交互侧：切片、等值面、拾取怎么实现

交互能力基本都建立在"能取到任意体素位置的值"这个能力上，三种常见分析功能的实现思路：

• 实时切片（MPR）：不整块渲染，而是在某一坐标平面截断步进。沙盒里现成的例子是 splitdirection——同一场景按轴切分视角，原理可平移到体素：把光线步进限制在单平面采样，三个正交方向就是轴向/冠状/矢状切片。
• 等值面提取：在体素数据上跑改进版 Marching Cubes，对每个跨越等值面的格子单元生成三角片，产出常规 glTF 网格，再用Model渲染。好处是等值面本身可参与光照和拾取，内存比整块体积渲染小。
• 数据测量与拾取：体素支持 picking（见 voxel-picking 示例），点选后回查该位置的属性值，配合 schema 里的统计信息（min/max）做标尺显示。沙盒的viewerVoxelInspectorMixin也内置了体素检查面板，调试时直接看 provider、瓦片状态。

落地侧：三个场景里技术各起什么作用

• 地质勘探：地震/电法反演输出的是密集三维网格（速度、电阻率）。用dimensions对齐原始格点，传输函数把电阻率映射成色带，用户沿钻孔方向切片核对分层——"从体块里看剖面"正是光线步进相对表面渲染的不可替代之处。
• 医学影像：CT 的 DICOM 序列天然是体素。预处理阶段做阈值分割后，用传输函数区分空气/软组织/骨骼三个峰；需要表面时再跑等值面导出 glTF。CesiumJS 的价值在于把体积和地球/建筑场景放同一视口，做空间配准展示。
• 气象数据：温湿风场是带时间维的四维数据。按时间帧切出体块、逐帧流式加载，配合Clock播放，体素里叠加粒子路径即可表达平流；分块（octree subtree）机制保证只下载当前视锥内的区域。

进阶与监控：自定义着色器与关键指标

📊 自定义着色器：体素片元阶段暴露了FragmentInput结构，可在其中读取采样值、光线参数、元数据并改写最终颜色，写法与CustomShader文档一致，参考 Documentation/CustomShaderGuide/。多属性数据（同时渲染密度+温度）则靠 schema 声明多个属性列，着色器里混合两个通道的传输结果即可。

监控方面，VoxelPrimitive构造时传calculateStatistics: true，statistics会给出visited（访问过的瓦片数）、texturesByteLength（纹理显存占用）、numberOfTilesWithContentReady（就绪瓦片数）；再叠加scene.debugShowFramesPerSecond和逐帧时间，就能判断是"采样太贵"还是"加载太慢"。

收尾：下一步做什么

WebGPU 普及后，体积渲染的计算量和显存预算都会再上一个台阶，CesiumJS 的体素管线也会跟着演进——现在写传输函数和 provider 逻辑，迁移成本不高。建议的动手路径：先跑通 packages/sandcastle/gallery/voxels/ 里的程序化数据示例，再用Cesium3DTilesVoxelProvider加载一份真实 tileset，最后按上面的监控指标给自己的数据定一版采样与分块参数。

【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium