百万点折线图不卡顿的秘密ChartGPU 的 LTTB 采样与 GPU Decimation 深度解析【免费下载链接】ChartGPUBeautiful, open source, WebGPU-based charting library项目地址: https://gitcode.com/gh_mirrors/ch/ChartGPUChartGPU是一个基于 WebGPU 的开源图表库核心能力就是在浏览器里流畅渲染百万点级别的折线图。它不靠少画点糊弄你而是靠两套采样机制协同工作CPU 端的 LTTB 采样Largest-Triangle-Three-Buckets负责聪明地选点GPU 端的 Decimation 计算着色器负责把选点计算从主线程彻底搬走。下面用最少的话讲清楚这两者各自解决什么问题、如何配合让百万点数据依然保持 60 FPS。为什么百万点折线图会卡一张 1920px 宽的屏幕横轴最多只有约 1920 个像素位置。当你塞进 100 万个点绘制量爆炸百万条线段、顶点着色器百万次调用GPU 带宽和顶点吞吐被浪费在不可见细节上CPU 打包瓶颈把百万个点逐帧编码、上传到显存主线程每帧都被阻塞朴素降采样失真等间隔抽稀会丢掉尖峰和异常值趋势线看起来变圆了。解决思路只有一条路在保留波形形状的前提下把参与绘制的点压到屏幕像素数量级并且让这个筛选过程足够便宜。LTTB 采样为什么它比隔 N 个抽 1 个更好LTTB 是 ChartGPU 的默认采样算法sampling: lttb核心思想一句话逐桶挑选与前后上下文构成三角形面积最大的那个点。算法流程把全量数据均匀分成targetPoints - 2个桶首尾两点直接保留对每个桶计算下一桶所有点的平均位置作为参考点在当前桶内遍历每个候选点计算它与上一个选中点 下一桶平均点构成的三角形面积面积最大的点胜出进入下一轮。三角形面积大的点意味着它对整体形状贡献最大——尖峰、深谷、拐点天然是面积最大者因此 LTTB 在降采样 99% 数据后仍能忠实还原峰值与形态。这也是它相比min/max/average桶采样更通用的原因后两者适合只看极值的场景。两个容易忽略的工程细节索引选择在Float64 域完成。若先把时间戳约 1e12 量级塞进 Float32秒级间隔的点会因精度坍缩而撞车LTTB 会选错点数据量小于目标点数时原样返回零额外开销。核心实现只有一份主逻辑加几个数据格式入口可查阅源码lttbSample.ts、分桶采样调度入口 sampleSeries.ts。GPU Decimation把采样算进计算着色器CPU 采样解决了选得聪明但仍有两个成本留在主线程遍历全量数据 每帧重打包上传。GPU Decimation 的思路是原始数据常驻显存采样本身也跑在 GPU 上渲染器直接消费计算输出不回读、不重传。关键机制机制作用两阶段并行 LTTB计算着色器先算桶均值再做三角形面积最大化与 CPU 算法 1:1 对齐128 候选集上限当单桶超过 512 个原始点时只评估均匀抽取的 128 个候选含端点桶均值用 64 个样本——保证 5M–10M 点时 GPU 带宽有界瓦片层级缓存以 1024 点为物理瓦片预存 min/max/sum 聚合追加数据时只重建被触碰的瓦片避免每次全量冷扫描逐帧诚实重算只要输入签名SIG变化就本帧重新编码绝不用上一帧的旧几何冒充当前画面适用条件由一道统一门槛决定系列类型为line、采样模式为lttb/min/max、且原始数据无 null 断点。不满足则自动回落到 CPU 采样路径用户无感。实现入口createDecimationCompute.ts、资格判定 gpuDecimationEligibility.ts、计算着色器 decimation.wgsl 与层级维护 decimationHierarchy.wgsl。两个旋钮sampling 与 samplingThreshold普通用户只需理解两个配置项写在 series 上sampling采样算法。lttb默认通用、average去噪看趋势、max/min抓极值、none小数据全量绘制samplingThreshold触发降采样的数据量阈值默认5000点。低于阈值的系列不采样全精度绘制。实际目标点数不是固定值而是随缩放自适应放大后只对可见范围重采样目标点数随 zoom 级别伸缩上限 20 万点GPU 路径还会叠加屏幕空间 LOD——目标桶数取min(samplingThreshold, 2×绘图区像素宽, 原始点数)因为画出比像素还多的点没有意义。配置建议与性能验证流式大数据推荐组合来自官方性能指南 performance.md{ animation: false, // 流式场景关闭动画 autoScroll: true, // 自动滚动跟随 series: [{ type: line, sampling: lttb, samplingThreshold: 2500, // 高频流建议比默认更激进的阈值 }], }配合appendData(index, points, { maxPoints })环形缓冲追加O(append) 增量上传可以支撑多百万点的持续流入而不重写整个数据窗口。验证工具examples/million-points/ —— 100 万点基准页开启 Benchmark mode 可实时查看 FPS、CPU 提交耗时与 GPU 耗时直观判断瓶颈在哪一侧examples/sampling/ —— 交互演示各种采样算法与阈值的效果差异examples/performance-baseline/ —— 固定场景静态重绘 / hover / 缩放 / 流式追加回归基线输出 JSON 便于前后对比。一句话总结LTTB 让少画不失真GPU Decimation 让筛选不占 CPU——两者叠加就是百万点折线图在浏览器里依然丝滑的全部秘密。【免费下载链接】ChartGPUBeautiful, open source, WebGPU-based charting library项目地址: https://gitcode.com/gh_mirrors/ch/ChartGPU创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考