前言
Cesium 1.56对Resource.fetchImage进行了改进，从而降低了图片解码造成的页面卡顿。Cesium 1.57对3d tiles的加载性能进行了大量改进，提升了3d tiles数据的浏览体验。以下分别阐述。
Resource.fetchImage改进
image
Cesium 1.56版对Resource.fetchImage进行了性能改进，对于三维场景中有大量纹理贴图的模型数据，这是个好消息。它会大大降低页面卡顿现象，同时在一定程度上缩减了场景加载时间。左侧的自行车是使用新方法加载的，对比来自于这里。
image
此次改进则是通过使用createImageBitmap方法，把原先需要在主线程进行的图像解码操作移到了工作线程中。渲染一个三维场景时，不可避免的需要用到大量图片（纹理）。而图片解码是一个阻塞式的耗能操作，更要命的是此前Cesium只能在主线程中进行此项工作。Resource.fetchImage的改进，使得图片解码工作和主线程并行，不会影响主线程上的交互操作，从而大大削减了页面卡顿的现象，而且因为是并行操作，在一定程度上会削减场景加载时间。
那么如何使用这项性能改进呢？
我们一般通过以下方式来加载图片：
Resource.fetechImage({url: xxx})
Cesium为了保持版本兼容性（实际上1.56版改进过于激烈，所以1.56.1版才改成这种兼容模式），如果使用上述方法，和之前的老版本一样，并不会得到性能上的提升，而需要以下新的方式：
Resource.fetechImage({url: xxx, preferImageBitmap: true, flipY: true })
preferImageBitmap会指明使用新方法进行图片加载。flipY则是将图片进行反转。如果flipY不设置，或者设置为false的话，得到的图像很可能是反的。
image
代码如下：
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,
}
});
});
为何需要对图片进行翻转呢？
WebGL加载图片转成纹理时，默认情况下会得到上下颠倒的图像。Cesium使用Texture类对WebGL的接口进行了封装，并且提供一个参数flipY，默认值是true。这样就保证了使用new Texture创建的纹理和原始图像是一致的。
然而这个flipY，只能对原始图像是Image类才起作用，对于ImageBitmap类是不起作用的，也就是说对于此类图像，new Texture创建的纹理始终是反着的。
如果fetchImage使用preferImageBitmap为true的参数时，只能返回ImageBitmap形式的图像，这就出问题了，会导致三维中的图像翻转。为了解决这个问题，fetchImage就增加了这个flipY的参数来控制。
image
3d tiles流式加载性能的优化
Cesium 1.55版中Kevin Ring对地形影像加载的重构是从18年6月份开始的，直到19年3月份才收工并入主版本。目前最新的Cesium 1.57版Josh Lawrence对3dtiles流式加载性能的优化则是从19年1月份开始，直到5月份才收工。老外们精心优化算法，着实花费了大把时间和功夫。
image
3d tiles流式加载性能的优化，主要体现在两个方面：
- 将所有加载优先级相关的属性合并成一个单一数字用来排序。目前涉及的属性有：depth(深度), distance to camera(到相机的距离), screen space error (SSE), foveated measurement(偏离中心距离测量), progressive resolution(渐进式分辨率), preload flight(预加载飞行), foveated deferral(布尔值，表示偏离中心的瓦片是否延迟加载).
image
- 瓦片请求裁切操作的优化，主要包括：
- 视域之外的瓦片请求；
- 根据相机飞行路径预测在短时间内将移出屏幕的瓦片请求；
- 屏幕边缘的瓦片可能会延迟加载；
飞行过程中的瓦片请求优化是很有必要的。否则在带宽小的情况下很容易出现，需要看的瓦片刚加载成功，相机已飞离的持续尴尬和死循环状态。
另外为了方便调试，Josh Lawrence还给3d tiles增加了一个特性，可以给3d tiles数据增加热力图显示效果。然而此效果只是针对瓦片（每个瓦片只能设置一种颜色），主要是用来调试的。
image
Cesium的sandcastle中还提供了一个用来测试3d tiles加载性能的新示例：
image
然而这个示例我测试发现数据加载偶尔会异常缓慢，可能因为服务器在国外的缘故。另外就是可能随时会出现中途中断的情况。示例代码中使用了Cesium3DTileset.allTilesLoaded事件和camera.moveEnd事件来接收结果，然而在随后的飞行路径中，allTilesLoaded事件很可能会接收不到。从而导致测试异常中断。
网友评论