大分辨率(5120*1600)屏幕使用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
做项目的时候使用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)
})
},
成像效果图:
更多推荐
所有评论(0)