基于HTML5的WebGL电信网管3D机房监控应用

上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房:

http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html



随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网管应用几乎一致性的首选HTML5,当然Flex和Silverlight的遗留系统依然存活着,如果不考虑移动终端,不考虑将来维护人员难找,不考虑需要承载成千上万的网元数量,不考虑公司员工的职业生涯前途,哪怕其各自父母adobe和ms都已弃之,其实Flex和Silverlight作为企业应用方案技术上还是可以的,还是能存活很多很多年。

但我作为程序员可是要考虑自己的职业生涯的,可能有人喜欢成为能维护CORBA或IBM大机那样的稀有物种得到高薪,我还是喜欢朝气蓬勃的技术氛围,我喜欢每天上Hacker News都能见到讨论我从事的技术的新鲜事,我喜欢有搞通用组件有SenchaKendoui可选择,搞图表有Highcharts可选择,搞2D拓扑和3D机房有Hightopo可选择,搞移动应用有JQuery Mobile可选择,每周末到徐家汇公园那个照的到太阳看得见湖色几乎成为我私人定制的木凳,打开平板好好通读这一周Web前端发送的一切新鲜事,是的我有JavaScript WeeklyHTML5 WeeklyModern Web Observer可选择,我很庆幸自己活在这个HTML5时代,可以用一门javascript语言技术玩通用组件,玩Chart,玩拓扑,完3D,是的还可以玩后台NodeWeekly,再说了不成为稀缺动物,就玩HTML5不也照样拿高薪,有选择的条件下何苦让自己成为恐龙古董。

回到今天正题,随着去年后半年来IE11和Android浏览器支持WebGL之后,WebGL技术在我接触的行业领域已成燎原之势。什么?还得考虑支持OA老系统的IE678,Chrome Frame插件早就可以让IE678910跑WebGL了,更不用说HTML5的2D的Canvas。什么?性能问题,可看看HT for Web 跑数万网元的操作体验视频

什么?兼容性问题,这些问题就交给各种框架来解决,HTML5的3D引擎非常多threejs是知名度较高的,但较臃肿大好几百k的包,什么功能都触及但都做不深入,动画引擎像玩具,做游戏引擎又缺碰撞检测,这点上不及后起之秀babylonjs,最早吸引我的是注意的是介绍babylonjs的这段话 I am a real fan of 3D development. Since I was 16, I spent all my spare time creating 3d engines with various technologies (DirectX, OpenGL, Silverlight 5, pure software, etc.). 这段话老让我郁闷的回忆自己16岁在干吗?

我喜欢babylonjs主要因为他专注游戏引擎的定位,同样企业应用我选择Hightopo的HT for Web 3D引擎,毕竟企业应用和游戏功能、性能、渲染效果等方面考虑的是不一样的,没有一个引擎能解决所有行业的所有问题,干活还得找最对口的工具,Hightopo的3D引擎包很小,核心3D引擎只有几十k,融合通用组件和2D的整体包也才200多k,另外HT的整体开发模式用同一个数据模型驱动了通用组件、2D拓扑组件包括3D引擎的组件,对于我做企业应用的Tree、Table这些和图形的联动是很重要的事情,这点做游戏的同学可能体会不到我们这些还得面对一大堆业务表格整体CURD同学的痛苦,另外Hightopo也具备必要的游戏引擎功能,例如全键盘导航操作功能,支持Mobile的Touch交互功能,基本的Collisions Detection碰撞检测。最后Hightopo毕竟专注电信行业,知道电信网管需要什么模块库,他能知道我等每天面对ODF/DDF/MDF/Shelf/Card/Port这些电信业务模型的痛苦点。见此视频

使用Hightopo还有很重要的一点就是HT提供了基于HTML5的可视化设计器,无需借助3ds max和maya这样的专业3D设计工具,直接HT 3D Designer通过页面就能进行3D建模,而动态的数据部分通过API的方式驱动生成模型和实时更新即可,最近的这些项目我们团队不需要美工都能完全由我们程序员自己搞定,当然要做漂亮贴图部分还是需要美工ps的帮助。

就像电信OSS和BSS越来越难清晰定界一样,2D和3D的应用也会如此,越来越模糊,一个系统将2D和3D融合是必然趋势,你中有我我中有你,也许将来我这个文章标题会让人觉得搞笑,机房监控当然要有3D功能了,何必强调3D,没有3D还算是机房监控吗,好比今天的手机,不能上网还算手机吗?

当然Flex、Silverlight还有很多采用Activex的C++引擎也都可以在Web上跑3D的引擎可以支持,但谁能忽视mobile呢,这些年大家受够了Web开发千奇百怪的大杂烩解决方案,每次到运营商客户运维终端看到古老的IE里面跑着各种插件糅合的脆弱系统,各种OA厂家还自鸣得意的支持IE678,还有不少人拿着facebook从html5迁移到native说事,其一那都是过去式了,其二那不是企业应用,Mark Zuckerberg需要的东西和做企业应用的你我是不一样的东西,下一个时代的企业应用技术必将是清清爽爽的HTML5!

http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html

当然3D不是电信网管的专注,以下是我们另一个部门做的太阳能发电、燃气和智能家居行业的3D监控系统应用供参考:

时间: 2024-10-07 05:23:01

基于HTML5的WebGL电信网管3D机房监控应用的相关文章

基于 HTML5 和 WebGL 的地铁站 3D 可视化系统

