10 行代码跑通 CesiumJS 体素渲染一个老前端的实战笔记【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium做 CesiumJS 体素渲染解决的是体积数据画不出来的问题。CT 断层、温度场、地下岩体这些都不是表面用普通几何图元硬凑会很痛苦。这篇文章适合有一定 JavaScript 基础、想把 3D 体积数据落到 Cesium 地球上的开发者和初学者。语气随意一点就当同事把刚踩完坑的方案丢给你。先搞清楚——体素和网格到底差在哪对比项体素渲染表面网格渲染数据维度三维数组每格存标量或向量三角形面片只描述外壳适用场景CT 断层、温度场、体积密度建筑、地形等外观固定的物体性能开销高每个像素都要沿光线采样低直接光栅化三角面光线步进的思想很直白从相机射出无数条射线每条射线穿过体数据一格一格地采样把颜色和透明度一路累加最后合成屏幕上的像素。你在屏幕上看到的不是一堆面片而是透过数据看进去的效果。从 0 到 1搭一个能转的体素场景先搭一个最小的能跑的场景。你只需要三件事一个 Viewer、一个数据源 provider、一个 VoxelPrimitive。const viewer new Cesium.Viewer(cesiumContainer); const provider new MyVoxelProvider(); // 任意 VoxelProvider 实现 const primitive new Cesium.VoxelPrimitive({ provider: provider, customShader: myShader, }); viewer.scene.primitives.add(primitive); viewer.camera.flyToBoundingSphere(primitive.boundingSphere);仓库里packages/sandcastle/gallery/voxels/main.js有一个完整可交互的示例支持球体、圆柱、盒子三种形状打开就能转非常适合作为起点。三个关键参数先记一下stepSizeprimitive.stepSize控制沿射线采样的步长倍数越大采样越稀、画面越粗、速度越快。Custom Shader传输函数在片元着色器里读fsInput.metadata定义数据值 → 颜色 透明度的映射体素画面长什么样基本由它决定。availableLevelsprovider 上的细节层数。层数越多细节越足但显存和采样开销也同步上涨。数据怎么喂进去体素数据的三种常见格式喂数据有三种方式按数据规模和来源选就行。1. 3D Tiles 体素扩展3DTILES_content_voxels。仓库样本Apps/SampleData/Cesium3DTiles/Voxel/VoxelBox3DTiles/tileset.json里就是这样声明的content: { uri: tiles/{level}/{x}/{y}/{z}.gltf, extensions: { 3DTILES_content_voxels: { dimensions: [2, 4, 3], class: voxel } } }, extensionsRequired: [3DTILES_content_voxels]配合implicitTilingOCTREE 八叉树可以按层流式加载适合全球级、多级别的大体量数据集。2. 程序化 VoxelProvider。实现一个对象暴露dimensions、names、types再写一个requestData(options)返回VoxelContent.fromMetadataArray([float32Array])即可。适合调试、合成数据或实时生成的小数据集几千到几百万体素级别。3. 多 tile 带 padding 的切块。provider 里给paddingBefore/paddingAfter留一圈邻域多个 tile 拼接时插值不穿帮。适合中等规模、需要分块传输的数据。调参指南让画面又稳又快的 5 个旋钮️ 下面是我实际调参时用得最多的五个位置每个都直接对应你能看到的变化。把 stepSize 拧大一点primitive.stepSize 2.0试试。步长翻倍采样点减半帧率立刻上去。代价是细节糊掉边缘变软。先跑满精度找基准再逐步加大直到画面还能接受为止。用 travelDistance 调透明度合成自定义着色器里fsInput.voxel.travelDistance给出射线穿过体数据的距离。用它做指数衰减就能模拟越厚越不透明的散射感。系数调小薄结构更通透调大整体更快变实心。availableLevels 决定 LOD 层数provider 上把availableLevels从 3 降到 1远视角的细节请求立刻变少显存占用跟着掉。近处精度不够时再考虑加层。padding 别给空多 tile 场景里paddingBefore和paddingAfter至少留 1 格。少了它tile 接缝处采样会取到空值屏幕上出现一圈发黑的缝。在 requestData 里果断 reject自定义 provider 对超出层数的请求直接Promise.reject。引擎靠这个信号停止继续细分避免白跑无意义的加载。真实场景谁在用 CesiumJS 做体素地质勘探把某片区域的勘探体块转成体素数据加载后在地球上看。地质员拖动画布从不同角度看岩体分布剖面处直接调传输函数换颜色通道。痛点在于岩体是整块的数据过去只能切片成 2D 图一张张看现在一次加载、随意旋转。医学影像CT 数据本身就是体素医生在浏览器里旋转断层数据放大看内部结构无需导出去别的软件。体素采样保留了体数据的全部信息不会像等值面那样把低于阈值的细节直接丢掉。气象可视化把某区域温度场做成体素云团值班人员拖动时间轴看风场演变体素穿过云层时能同时看到浓淡变化。二维等值线图只能表达标量体素画面能表达厚度感。踩坑记录性能和内存的三个常见坑现象帧率从 60 掉到 20。原因stepSize 默认值配合大体积数据每像素采样步数太多。 解法先把stepSize提到 1.5 以上做基准测试再检查 Custom Shader 里有没有逐样本的分支或 pow 运算能预计算的全挪到 uniform 里。现象来回切换场景后浏览器内存只涨不跌。原因VoxelPrimitive 挂在 scene 上就一直持有显存纹理remove之外还需要destroy()。 解法写一个统一的清理函数scene.primitives.remove后紧跟primitive.destroy()切换数据时先清后建。现象控制台报纹理尺寸超限数据大面积丢失。原因体素数据上传前会被打包进 GPU 纹理dimensions任何一维超过 GPU 最大纹理尺寸就会失败。 解法上游做降采样或按八叉树拆成多 tile让每个 tile 单独落在限制内。接下来可以去哪资源与进阶方向体素图元与 provider 的实现packages/engine/Source/Scene/VoxelPrimitive.js、packages/engine/Source/Scene/VoxelProvider.js可交互示例packages/sandcastle/gallery/voxels/main.js体素扩展测试数据Specs/Data/Cesium3DTiles/Voxel/WebGPU 支持还在路上光线步进用 compute shader 跑起来会比现在更省值得留意后续版本更新。绕回来开头说体素渲染解决的是体积数据画不出来现在这条路径你已经走通了一遍。你现在就可以打开仓库里的 Sandcastle 示例把示例数据换成自己的 8×8×8 小立方体几分钟内就能在浏览器里看到它转起来。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
10 行代码跑通 CesiumJS 体素渲染：一个老前端的实战笔记
10 行代码跑通 CesiumJS 体素渲染一个老前端的实战笔记【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium做 CesiumJS 体素渲染解决的是体积数据画不出来的问题。CT 断层、温度场、地下岩体这些都不是表面用普通几何图元硬凑会很痛苦。这篇文章适合有一定 JavaScript 基础、想把 3D 体积数据落到 Cesium 地球上的开发者和初学者。语气随意一点就当同事把刚踩完坑的方案丢给你。先搞清楚——体素和网格到底差在哪对比项体素渲染表面网格渲染数据维度三维数组每格存标量或向量三角形面片只描述外壳适用场景CT 断层、温度场、体积密度建筑、地形等外观固定的物体性能开销高每个像素都要沿光线采样低直接光栅化三角面光线步进的思想很直白从相机射出无数条射线每条射线穿过体数据一格一格地采样把颜色和透明度一路累加最后合成屏幕上的像素。你在屏幕上看到的不是一堆面片而是透过数据看进去的效果。从 0 到 1搭一个能转的体素场景先搭一个最小的能跑的场景。你只需要三件事一个 Viewer、一个数据源 provider、一个 VoxelPrimitive。const viewer new Cesium.Viewer(cesiumContainer); const provider new MyVoxelProvider(); // 任意 VoxelProvider 实现 const primitive new Cesium.VoxelPrimitive({ provider: provider, customShader: myShader, }); viewer.scene.primitives.add(primitive); viewer.camera.flyToBoundingSphere(primitive.boundingSphere);仓库里packages/sandcastle/gallery/voxels/main.js有一个完整可交互的示例支持球体、圆柱、盒子三种形状打开就能转非常适合作为起点。三个关键参数先记一下stepSizeprimitive.stepSize控制沿射线采样的步长倍数越大采样越稀、画面越粗、速度越快。Custom Shader传输函数在片元着色器里读fsInput.metadata定义数据值 → 颜色 透明度的映射体素画面长什么样基本由它决定。availableLevelsprovider 上的细节层数。层数越多细节越足但显存和采样开销也同步上涨。数据怎么喂进去体素数据的三种常见格式喂数据有三种方式按数据规模和来源选就行。1. 3D Tiles 体素扩展3DTILES_content_voxels。仓库样本Apps/SampleData/Cesium3DTiles/Voxel/VoxelBox3DTiles/tileset.json里就是这样声明的content: { uri: tiles/{level}/{x}/{y}/{z}.gltf, extensions: { 3DTILES_content_voxels: { dimensions: [2, 4, 3], class: voxel } } }, extensionsRequired: [3DTILES_content_voxels]配合implicitTilingOCTREE 八叉树可以按层流式加载适合全球级、多级别的大体量数据集。2. 程序化 VoxelProvider。实现一个对象暴露dimensions、names、types再写一个requestData(options)返回VoxelContent.fromMetadataArray([float32Array])即可。适合调试、合成数据或实时生成的小数据集几千到几百万体素级别。3. 多 tile 带 padding 的切块。provider 里给paddingBefore/paddingAfter留一圈邻域多个 tile 拼接时插值不穿帮。适合中等规模、需要分块传输的数据。调参指南让画面又稳又快的 5 个旋钮️ 下面是我实际调参时用得最多的五个位置每个都直接对应你能看到的变化。把 stepSize 拧大一点primitive.stepSize 2.0试试。步长翻倍采样点减半帧率立刻上去。代价是细节糊掉边缘变软。先跑满精度找基准再逐步加大直到画面还能接受为止。用 travelDistance 调透明度合成自定义着色器里fsInput.voxel.travelDistance给出射线穿过体数据的距离。用它做指数衰减就能模拟越厚越不透明的散射感。系数调小薄结构更通透调大整体更快变实心。availableLevels 决定 LOD 层数provider 上把availableLevels从 3 降到 1远视角的细节请求立刻变少显存占用跟着掉。近处精度不够时再考虑加层。padding 别给空多 tile 场景里paddingBefore和paddingAfter至少留 1 格。少了它tile 接缝处采样会取到空值屏幕上出现一圈发黑的缝。在 requestData 里果断 reject自定义 provider 对超出层数的请求直接Promise.reject。引擎靠这个信号停止继续细分避免白跑无意义的加载。真实场景谁在用 CesiumJS 做体素地质勘探把某片区域的勘探体块转成体素数据加载后在地球上看。地质员拖动画布从不同角度看岩体分布剖面处直接调传输函数换颜色通道。痛点在于岩体是整块的数据过去只能切片成 2D 图一张张看现在一次加载、随意旋转。医学影像CT 数据本身就是体素医生在浏览器里旋转断层数据放大看内部结构无需导出去别的软件。体素采样保留了体数据的全部信息不会像等值面那样把低于阈值的细节直接丢掉。气象可视化把某区域温度场做成体素云团值班人员拖动时间轴看风场演变体素穿过云层时能同时看到浓淡变化。二维等值线图只能表达标量体素画面能表达厚度感。踩坑记录性能和内存的三个常见坑现象帧率从 60 掉到 20。原因stepSize 默认值配合大体积数据每像素采样步数太多。 解法先把stepSize提到 1.5 以上做基准测试再检查 Custom Shader 里有没有逐样本的分支或 pow 运算能预计算的全挪到 uniform 里。现象来回切换场景后浏览器内存只涨不跌。原因VoxelPrimitive 挂在 scene 上就一直持有显存纹理remove之外还需要destroy()。 解法写一个统一的清理函数scene.primitives.remove后紧跟primitive.destroy()切换数据时先清后建。现象控制台报纹理尺寸超限数据大面积丢失。原因体素数据上传前会被打包进 GPU 纹理dimensions任何一维超过 GPU 最大纹理尺寸就会失败。 解法上游做降采样或按八叉树拆成多 tile让每个 tile 单独落在限制内。接下来可以去哪资源与进阶方向体素图元与 provider 的实现packages/engine/Source/Scene/VoxelPrimitive.js、packages/engine/Source/Scene/VoxelProvider.js可交互示例packages/sandcastle/gallery/voxels/main.js体素扩展测试数据Specs/Data/Cesium3DTiles/Voxel/WebGPU 支持还在路上光线步进用 compute shader 跑起来会比现在更省值得留意后续版本更新。绕回来开头说体素渲染解决的是体积数据画不出来现在这条路径你已经走通了一遍。你现在就可以打开仓库里的 Sandcastle 示例把示例数据换成自己的 8×8×8 小立方体几分钟内就能在浏览器里看到它转起来。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
