javascript - 补间JS导致WebGL上下文丢失

Question

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

lissajous曲线的顶点不是很高，并且不使用任何纹理(这似乎是导致其他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回调创建一个无限生成的lissajous曲线(不带波形)，该回调以前曾引起我问题。

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

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();

}