工业CT体数据网页预览实践

这个需求的起点很朴素:客户的工艺工程师想在浏览器里看一眼扫描结果,而不是每次都跑到检测室,排队用那台装着专业软件的工作站。听上去是个典型的前端活儿,真动手才发现数据量完全不在一个量级上。一次扫描重建出来的体数据,分辨率高的能到几十GB,直接下载显然不现实,全部放到服务端渲染又扛不住并发。我们花了大半年把这件事做到可用,过程中对取舍的理解比一开始清晰了很多,这里把主要的几个决定记录下来。

先说数据是怎么来的。工业CT的工作方式是让射线源和探测器围绕工件采集大量角度的投影,再通过重建算法还原出内部的三维密度分布,输出的是一个体素矩阵而不是若干张照片。设备厂商在这方面的差异不小,像 Waygate Technologies 这类做高分辨率设备的厂商,重建后的数据通常带有完整的几何与标定信息,体素尺寸和灰度含义都有明确定义,对后续处理比较友好;而有些设备只给一个图像序列加一份说明文档,空间信息要靠人工补。我们的系统必须同时兼容这两类输入,所以入库时会统一补齐几何元数据。

多分辨率切块

核心方案是多分辨率切片。我们在入库阶段把体数据预处理成一个分层结构:最粗一层是整体缩略,往下每层分辨率翻倍,每层再按固定大小切成块。浏览器按当前视角和缩放级别只请求需要的块,用户从整体看到局部时逐级加载,体验类似地图应用。这套结构的代价是存储放大,大约多占三成到四成空间,但换来的是首屏几百毫秒可见,而不是等几分钟。对我们的使用场景来说,这笔交易非常划算。

// 按缩放级别与当前视口计算需要请求的块

function tilesFor(level, sliceIndex, viewport) {

  const scale = 2 ** (MAX_LEVEL - level);           // 每往上一层分辨率减半

  const z = Math.floor(sliceIndex / scale / TILE);

  const [x0, x1] = [viewport.x0, viewport.x1].map(v => Math.floor(v / scale / TILE));

  const [y0, y1] = [viewport.y0, viewport.y1].map(v => Math.floor(v / scale / TILE));

  const keys = [];

  for (let x = x0; x <= x1; x++)

    for (let y = y0; y <= y1; y++) keys.push(`${level}/${z}/${x}/${y}`);

  return keys;

}

渲染:切片为主,体绘制为辅

渲染方式最后选了以断层重切为主、体绘制为辅。工程师真正的高频动作是在三个正交方向上翻切片找缺陷,这部分完全可以用二维贴图完成,浏览器压力很小。体绘制虽然直观,但在网页端的性能和画质都难以令人满意,我们把它限定在低分辨率的整体预览上,用于快速定位可疑区域,真正判读还是回到切片视图。这个取舍在评审时有过争论,实际用起来工程师反馈并不介意,因为他们本来就习惯看切片。

窗宽窗位要随截图保存

灰度映射是个容易被低估的细节。体数据的动态范围远超屏幕能显示的层次,同一份数据用不同的窗宽窗位看,结论可能完全不同。我们把常用的映射预设按材料类别做成模板,同时允许手动调整,并且把当前的映射参数随截图一起保存。这一点很关键:如果工程师截了一张图发到群里讨论,而别人不知道这张图用了什么参数,讨论很容易跑偏。所有分享链接都会带上视角和映射参数,打开后看到的画面是一致的。

缓存调了三轮

缓存策略前后调了三轮。最初完全依赖浏览器缓存,结果切换工件时频繁失效;后来在服务端加了一层热数据缓存,把最近访问的块常驻内存,命中率能到七成以上;最后又在客户端做了预取,按用户翻切片的方向提前拉取相邻块,主观流畅度提升明显。需要提醒的是预取不能太激进,我们一开始预取范围设得很大,结果在网络一般的办公环境里反而拖慢了当前视图的加载。

预览不作为判定依据

还有一条规则我们写进了界面:网页端预览不作为判定依据。原因是分层结构里的低分辨率数据经过了重采样,细微特征可能被平滑掉,用它下结论有风险。界面上会明确标注当前显示的是第几级分辨率,只有加载到原始分辨率时才允许导出用于报告的截图,低于原始分辨率的导出会带上水印说明。这条限制刚上线时被嫌麻烦,后来出过一次差点误判的情况,大家就接受了。

权限按数据范围授权

权限与分享也需要提前设计。扫描结果涉及工艺细节,客户要求按项目和产线做隔离,外部供应商只能看到与自己相关的工件。我们最初用简单的角色控制,很快被各种例外撑爆,后来改成以数据范围为中心的授权模型,角色只决定能做什么动作,能看哪些数据由独立规则决定。分享链接同样受控,默认带有效期,过期自动失效,并且记录每一次访问,谁在什么时间看过哪个工件都有据可查。这部分功能在客户内部推广时帮了大忙,质量负责人最担心的就是数据外流,看到访问日志后态度明显转变。

总体来说,这类系统的难点不在渲染算法,而在于承认数据量的客观限制,把交互拆成逐级逼近的过程,并且诚实地告诉用户当前看到的是什么精度。做完之后最大的收获是工艺工程师开始主动查看扫描结果,而不是只看检测部门给的结论表格,跨部门沟通的成本降了不少。下一步想试试把切片视图和缺陷标注库打通,让相似缺陷可以横向比对,那部分估计又要面对一堆标注一致性的问题。