由于丢失了上下文，WebGL场景无法呈现

Question

我有一个带纹理的道路的3D模型，没有。

当我加载没有纹理的道路时，一切正常~60fps。但是当我用纹理加载道路时，有两种变体：

1）如果3D模型不大，那么它加载并工作但fps非常低~10-20

2）如果3D模型很大，它会加载而没有任何错误和警告但在此之后我收到此错误：

WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
THREE.WebGLShader: gl.getShaderInfoLog() null 

此处出现此错误：

animate = function() {
    renderer.render(scene, camera); <--- error occurs here
    stats.update();
    controls.update(clock.getDelta());
    return requestAnimationFrame(animate);
};

我读过这个错误意味着：'浏览器或操作系统决定重置GPU以获得控制权'但是我该如何解决这个问题呢？

Answer 1

它正好发生在你已经说过的事情上。

您的浏览器正在被WebGL绞死并停止它以防止您的GPU（和计算机）无限期挂起，要么您的机器没有足够的图形功能来在WebGL上运行您的纹理化模型，或者您实际上也在挤压它通过尝试渲染具有非常大的纹理分辨率的重物，正如你所说：

  

如果3D模型不大，那么它会加载并运行，但fps非常低~10-20

让我觉得你的机器实际上无法在浏览器上轻松处理3D。 第一个建议是降低场景的分辨率，你可以将渲染器对象的setSize减半或减半。

  

对于性能密集型游戏，您还可以为setSize提供较小的值，例如window.innerWidth / 2和window.innerHeight / 2，分辨率的一半。这并不意味着游戏只会占据整个窗口的一半，而是看起来有点模糊和扩大规模。

这意味着您需要将其添加到渲染器中：

renderer.setSize( window.innerWidth/2, window.innerHeight/2 );

同时调整相机的远距离渲染也有助于获得一些性能。一般来说，这些是最常用的值：new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );，如果你把远点降低到800或700，你可以从你的场景中挤出额外的FPS（当然是以渲染距离的代价。）

如果您的应用程序经过这些调整后开始运行正常，那么您实际上面临资源匮乏的问题，这意味着您的计算机不适合运行WebGL。如果您无法访问我邀请您共享WebGL应用程序链接的其他计算机，您还可以在另一台更好的计算机上测试您的应用程序并查看其运行情况以及运行的顺畅程度，以便我们查看在它，并给出反馈。

如果您的计算机是最先进的高端怪兽游戏机，那么我唯一可以建议您开始查看纹理的分辨率并将其缩小一点，您还需要开始查看您的模型看看你是否可以在不同的模型中切片并将它们一块一块地放在场景中。

我也会留下这个链接：WebGL - HandlingContextLost（可能你已经看过了），它提供了一些故障排除方法以及恢复崩溃的WebGL实例的方法。

编辑：对于查看此答案的窥视。

在与Eugene进行快速聊天后，他项目根源的问题是Ram使用，他的3D模型浪费了很多Ram，Chrome占用了1.6GB。 蓝色的颠簸是他的WebGL应用程序正在运行。

在向他举报之后，他回来了他的解决方案：

  

我已经解决了我的问题。我已将道路连接到一个文件并更改了渲染器大小