生成纹理时 WebGL 崩溃 - OutOfMemory

Question

我目前在一个更大的网络项目中使用 Three.js。一切正常，渲染等也没有问题。我运行遇到的唯一问题有点具体。

在我项目的一部分中，用户可以通过用作纹理的 canvas 在 3D 模型上定位图像。有时，当用户通过点击快速改变位置时，WebGL 停止工作。

在Chrome中：

Rats! WebGL hit a Snag - alert

因此用户必须重新加载页面。

这实际上是性能问题吗？
如果是，是降低每秒转换速度的唯一方法吗？或者是否有类似 try/catch 的东西，所以它只会执行转换，如果它不会导致阻止 WebGL？

我真的很想保留图像在 3D 模型上的实时定位。

我还可以隐藏场景中的其他对象，这样只会显示图像所在的对象，这有帮助吗？

感谢您的宝贵时间和回答！

这是控制台中的实际错误：

GL_INVALID_OPERATION : glGenSyncTokenCHROMIUM:
fence sync must be flushed before generating sync token

filename.html:1 WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

每次点击执行的代码是：

context = canvas.getContext("2d");
canvas.width = 1024;
canvas.height = 1024;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
context.clearRect(0, 0, canvas.width, canvas.height);

context.save();
context.setTransform(1, 0, 0, 1, x + width / 2, y + height / 2);
context.rotate(angle * TO_RADIANS);
var imgT = new Image();
imgT.src = fotoprintPath + this.id;
context.drawImage(imgT, -width / 2, -height / 2, width, height);
context.restore();

matTexture.map = new THREE.Texture(canvas);
matTexture.map.needsUpdate = true;

是否与异步函数调用有关，比如WebGL没有完成之前的任务而崩溃？

在 Firefox 中，浏览器会崩溃。我希望有人可以帮助解决这个问题，或者告诉我如何避免它。

**更新当我限制每秒点击次数时，并不是一个令人满意的解决方案。这个解决方案的问题是，要么我只允许每秒点击 1 次（这使得定位非常慢），要么我使用我的 PC 可以处理的每秒点击次数，但这会导致平板电脑和慢速 PC 的用户仍然收到错误。

我真正需要的是这样的功能

function canPerformTextureTransformation(){
   if(availableMemory >= neededMemory)
       return true;
   else
       return false;
 }

但是如何检查需要的内存和可用内存？

Answer 1

我找到了一个解决方案，似乎完全解决了问题。

我只是将所应用纹理的大小从1024x1024减小到256x256

canvas.width = 1024; --> canvas.width = 256;
canvas.height = 1024; --> canvas.height = 256;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";

这不是我搜索的内容，但结果没有真正可见的变化，所以这是我将使用的解决方法。通过更改此设置，所有操作都快得多。

生成纹理时 WebGL 崩溃 - OutOfMemory

WebGL crashes when generating a texture - OutOfMemory

textures

rendering

webgl

three.js