从2D到3DChartGPU cartesian3d三维点云与曲面图入门到精通【免费下载链接】ChartGPUBeautiful, open source, WebGPU-based charting library项目地址: https://gitcode.com/gh_mirrors/ch/ChartGPUChartGPU 是一款基于 WebGPU 的开源高性能图表库除了 2D 折线、K线、散点等经典图表它还内置了独立的cartesian3d 三维坐标系让你用几行配置就能渲染三维点云pointCloud3d和三维曲面图surface3d——百万级数据点在浏览器中流畅旋转、缩放、拾取无需引入 Three.js。本文将带你从零上手 ChartGPU 的 3D 能力覆盖点云、曲面、相机交互与性能要点。为什么需要 3D 图表当你的数据天生是空间性的——LiDAR 激光雷达扫描、地形高程、点云传感器、频谱高度场——2D 投影会丢失一个维度的信息。ChartGPU 的cartesian3d模式就是为此设计的三维点云散乱的空间样本适合传感器数据、分子结构、扫描结果三维曲面均匀网格上的高度场适合地形图、频谱演化、信号强度分布两者都支持轨道旋转、平移、缩放的相机交互以及鼠标悬停拾取和 tooltip 先分清概念3D 点云 ≠ 2D 散点的density密度模式也不等于 2Dheatmap。cartesian3d是独立于 2D 图表的第三种模态modality。如何创建第一个 3D 图表只需在创建图表时加一个关键配置coordinateSystem: cartesian3d。下面是 ChartGPU 三维点云图表的最小配置骨架const chart await ChartGPU.create(container, { coordinateSystem: cartesian3d, // 关键开启 3D 模式 camera: { type: perspective }, // 或 orthographic 正交相机 series: [ { type: pointCloud3d, name: Samples, data: { x, y, z, value }, // 三个坐标 可选数值通道 pointStyle: { size: 3, color: #38bdf8 }, colorBy: { colormap: viridis, min: 0, max: 1 }, // 按值映射颜色 }, ], tooltip: { show: true }, });几个新手友好的细节不写coordinateSystem时默认是 2D两者互不干扰相机可以完全省略会自动贴合数据的包围盒AABB取景坐标约定是Y 轴朝上把高度放到y水平面用x/z完整可运行的示例在 examples/3d-showcase/官方精选展示标注轴、等高线、点云流、曲面滚动、examples/point-cloud-3d/螺旋点云 色彩映射切换和 examples/surface-3d/地形曲面 光照滑杆。三维点云pointCloud3d 使用要点三种数据格式随你选pointCloud3d的数据可以是格式示例分离数组{ x, y, z, value? }各为等长数组交错类型数组Float32Array [x0,y0,z0, x1,y1,z1, …]长度需为 3 的倍数零拷贝上传对象/元组数组[{x,y,z}, …]或[[x,y,z], …]非有限值NaN、Infinity会被自动跳过不会写入 GPU。打包与边界计算逻辑见 src/data/pointCloud3dData.ts每个点在 GPU 上以 16 字节[x, y, z, value]存储。颜色纯色或色彩映射纯色pointStyle: { color: #38bdf8 }按值着色colorBy: { colormap: viridis, min, max }可直接复用 heatmap 的全套命名色带viridis、plasma、inferno…非常适合表达温度、强度、密度点是用朝向相机的广告牌billboard四边形绘制的尺寸以 CSS 像素为单位恒定无论远近都不变。实时流式点云FIFO 追加点云是 3D 系列中唯一支持appendData的类型适合雷达回波、传感器实时流chart.appendData(0, batch, { maxPoints: 100000 });带上maxPoints后就开启了先进先出FIFO容量始终只保留最新 N 个点最老的样本被自动挤出天然适合持续写入的流数据。三维曲面surface3d 使用要点曲面图要求均匀网格数据铺在 XZ 平面上高度沿 Y 方向。核心配置{ type: surface3d, data: { xStart: 0, xStep: 0.01, // X 方向起点与步长 zStart: 0, zStep: 0.01, // Z 方向起点与步长 columns: 256, rows: 256, // 网格尺寸 y: heightField, // Float32Array长度 columns × rows }, colormap: viridis, // 按高度着色 lighting: 0.65, // 0 无光照纯色带越大立体感越强 contours: { show: true, levels: 12, color: #e2e8f0 }, // 等高线 }几个让效果立刻好起来的选项lighting环境光 方向光让高程起伏立体起来设为 0 则得到纯数据色带wireframe线框模式与实体填充互斥调试网格结构很好用contours世界空间下的 marching-squares 等高线像地图上的海拔线levels控制条数yMin/yMax色带映射域省略时自动从数据计算实时曲面updateSurface3D 流式更新曲面不支持appendData而是用专用的updateSurface3D方法三种模式模式用途replaceY整场替换高度推荐保留同一个Float32Array引用做零拷贝流式更新appendColumns按列追加 scrollX滚动**声谱图spectrogram**场景标配appendRows按行追加 scrollZ滚动⚠️ 新手易踩的坑流式 UI 中如果只是改样式比如开关等高线请复用同一个data对象引用否则流式状态会被清除、数据退回初始值。相机与交互像操作 3D 软件一样操作图表操作效果鼠标左键拖动绕目标点轨道旋转Shift 拖动 / 中键 / 右键拖动相机平面内平移滚轮推近/拉远透视相机双击 /chart.resetCamera()重新贴合数据包围盒代码层面还能自由控制视角chart.setCamera({ type: orthographic, orthoSize: 2 }); const cam chart.getCamera(); chart.resetCamera();拾取与 tooltip点击到具体样本3D 图表的on(click | mouseover | mouseout)事件会返回拾取结果点云{ kind: pointCloud3d, x, y, z, value, dataIndex, … }曲面{ kind: surface3d, i, j, x, y, z, height, … }拾取底层用屏幕空间网格实现精确最近邻查找大点云也不会卡顿悬停拾取约 30 Hz 节流。曲面拾取甚至是射线与高度场双线性求交返回的是真实命中点而非格子中心。2D 与 3D 的隔离规则重要这是新手最容易困惑的地方规则很简单场景行为3D 图表里放 2D 系列line/area/scatter跳过并console.warn警告2D 图表里放 3D 系列同样跳过并警告深度缓冲仅 3D 路径启用2D 的 dataZoom / 刷选缩放不适用于 3D 相机也就是说一张图里不能混用 2D 系列和 3D 系列需要同时展示时请创建两个图表实例。另外appendData(seriesIndex, …)等接口使用的是过滤后的解析索引——比如你传了[line, pointCloud3d]给 3D 图表line 被过滤掉后点云的索引是0而不是1。性能与最佳实践用生产构建压测bun run build后预览Vite dev 模式会掩盖真实 GPU 开销3D 路径关闭 MSAAsampleCount 1以保持深度缓冲简单靠 billboard 与高度场本身保证质量流式曲面坚持零拷贝路径保留同一个Float32Array原地改写后调replaceY避免每帧分配大点云配合maxPointsFIFO 控制内存3D 路径下getPerformanceMetrics()返回null性能评估请在你的硬件上用展示页的尺寸选择器实测快速上手路线与延伸阅读跑通 examples/3d-showcase/ —— 官方 3D 精选演示包含标注轴、等高线、点云流与曲面滚动改 examples/point-cloud-3d/ 的数据数组 —— 换成你自己的x/y/z给曲面加上contours与lighting—— 效果立刻出片阅读 docs/api/3d.md —— cartesian3d 完整 API 参考核心源码导读3D 数学与几何src/core/3d/mat4、相机、AABB、拾取点云打包src/data/pointCloud3dData.ts曲面数据src/data/surface3dData.ts渲染器src/renderers/createPointCloud3DRenderer.ts 与 src/renderers/createSurface3DRenderer.ts3D 着色器src/shaders/pointCloud3d.wgsl、src/shaders/surface3d.wgsl从 2D 到 3DChartGPU 用同一个 API 风格就把 WebGPU 的全部性能红利带给了你的空间数据——现在旋转你的第一个百万点云吧 【免费下载链接】ChartGPUBeautiful, open source, WebGPU-based charting library项目地址: https://gitcode.com/gh_mirrors/ch/ChartGPU创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考