首页 / 行业

图扑研发基于HTML5 的 2D、3D图形渲染引擎

2022-04-14 11:03:00

图扑（Hightopo）自主研发了基于 HTML5 的 2D、3D 图形渲染引擎，为 Web 可视化提供了丰富的展示形式和效果。图扑软件聚焦工业互联网监控运维可视化应用领域，产品也广泛应用于 2D 、3D 的组态领域。本文通过具体应用场景来阐述运用 HT 产品搭建可视化的解决方案。

随着经济的发展和人民生活水平的提高，人们对于提升医疗服务水平有着越来越高的要求，医疗机构管理者也希望通过信息化手段提高管理效率。医院逐渐向智能化的方向转型，在新兴技术的助推下，智慧医院、互联网+医疗、移动医疗、远程医疗、大数据与智能可穿戴设备在医疗行业开始崭露头角。高度分散的设备环境、不断演变的平台架构以及海量的数据分析都将通过科技技术向数字化医疗转型。

图扑软件应用自主研发的 HT 产品，无缝融合 2D、3D 技术，搭建了一套轻量化的 3D 可视化智慧医院管控系统。由三个模块拼合成一个大长屏，围绕医疗看板、科室监测、医院园区等模块进行展示。使医院原本独立的各系统根据各自特性形成联动预案与管理一体化。

本次案例一改以往的一屏展示形式，通过三个大屏模块组合成为一个大长屏的方式呈现，中间为主大屏，两边为副屏，每个大屏模块独立且融合，可通过 HT 自带交互左右任意切换场景，实现三个模块场景的旋转、平移、拉近拉远操作以及 360 度全方位无死角浏览。

HT 可视化支持编辑器的自定义风格、布局和菜单工具条等内容。可将 2D 和 3D 场景在编辑器上互相嵌套叠加、旋转和缩放，高度组件化无缝融合，承载十万以上级别的 2D、3D 及 UI 的表格树通用组件图元量，满足海量物联网设备和数据场景需求。

界面初始化后，案例主场景由线框楼宇逐渐向写实场景过渡，整体设计以写实风格为主基调，通过对医院内建筑、道路等进行三维建模，结合丰富的 2D、3D 组态，仿真还原了数字化医院整体效果与数据展现。利用图扑软件（Hightopo）自主研发的引擎渲染，让场景在 Web 中高效流畅地加载运行以及保证场景优秀的可视化效果。

园区漫游场景

初始画面对场景进行了漫游，可支持 360 度全方位无死角浏览园区，通过 HT 自带交互，即可实现鼠标的旋转、平移、拉近拉远操作。同时也支持跨平台浏览，任何移动终端均可轻松打开，这是 C 端平台所不具备的优势，并实现了触屏设备的单指旋转、双指缩放、三指平移操作不必再为跨平台的不同交互模式而烦恼。

园区信息可视化

将 HT 可视化与园区管理系统相结合，接入园区管理数据至可视化平台，实时更新园区内占地面积、楼宇数、标准床位数及科室数等信息以及院内人员在社区卫生服务中心的坐诊情况。社区医疗服务系统，可提供一般疾病的基本治疗，慢性病的社区护理，大病向上转诊，接收恢复转诊的服务。

点击科室信息可查看各楼层的诊室情况，方便看病人员进行楼层科室的选择。

点击医院建筑可显示该楼宇的温湿度情况，以及该区域的风速、PM 值、粉尘情况，可帮助相关的维护人员进行监测以及合理调整院内温湿度情况，满足院内人员的需求，保持公共区始终处于较为舒适的环境、让病房的环境处于一种可监控的状态。

核酸检测可视化

随着新冠疫情常规化的发展趋势，实时监测及时防疫变得尤为重要。通过核酸检测管理系统与 HT 的结合，实现全流程无纸化智能采集、快速检测、云端管理、电子报告、可视化展示等众多功能的呈现。有效助力疫情防控工作，让核酸检测全面实现信息化管理。通过 HT 可视化 2D 面板展示核酸检测预约人数、检测人数以及核酸结果。

能耗管理

