Question

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

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

在Chrome中：

大鼠！ WebGL遇到了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;

是否与asynchrone函数调用有关，比如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

1 个答案: