生成纹理时 WebGL 崩溃 - OutOfMemory答案

【问题标题】：WebGL crashes when generating a texture - OutOfMemory生成纹理时 WebGL 崩溃 - OutOfMemory
【发布时间】：2017-07-09 22:26:27
【问题描述】：

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

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

在 Chrome 中：

老鼠！ WebGL 遇到障碍 - 警告

所以用户必须重新加载页面。

这实际上是一个性能问题吗？
如果是，是降低每秒转换速度的唯一方法吗？或者是否有类似 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;
 }

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

【问题讨论】：

你有一些我们可以测试的代码吗？
原来的错误是德语吗？因为德语“WebGL wurde blockiert”错误用英文报告为“Rats！WebGL hit a Snag.”，这将在 google 上为您提供更多答案以及更好的 StackOverflow 答案。我个人从未遇到过“WebGL 被阻止”，
是的，抱歉，我只是想翻译一下。
每次点击都会分配一个新的 ~4Mo 纹理。在某些时候，您的上下文会耗尽内存。
有没有办法限制调用，所以不会耗尽内存？就像检查内存一样，在分配实际纹理之前。或者有没有其他方法来转换/缩放/旋转纹理？我也希望能够通过鼠标拖动来移动纹理，但这会导致更多的函数调用，并且更容易耗尽内存。所以我想我真正需要的是一个电话来检查它是否可能，如果不是它只会等待。我对js不是很深入，所以我知道该怎么做，有什么建议吗？

标签： three.js textures webgl rendering

【解决方案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";

这不是我搜索的内容，但结果中没有真正可见的变化，因此这是我将使用的一种解决方法。通过更改这一点，所有操作都将更快。

【讨论】：