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

逻辑聆风使
• 阅读 2747

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建筑实景等相关内容,能够在可视化界面进行详略操作,控制实时数据及动画展示、历史回放、报警、命令下发等功能。

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

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

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系统嵌入该画面进行展示。

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

点赞
收藏
评论区
推荐文章
徐小夕 徐小夕
4年前
基于React+Koa实现一个h5页面可视化编辑器
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价值。本篇文章并非和数据可视化相关,而是通过抽象技术底层,将其应用于H5页面可视化搭建上,通过技术的手段实现拖拽式生成H5页面。这块也有非常多的应用场景,比如我们需要开发一个移动端网站,一
Stella981 Stella981
3年前
Canvas和SVG的区别
Canvas和SVG是html5支持的两种可视化技术。基于这两种技术,诞生了很多可视化工具。Echarts是基于Canvas技术的可视化工具,底层封装了原生的JavaScript的绘图API。我们很容易联想到另一个同样很优秀的web前端可视化库D3,D3是也最流行的可视化库之一,它被很多其他的表格插件所使用。D3底层基于SVG技术,与Canvas完全不
Wesley13 Wesley13
3年前
5G“乍到”,图扑带你了解室内定位可视化的实现与新突破
前言现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患,在传统的可视化监控领域,一般都是基于WebSCADA的前端技术来实现2D可视化监控,本系统采用Hightopo的HTforWeb产品来构造轻量化的3D可视化场景,该3D场景从正面展示了一个现代化工厂的现实场景,室内定
三维可视化技术软件开发好不好?3D展示制作费用华锐互动
什么是?三维可视化技术可以用在现实生活中哪些场景?从目前趋势来看,三维可视化技术的发展前景是非常不错的。它所应用的领域也是非常广泛的,比如可以运用在建筑,粮仓,港口,园区安防,消防,还可运用于城市应急数据管理,乡村农业,交通等多领域,在基于多媒体技术、网络技术以及三维镜像技术的手段下实现了数据处理的虚拟化,通过对数据进行全方位的监控,构建基于现实的3D虚拟现
3d可视化有哪些功能_3d可视化平台搭建_华锐互动
即一种利用计算机技术,再现三维世界中的物体,并能够表示三维物体的复杂信息,使其具有实时交互的能力的一种可视化技术,是对现实世界的真实再现。通过3D结合信息交接、物联网技术控制、安全、可靠、实时显示、简易操作等物理实体技术。将园区、工业、建筑、设施等基本数据、详细的展现,结合智慧城市模型,提高城市环境、城市管理、城市设备、城市防灾、城市设备、城市消防可视化改造
taskbuilder taskbuilder
9个月前
TaskBuilder简介
1、TaskBuilder的定位随着这两年“低代码”概念的火爆,现在市面上出现了很多所谓的零代码和低代码开发平台,其中有大厂商建设的云平台级低代码,涵盖的范围很广,也有专注某些领域的低代码,例如建站、小程序开发、APP开发、可视化大屏、数字孪生、物联网组态