Mars3D开发者中心

外观

WebGL渲染错误弹窗

1647字约5分钟

2024-09-23

问题的现象

访问页面时，弹出“WebGL 渲染时发生错误，渲染已经停止”窗口。

image

解决方法及步骤

一旦出现这个窗口，就代表 WebGL 渲染中发生了错误，并且渲染已经停止，WebGL 类似桌面程序，一旦崩溃就需要刷新当前页面或重启整个浏览器才能重新访问页面。

如果出现了这个错误，需要从这几个方面排查问题。

  1. 请确认访问系统的电脑是独立显卡，并且 GPU 显存不低于 2GB.
  2. 选择一款合适的浏览器（推荐谷歌）并升级到最新版本。
  3. 该错误是否可以一直重现？如果是一直重现那是代码或数据有问题，如果是偶尔情况出现就不是代码问题。
  4. 如果是代码问题要查找没错误到出现错误之间，改动了哪些代码，可以通过注释部分代码来排查问题，也可能是传入的参数或坐标数值有误造成的。
  5. 如果只是偶尔出现时，可以排查下是否三维模型或数据量太大，这个错误也常见于数据量太大，超出了 GPU 内存造成了崩溃。
  6. 如果只是偶尔出现时，也有可能是鼠标操作拖动，造成了视角是平视或仰角时的 Cesium 内部计算出了问题。

如果是模型本身太大造成 WebGL 崩溃

如果是模型本身太大造成 WebGL 崩溃时，目前可以对 3dtiles 模型有下面 3 方法来入手：

  1. 数据处理层面，比如数据处理工具的选择、和选择的工具本身的一些优化参数的设置上，可以尝试不同参数优化压缩和数据结构来性能调优。
  2. 网络传输层面，通过 nginx 加 gzip 压缩，提高速度。
  3. 客户端 JS 代码层面，参考API 文档加一些参数，在效果和效率中间取中间平衡值。

以下参数可以参考用于 3dtiles 总数据大，清晰度过高情况下进行性能优化。这不是一个通用的解决方案，但可以以此为参考：

maximumScreenSpaceError: 16, // 【重要】数值加大，能让最终成像变模糊
cacheBytes: 1073741824, // 1024MB = 1024*1024*1024 【重要】额定显存大小(以字节为单位)，允许在这个值上下波动。
maximumCacheOverflowBytes: 2147483648, // 2048MB = 2048*1024*1024 【重要】最大显存大小(以字节为单位)。
maximumMemoryUsage: 512, //【cesium 1.107+弃用】内存建议显存大小的50%左右，内存分配变小有利于倾斜摄影数据回收，提升性能体验

skipLevelOfDetail: true, //是Cesium在1.5x 引入的一个优化参数，这个参数在金字塔数据加载中，可以跳过一些级别，这样整体的效率会高一些，数据占用也会小一些。但是带来的异常是：1） 加载过程中闪烁，看起来像是透过去了，数据载入完成后正常。2，有些异常的面片，这个还是因为两级LOD之间数据差异较大，导致的。当这个参数设置false，两级之间的变化更平滑，不会跳跃穿透，但是清晰的数据需要更长，而且还有个致命问题，一旦某一个tile数据无法请求到或者失败，导致一直不清晰。所以我们建议：对于网络条件好，并且数据总量较小的情况下，可以设置false，提升数据显示质量。
loadSiblings: true, // 如果为true则不会在已加载完模型后，自动从中心开始超清化模型
cullRequestsWhileMoving: true,
cullRequestsWhileMovingMultiplier: 10, //【重要】 值越小能够更快的剔除
preferLeaves: true, //【重要】这个参数默认是false，同等条件下，叶子节点会优先加载。但是Cesium的tile加载优先级有很多考虑条件，这个只是其中之一，如果skipLevelOfDetail=false，这个参数几乎无意义。所以要配合skipLevelOfDetail=true来使用，此时设置preferLeaves=true。这样我们就能最快的看见符合当前视觉精度的块，对于提升大数据以及网络环境不好的前提下有一点点改善意义。
progressiveResolutionHeightFraction: 0.5, //【重要】 数值偏于0能够让初始加载变得模糊
dynamicScreenSpaceError: true, // true时会在真正的全屏加载完之后才清晰化模型
preloadWhenHidden: true, //tileset.show是false时，也去预加载数据
  1. 客户端加载模型后，如果是远视视角看模型是一块一块的 Tile 小正方形加载的，说明数据缺少顶层瓦片数据，建议进行使用 cesiumlab 等工具进行“重建顶层”

如果希望崩溃了页面自动刷新

如果在正式部署的系统中，希望 WebGL 崩溃了页面自动刷新可以在 map 构造完成后 加下下面代码：

// webgl渲染失败后，刷新页面
map.on(mars3d.EventType.renderError, (event) => {
  window.location.reload();
});

附：WebGL 介绍

WebGL 是一种 JavaScript API，用于在不使用插件的情况下在任何兼容的网页浏览器中呈现交互式 2D 和 3D 图形。WebGL 完全集成到浏览器的所有网页标准中，可将影像处理和效果的 GPU 加速使用方式当做网页 Canvas 的一部分。WebGL 元素可以加入其他 HTML 元素之中并与网页或网页背景的其他部分混合。WebGL 程序由 JavaScript 编写的句柄和 OpenGL Shading Language（ GLSL ）编写的着色器代码组成。

检查 WebGL 支持度

首先，通过浏览器访问WebGL Report 网站，检查一下你的浏览器是否支持 WebGL 和支持的清单。目前，大多数平台和浏览器都支持 WebGL，在这些环境下运行 Cesium 并没有太大的问题，但效果和性能是否能够满足不同的需求，就需要考虑很多细节和额外因素。

  • 首先，无论是 PC 还是移动端，Chrome 是 WebGL 开发和应用的最佳平台，所以，如果没有特殊的硬性要求，建议大家使用 Chrome。
  • IE11 对 WebGL 支持的还可以，但不支持深度纹理，需要升级到 Edge；
  • 在移动平台，WebGL 调度比较消耗资源，目前的 GPU 硬件能力的问题，容易造成比如内存崩溃，机器发烫等问题。