前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控,本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景,该 3D 场景从正面展示了一个地铁站的现实场景,包括地铁的实时运行情况,地铁上下行情况,视频监控,烟雾报警,电梯运行情况等等,帮助我们直观的了解当前的地铁站. 系统中

基于 HTML5 的 WebGL 技术构建 3D 场景(一)

今天和大家分享的是 3D 系列之 3D 预定义模型. HT for Web 提供了多种基础类型供用户建模使用,不同于传统的 3D 建模方式,HT 的建模核心都是基于 API 的接口方式,通过 HT 预定义的图元类型和参数接口,进行设置达到三维模型的构建.接下来我们就来谈谈预定义的 3D 模型及参数设置. HT 预定义的 3D 模型有:box.sphere.cone.torus.cylinder.star.rect.roundRect.triangle.tightTriangle.parallel

基于HTML5的WebGL呈现A星算法的3D可视化

http://www.hightopo.com/demo/astar/astar.html 最近搞个游戏遇到最短路径的常规游戏问题,一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现,算法基于开源 https://github.com/bgrins/javascript-astar 的javascript实现,其实作者也有个不错的2D例子实现 http://www.briangrinstead.com/files/astar/ ,只不过觉得所有A*算法的可视化实现都是平面的不够

HTML5+WebGL 的加油站 3D 可视化监控

前言 随着数字化,工业互联网,物联网的发展,我国加油站正向有人值守,无人操作,远程控制的方向发展,传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式,即采用数据采集与监控系统 SCADA.SCADA 系统的推广使用,大大提高了我国加油站的监控效率,本文所讲的则是通过对加油站的可视化建模,结合 HT 的 3D 可视化以及 2D 监控面板来实现对加油站的可视化监控.三维可视化监控系统是将三维的可视化技术和数据采集与监控技术融合,充分发挥了两种技术的核心优势,并通过数据库进行数据共享,共同构成

3D机房监控管理方案实现机房智能化!

3D机房监控管理系统,为用户提供直观的3D机房导航拓扑展现,支持3级层次机房导航视图,可以分成机房总导航图.机柜导航图.设备信息图,直观展示机房物理或逻辑部署状态.通过IT运维管理系统实现业务上的整合,将告警信息第一时间反馈给用户,从而保障各设备.业务系统的高效运行,大大降低了业务系统运行中产生的风险. 3D机房系统功能 1.3D实时监控 3D机房系统利用DirectX/OpenGL技术实现顶级图形硬件加速,使得内置的3D引擎,无需借助第三方平台,为用户展现令人惊叹的3D画面来显示设备运行及环境

这应该是我看过最好的3D机房监控系统了!

3D机房可视化技术将多种管理系统的复杂信息融汇在虚拟仿真环境之中,以符合人类直觉的方式自然呈现,从而大大提升了信息交互的效率,降低了信息损耗和时间损耗,确保信息传递的准确性和及时性,降低了信息查询和浏览的难度,使运维管理人员能够大幅提升操控效率,加快响应速度,缩短处理时间. 机房不再需要现实中用脚走过去参观与查看,而是随时随地的以任意一个视角进行切入,比如我想知道核心业务系统的机器分别分布在哪一些机柜之中,或者哪一些机柜空间的空间剩余还是过半的,虚拟3D机房就会直观的通过形象化图景呈现出查询结果

基于 HTML5 的 WebGL 3D 智能楼宇监控系统

前言 智能监控的领域已经涉及到了各大领域,工控.电信.电力.轨道交通.航天航空等等,为了减少人员的消耗,监控系统必不可少.之前我写过一篇 2D 的智能地铁监控系统广受好评,突然觉得,既然 2D 的这么受欢迎,那么 3D 的需求量肯定也是非常大的,3D 毕竟比 2D 来说还是更直观一些,于是有了这个例子以及这篇文章.智能监控系统在 3D 中应用比较广泛的除了 3D 机房以外,我觉得就是楼宇的监控了,可是之前做了很多关于机房方面的 Demo,所以最终决定做 3D 楼宇监控系统. 代码生成 场景搭建

基于 HTML5 的 WebGL 3D 版俄罗斯方块

前言 摘要:2D 的俄罗斯方块已经被人玩烂了,突发奇想就做了个 3D 的游戏机,用来玩俄罗斯方块...实现的基本想法是先在 2D 上实现俄罗斯方块小游戏,然后使用 3D 建模功能创建一个 3D 街机模型,最后将 2D 小游戏贴到 3D 模型上.(ps:最后拓展部分实现将视频与3D模型的结合) http://www.hightopo.com/demo/tetris/ 代码实现 首先,先完成 2D 小游戏 在查看官方文档的过程中,了解到 HT 的组件参数都是保存在 ht.DataModel() 对象

关于3D机房监控系统!

3D机房管理是一个完整的.网络化.可视化的三维虚拟环境设计及展示平台,通过整合机房实时信息及资产信息,真正使IT管理者的管理步入虚拟现实领域,是提供给IT管理者最为直观的一项网络可视化管理工具. 系统采用B/S架构,操作简便,高效易用,通过鼠标即可完成交互操作.以全三维形式表现机房.机柜.动力设备.环境设备等.通过鼠标点击可逐层深入查看机房.机柜.机柜中的设备.设备的面板及端口等.管理员可以以第一视角在机房中行走,逐层查看机房实际展示效果.例如管理员可以打开机架门,鼠标点击可以显示设备的常用信息