Cesium分辨率和锯齿

最近遇到一个有些坑的问题，之前没有在意过，现在记录下，用于提醒自己

这是一个关于分辨率和锯齿的一个问题，我们看下面的两张图进行一个对比，图的右侧是电脑分辨率的一个设置，我相信有不少电脑会推荐到125%的显示比例。那确实是你电脑分辨率很高了，要不然不会让你放大的。你说是不。此时我们再看图的左侧，两幅图明显感觉到锯齿效果的明显对比，所有这次关于锯齿的问题可以说系统设置的问题，想解决此问题只要修改系统设置就行。


但是很多时候，100%的分辨率不是系统的最优选，很不舒服，而且很多时候用户并不知道这个，那么我们如何使用代码去动态调整到合适的分辨率下进行展示呢？下面我们直接上代码，然后在调试代码时对相关参数进行说明。

// 添加一个实体 - 代码来自于cesium沙盒
var outlineOnly = viewer.entities.add({
    name : 'Yellow box outline',
    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
    box : {
      dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
      fill : false,
      outline : true,
      outlineColor : Cesium.Color.YELLOW
   }
});
viewer.zoomTo(viewer.entities);

// 分辨率调整函数
 var adjustmentPixel = function () {
    // 判断是否支持图像渲染像素化处理
    var supportsImageRenderingPixelated = viewer.cesiumWidget._supportsImageRenderingPixelated;
    if (supportsImageRenderingPixelated) {
        // 直接拿到设备的像素比例因子 - 如我设置的1.25
        var vtxf_dpr = window.devicePixelRatio;
        // 这个while我们在后面会做一个说明，但不是解决问题的说明
        while (vtxf_dpr >= 2.0) { vtxf_dpr /= 2.0; }
        // 设置渲染分辨率的比例因子
        viewer.resolutionScale = vtxf_dpr;
    }
}

下面我们简单分析下源码
1.先看viewer.cesiumWidget._supportsImageRenderingPixelated这个变量，它是在viewer实例化时，在CeisumWidgets中对浏览器是否支持图像渲染像素化进行处理的，如下图。当初始化完成后，我们就已经知道您的浏览器是否可以进行图像渲染像素化。在代码中我们直接拿到这个变量进行使用。


2.在我们设置完我们的设备像素比例因子后，我们看下cesium在下一帧渲染之前根据设备的像素比例因子做什么处理呢？
在渲染循环函数断点，如果不知道在哪，请看下图。

我们调试下widget.resize()函数，一看就是重新调整size的，发现里面有configureCanvasSize()和configureCameraFrustum()两个函数，继续调。

我们看下面的一张图，看下红框的变量，是不是豁然开朗呢？

下面就是重新计算相机的视锥体了，这个就比较底层了，暂时我也不是很懂，在未来，如果我熟悉后，我会继续写的。这次就先到这里了。关于Cesium分辨率与锯齿的控制，其实就是上面几句就可以了，如果你希望看下它为什么可以做到，你就接着往下调。


在此特别鸣谢我同学，这个问题在开始的时候我很迷惑，是因为在问了他之后，才豁然开朗的。给他的简书拉波推荐，主页地址请转：https://www.jianshu.com/u/7fbe57dd0a14