医院因其工作的特殊性，对医院供配电与安全提出了特殊而且严格的要求，各种电器设备超负荷运转可能导致停电、手术中断、设备故障等严重后果从而给医院和患者带来重大损失，实时对医院的供配用电能耗情况进行监测，实现甚至手机端都可随时随地查看的 2D 组态效果。通过搜集相关用电限额标准，对全面数据进行汇总，对于超限电状态设备进行实时预警。

电梯运行监测

通过 2D 面板对电梯进行实时运行监测，点击各不同楼宇可查看医用电梯、货运电梯、客运电梯的数据更新情况。以便于院内人员对电梯进行使用，以及运维人员对电梯进行预警监测与及时设备安全检测。

车位/车辆信息

介于医院的特殊性，出入车流量较多。通过 HT 可视化进行有效地管控与疏导。对于不同区域的车辆进行统一管理。支持结合物联网、视频监控、车辆定位等相关技术，获取园区出入车辆实时位置，车主信息、停车时间、车牌信息等各类监控信息，并对园区内的车位信息进行实时汇总体现，包括园区内机动车位数、充电桩使用情况、能源车辆占比情况进行数据可视化。

视频监控模块

医院作为公众场所，人员复杂，虽然有园区巡逻安保设置，但是无法达到全园区实时覆盖及 24 小时不间断巡视，通过结合可视化即可实现全天全方位实时监测，对全天各时段人流量进行统计汇总、对园区内各区域的可疑人员进行实时信息抓取、并通过结合城市安保系统对可疑人员进行信息的提取对比与监测管理，赋予管理者对园区安保工作进行流程化、制度化、全局化的数字管理，保证园区内人员的生命财产安全。

为提升园区的安全管控效力，HT 支持无缝融合 HTML5 各项多媒体功能，联动各安防子系统，对公共、办公、设备间等全区域展开安防动态监测，并对各区域的视频设备进行了定位以及运行状态的监测。通过设备的编号、名称等信息查询监控画面，了解监控状态的 PIN、FPS、运行时间等信息。

传统视频监控无法对大场景进行有效直观的实时监测，没有态势感知。在其他案例中 HT 视频融合解决方案可以将 2D 图像融合到场景的 3D 模型中，为操作员提供直观的视频图像和简单的视图控制。HT 视频融合技术采用 WebGL 技术，利用 GPU 高性能计算能力对视频图像进行实时处理，图像处理不占用 CPU 资源，整个方案画面流畅。

图扑软件，医疗可视化Part2：园区 #智慧医疗 #医疗器械 #智慧医院 #数字孪生 #5G #远程会诊 #医疗数字化 #机器人 #远程监控 #工业互联网 #3D人体解剖 #VR #AR #XR #MR #虚拟现实 #医疗可视化 #3D可视化

“智慧园区管控系统”基于物联网生态体系操控平台架构，利用新一代信息与通信技术来感知、监测、分析、控制、整合园区各个关键环节的资源，使各系统之间互联、共享、智慧，实现了多信息协同联动，为园区安全管理、用户便捷生活、医疗信息化管理提供了有力保障。有效降低了园区运营成本，提高工作效率，加强各类智慧医疗创新、服务和管理能力。

医院楼层管理

基于空间、时间、指标等多维度数据，对院内各楼层环境信息、工作人员、科室挂号人员等数据展开实时动态刷新。同步各楼层科室人员分布、手术室使用情况、水电能耗、监控系统、消防报警等多重信息，创建多参数实时在线监测。全面促进医院各楼层多项业务的深度融合、资源共享、联动控制，达成楼层之间宏观综合监管的目的。

HT 2D 可与 3D 在三维空间无缝融合复用素材资源，点击右侧面板的科室可切换至相对应的科室，对不同科室的环境信息、科室情况、以及科室的具体不同信息都可通过面板进行展示，让医院运维人员更智慧化管理。

逃生路线

各楼层场景逃生路线规划图，可依照 CAD 图纸导入 HT 平台中，并做到醒目的高亮处理，同时还可提供科学的逃生路线指引规划。

CT 检查操作演示

