隨著Html5技術的興起，Web端的應用開始深入各行各業，交通行業當然也不例外。2011年，WebGL1.0標準重磅推出，讓網頁應用進入了3D時代?；诰W頁的三維可視化系統應運而生，越來越多的應用被客戶要求轉到Web端?；诰W頁是相對于PC版的C/S架構而言的B/S架構；三維可視化是相對二維空間渲染技術而言通過三維空間渲染技術實現的可視化。

WebGL（全寫Web Graphics Library）是一個JavaScript API，可在任何兼容的Web瀏覽器中渲染高性能的交互式3D和2D圖形，而無需使用插件。WebGL 1.0，基于OpenGL ES 2.0，并提供了3D圖形的API。它使用HTML5Canvas并允許利用文檔對象模型接口。

1. 瀏覽器

目前支持WebGL的瀏覽器有：Firefox 4+,Google Chrome 9+，Opera 12+，Safari 5.1+，Internet Explorer 11+和Microsoft Edge build 10240+。瀏覽器方面，影響性能的主要是內存限制和對WebGL的兼容性。

（1）內存限制 

瀏覽器對所能使用的內存極限都有限制，64位的最多可達到4G的內存，而32位少的可憐僅為1.0GB。

（2）WebGL兼容性 

主流瀏覽器對WebGL1.0的兼容性情況列表如下，IE和Edge對WebGL1.0的支持最差，需要調用專用接口才能使用。

以下是主流瀏覽器對WebGL2.0的兼容性情況列表，WebGL2.0都出來好多年，Edge還是低頭了，IE、Safari居然還不支持，市場占有率不低就怪了。

2. GPU

WebGL一些特性也需要用戶的硬件設備支持，尤其是GPU。比如 S3 紋理壓縮 (S3TC) 只在基于NVIDIA Tegra（圖睿）的GPU的設備上可用。

3. 前端開發框架

現在很多項目為了短平快，很少用原生JS寫前端，都會選擇公開的前端開發框架，比如Vue、React、Angular等等。不同的三維可視化引擎對開發框架的支持不盡相同，所以建議集成商或開發商選型時一定要考慮兼容性問題，尤其是不能各個子系統用不同的開發框架，否則后期再改很麻煩。

以上三點對三維可視化系統性能造成的影響，我們想說這鍋真背不了，請你用64位的Chrome和JS原生框架（經驗之談）以及游戲獨顯（具體品牌就不推薦了）。

4. 三維數據制作

一般的三維數據處理與發布都是按照采集、建模、導出、切片、發布、應用，具體流程如下：

重點說一下數據建模，因為影響渲染效率跟數據建模有很大關系，三維渲染里有一個指標就是頂點數和面片數，數量越大占內存越大運算量也越大（具體原理要展開的話可以單獨寫一篇了，私下討論哈）。

（1）    模型的精細程度

一般情況下數據的生產都是在專業的建模軟件中完成，比如對于人工建模的平臺就是3d Max，傾斜數據生產的平臺就是ContexCapture等，這是從原始數據到模型的構建。

可能大家經常聽到精模、低模（也稱簡模）、白模，這里的模可不是嫩模的模哈，特指三維模型的模。以標牌為例解釋一下，精模就是盡量把標牌上大于0.5米的所有細節都表達出來，簡模就是簡單地在標牌兩面貼上材質。白模是指不貼材質的三維模型，以建筑物為例，通常是把建筑物的二維面按照樓高拔成一個簡單的白色或灰色盒子。

模型的精細程度越高，頂點數和面片數越大，對內存和GPU顯存的消耗越大。這實際上對三維建模師提出了一個命題，在保證效果的前提下怎么用最少的頂點和面片表達同一個物體。

這里還得說說3DRoad，自動把二維的CAD設計圖紙生成三維道路的過程中，程序已經考慮了如何組織讓頂點數和面片數最少。

（2）    紋理和材質

關于紋理和材質，可以從貼圖大小、光照、展UV、烘焙多方面展開，這里不一一贅述。紋理和材質的好壞既決定加載效率又決定渲染效果，所以對三維建模師的要求還是非常高的，表以為隨便招個3dmax培訓生就能干了，沒有歧視的意思，主要想表達這是專業人士的活。

另外，盡量以色彩代替材質，如果是純色感覺的物體，盡量以大貼圖的altas通過uv的框定來設置色彩，這樣就能以盡量少的draw來繪制場景，對性能有巨大幫助。

5. 三維可視化引擎

現在國內三維可視化引擎真可謂琳瑯滿目，甚至有一些做應用開發的廠商也開始擁有引擎。不是不可以，出于對客戶負責任的角度，建議還是要選用專業廠商研發的引擎，否則后患無窮。沒有專業的測試，沒有產品迭代的規劃，沒有專門的售后，怎么可以稱之為產品呢？當然，如果你的東西只是為了給領導show一把就沒有然后也是可以的。

6. 應用開發

最后說說應用開發，主角當然是程序猿。我經常跟他們說能否考慮下用戶的視覺感受，總說客戶是上帝。程序猿總以實現功能為目標，以為功能實現了客戶就會愉快地付錢了，哪知道客戶看到系統時常浮現各種小龍女的畫面。

你就不能按照設計師設計的UI調整下界面有時就差幾個像素，不能問下UI設計師渲染顏色RGB值是多少，不能給數據做下LOD（分級顯示），不能打開實時陰影，不能加上波光粼粼的水面嗎 …

結語

系統加載效率高與不高，渲染效果好與不好，客戶基于網頁的三維可視化需求就在那里。這是一個用腳投票的時代，告訴客戶需要他們做的（瀏覽器、獨立顯卡、開發框架），把握我們能把握的，不斷地從細節（三維模型、三維可視引擎、應用開發）去優化去完善滿足客戶的要求我們就可能贏。

 

（文章轉載自網絡，侵刪）