基於HTML5的電信網管3D機房監控應用

先上段視訊，不是在玩遊戲哦，是規規矩矩的電信網管企業應用，嗯，全鍵盤的漫遊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監控系統應用供參考：