即电子计算机断层扫描（Computed Tomography，CT），它是利用精确准直的 X 线束、γ 射线、超声波等，与灵敏度极高的探测器一同围绕人体的某一部位作一个接一个的断面扫描，具有扫描时间快，图像清晰等特点，可用于多种疾病的检查。通过计算机系统将扫描收集到的信息数据进行贮存运算，图像显示和存储系统，将经计算机处理、重建的图像显示在电视屏上或用多幅照相机或激光照相机将图像摄下。

HT 是基于 HTML5 的 2D、3D 图形渲染引擎，有着丰富的展示形式和效果，案例中我们搭建了 CT 检查时的三维动画演示以及 CT 控制台的操作设置场景。通过 HT 可视化让用户更加直观清晰了解检查的画面场景，也可以利用 HT 来控制 CT 检查时的颜色、切面等信息调整问题。

支持整合医院内 CT 检查室的管理系统数据，对室内外环境、用电情况、设备问题、患者与医师情况等关键信息进行综合监测，提供多种可视化分析手段，辅助管理者综合掌握检查室的各类信息，为医疗资源调配以及病患治疗方案调整提供决策依据。

智能取药

设立智慧药房模块可为医院药房药品的采购、存储、库房、分拣、传送等提供全流程数字化服务。患者进行缴费后，其处方信息会随之传送至发药机端，发药机将根据获取到的所需处方信息自主挑选药品，再通过传送带传送药品至药房窗口，药师只需核对药单即可发放至患者。智慧药房让原本几分钟的处理时长，缩减至十几秒钟解决，大幅度提升了医师繁琐的调配发药效率，缩短患者等候时长，避免取药环节交叉感染的风险。

HT 数据可视化药房直观简洁的管理形式，在很大程度上规范了药品盘点、入库、发放等一系列问题。实现对每盒药品流向追踪、入库类型比例登记、畅销或滞销药品提示、麻醉药品及第一类精神药品“五专”记录管理等多元化功能。智能盘点支持增添自定义趋势查看、数据分析、消耗曲线对比等功能，按需进行多方位并行分析，一改往日人工药品盘点耗时费力且帐货相符率低下的问题。助力医院门诊药房实现精细化、智能化、流程化的管理形式。

选择搭载智能传感器，对存取药柜及药架、加药系统、水平动力药槽和皮带传输系统进行实时设备监测。针对药品缺货、补位、传输带跑偏或急停等多类型问题，系统设有自主分析预判、定位定量补药、异常报警停机、异物智能识别告警等功能，满足面对潜在问题时的急速响应速率。加强药房从药品补位-药品发放的数据闭环，构造一体化感知体系。

科室监测

HT 3D 可视化人体监测板块遵照人体性别差异，采用线框工艺高精度构建还原男女两种三维立体模型。接入人体各部位常见病症库信息后，点击左侧按钮切换不同科室，可在模型对应部位进行病症显示，如显示患者患病部位、仪器检测提示的问题部位、患者主诉部位等数据，同时也为科室远程会诊智能化打下铺垫。支持提供与相关部位症状的查询比对，医生可根据反馈的数据信息对病情风险予以评估和提早干预，科学推断最佳的治疗途径。

点击面板两侧患者信息即可弹出相应的编号、病史、医嘱、药物等相关信息，结合 HT 多样可视化图表，展示所统计出的患者等候时长、实时客流数据或其他信息，根据数据统计有效提升看诊效率。

电子病历

图扑软件智慧医院可视化系统支持集成电子病历，将多源、异构、海量数据进行时空校准，对患者病况、治疗、转归等数据进行多维度综合监控。构建电子档案可视化，一方面提升了医护与患者的就医舒适度和数据地域性分享的局限，另一方面完善了存储信息的能用性，使得医疗数据更加严谨。以智慧服务为抓手，电子病历为核心，强化线上线下诊疗服务一体化，提升患者就医体验。

肺部监测

传统 CT 图像颜色单一、数据量大、处理时间较长且解读难度大。据悉，每位新冠肺炎患者的 CT 影像，从入院拍片评估-查看进展-治愈出院，少则拍片两次，多则拍片四次，而单张片子多达 600 至 800 帧。这对于患者集中的地区，复杂的阅片程序既耗时又费力，很容易让医护人员措手不及。

生命当前，分秒必争。HT 3D 可视化大屏帮助呈现常规器官检测的影像和结果分析，并将对应器官的组织结构进行清晰逼真绘制渲染，以此提供其空间位置和大小、形态等三维特征，在视觉上帮助患者和医生对病理变化情况的生动形象了解。

运用 HT 对肺部进行 CT 图像三维重建技术，精准复现肺叶肺段等局部特征，结合 HT 丰富的图形组件，在大屏中实时呈现双肺肺炎的受累程度、胸肺三维量化分析、人体综合指标等 2D 图表，协助临床医生快速对比分析和规划诊疗方案。为帮助患者对病毒的有效了解，可结合需求设置小窗口视频，根据诊断到的肺部病毒类型及入侵状态，播放相应的科普视频。实现从病灶检出、病情程度判定、结构化智能报告的全流程可视化监管。

充分利用 2D、3D 视觉图像协助医生对组织形态进行综合研判，减少漏诊误诊几率，在减轻工作量的同时提高工作效率，为医生创造全新的工作模式。

手术方案

由于人体内部构造极为复杂且存在个性化、差异化血管变异情况，所以确保术前术中看清、摸透病灶及相连关系是不可或缺的。从技术角度来说，医疗数据可视化的存在提高了审查的效率和观察数据的准确性。

HT 手术方案可视化支持覆盖诊、疗、愈全流程，从医学影像切入，生成心脑血管、肝脏脾胃肺、神经肌骨系统等多部位可分析、可感知、可操作的智能影像。可辅助生成生物组织微血管血流灌注、血流速度、红细胞密度信号在特征频段的三维分布图，自主促进医生对患者身体内部病变组织的直观深入了解。

以骨科手术术前为例，针对肌骨患者可通过设置骨骼的透明化来观察手臂内部静动脉、肌肉、神经的分布位置关系与损伤程度，结合医学影像报告，帮助医生正确判断患者手术诊疗后续。

虚拟仿真手术

针对需要手术的部位，运用 HT 引擎强大的渲染功能结合影像学数据，通过建模模型在虚拟环境下进行虚拟仿真手术，帮助患者切实了解手术过程详情。点击手术部位旋转模型，选择前、后、左、右、上、下等任意角度，多视角、立体化、全方位地观察病症的详细位置关系。虚拟外科手术支持反复操作和修正，可帮助医生降低术中思考决策时间和手术风险，辅助临床治疗实现术前方案预设规划、术中演练和术中指导评估，从而进一步提高手术成功率。

不仅如此，该场景还能为临床教学提供 3D 人体解剖手术训练，帮助直观查看人体结构。HT 支持结合 WebVR 进行展示，通过适配 VR 设备，用户匹配头戴式设备与手柄，实现通过手柄对设备进行抓取、挪动等功能，进行沉浸式手术训练体验。再现病况区域的真实情况，克服了过去教学中学生动手机会少、只看不练的问题，缩短手术学习曲线，高效协同学生理解组织结构及病症特征。

虚拟手术方案可视化较传统手术教学相比，拥有无损伤性、可重复性、可指定性等优势，对医疗信息视觉内容的完整性、准确性、科学性方面都至关重要。

手术情况

心脏：

以冠状动脉旁路移植手术（心脏搭桥手术）为例，心脏三维可视化手术形式可避免以往凭借经验来完成复杂的手术定位。将接收到的心脏超声图像和探头姿态数据进行分析处理，再通过 HT 可视化图像显示获取到的病灶靶点位置关系，医护可通过大屏对画面进行任意缩放、平移、旋转，多时间、全方位、透明化的观察病灶位置、大小、形态及手术详细记录。2D 面板则同步呈现患者的血压心跳、注射针剂及呼吸机、体外循环机、离心泵辅助器所监测到的浓度、血液温度、血流量或设备运作功率等。

不间断地实时监测，在一定程度上避免了心脏搭桥术、瓣膜置换术或某些微创手术术中大出血、呼吸骤停、心律失常等意外的发生。辅助提高手术成功几率，缩短手术时长，也为进一步开展虚拟现实数字智能化诊疗发挥了重要的临床价值。

眼科：

眼部准分子激光手术可视化，是将患者术眼、角膜、医疗机械的三维立体影像呈现于大屏界面之上，联动两侧 2D 面板呈现患者术前的基本检查信息、左右眼角膜地形图、角膜深度分析数据、激光参数以及五维眼球跟踪图，确保沿着轨迹准确实施治疗。激光手术可视化实现从目标监测-多维影像-精准诊疗，为医生打造一站式全新工作体验。

环境：

支持对术中运行指标环节各个方面部署动态监测，如手术室环境（室内温湿度、换气系统）、患者信息（病因、术前体检信息）、患者生命体征监测情况、麻醉详情及术中耗材等方面予以术中信息数据采集，并实时展示于两侧 2D 面板上。当监测值超过标准的临界值时立即呈【橙色】字样并发出告警，告知相关医护人员及时关注应对。

满足医护人员对患者术中状态的实时态势感知、应急处理预案、历史数据回溯等监测需求，更加直观展现记录治疗过程的操作。可随时随地浏览 CT、MRI 及核医学图像，无需移步至专用工作站，即可完成 3D 交互读片和诊断。为日后亟需的远程影像、远程会诊、双向转诊等远程服务，提供上下联动的坚实数据保障。

术后

搭载多类型智能传感器和无线通信技术，整合医院内部医疗系统的设备数据，对入院病情监测、费用支收统计、床位冗余统计，或对患者实施 24 小时全天候的生命体征监测、体液监测、微循环监测等多维度数据监测。同时医护可参考电子病例内容，掌握患者的过往病史、敏感药物、注意事项等医嘱内容，支撑医护人员完成配药计量、输液间隔、护理记录等全流程作业。

应用 HT 创新的 3D 可视化建模技术，搭建远程开关设备可交互式环境，远程操控设备的启停或其他功能。系统可根据预设条件，进行患者术后状态自主监控，当临近设定阈值时立即触发告警装置，通知医护人员及时发现及时前往。

医疗看板

初始场景利用了图扑自主研发的引擎渲染，呈现了酷炫的组态效果，从 Hightopo logo 转变为地球场景，HT 将 2D 和 3D 场景在编辑器上互相嵌套叠加、旋转和缩放，高度组件化无缝融合。

主画面展示

看板模块采用了科幻风格，将医院运营所涉及各类主题中软硬件资源进行集中管理，以二三维可视化的形式将医院的基础设施、手术情况、全球患者情况多维度数字化的进行管理展现。在医疗元宇宙中打造一套医疗统一管理载体。

通过 Hightopo 自研引擎 HT 结合 GIS 呈现球面地图，对整个地球表层空间中的有关地理分布数据进行显示和描述，点击城市高亮部分可显示地点、输入患者数、平均年龄、性别等相关信息。

HT for Web GIS 产品意在解决用户 GIS 类项目的实现，减少用户对 GIS 的学习和投入成本。结合 HT 强大的可视化引擎技术，实现不同的地图瓦片数据、倾斜摄影实景、三维精细化人工建模模型、POI 等数据的叠加展示。颠覆传统的 GIS 系统的开发，让开发变得更加便捷，数据更直观，展现更多样化。

将医疗基础信息通过数据可视化形式一屏展示，更便于对各类手术监测、手术时长、手术统计、床位管理、出院率等信息的了解。案例中，图扑设置了 VAP 预防/发病（VAP 即呼吸机相关肺炎）、血流病感病毒、泌尿感染、重症死亡、压疮发生的手术监测，该内容可针对项目实际情况进行调整修改，以符合每个医院的不同需求。

手术室监测

手术室是医院最繁忙最重要的部门之一，每台手术都牵动着众多人的心，手术中的每一个纰漏都可能造成无法估量的损失。智能化的管理是医院的迫切需求，通过 HT 可视化管理平台将手术信息管理、设备信息管理、科室运营管理等功能模块与医院各信息系统互联互通，并采集各类医疗设备数据，实现多角度、多维度的患者诊疗信息的集中展示与数据分析，辅助医护人员进行诊疗决策以及运维人员对科室进行管理维护。

