谈谈GIS三维渲染引擎
minemap:是我們公司的產品,主要以earth的形態展示,支持矢量切片+傾斜數據(這一點我個人認為是它最大的優點,即兼容了矢量切片精美地圖又兼容傾斜數據,目前傾斜數據采用的3dtile格式),目前正在重構引擎架構,任重而道遠啊,現在官網的案例demo都是早期版本,好多新功能還木有更新,屬實有點汗顏。
MineData?minedata.cn/support/api/demo/javascript-3d-api/zh/map/base/sphere-map-show
cesium:一款開源的三維地圖引擎,國內的大多三維GIS引擎大多基于cesium二次開發,其3dtile標準列入OGC,是唯一具有完備的渲染底層封裝的GIS三維引擎庫,完整的渲染模塊,圖元概念等,cesium的三維概念不同于其他三維GIS引擎,Cesium是以第一人稱相機,其余的都以第三人稱相機。第三人稱相機最大的特點就是有mapCenter的概念,這一點cesium并沒有,目前cesium的矢量切片也在完備,很是期待。對于好多GIS開發人員感覺cesium不好用,傾斜加載效率低。如果對于基礎上手確實不容易,但是對于webgl的功能擴展,它非常好用,關于傾斜最大的優化在于數據,比如draco、crn、ktx2等優化,可以使數據加載與瀏覽的性能極大提升。
https://github.com/CesiumGS/cesium?github.com/CesiumGS/cesium
mapboxgl:矢量切片的王者,也是矢量切片標準的制定者,mapboxgl最大的特點就是其矢量切片(包括其字體,真的是一絕)。mapboxgl的數據切片大量用了webworker,以及數據的合批(在同一個瓦片內的數據頂點數據合并,減少數據的上傳),關于其render模塊,都是以drawXX函數,這一點很扯淡,雖然寫小邏輯很爽,但是擴展很不爽,尤其擴展webgl功能,以前drawXX函數中各種uniform函數,現在倒是給管理起來了(我感覺它應該借鑒了cesium,因為它兩的風格寫的很像)。加載三維能力較弱,如果需要擴展webgl可以通過custom圖層,你需要自己寫著色器、頂點坐標、索引坐標,其實和原生的webgl一樣。有人要說這不是很好,為什么說擴展困難呢?設想一下:如果你加三個box,需要對其中兩個做后處理,怎么做?他沒有圖元的概念,就是一個一個tile,每一個tile中包含所要渲染的數據,這一點讓人很難受。總的來說,其矢量切片真的很值得研究。
https://github.com/mapbox/mapbox-gl-js?github.com/mapbox/mapbox-gl-js
deck.gl:uber的一塊三維地圖引擎,其本身不具有渲染能力,渲染模塊采用的是luma.gl,該哭庫的shader模塊寫的很有特色,包括 glsl100與glsl300轉換, luma.gl的也是uber旗下的,uber旗下還有一個數據加載的庫就是loaders.gl.這個庫主要負責數據加載是一個混合庫,兼顧3dtile、i3s、gltf、pointclout、texture等數據的加載。加載三維能力要強于mapboxgl主要歸功于luma.gl。
https://github.com/visgl/loaders.gl?github.com/visgl/loaders.gl
https://github.com/visgl/luma.gl?github.com/visgl/luma.gl
https://github.com/visgl/deck.gl?github.com/visgl/deck.gl
maptalk:國內大神作品類似于mapbox,目前其擴展三維能力主要靠maptalk.three實現maptalk本身功能完備,其本身的渲染能力(切片、點、線、面)依靠的是regl ,目前在加載傾斜數據上面好像還待優化(應該正在優化,聽Zhen神說的),其插件比較豐富。
https://github.com/maptalks/maptalks.js?github.com/maptalks/maptalks.js
arcgis:GIS領域的老大哥arcgis4.x以上的好像才有三維地球的概念,以前都是二維,好多年不用了,其傾斜數據標準是i3s也是OGC標準。好多人說i3s要優于3dtile,在大數據量的時候才能凸顯,小數據量估計不太明顯。對i3s格式以及加載邏輯研究不多,這里就不多說了,這里有一篇關于arcgis的i3s vs 3dtile的ppt有興趣的可以看看
https://cesium.com/presentations/files/SIGGRAPH2018/Interoperability_of_Tiled_3D_Formats.pdf?cesium.com/presentations/files/SIGGRAPH2018/Interoperability_of_Tiled_3D_Formats.pdf
vts-brower-js:一塊類似cesium的三維可視化引擎,以前一直不知道該引擎,看到github上面項目創建與5年前,但是提交很少,下面是它與cesium的對比,關于不同坐標系的支持,這個還是有點技術含量的其他的就........,關于不同坐標系的支持我猜他是進行了動態的糾偏,因為地球是WGS84剖分你只能按照四叉樹剖分,它也支持加載傾斜攝影,有自己單獨的格式。具體的可參見下面這邊文章:
https://github.com/melowntech/vts-browser-js?github.com/melowntech/vts-browser-js
比Cesium更懂GIS的3D框架VTS Geospatial~?mp.weixin.qq.com/s/ra7zN5a2aQrReUp-YNn6iQ正在上傳…重新上傳取消?
openglobus:也是earth三維開源引擎,目前功能還不夠完善,支持柵格和矢量數據,這個庫給的感覺好像是openlayer的,例如代碼這樣寫:
var osm = new og.layer.XYZ("OpenStreetMap", {isBaseLayer: true,url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",visibility: true,attribution: 'Data @ OpenStreetMap contributors, ODbL'});var globus = new og.Globe({"target": "globus","name": "Earth","terrain": new og.terrain.GlobusTerrain(),"layers": [osm],"autoActivated": true,"viewExtent": [5.56707, 45.15679, 5.88834, 45.22260]});new og.layer.Vector("Markers", {clampToGround: true}).addTo(globus.planet).add(new og.Entity({lonlat: [5.73, 45.183],label: {text: "Hi, Globus!",outline: 0.77,outlineColor: "rgba(255,255,255,.4)",size: 27,color: "black",offset: [10, -2]},billboard: {src: "./marker.png",width: 64,height: 64,offset: [0, 32]}}));單純的og.layer.XYZ感覺有點像openlayer,addTo這種又給人是leaflet的風格,Entity又是Cesium的風格,有點亂哈,這個庫適合學習底層支持,至于用于項目不太推薦,目前引擎支持狀態:
GitHub - openglobus/openglobus: JavaScript 3d maps and geospatial data visualization engine library.?github.com/openglobus/openglobus正在上傳…重新上傳取消?
itowns:一款基于three.js的三維GIS渲染引擎(earth),它這個球感覺操作起來怪怪的,能加載3dtile(效果好像不咋滴)、WFS、切片等,感覺學習一下還好,要是用,還是算了吧,雖然背靠three.js的大樹,我覺得用maptalk.three都比它強,
GitHub - iTowns/itowns: A Three.js-based framework written in Javascript/WebGL for visualizing 3D geospatial data?github.com/iTowns/itowns正在上傳…重新上傳取消?
WebGlobe:國內大神作品,該庫目前不在更新,它得相機是俯視狀態,無法改變俯仰角,給人二維的感覺,這個庫里面得射線求交當前可視范圍與四叉樹剖分可以看看,適合學習。
https://github.com/iSpring/WebGlobe?github.com/iSpring/WebGlobe
二 、自己關于GIS三維渲染引擎的一些看法
關于三維渲染引擎與GIS三維渲染引擎:兩者的側重點不同,三維渲染引擎主要側重渲染的效果,例如pbr、光源加入等著重在還原真實世界的事物,數據多是gltf、obj等。三維GIS引擎側重于數據與精度(個人認為)其次是渲染效果,與渲染引擎不同的是三維GIS引擎涵蓋的數據量較多例如矢量、傾斜、點云等,這些數據量都是很大的,幾百G之大,這一點就對三維GIS引擎的數據的緩存要求很高,要不然瀏覽器動不動就崩潰了,三維GIS引擎著重準確還原事物在真實世界中的位置。
理論上三維GIS引擎應該涵蓋三維渲染引擎,三維渲染引擎作為渲染模塊,提供渲染能力,目前將三維渲染引擎涵蓋里面,寥寥無幾,做的較好deck.gl,其渲染模塊由luma.gl提供,其次Cesium,但是并沒有提煉出整個渲染引擎,更像是渲染庫,有primitive、geometry、Material等概念,并沒有像deck.gl完全獨立出來渲染模塊。為什么要將GIS邏輯與渲染獨立出來?一方面為了降低耦合,另一方面你可以自由的更改渲染模塊,讓GIS三維引擎根據不同的渲染引擎具有不同的特色(例如換成three.js、babylon.js),例如未來切換webgpu,不至于切換那么耗時費力,個人感覺最好不要借助第三方渲染引擎,可以自己寫一個簡單的渲染引擎,然后慢慢的豐富。
關于數據緩存與銷毀:個人認為采用計算geometryBufferSize+textureSize并且結合LRU比較好,這一點參考cesium,其在3dtile上面的數據緩存與銷毀采用上述方法,與單純LRU緩存我覺得前者更為準確,如果在三維GIS引擎中不加載傾斜數據采用LRU緩存策略可能沒有問題,如果加載傾斜模型可能造成內存崩潰,個人認為第一種計算更為合理。
關于自研GIS三維引擎:一塊GIS三維引擎核心的就是柵格切片、矢量切片、傾斜模型。柵格切片實現還好說,矢量切片個人感覺借鑒mapboxgl、傾斜模型借鑒cesium的3dtile那套加載邏輯。借鑒沒有什么好丟人的,有人感覺既然是自研引擎那必須從頭開始寫,自己一行一行的敲下去,借鑒別人的,在別人的基礎之上去改善,難道不是更好?自研GIS引擎要有自己的特色,如果只是抄,那也沒什么意義。
關于相機:對于GIS三維引擎,整個場景僅需要一個相機。相機分為第三人稱相機和第一人稱相機,第一人稱相機:cesium,第三人稱相機mapboxgl、deck.gl等。第一人稱相機結合四叉樹可以完全控制整個場景的數據加載,第三人稱相機需要結合center,也是地圖中心點。第三人稱相機類似還是二維的概念切片加載需要計算當前窗口的地理范圍配合zoom,計算需要加載的切片,第一人稱相機需要借助幾何誤差(相機距離物體的距離),也就是lod,在三維世界中第一人稱相機更為合適?為什么這么說呢,例如加載地形,在第三人稱相機,在珠穆拉瑪峰正上方看珠峰峰頂,你會發現珠峰峰頂是模糊的,你相機基本放在峰頂離得很近為什么還是模糊的,理論上應該很清晰啊。這是因為此時zoom很小,如果此時zoom為4,而理論上你應該看到的是zoom為8的數據,如果用第一人稱相機+四叉樹lod方式就不會出現這種情況。
關于渲染效果:在我們印象中GIS三維引擎的渲染效果很差,和純三維渲染引擎沒法比,一方面是兩者的側重點不同,另一方面GIS三維引擎本身的渲染能力很弱,像渲染引擎中的后處理、法線貼圖等都不具備。這也是我為什么想把渲染模塊與GIS邏輯分析,這樣更好的擴展渲染能力,對一些小場景GIS三維引擎有能力做出較好的渲染效果(web端)。
做出來功能很容易,做好真的很難!!!!
以上是自己對web端GIS三維引擎的一些看法,小弟才疏學淺,難免有錯,望各位看官指出不足之處,以免誤導他人
總結
以上是生活随笔為你收集整理的谈谈GIS三维渲染引擎的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Nginx防盗链的实现原理和实现步骤
- 下一篇: 地图数据快速渲染------基于传统GI