天天看點

純Shading Language繪制飛機火焰效果

純Shading Language繪制飛機火焰效果
純Shading Language繪制飛機火焰效果
純Shading Language繪制飛機火焰效果

當然這樣疊加會導緻火焰始終在最上層,無法真實反映三維空間層次的問題,但作為監控系統應用最關鍵的是展示重要名額,例如對于電信網管應用,當裝置有告警冒泡呈現時,往往要求告警冒泡要呈現在最上層不要被其他裝置遮擋住,同樣如果真的飛機失火需要監控系統實時提示該告警資訊時,肯定也是需要該火焰不被遮擋,是以真實世界的層次瑕疵在這裡反而是合适的解決方案。

純Shading Language繪制飛機火焰效果

疊加Canvas到Graph3dView比較容易,通過Graph3dView.getView().appendChild(canvas)加入,并在Graph3dView布局時同時布局Cavnas位置大小,火焰的位置我們是這樣實作的,将一個隐藏的node節點host到飛機的尾部,這樣該節點會自定跟随飛機飛行過程的位置變化,繪制時火焰時我們通過Graph3dView#toViewPosition函數将node三維坐标轉換成二維的螢幕Cavnas的坐标,這還沒完我們還得将螢幕坐标轉換成WebGL驅動的Canvas的POINT點坐标,相關代碼如下:

以上代碼我們還傳入了intensity的強度參數,該參數我們通過ht.Default.startAnim動畫函數,控制其值在0~4之間不斷來回變化,這樣可達到火焰有小變大來回變換的類似告警閃爍提示效果。還有var devicePixelRatio = window.devicePixelRatio;參數也是容易被忽略的細節,該值會根據裝置的retina支援程度有不同的值,避免在高分辨率裝置下出現鋸齒模糊的問題,當然通過devicePixelRatio增大canvas.width和canvas.height也是有記憶體繪制性能代價的,如果效果要求不是太高情況下也可以都采用1來處理,其實要求不太高的三維場景即使時retina為3的iphone 6強制用devicePixelRatio為1的方式也不會有太大問題,并且能節省記憶體提高繪制性能,某些低性能的終端某些情況下甚至可以再降級到小于1的值以犧牲效果換取性能。

純Shading Language繪制飛機火焰效果