由于丢失了上下文,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应用运行的时候.

在向他举报之后,他回来了他的解决方案:

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