隨著Html5技術(shù)的興起，Web端的應(yīng)用開始深入各行各業(yè)，交通行業(yè)當(dāng)然也不例外。2011年，WebGL1.0標(biāo)準(zhǔn)重磅推出，讓網(wǎng)頁應(yīng)用進(jìn)入了3D時代。基于網(wǎng)頁的三維可視化系統(tǒng)應(yīng)運(yùn)而生，越來越多的應(yīng)用被客戶要求轉(zhuǎn)到Web端。基于網(wǎng)頁是相對于PC版的C/S架構(gòu)而言的B/S架構(gòu)；三維可視化是相對二維空間渲染技術(shù)而言通過三維空間渲染技術(shù)實現(xiàn)的可視化。
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+。瀏覽器方面，影響性能的主要是內(nèi)存限制和對WebGL的兼容性。
（1）內(nèi)存限制
瀏覽器對所能使用的內(nèi)存極限都有限制，64位的最多可達(dá)到4G的內(nèi)存，而32位少的可憐僅為1.0GB。
（2）WebGL兼容性
主流瀏覽器對WebGL1.0的兼容性情況列表如下，IE和Edge對WebGL1.0的支持最差，需要調(diào)用專用接口才能使用。
以下是主流瀏覽器對WebGL2.0的兼容性情況列表，WebGL2.0都出來好多年，Edge還是低頭了，IE、Safari居然還不支持，市場占有率不低就怪了。
2. GPU
WebGL一些特性也需要用戶的硬件設(shè)備支持，尤其是GPU。比如 S3 紋理壓縮 (S3TC) 只在基于NVIDIA Tegra（圖睿）的GPU的設(shè)備上可用。
3. 前端開發(fā)框架
現(xiàn)在很多項目為了短平快，很少用原生JS寫前端，都會選擇公開的前端開發(fā)框架，比如Vue、React、Angular等等。不同的三維可視化引擎對開發(fā)框架的支持不盡相同，所以建議集成商或開發(fā)商選型時一定要考慮兼容性問題，尤其是不能各個子系統(tǒng)用不同的開發(fā)框架，否則后期再改很麻煩。
以上三點對三維可視化系統(tǒng)性能造成的影響，我們想說這鍋真背不了，請你用64位的Chrome和JS原生框架（經(jīng)驗之談）以及游戲獨顯（具體品牌就不推薦了）。
4. 三維數(shù)據(jù)制作
一般的三維數(shù)據(jù)處理與發(fā)布都是按照采集、建模、導(dǎo)出、切片、發(fā)布、應(yīng)用，具體流程如下：
重點說一下數(shù)據(jù)建模，因為影響渲染效率跟數(shù)據(jù)建模有很大關(guān)系，三維渲染里有一個指標(biāo)就是頂點數(shù)和面片數(shù)，數(shù)量越大占內(nèi)存越大運(yùn)算量也越大（具體原理要展開的話可以單獨寫一篇了，私下討論哈）。
（1） 模型的精細(xì)程度
一般情況下數(shù)據(jù)的生產(chǎn)都是在專業(yè)的建模軟件中完成，比如對于人工建模的平臺就是3d Max，傾斜數(shù)據(jù)生產(chǎn)的平臺就是ContexCapture等，這是從原始數(shù)據(jù)到模型的構(gòu)建。
可能大家經(jīng)常聽到精模、低模（也稱簡模）、白模，這里的模可不是嫩模的模哈，特指三維模型的模。以標(biāo)牌為例解釋一下，精模就是盡量把標(biāo)牌上大于0.5米的所有細(xì)節(jié)都表達(dá)出來，簡模就是簡單地在標(biāo)牌兩面貼上材質(zhì)。白模是指不貼材質(zhì)的三維模型，以建筑物為例，通常是把建筑物的二維面按照樓高拔成一個簡單的白色或灰色盒子。
模型的精細(xì)程度越高，頂點數(shù)和面片數(shù)越大，對內(nèi)存和GPU顯存的消耗越大。這實際上對三維建模師提出了一個命題，在保證效果的前提下怎么用最少的頂點和面片表達(dá)同一個物體。
這里還得說說3DRoad，自動把二維的CAD設(shè)計圖紙生成三維道路的過程中，程序已經(jīng)考慮了如何組織讓頂點數(shù)和面片數(shù)最少。
（2） 紋理和材質(zhì)
關(guān)于紋理和材質(zhì)，可以從貼圖大小、光照、展UV、烘焙多方面展開，這里不一一贅述。紋理和材質(zhì)的好壞既決定加載效率又決定渲染效果，所以對三維建模師的要求還是非常高的，表以為隨便招個3dmax培訓(xùn)生就能干了，沒有歧視的意思，主要想表達(dá)這是專業(yè)人士的活。
另外，盡量以色彩代替材質(zhì)，如果是純色感覺的物體，盡量以大貼圖的altas通過uv的框定來設(shè)置色彩，這樣就能以盡量少的draw來繪制場景，對性能有巨大幫助。
5. 三維可視化引擎
現(xiàn)在國內(nèi)三維可視化引擎真可謂琳瑯滿目，甚至有一些做應(yīng)用開發(fā)的廠商也開始擁有引擎。不是不可以，出于對客戶負(fù)責(zé)任的角度，建議還是要選用專業(yè)廠商研發(fā)的引擎，否則后患無窮。沒有專業(yè)的測試，沒有產(chǎn)品迭代的規(guī)劃，沒有專門的售后，怎么可以稱之為產(chǎn)品呢？當(dāng)然，如果你的東西只是為了給領(lǐng)導(dǎo)show一把就沒有然后也是可以的。
6. 應(yīng)用開發(fā)
最后說說應(yīng)用開發(fā)，主角當(dāng)然是程序猿。我經(jīng)常跟他們說能否考慮下用戶的視覺感受，總說客戶是上帝。程序猿總以實現(xiàn)功能為目標(biāo)，以為功能實現(xiàn)了客戶就會愉快地付錢了，哪知道客戶看到系統(tǒng)時常浮現(xiàn)各種小龍女的畫面。
你就不能按照設(shè)計師設(shè)計的UI調(diào)整下界面有時就差幾個像素，不能問下UI設(shè)計師渲染顏色RGB值是多少，不能給數(shù)據(jù)做下LOD（分級顯示），不能打開實時陰影，不能加上波光粼粼的水面嗎 …
結(jié)語
系統(tǒng)加載效率高與不高，渲染效果好與不好，客戶基于網(wǎng)頁的三維可視化需求就在那里。這是一個用腳投票的時代，告訴客戶需要他們做的（瀏覽器、獨立顯卡、開發(fā)框架），把握我們能把握的，不斷地從細(xì)節(jié)（三維模型、三維可視引擎、應(yīng)用開發(fā)）去優(yōu)化去完善滿足客戶的要求我們就可能贏。
（文章轉(zhuǎn)載自網(wǎng)絡(luò)，侵刪）