01
WebGL 立体孪生渲染
基于 Three.js 的分层场景图,将设备、网关、链路拆成可独立更新的 3D 图层,单层变更只触发局部重绘,避免整屏抖动。
WebGL · Three.js · 实时设备孪生
面向硬件厂商、系统集成商与行业客户的协作式物联网解决方案:用 3D 设计把 2 万级设备点位、时序遥测与告警事件压缩进一块可旋转、可下钻的立体场景。我们提供从 WebGL 渲染管线到 REST/MQTT 数据契约的完整接口,让多方团队在同一套数字浪潮里对齐节奏。
合作伙伴墙
我们与 6 类角色共建数字浪潮:芯片模组商、边缘网关厂、行业 ISV、云平台、检测认证机构与终端客户。每类角色接入前先对齐一份《数据协作契约》:统一设备影子字段、时序点位单位、告警等级枚举,确保 3D 场景中的每一层浪潮都能被各方独立复现。
核心能力
从渲染管线到协作流程,每项能力都对应可验收的量化门槛,方便生态伙伴在联调会上逐条勾选,而不是停留在演示视频里。
01
基于 Three.js 的分层场景图,将设备、网关、链路拆成可独立更新的 3D 图层,单层变更只触发局部重绘,避免整屏抖动。
02
把 MQTT 上报的时序点位按时间轴映射为波面高度与颜色,异常值自动隆起为高亮浪尖,运维人员 3 秒内可定位异常设备。
03
同一套场景在 320px 至 2560px 视口自适应:小屏降级为单层切片卡片,大屏扩展为 6 列图层矩阵,交互手势与焦点顺序保持一致。
04
为每个设备维护一份可版本化的影子文档,模组商、ISV、客户分别持有字段级读写权限,冲突按「后写胜出 + 变更留痕」策略合并。
05
在采集、网关、云端、渲染四段打点,用同一条 traceId 串起延迟分解,便于判断卡顿源于网络抖动还是渲染帧率不足。
06
为每个 3D 图层设定三角形数与纹理显存预算,超预算时自动降级为实例化绘制,保证低端设备也能进入同一片数字浪潮。
实用指导清单
以下 6 条来自真实联调现场,按顺序执行可显著降低返工率;每条都给出做法、参数与验收阈值,可直接写进协作会议纪要。
设备影子字段先定稿:deviceId / ts / metric / unit / level 五字段缺一不可。点位单位统一为国际单位制,告警等级限定 4 档。契约冻结后再建模,可避免 3D 场景因字段变更整体重做,实测可省约 30% 返工工时。
把总三角面控制在 80 万以内、单纹理不超过 2048px,同屏 draw call 建议 ≤ 180。超过时启用 InstancedMesh 批量绘制同类设备。中端安卓机(骁龙 7 系)目标 55fps 以上,低于 45fps 即触发降级策略。
MQTT 高频点位按 200ms 窗口节流聚合,渲染侧用线性插值补齐波形,避免数据抖动导致浪面抽搐。告警事件单独走高优先级通道,端到端延迟控制在 400ms 内,确保浪尖隆起与真实事件同步。
网关侧开启 72 小时本地缓存,断网后 3D 场景切换为「离线快照 + 时间轴回放」模式,并在界面顶部显示数据新鲜度(如「数据滞后 2 分 10 秒」),避免运维误判设备离线。
键盘焦点顺序须与 3D 图层层级一致,所有可交互元素点按区 ≥44px;320px 视口下无横向滚动。颜色对比度正文不低于 4.5:1,关键数字与图表标签不低于 3:1,并在 prefers-reduced-motion 下关闭视差与浮动动画。
采集、网关、云端、渲染四段共用 traceId 打点,每次联调后输出延迟分解表:网络段、计算段、渲染段各占多少毫秒。连续 3 次联调端到端稳定 ≤400ms,方可进入灰度发布。
服务档位
三档服务的差异在于「你参与多深」:从直接接入我们的 3D 场景,到共建一套属于你所在生态的渲染与数据规范。所有档位均含数据契约评审与联调支持。
¥2.8万/ 项目起
¥9.6万/ 项目起
按需报价/ 年度协作
客户评价
来自模组厂、系统集成商与终端运维团队的一线声音,关注点集中在数据契约、性能预算和联调效率。
「最有用的是那份数据契约模板,我们和上游模组商第一次在半天内把字段对齐了。3D 场景的分层结构让我们能各自维护自己那层,互不阻塞。」
「之前担心 3D 看板在车间平板上跑不动,实测 20000 点位稳定在 56fps。性能预算看板让帧率问题能在联调阶段就暴露,而不是上线后被投诉。」
「traceId 四段打点这个做法很实在,我们把网络抖动和渲染卡顿彻底分开了,排障时间从平均 40 分钟降到 8 分钟左右。」
应用场景
3D 设计并非只服务于展示,它把抽象的设备关系翻译成可指认的空间位置,让跨团队沟通从「看表格」变成「看同一片浪」。
提交设备协议与点位规模,我们会在 2 个工作日内给出场景分层建议、性能预算评估与联调排期。生态伙伴可申请 30 天联调沙盘环境,含 3D 场景 SDK 与数据契约评审。