由于上下文丢失，WebGL 场景无法渲染

我有一个带纹理和不带纹理的道路 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 以重新获得控制权”，但我该如何解决这个问题呢？

1、原因

这正是你所说的。

您的浏览器在渲染 WebGL 场景时挂起并失去其上下文，因为浏览器实际上已经失去了对 GPU 的控制。

要么您的应用程序存在巨大的内存泄漏，要么您的计算机没有足够的能力在 WebGL 场景上运行纹理化模型。通过尝试以非常大的纹理分辨率渲染重物体而过度挤压可能会导致上下文丢失。

2. 诊断

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

让我觉得你的机器实际上无法在浏览器上很好地处理 3D。

3. 故障排除

第一个建议是降低场景的分辨率，您可以将渲染器对象的 setSize 减半 2 或 3。

对于性能密集型游戏，您还可以为 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 - 处理上下文丢失 http://www.khronos.org/webgl/wiki/HandlingContextLost（可能您已经看过这个），它提供了一些故障排除和恢复崩溃的 WebGL 实例的方法。

4.解决方案（针对这个具体答案）

After a quick chat with Eugene, the problem at the root of his project was Ram usage, his 3D model wasted a lot of Ram that Chrome was taking up to 1.6GB.
The blue bumps are when his WebGL app is running.

在向他提出这个问题后，他带着他的解决方案回来了：

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