大分辨率(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'.

大分辨率(5120*1600)屏幕使用cesium加载高精度倾斜摄影数据浏览器报错崩溃解决方案_第1张图片还会附带警告: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)
  })
},

成像效果图:

 

 

你可能感兴趣的:(前端,javascript)