HTML 移动端加载多个 iframe 的 WebGL 场景模型有的有时会加载不出来但 PC 端没问题的原因

经过了很多的尝试，
发现减少 iframe 里面的 webgl 场景后就不会出现加载不出来的问题，
怀疑是不是手机浏览器带不动导致的，
最后试试监听 webglcontextlost 事件，
果然打印出来了东西，
最后我总结是性能不够 GPU 崩溃了导致的触发了 webglcontextlost 事件。

原因

GPU 崩溃导致的，可根据监听 webglcontextlost 事件打印出来观察。

let canvas = document.getElementById("myCanvas");
canvas.addEventListener("webglcontextlost", (event) => {
    
    

});

监听 webglcontextlost 后打印的提示：TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'。

解决办法

想办法提高 web3D 性能或减少 iframe 3D 场景。

tips：CSDN 难用的人工智障-发文助手功能