前言
Cesium 1.56對Resource.fetchImage進行了改進，從而降低了圖片解碼造成的頁面卡頓。Cesium 1.57對3d tiles的加載性能進行了大量改進，提升了3d tiles數(shù)據(jù)的瀏覽體驗。以下分別闡述。
Resource.fetchImage改進
Cesium 1.56版對Resource.fetchImage進行了性能改進，對于三維場景中有大量紋理貼圖的模型數(shù)據(jù)，這是個好消息。它會大大降低頁面卡頓現(xiàn)象，同時在一定程度上縮減了場景加載時間。左側(cè)的自行車是使用新方法加載的，對比來自于這里。
此次改進則是通過使用createImageBitmap方法，把原先需要在主線程進行的圖像解碼操作移到了工作線程中。渲染一個三維場景時，不可避免的需要用到大量圖片（紋理）。而圖片解碼是一個阻塞式的耗能操作，更要命的是此前Cesium只能在主線程中進行此項工作。Resource.fetchImage的改進，使得圖片解碼工作和主線程并行，不會影響主線程上的交互操作，從而大大削減了頁面卡頓的現(xiàn)象，而且因為是并行操作，在一定程度上會削減場景加載時間。
那么如何使用這項性能改進呢？
我們一般通過以下方式來加載圖片：
Resource.fetechImage({url: xxx})
Cesium為了保持版本兼容性（實際上1.56版改進過于激烈，所以1.56.1版才改成這種兼容模式），如果使用上述方法，和之前的老版本一樣，并不會得到性能上的提升，而需要以下新的方式：
Resource.fetechImage({url: xxx, preferImageBitmap: true, flipY: true })
preferImageBitmap會指明使用新方法進行圖片加載。flipY則是將圖片進行反轉(zhuǎn)。如果flipY不設(shè)置，或者設(shè)置為false的話，得到的圖像很可能是反的。
代碼如下：
var viewer = new Cesium.Viewer('cesiumContainer');
Cesium.when.all([
Cesium.Resource.fetchImage({ url: '../images/Cesium_Logo_overlay.png', preferImageBitmap: true, flipY: false }),
Cesium.Resource.fetchImage({ url: '../images/facility.gif', preferImageBitmap: true, flipY: false })
],
function(images) {
// colocated billboards, separate as viewer gets closer
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard : {
image : images[1],
horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
verticalOrigin : Cesium.VerticalOrigin.TOP,
scale: 2.0,
}
});
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard : {
image : images[0],
horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
scale: 2.0,
}
});
});
為何需要對圖片進行翻轉(zhuǎn)呢？
WebGL加載圖片轉(zhuǎn)成紋理時，默認情況下會得到上下顛倒的圖像。Cesium使用Texture類對WebGL的接口進行了封裝，并且提供一個參數(shù)flipY，默認值是true。這樣就保證了使用new Texture創(chuàng)建的紋理和原始圖像是一致的。
然而這個flipY，只能對原始圖像是Image類才起作用，對于ImageBitmap類是不起作用的，也就是說對于此類圖像，new Texture創(chuàng)建的紋理始終是反著的。
如果fetchImage使用preferImageBitmap為true的參數(shù)時，只能返回ImageBitmap形式的圖像，這就出問題了，會導(dǎo)致三維中的圖像翻轉(zhuǎn)。為了解決這個問題，fetchImage就增加了這個flipY的參數(shù)來控制。
3d tiles流式加載性能的優(yōu)化
Cesium 1.55版中Kevin Ring對地形影像加載的重構(gòu)是從18年6月份開始的，直到19年3月份才收工并入主版本。目前最新的Cesium 1.57版Josh Lawrence對3dtiles流式加載性能的優(yōu)化則是從19年1月份開始，直到5月份才收工。老外們精心優(yōu)化算法，著實花費了大把時間和功夫。
3d tiles流式加載性能的優(yōu)化，主要體現(xiàn)在兩個方面：
- 將所有加載優(yōu)先級相關(guān)的屬性合并成一個單一數(shù)字用來排序。目前涉及的屬性有：depth(深度), distance to camera(到相機的距離), screen space error (SSE), foveated measurement(偏離中心距離測量), progressive resolution(漸進式分辨率), preload flight(預(yù)加載飛行), foveated deferral(布爾值，表示偏離中心的瓦片是否延遲加載).
- 瓦片請求裁切操作的優(yōu)化，主要包括：
- 視域之外的瓦片請求；
- 根據(jù)相機飛行路徑預(yù)測在短時間內(nèi)將移出屏幕的瓦片請求；
- 屏幕邊緣的瓦片可能會延遲加載；
飛行過程中的瓦片請求優(yōu)化是很有必要的。否則在帶寬小的情況下很容易出現(xiàn)，需要看的瓦片剛加載成功，相機已飛離的持續(xù)尷尬和死循環(huán)狀態(tài)。
另外為了方便調(diào)試，Josh Lawrence還給3d tiles增加了一個特性，可以給3d tiles數(shù)據(jù)增加熱力圖顯示效果。然而此效果只是針對瓦片（每個瓦片只能設(shè)置一種顏色），主要是用來調(diào)試的。
Cesium的sandcastle中還提供了一個用來測試3d tiles加載性能的新示例：
然而這個示例我測試發(fā)現(xiàn)數(shù)據(jù)加載偶爾會異常緩慢，可能因為服務(wù)器在國外的緣故。另外就是可能隨時會出現(xiàn)中途中斷的情況。示例代碼中使用了Cesium3DTileset.allTilesLoaded事件和camera.moveEnd事件來接收結(jié)果，然而在隨后的飛行路徑中，allTilesLoaded事件很可能會接收不到。從而導(dǎo)致測試異常中斷。
