2D 图表 + CSS 伪 3D
- 适用：看板类需求，数据点 < 5 万
- 成本：1～2 人周即可上线
- 瓶颈：超过 3 万点后拖拽明显掉帧，纵深表达弱
- 数据挖掘：只能做聚合后的结果展示
推荐给：指标监控型团队，先把口径跑通再谈视觉。
数字浪潮 · 3D 数据可视化
把大数据分析，做成一屏能「摸到」的3D 数字浪潮
用 WebGL 与 Three.js 把千万级数据点铺成有纵深的浪面：左侧是知识库式的指标目录，右侧是可旋转、可下钻的立体图形。你不需要先学会写查询，就能顺着浪的起伏看懂业务。
1200 万单场景数据点上限
≤ 800ms交互首帧响应
60 fps桌面端稳定帧率
14 类内置挖掘算子
实时流 · 峰值 24 万条/秒
三条路线，怎么选才不返工
同样要做 3D 数据可视化，差别往往不在「画得好不好看」，而在数据量、团队技能和迭代节奏是否匹配。
Three.js 场景化渲染
- 适用：10 万～1200 万点，需要旋转/下钻/时间轴
- 成本：4～6 人周，含几何合批与实例化优化
- 收益：桌面端稳定 60 fps，GPU 占用控制在 45% 内
- 数据挖掘：可在 GPU 侧做密度聚类与异常高亮
推荐给：数字浪潮式主视觉与对外发布型科技网页。
低代码 3D 组件平台
- 适用：多业务线复用一个可视化底座
- 成本：前期 8 人周建底座，后续场景 0.5 人周/个
- 风险：定制交互易被组件协议限制
- 数据挖掘：算子以插件形式接入，需统一入参规范
推荐给：有 5 个以上看板需要长期维护的组织。
从原始表到一屏数字浪潮：五步
每一步都给出可验收的量化门槛，避免「做完了但说不清哪里算达标」。
收敛口径
先把指标字典定死：一个指标只允许一个计算表达式，字段命名统一小写下划线。把 3 个以上同义字段合并，避免后期图形对不上数。
验收：指标重复率降到 0，字段数减少约 30%预聚合与分片
按时间 + 业务维度做两级预聚合，把明细表压缩成分钟粒度宽表，再按维度哈希分片，让前端一次只取需要的分片。
验收：单次查询返回 < 40MB，扫描行数下降 85%几何与实例化
用 InstancedMesh 承载海量点，曲面用 BufferGeometry 一次性上传；避免在帧循环里新建对象，贴图统一 1024px 以内。
验收：draw call < 120，首帧 < 800ms交互与下钻
射线拾取只对可见层做检测，悬停高亮用颜色混合而非重建几何；下钻层级控制在 3 层以内，超过则改用侧栏表格承接。
验收：拾取延迟 < 60ms，误触率 < 3%降级与兜底
为低端设备准备静态快照：检测到帧率连续 2 秒低于 30 fps，就切到预渲染图片 + 关键指标卡，保证信息永远可读。
验收：低端机可用率 100%，无白屏核心能力：五块拼图
每一块都可以单独接入现有系统，也能组合成一整套高科技网页设计方案。
GPU 加速渲染管线
把百万级点云交给 GPU 实例化绘制，CPU 只负责数据分片与相机控制。实测在集成显卡上也能维持 45 fps 以上。
实例化绘制纹理图集视锥剔除
流式数据接入
支持消息队列与批量文件双通道，秒级增量写入内存索引。断流时自动重连，最多补拉 15 分钟窗口的数据。
秒级增量断点续传
数据挖掘算子
内置聚类、突变检测、周期性分解等 14 类算子，输出结果直接绑定到视觉通道，异常点用暖色高亮而不改变整体配色。
异常检测周期性分解密度聚类
交互设计工具链
相机预设、下钻路径、标注样式全部以 JSON 配置管理，设计改稿不用动渲染代码，改一次配置即可全端生效。
配置驱动相机预设
性能与体验看板
把帧率、首帧、拾取延迟、显存占用四个指标做成自监控面板，低于阈值时给出具体优化建议，而不是只报红。
帧率监控显存水位阈值告警
实用指导清单：6 条避坑要点
都是踩过之后写下来的，照着做能省掉至少两轮返工。
-
先定帧率预算，再谈视觉复杂度 桌面端把 16.6ms/帧 作为硬预算：几何更新 ≤ 6ms、材质与光照 ≤ 4ms、交互与 UI ≤ 3ms。超过就把曲面细分从 128×128 降到 96×96，视觉差异几乎看不出。
-
数据点分级：不同量级用不同画法 ≤ 5 万点用普通网格；5 万～200 万点用实例化点云；超过 200 万点先做密度聚合，把一个像素网格压缩成一个代表点，避免无效绘制。
-
颜色通道要留给「异常」，不要留给装饰 主色承担 30% 的信息层级，强调色只标异常与选中态，占比控制在 10% 以内。超过 3 种高饱和颜色同时出现，读图准确率会明显下降。
-
贴图统一压缩，别让显存先崩 单张贴图 ≤ 1024×1024，全部走纹理图集；控制在 120MB 以内的显存占用。移动端进一步降到 512×512 并关闭阴影贴图。
-
为无障碍与弱网准备静态副本 主视觉配一张同尺寸静态图，alt 写清数据结论；开启减少动态效果时自动停用旋转与粒子动画，信息不丢失。
-
把「可解释」写进交互里 每个立体图形旁给出数据来源、时间窗口与样本量（例如：近 24 小时 · 样本 86 万条）。用户点开任意柱体，先看到口径说明，再看到数值。
它真正被用在哪里
四个贴近日常业务的场景，都是把 3D 数据可视化接到真实工作流里。
和谁一起把这套方案跑通
覆盖数据源、渲染引擎与终端设备三类伙伴，接口都已对接验证。
数据源侧消息队列 / 对象存储 / 时序库
渲染引擎侧WebGL 2.0 / Three.js 生态
终端设备侧桌面浏览器 / 触控大屏 / 平板
分析工具侧SQL 数仓 / 算子插件
设计协作侧设计令牌 / 配置化主题
运维监控侧性能埋点 / 告警通道
下一步：用一张真实数据表跑通全流程
挑一张 50 万行以内的业务明细表，按上面的五步走一遍：收敛口径 → 预聚合 → 实例化渲染 → 交互下钻 → 降级兜底。跑完你会得到一屏能演示、也能解释来源的数字浪潮。