1. 程式人生 > >基於HTML5技術的電力3D監控應用(一)

基於HTML5技術的電力3D監控應用(一)

最近參與了國網計量中心的四線一庫自動化檢定系統的專案開發,團隊封閉開發了大半年終於快到尾聲了,整個專案過程實在非常累,我的mentor楊楊老師是這樣描述的:累的不想說話了。我估計是我太渴望新知識,整天不斷問他問題把他搞煩了。

對我這種新人來說還是相當充實的,整個系統需要和硬體廠家對接採集硬體資料,需要和實時資料庫廠家對接實時資料,需要和視訊廠家對接視屏介面元件,還要和國家電網的業務專家請教業務知識,我從只會寫程式碼的程式設計師慢慢變得也喜歡和人打交道了。

對於我最有意義的是我終於可以真正從事基於HTML5技術的開發了,以前呆過幾家網際網路公司總要痛苦的去做相容IE6、7、8的無趣事情,每天看到HTML5技術的日新月異而我卻只能望梅止渴,現在做回企業應用開發,雖然老同事笑我從toC降級做toB,但我自己倒覺得能用上HTML5技術是升級,並且在專案介面呈現上我們採用了HT for Web(www.hightopo.com
)的基於WebGL的3D引擎框架,讓我們整天面對CRUD的企業應用,增加了很大的3D應用亮點,搞得很多其他部分同事因為能參與3D的開發很想加入我們專案組,這個HT for Web只有100多k的精巧引擎實在讓我驚歎,我們團隊嘗試過threejs和unity3d等多種解決方案,最終選型用HT的引擎這個最適合企業應用的框架,現在專案如此順利的完成,不得不說我們團隊的選擇還是非常正確的,先展示幾張專案的現場抓圖:




HT的培訓師還是很有愛的,專案初期一天的培訓就讓我們能快速做出各種3D場景,後來在領導的要求下他們又增加了對HTML5和3D基礎深入培訓,讓我們這些門外漢很快就能掌握HTML5和3D的很多技術知識點,並且能將這些知識融合到專案做出各種特效。

HT for Web的3D引擎設計很獨特,完全用面對物件的模式來開發三維場景,將常規2D圖形元件的
Model-View-Presenter (MVP) 
設計模式與3D引擎融合一體,這種完全可以控制模型所有屬性事件變化的模式還是很獨創的,記得剛開始培訓師我還班門弄斧的問HT的培訓師:你們HT for Web的引擎開發的系統FPS(Frames Per Second)能達到多少,還好他們沒有鄙視我,他們很自豪的告訴我他們的FPS常為0,因為HT基於MVP的設計模型可監控所有屬性變化,因此如果模型沒有變化時,無需進行傳統3D引擎那樣無謂的重新整理,這點也印證他們一直強調的HT最適合企業應用開發的特點。

能跑在移動終端也是我們選擇HTML5基於以及HT for Web框架的原因之一,我特意測試了用HT寫的例子和用其他引擎寫的例子跑在我的Nexus 7的第二代Android平板上,果然用HT寫的例子耗電非常少,其他引擎寫的例子很容易就耗掉了我小板子的很多電量。不過雖然HTML5跨平臺聽起來很美,但不同移動平臺對HTML5的支援還是有有些不足和差異的地方,不過使用了HT後這些問題大部分被框架搞定了,我們不必再經歷相容IE678的痛苦。