Tween JS 导致 WebGL 上下文丢失

Question

我正在使用 Tween.js 在 Three.js 渲染周期内更新利沙如曲线。这在大多数情况下都有效，但是，在大约 70 次迭代之后，WebGL 似乎崩溃并出现错误：CONTEXT_LOST_WEBGL: loseContext: context lost。这种稳定性的缺乏令人不安，特别是因为它似乎有时需要我重新启动浏览器才能让 WebGL 再次工作（不仅在这个页面上，而且其他页面也使用 WebGL）。

利萨如曲线不是很高的顶点并且不使用纹理（这似乎是其他 WebGL 上下文丢失的原因），所以我很确定这一定是由于我实现了 Tween.js处理图形之间的插值（特别是 .onComplete 回调）。

任何人都可以提供任何关于为什么会发生这种情况的指示吗？根据 WebGL 文档，我的替代方案是 HandleContextLoss。

function tweenLandingLissaj(newLissaj) {

  var update = function() {
    lissajousCurve.fa = current.freqA;
    lissajousCurve.fb = current.freqB;
    lissajousCurve.fc = current.freqC;
    lissajousCurve.phaseX = current.phaseX;
    lissajousCurve.phaseY = current.phaseY;
    lissajousCurve.phaseZ = current.phaseZ;
    lissajousCurve.update();
  };

  var current = {
    freqA: lissajousCurve.fa,
    freqB: lissajousCurve.fb,
    freqC: lissajousCurve.fc,
    phaseX: lissajousCurve.phaseX,
    phaseY: lissajousCurve.phaseY,
    phaseZ: lissajousCurve.phaseZ
  };

  var tweenTo = new TWEEN.Tween(current);
  tweenTo.to({
    freqA: newLissaj.freqA,
    freqB: newLissaj.freqB,
    freqC: newLissaj.freqC,
    phaseX: newLissaj.phaseX,
    phaseY: newLissaj.phaseY,
    phaseZ: newLissaj.phaseZ
  }, 6000);
  tweenTo.onUpdate(update);
  tweenTo.onComplete(function() {
  
    tweenTo.to({
      freqA: Math.floor(Math.random() * 10) + 1,
      freqB: Math.floor(Math.random() * 10) + 1,
      freqC: Math.floor(Math.random() * 10) + 1,
      phaseX: Math.floor(Math.random() * 10) + 1,
      phaseY: Math.floor(Math.random() * 10) + 1,
      phaseZ: Math.floor(Math.random() * 10) + 1
    }, 6000);
    tweenTo.start();

  });

  tweenTo.start();

}

Answer 1

从未找到 Tween.js 导致 WebGL 上下文丢失的真正原因。我怀疑这是由于我使用了 onComplete 回调。

不过，我确实找到了一个更优雅的解决方案来实现我在使用 Tween.js 库后的效果，它不会导致上下文丢失。

通过链接两个随机生成的补间，我可以使用 onComplete 回调创建一个无限生成的利沙如曲线 w/o，这在之前会导致我出现问题。

任何遇到类似情况的人都可以在下面找到我的解决方案：

function tweenLandingLissaj(newLissaj) {

  var update = function() {
    lissajousCurve.fa = current.freqA;
    lissajousCurve.fb = current.freqB;
    lissajousCurve.fc = current.freqC;
    lissajousCurve.phaseX = current.phaseX;
    lissajousCurve.phaseY = current.phaseY;
    lissajousCurve.phaseZ = current.phaseZ;
    lissajousCurve.update();
  };

  var current = {
    freqA: lissajousCurve.fa,
    freqB: lissajousCurve.fb,
    freqC: lissajousCurve.fc,
    phaseX: lissajousCurve.phaseX,
    phaseY: lissajousCurve.phaseY,
    phaseZ: lissajousCurve.phaseZ
  };

  var tweenTo = new TWEEN.Tween(current);
  tweenTo.to({
    freqA: Math.floor(Math.random() * 10) + 1,
    freqB: Math.floor(Math.random() * 10) + 1,
    freqC: Math.floor(Math.random() * 10) + 1,
    phaseX: Math.floor(Math.random() * 10) + 1,
    phaseY: Math.floor(Math.random() * 10) + 1,
    phaseZ: Math.floor(Math.random() * 10) + 1
  }, 10000);
  tweenTo.onUpdate(update);

  var tweenBack = new TWEEN.Tween(current);
  tweenBack.to({
    freqA: Math.floor(Math.random() * 10) + 1,
    freqB: Math.floor(Math.random() * 10) + 1,
    freqC: Math.floor(Math.random() * 10) + 1,
    phaseX: Math.floor(Math.random() * 10) + 1,
    phaseY: Math.floor(Math.random() * 10) + 1,
    phaseZ: Math.floor(Math.random() * 10) + 1
  }, 10000);
  tweenBack.onUpdate(update);

  tweenTo.chain(tweenBack);
  tweenBack.chain(tweenTo);

  tweenTo.start();

}

Tween JS 导致 WebGL 上下文丢失

Tween JS causing loss of WebGL Context

javascript

three.js

crash

webgl

tweenjs