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

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

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


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

但我作为程序员可是要考虑自己的职业生涯的，可能有人喜欢成为能维护CORBA或IBM大机那样的稀有物种得到高薪，我还是喜欢朝气蓬勃的技术氛围，我喜欢每天上Hacker News都能见到讨论我从事的技术的新鲜事，我喜欢有搞通用组件有Sencha和Kendoui可选择，搞图表有Highcharts可选择，搞2D拓扑和3D机房有Hightopo可选择，搞移动应用有JQuery Mobile可选择，每周末到徐家汇公园那个照的到太阳看得见湖色几乎成为我私人定制的木凳，打开平板好好通读这一周Web前端发送的一切新鲜事，是的我有JavaScript Weekly、HTML5 Weekly和Modern 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！

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