这是一个网页样式设计参考 · 页面仅作视觉与排版演示,数据与价格为示意口径3D 设计 × 大数据分析
探索与发现 · WebGL 渲染管线

把十万行日志折叠成一座可漫游的数据星体

数据创世引擎把 Three.js 场景图 与 D3.js 统计尺度 接在同一条数据流上:从原始表到可交互的 3D 数据可视化,中间不再需要手工导出中间件。视点即查询——旋转、下钻、框选都直接命中明细行。

60 fps20 万点实例化渲染目标帧率(中端集显)
≤ 1.2 s首次可交互时间,首屏模型体积压缩至 1.8 MB
4 档LOD 分级,按视距自动切换几何精度
3D 数据创世引擎主视图:粒子化数据星体在深色空间中旋转,边缘带青色高亮扫描线
主视觉:数据星体视图 · 每颗粒子映射一条聚合记录,悬停展开维度明细
01 / 工作流程

四步把静态报表改造成可漫游场景

每个阶段都有明确交付物与验收阈值,避免「3D 很炫但没人用」。关键判断:先定交互问题,再选几何表达。

01

探查数据骨架

先做维度基数扫描,决定谁当坐标、谁当颜色。

  • 基数 < 12:映射为空间轴
  • 基数 12–200:映射为色相带
  • 基数 > 1000:聚合为密度场
02

建模与实例化

用 InstancedMesh 承载重复几何,单批次提交绘制调用。

  • 单网格顶点 ≤ 5 万
  • 绘制调用压到 40 次以内
  • 几何压缩后 ≤ 1.8 MB
03

接统计尺度

D3.js 负责比例尺与刻度,Three.js 负责空间呈现,两者共用一份数据源。

  • 线性/对数尺度可切换
  • 异常值单独成层高亮
  • 刻度标签始终面向相机
04

交互与性能回归

把旋转、下钻、框选三类交互各跑一遍性能基线。

  • 拾取响应 ≤ 120 ms
  • 长任务切分 ≤ 16 ms/片
  • 低端机降级为 2D 图层
02 / 能力面板

四条能力线,撑起一次数据探索

硬边描边卡 + 偏移阴影,是这套引擎的视觉签名:像被压在台面上的数据切片。

3D 设计视角下的数据分面视图,多层几何体按维度分层堆叠

3D 设计表达

几何形态本身承载语义:高度=量级,厚度=置信区间,透明度=采样密度。

Three.js几何语义
大数据分析看板:多组柱形与曲线在暗色背景上对比呈现

大数据分析接入

支持流式分片加载,单次查询窗口默认 90 天,超出自动降采样至 1/8。

流式分片降采样
数据可视化图层:网格与高亮点阵组合,呈现维度之间的关联结构

数据可视化图层

2D 概览与 3D 细节双向联动,框选概览区即可把细节层聚焦到对应子集。

D3.js双向联动
互动网页操作界面:用户以拖拽方式调整三维数据模型的角度与层级

互动网页体验优化

手势与键鼠双通道:拖拽旋转、滚轮推进、双击聚焦,交互热区不小于 44 px。

WebGL交互热区
03 / 服务档位

按探索深度选择档位,而非按人头计价

价格按「场景数量 + 数据量级」计价,首年含两次性能调优,超量部分按 0.02 元/万点/月结算。

探查版

单场景验证

¥1.8 万/ 起
  • 1 个 3D 场景,3 个视角预设
  • 数据量级 ≤ 200 万行
  • 交付周期 10 个工作日
  • 含 1 次性能基线报告
对比细节
引擎版 · 推荐

多场景数据创世

¥6.4 万/ 起
  • 4 个 3D 场景 + 2D 概览联动
  • 数据量级 ≤ 2000 万行
  • 交付周期 4 周,含 2 轮调优
  • LOD 四级 + 实例化管线
  • 低端设备自动降级策略
预约探查
共创版

平台化共建

¥15 万/ 起
  • 场景数量不设上限
  • 数据量级 ≤ 2 亿行
  • 驻场 6 周 + 季度回归
  • 开放渲染参数面板给业务方
定制方案
18 ms平均单帧渲染耗时(20 万点场景)
3.4×接入引擎后异常定位效率提升
42%无效维度被聚合层合并的比例
9 类内置图表原语,可组合成场景
04 / 实用指导清单

七条避坑要点,直接照着改

这些都是 3D 数据可视化项目里最常翻车的地方,每条都给了可验证的量化口径。

数据探索工作台侧视:左侧为维度列表,右侧为三维散点场与统计刻度

先做维度基数扫描,再决定用不用 3D

若参与映射的维度少于 3 个且基数 < 12,优先用 2D 图表;强行 3D 只会增加遮挡与误读,实测误读率上升约 23%。

把绘制调用压到 40 次以内

重复几何一律走 InstancedMesh;每千个独立 Mesh 约增加 3–5 ms 帧耗时,超过 40 次绘制调用后中端设备开始掉到 45 fps 以下。

首屏体积控制在 1.8 MB 内

几何用 Draco 压缩(典型压缩比 5:1),纹理改 KTX2;把非首屏模型拆为按需加载,首帧可交互时间目标 ≤ 1.2 s。

拾取用射线分片,不用逐帧全量检测

把射线检测放到 pointermove 的 60 ms 节流里,或改用 GPU 拾取;逐帧全量检测在 20 万点场景下会吃掉 单帧 30% 以上预算。

为低端设备准备降级开关

按 navigator.hardwareConcurrency 与 WebGL2 能力分级:低端自动关闭阴影与后处理,粒子上限降到 3 万,保证 ≥ 30 fps。

颜色只承载一个语义

色相用于分类、明度用于量级,两者不要混用;同屏色相控制在 6–8 个,并以图例固化,避免观众每次重新学习色义。

给探索过程留下可复现路径

把视角、筛选、尺度类型序列化为可分享链接(URL 参数 ≤ 300 字符),让同事打开即回到同一观察点,协作沟通成本可下降约 35%。

05 / 应用场景

三个真实场景,三种探索姿态

同样的引擎,在不同业务里关注的问题完全不同:有人找异常,有人找结构,有人找趋势拐点。

运维场景数据可视化:服务依赖以三维节点图呈现,异常节点被高亮标记
运维观测

服务依赖拓扑探索

把 3000+ 服务实例铺成力导向三维拓扑,异常节点以青色脉冲标记,平均故障定位从 26 分钟压到 9 分钟。

零售场景数据可视化:门店与商品维度构成的三维聚类块,颜色标注销售分层
零售经营

门店聚类分层

按客单价、复购率、坪效三维聚类,识别出 5 类门店画像,据此调整铺货结构的门店占比达 38%。

工业场景数据可视化:产线设备的三维温度场分层渲染,热点区域清晰可辨
工业产线

设备状态时空回放

以时间轴回放整条产线的温度与振动场,提前 40 分钟预警轴承异常,非计划停机次数下降 2 次/季。

下一步 · 从一次探查开始

带上你最难解释的那份数据,我们把它变成可漫游的场景

首次探查提供 90 分钟工作坊:现场完成维度基数扫描、场景草图与性能预估,输出一页可执行的落地方案,无需提前准备清洗后的数据。

交付物:场景草图 + 性能预估表 + 数据接入建议
参与角色:数据工程 1 人、前端 1 人、业务方 1 人
验收口径:首屏可交互 ≤ 1.2 s,交互响应 ≤ 120 ms