CesiumJS 体素渲染指南用光线步进把 3D 体积数据送上屏幕【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesiumCesiumJS 体素渲染把 CT、地质网格这类三维体积数据放进 WebGL 地球加载 3D Tiles 体素扩展用光线步进算出画面。本文按数据侧 → 渲染侧 → 交互侧 → 落地侧讲清原理、参数和示例帮你快速搭起一套 CesiumJS 体素渲染教程级别的完整流程。体素渲染和表面网格先分清渲染对象 传统三维管线渲染的是壳——三角面片加上贴到表面的纹理比如一辆奶车的 glTF 模型体素渲染反过来直接渲染瓤——一个规则的三维格子每个格点存标量或向量场。两者差异可以列成表表面网格渲染体素渲染数据内容顶点、三角形、UV3D 网格 标量/向量场能看到什么只有外壳内部任意位置的值典型数据源glTF、OBJCT/MRI、地质体、气象格点可见性判定背面剔除、深度测试沿视线步进、逐点合成主要代价面数、贴图体积采样次数、显存占用一句话当你关心的是里面长什么样岩层密度、器官组织、云层浓度网格渲染只能给你一张皮体素渲染才能把整个体积画出来。数据侧体素数据格式怎么组织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.boxrefine沿用 3D Tiles 的可见性裁剪和细化策略看不见的分支直接跳过。体素网格在形状上不必是长方体。引擎用VoxelShapeType支持三种网格到 3D 空间的映射见 VoxelShapeType.js形状坐标约定适合的数据BOX直角坐标 (x, y, z)规则笛卡尔网格ELLIPSOID归一化椭球面坐标类球体、天体、器官近似球CYLINDER(半径, 角度, 高度)管道、井筒、柱状结构选圆柱或椭球网格的意义在于数据天然呈轴对称时可以按真实几何存值不用把大量空体素塞进长方体里浪费带宽。渲染侧光线步进怎么工作管线调哪几个参数原理一句话对每个屏幕像素从相机出发沿视线穿过体块按固定间隔采样场值用传输函数Transfer Function把值映射成颜色和透明度逐点累加得到最终颜色。这就是光线步进ray marching体素渲染所有合成都在 GPU 片元阶段完成天然并行。CesiumJS 侧的入口是VoxelPrimitive给它一个实现了VoxelProvider接口的 provider3D Tiles 场景下用Cesium3DTilesVoxelProvider.fromUrl(...)加入场景即可。需要注意两点硬性前提体素渲染要求 WebGL2 上下文且contextOptions里不能开requestWebGl1。影响画面与帧率的参数主要是三类采样密度与步长步长越小细节越好、片元越贵。VoxelPrimitive上的nearestSampling开关控制采样插值方式最近邻还是双线性近邻更快但边缘有颗粒感。传输函数值域 → 颜色/透明度的映射曲线。它不是一张静态表而是写进片元着色器的函数多峰阈值、伪彩色都靠它实现CT 里把骨骼、软组织分开就是典型用法。光照模型体素有体积感依赖光照。引擎在步进中沿光线方向估计法线方向做漫反射/明暗计算自定义着色器里可以调整强度与方向。交互侧切片、等值面、拾取怎么实现交互能力基本都建立在能取到任意体素位置的值这个能力上三种常见分析功能的实现思路实时切片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: truestatistics会给出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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考