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曲线，这个回调以前会引起我的问题。

我的解决方案可以在下面找到任何发现自己处于类似情况的人：

＆＃13;

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

＆＃13;

Tween JS导致WebGL上下文丢失

1 个答案: