基于WebGL的三维大屏可视化技术实践 thingjs 3d 开发

DataV, 腾讯云图,帆软等可视化大屏应用厂商,都提供三维可视化分析工具。ThingJS是近两年新兴的3D可视化开发组件,助力物联网3D可视化的未来发展。新基建浪潮汹涌,智慧城市建设也到了落地阶段,不再是纯粹的概念,很多物联网技术开始崭露头角,相较于之前的低调行为,3D可视化领域有何变化呢?

以前

三维可视化城市大屏应用属于保密项目,CVS(可视化展示服务)系统部署在安全消防、城市交通、智慧工厂、城市管理等运营管理客户端,属于小众需求,随着云模式部署比例加大,大屏应用支持可视化组件进行监控画面搭建,中小开发团队有机会入场,云端共享各行业的“示例”开发资源,加速3D可视化开发。

现在

CVS系统基于HTML5技术构建,运行于浏览器环境中,大屏应用基于Webgl开发3D效果,thingjs提供一站式在线开发服务,一键发布3D项目。用户不需要安装任何插件或客户端软件,可以直接访问URL地址在浏览器中设计工业监控画面,具有极大灵活性。
基于WebGL的三维大屏可视化技术实践 thingjs 3d 开发
演示地址

ThingJS系统采用B/S架构,基于webG绘图技术标准,提供一套基于Web浏览器的3D可视化平台组件,支持HTML5/SVG等最新技术,为开发人员制作符合用户使用习惯的大屏可视化应用,包括2D图表分析、3D建筑实景等相关内容,能够在可视化界面进行详略操作,控制实时数据及动画展示、历史回放、报警、命令下发等功能。

运行环境主要是最终配置好的监控画面运行相关的功能集合,包括实时数据及动画展示、历史回放、报警、命令下发等功能。在运行环境中会在浏览器窗口中加载用户所创建好的画面,并根据屏幕实际大小进行自适应缩放,同时根据用户设置的刷新周期进行数据获取和元素渲染,实现对设备的远程监控、诊断维护和故障预警。
基于WebGL的三维大屏可视化技术实践 thingjs 3d 开发

项目交付初期可以跨平台终端(PC/手机/浏览器)展示和访问,最大化演示效果。使得整套系统可以获取最全面的信息,用户只需要一个浏览器便可以掌控整个系统运行情况,极大满足随时随地监控的需求,从而能够更加从容处理各种突发情况。

基于WebGL的三维大屏可视化技术实践 thingjs 3d 开发

ThingJS用于构建大屏可视化应用2D/3D效果,属于物联网可视化“最后一公里”,比起纯粹的炫酷效果,用户更希望所有信息都可以实时到达终端界面,最大限度降低人员操作的延迟,提升工作效率。为了让开发者有精力处理更重要的数据可视化分析内容,ThingJS平台提供了可靠的3D开发步骤(场景搭建-3D开发-数据接入-项目部署),大幅降低开发成本,可视化效果保质保量,让“最后一公里”不掉队。

1. 基于城市级、园区级场景的组态设计

CityBuilder城市级、CampusBuilder园区级场景设计器使用SVG技术,采用图形拖拽、属性设置等操作搭建3D场景,加入2D图表进行可视化分析。使用thingjs自带chartbuilder编辑器,或者导入echarts等BI软件,基于城市基础数据加入专业的趋势和报警控件。

2. 自定义的3D开发生态

thingjs支持使用 Java Script脚本语言实现事件监听、命令下发等操作,3D源码示例易用性强,使得用户能够快速上手,用最短的学习时间搭建专业级的3D动画,效果直观。

3. 多平台项目管理方式

值得一提的是,数据安全性、操作有效性是项目开发过程中的核心要求。完成3D场景开发,接下来应该接入实时数据源,接收物联网设备传感信息。thingjs提供统一的框架接口,支持多种数据格式如JSON 、OBJ、 Collada、STL。为了更好地对接企业中已有的系统和大数据环境,thingjs支持两种部署模式:在线部署(即云模式)和离线部署。

云模式针对大数据云环境的部署,可以跟大数据PDS(Process Data Service)对接,一键在线发布项目。离线部署在局域网的客户端进行私密部署,通过不同数据代理接入不同系统数据进行展示。

4. 跨系统多终端访问

用户的访问操作跨终端跨平台,项目一般会采用多套系统完成整体实施,因此画面的跨系统访问性也非常重要。为了满足项目演示、协作和分享需求,thingjs提供了iframe分享功能,用户可以生成画面的唯一URL链接和二维码,,可以直接在其他Wcb系统嵌入该画面进行展示。
基于WebGL的三维大屏可视化技术实践 thingjs 3d 开发

关于ThingJS
优锘thingjs平台【官网注册地址】在腾讯总部大厦、阿里云IOT平台、dataV开发平台均有技术合作,平台有15万个开发者入驻,其应用布局教育、电力、工业、智慧城市和安防多个领域标杆项目,3D众创开发扩展技术获得社会认可。

基于WebGL的三维大屏可视化技术实践 thingjs 3d 开发

上一篇:webgl智慧楼宇发光系列之线性采样下高斯模糊


下一篇:关于webgl数据传输加密/解密的猜想