抬头显示（Head Up Display，HUD），又被叫做平视显示系统，是指以车辆驾驶员为中心、盲操作、多功能仪表盘。把时速、导航等重要的行车信息，投影到驾驶员前面的风挡玻璃上，让驾驶员尽量做到不低头、不转头就能看到时速、导航等重要的驾驶信息。

图扑将 HUD 结合至医疗的数据可视化中，引用其思路，对科室的手术时间，手术台数、房间使用状态、房间闲置状态进行线条形式的展示，辅以 2D 面板将手术总手术量、手术情况、设备巡检、巡检维护数量以及巡检次数、维护率等数据进行展示。

设备结算

医疗设备是指单独或者组合使用于人体的仪器、设备、器具、材料或者其他物品，也包括所需要的软件。

医疗设备不断提高医学科学技术水平的基本条件，也是现代化程度的重要标志，医疗设备已成为现代医疗的一个重要领域。可接入医疗数据库，通过 HT 可视化面板对全球以及本市的输入患者，对今日门诊、急诊人数进行实时展示。对园区内不同区域的设备保修信息与进展进行实时汇总统计，以便运维人员可以更加快速了解设备维修情况。让设备管理人员对不同科室的设备检修费用进行统计管理。对结算的支付方式以及结算统计也进行相应的展示。

机房监控

图扑软件自主研发的 HT 是基于 HTML5 标准技术的 Web 前端 2D 和 3D 图形界面开发框架。提供从 SDK 的 API 组件库到行业图标和三维模型资源库。提供针对监控领域的数据可视化图形组件中间件。具有轻量、高效、易用和跨平台等特性。真正做到了 2D 和 3D 无缝融合，设计师和程序员统一工具协同开发模式，达到产品开发的高速迭代，快速将想法变成 2D、2.5D 和 3D 的最终界面成果。

机房能为管理者提供数据的查询以及能够快速了解机房整体的运行方式，也能够为管理者提供有效的数据依据，假如机房出现了第一异常情报，也能快速的通知管理者和快速的定位来处理方面。机房监控系统的目的就是为了降低人工的成本以及提高机房的安全，为机房提供着 7*24 小时不中断监控，也能确保安全以及保障服务。通过 HT 可视化实现对线路/接口状态、储存空间占用情况、服务器的实时监测、电力系统的剩余情况等机房内所有设备里面运行的情况到整体的监控，并且能够对重点的设备进行内部实时监控与告警预案。

告警情况汇总

机房报警是机房最大的发生事件，在出现故障以及危害之后能够快速的报警来提示管理人员，通过 HT 可视化可以将告警信息如时间、系统名称、告警来源、告警内容、级别进行实时展示，及时的发送报警提示能够缩短故障时间，也能够最大化的防止故障发生现象，也会减少最大的损失。通过计入告警后台对一周内的告警数量进行统计并以数据可视化形式展示。

综合看板

医院的互联互通是通过数据资源标准化建设、互联互通基础设施建设，实现医疗信息共享、资源共享，优化医疗资源配置。

数字化赋能下医院园区综合信息管理解决方案一方面可满足科室内数字化管理的需求，全面涵盖年综合统计、在线咨询统计、突发事件处理情况、每日挂号统计数量、人员管理、科室医院统计等信息的数字化；另一方面也满足全院各科室、各部门间的信息共享和质控管理需求。比如人员、科室、病历、药品、设备费用信息的共享、调阅和联动。

结合 HT 可视化让综合信息更加多样化展示，实现资源透明化管理与共享。也可以通过面板直接搜索科室人员的值班等信息，便于管理者统一管理与资源调配。

在“互联网+”的时代背景下，瞄准现有医疗痛点，以数据为驱动，以“感、知、行”为核心，大力推进智慧医院设施设备之间的互联融合、开放共享，打破时间和空间上的壁垒，实现患者与医务人员、医疗设备、医疗机构之间的互动。

图扑软件（Hightopo）数据可视化助力医院在集中监控、辅助决策、安防管理、业务联动等多层面，构建感知、融合、分析、决策、执行、安全的统一管理，提升医院现代化管理水平和品牌服务形象。以优质、安全、便利的诊疗方式，实现医疗资源下沉，逐步形成医疗、服务、管理一体化的智慧医院系统。

审核编辑：彭菁

数据可视化渲染引擎研发图形