大分辨率(5120*1600)屏幕使用cesium加载高精度倾斜摄影数据浏览器报错崩溃解决方案

做项目的时候使用cesium遇到一个问题，就是当我在大分辨率（5120*1600）的屏幕上使用Cesium加载比较高精度的倾斜摄影数据的时候会出现报错的情况，下面是具体的报错信息：

An error occurred while rendering.Rendering has stopped.

TypeError：Failed to execute 'shaderSource' on 'WebGLRenderingContext'：parameter 1 is not of type 'WebGLShader'.

还会附带警告：WebGL：CONTEXT_LOST_WEBGL：loseContext：context lost

一开始我以为是电脑的硬件不行才会报错，但是后面换到运行内存为16g、显卡是3080ti的电脑上面运行一样会报这个错，后来经查阅资料，报错的原因是因为浏览器GPU进程被撑爆所导致的，这是 webGL 自身的安全措施，当它认为 GPU 占用过高的时候，就会关闭一个或者更多的 webGL 网页，与硬件无关。

解决的方法：

加载3dtitles的时候设置一个关键参数maximumScreenSpaceError，把这个值设大一点，我这里设置成64（默认16），就不会出现报错的这种问题了，但是这个参数不能设置得太大，如果设置太大，会让你的倾斜摄影数据加载的层级没那么高，使得最终成像效果变模糊。

最后奉上我的3dtitles设置参数分享给大家：

set3Dtitle3 () {
  tileset1 = new Cesium.Cesium3DTileset({
    skipLevelOfDetail: true,
    baseScreenSpaceError: 1024,
    maximumScreenSpaceError: 64, // 数值加大，能让最终成像变模糊
    skipScreenSpaceErrorFactor: 16,
    skipLevels: 1,
    immediatelyLoadDesiredLevelOfDetail: false,
    loadSiblings: true, // 如果为true则不会在已加载完概况房屋后，自动从中心开始超清化房屋
    cullWithChildrenBounds: true,
    cullRequestsWhileMoving: true,
    cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除
    preloadWhenHidden: true,
    preferLeaves: true,
    maximumMemoryUsage: 512, // 内存分配变小有利于倾斜摄影数据回收，提升性能体验
    progressiveResolutionHeightFraction: 0.5, // 数值偏于0能够让初始加载变得模糊
    // dynamicScreenSpaceErrorDensity: 0.1, // 数值加大，能让周边加载变快
    dynamicScreenSpaceErrorDensity: 1, // 数值加大，能让周边加载变快
    dynamicScreenSpaceErrorFactor: 1, // 不知道起了什么作用没，反正放着吧先
    dynamicScreenSpaceError: true // 根据测试，有了这个后，会在真正的全屏加载完之后才清晰化房屋
  })
  // 非异步加载
  // viewer.scene.primitives.add(tileset)
  // 异步加载
  tileset1.readyPromise.then(function (tileset) {
    viewer.scene.primitives.add(tileset1, 1)
  }).otherwise(function (error) {
    console.log(error)
  })
},

成像效果图：