基於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都能見到討論我從事的技術的新鮮事，我喜歡有搞通用組件有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！

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

固然3D不是電信網管的專一，如下是咱們另外一個部門作的太陽能發電、燃氣和智能家居行業的3D監控系統應用供參考：